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
660
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
230
Making It Better Without Making It Over (Front Porch)
rmurphey
1
200
CascadiaJS: Making it Better Without Making it Over
rmurphey
2
160
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
350
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
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
520
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.5k
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
920
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
990
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
540
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
140
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.8k
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
3
300
プロセス改善による品質向上事例
tomasagi
2
2.2k
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
7k
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
510
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
390
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
320
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
4 Signs Your Business is Dying
shpigford
182
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
GitHub's CSS Performance
jonrohan
1030
460k
How to Ace a Technical Interview
jacobian
276
23k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Adopting Sorbet at Scale
ufuk
74
9.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
How GitHub (no longer) Works
holman
313
140k
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