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
250
Making It Better Without Making It Over (Front Porch)
rmurphey
1
210
CascadiaJS: Making it Better Without Making it Over
rmurphey
2
180
Making it Better without Making it Over
rmurphey
1
230
Making It Better Without Making It Over
rmurphey
0
340
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
370
Apps That Talk Back (Codementor)
rmurphey
1
6.4k
Ain't No Party Like a Third-Party JS Party
rmurphey
1
290
Other Decks in Technology
See All in Technology
本当にわかりやすいAIエージェント入門
segavvy
1
340
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
120
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
800
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
580
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
1k
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
How STYLIGHT went responsive
nonsquared
100
5.6k
Visualization
eitanlees
146
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Rails Girls Zürich Keynote
gr2m
95
14k
Scaling GitHub
holman
460
140k
Code Reviewing Like a Champion
maltzj
524
40k
Being A Developer After 40
akosma
90
590k
How GitHub (no longer) Works
holman
314
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