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
330
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
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
150
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
Operating Operator
shhnjk
0
410
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
290
mrubyと micro-ROSが繋ぐロボットの世界
kishima
3
400
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
280
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
190
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
170
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
490
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
13k
Witchcraft for Memory
pocke
1
740
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Documentation Writing (for coders)
carmenintech
72
4.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Gamification - CAS2011
davidbonilla
81
5.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
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