Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
new App(config);
Search
Rebecca Murphey
April 15, 2013
Technology
4
650
new App(config);
JavaScript apps that build themselves
Rebecca Murphey
April 15, 2013
Tweet
Share
More Decks by Rebecca Murphey
See All by Rebecca Murphey
You Can't Always Get What You Want: A Year of Leading Change
rmurphey
0
210
Making It Better Without Making It Over (Front Porch)
rmurphey
1
200
CascadiaJS: Making it Better Without Making it Over
rmurphey
2
150
Making it Better without Making it Over
rmurphey
1
220
Making It Better Without Making It Over
rmurphey
0
320
HTTP/2 is here, now let's make it easy
rmurphey
7
8.8k
Deploying client-side apps, 1000 (or so) at a time
rmurphey
1
330
Apps That Talk Back (Codementor)
rmurphey
1
6.4k
Ain't No Party Like a Third-Party JS Party
rmurphey
1
270
Other Decks in Technology
See All in Technology
【shownet.conf_】ShowNet 2024 ~ Inter * Network ~
shownet
PRO
0
490
「ばん・さく・つき・たー!」にならないためにSHIROBAKOから 学んだこと
ysknsid25
3
650
業務ヒアリングと知識の呪い
tamai_63
0
270
XP matsuri 2024 - 銀河英雄伝説に学ぶ
kawaguti
PRO
3
560
Oracle Database 23ai 新機能#4 Application Continuity
oracle4engineer
PRO
0
110
Hazard pointers with reference counter
ennael
PRO
0
120
エンジニアは伝え方が9割/90% of what engineers need is communication skills
ykanoh
3
260
【shownet.conf_】放送局とShowNetが共創する、未来の放送システム ~Media over IP 特別企画の裏側~
shownet
PRO
0
330
分析者起点の企画を成功させた連携面の工夫
lycorptech_jp
PRO
1
250
軽いノリで"自動化"に取り組んではいけないという話
tetsuyaooooo
1
460
ガバメントクラウド開発と変化と成長する組織 / Organizational change and growth in developing a government cloud
kazeburo
4
730
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
260
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
31
2.8k
A better future with KSS
kneath
237
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
660
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
45
2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Transcript
Monday, April 15, 13
“In con guration-driven development, developers make all modi cations primarily
in XML les.” Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
fire bird Monday, April 15, 13
Monday, April 15, 13
exibility support arbitrary combinations of components interactivity support arbitrary interactions
between components speed individual apps shouldn’t contain anything they don’t need 3 key problems to solve Monday, April 15, 13
Monday, April 15, 13
Limin & her dog Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
Monday, April 15, 13
bootstrapper {""foo"":"{"…"}"} ui request handler customer ui request initialize components
init "top model" w/component data init submodels request data init "top view" w/component data init subviews delegate events initialize "outlets" request batcher components initialized render components model data loaded $BV.ui('rr', 'show_reviews', { /* ... */ }); Monday, April 15, 13
Monday, April 15, 13
"reviewContentList1" : { "features" : {
"self" : ["headToHead", "contentFilter", "contentItemColl "contentItem" : ["has:stars", "has:secondaryRatings", "ha "pagination" : ["ugcCount"], "secondaryContentList" : ["secondaryContentItemCollection "secondaryContentItem" : ["avatar", "feedback"], "contentFilter" : ["has:filterButton"] }, // ... }, Monday, April 15, 13
"reviewContentList1" : { "features" : {
"self" : ["headToHead", "contentFilter", "contentItemColl "contentItem" : ["has:stars", "has:secondaryRatings", "ha "pagination" : ["ugcCount"], "secondaryContentList" : ["secondaryContentItemCollection "secondaryContentItem" : ["avatar", "feedback"], "contentFilter" : ["has:filterButton"] }, // ... }, Monday, April 15, 13
"contentItem" : [ "has:stars", "has:secondaryRatings",
"has:tags", "feedback", "secondaryContentList", "has:secondaryContentBtn" ], Monday, April 15, 13
<div class="bv-‐content-‐data-‐summary"> <div class="bv-‐content-‐header-‐meta"> {{> responseFrom
.}} {{#ifHasFeature "stars"}} {{> contentStars }} {{/ifHasFeature}} {{> contentMeta }} </div> <div class="bv-‐content-‐title-‐container"> {{> contentTitle }} </div> {{{mountView "secondaryContentList" .}}} </div> Monday, April 15, 13
Monday, April 15, 13
"contentSearch1" : { // ... "outlets" : {
"showreviews" : [{ "component" : "reviewContentList1", "event" : "scrolltocontent" }], "showquestions" : [{ "component" :"questionContentList1", "event" : "scrolltocontent" }] } }, Monday, April 15, 13
_(outlets).each(function (targets, key) { _(targets).each(function (target) {
model.on(key, createEventHandler(target)); }); }); function createEventHandler (target) { return function () { var targetComponent = components.find(target.component); if (!targetComponent) { return; } var scope = targetComponent.getScope(targetComponent.contentType); var args = [ scope + ':' + target.event ].concat( [].slice.call(arguments) ); ENV.trigger.apply(ENV, args); return; }; } Monday, April 15, 13
// events on a contentItem view events : {
'click .bv-‐rating-‐stars-‐container' : 'clickStars', 'click .bv-‐content-‐secondary-‐btn' : 'showSecondarySubmission', 'click .bv-‐media-‐item': 'showMedia', 'click .bv-‐secondary-‐content-‐link' : 'preventDefault', 'click .bv-‐content-‐item-‐close' : 'closeQuestion', 'click .bv-‐fullprofile-‐popup-‐target' : 'launchProfile', "click .bv-‐show-‐more-‐link" : "showFullContent" }, Monday, April 15, 13
_(subview.events).each(function (methodName, signature) { var match = signature.match(eventSplitter);
var eventName = match[1] + '.delegated' + subview.id; var selector = match[2]; var method = subview[methodName]; this.$el.delegate( selector, eventName, makeResponder(signature, method) ); }, this); Monday, April 15, 13
" init submodels request data init subviews delegate events s"
request batcher components initialized render components model data loaded " init submodels request data init subviews delegate events s" request batcher components initialized render components model data loaded Monday, April 15, 13
Monday, April 15, 13
what’s great self-serve app creation preview any customer’s app economies
of scale writing new features is more fun than implementation, amirite? Monday, April 15, 13
huge initial investment, ramp-up time it helps to have a
legacy app no one-size- ts-all framework automated tests become imperative document all the things what’s challenging Monday, April 15, 13
is there a future where we can generalize this DSL?
how does this work for apps with more dynamic data? what’s next Monday, April 15, 13
@rmurphey • rmurphey.com bazaarvoice.com pinboard.in/u:rmurphey/t:config-‐driven-‐apps/ Monday, April 15, 13