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
190
CascadiaJS: Making it Better Without Making it Over
rmurphey
2
140
Making it Better without Making it Over
rmurphey
1
210
Making It Better Without Making It Over
rmurphey
0
310
HTTP/2 is here, now let's make it easy
rmurphey
7
8.7k
Deploying client-side apps, 1000 (or so) at a time
rmurphey
1
330
Apps That Talk Back (Codementor)
rmurphey
1
6.3k
Ain't No Party Like a Third-Party JS Party
rmurphey
1
260
Other Decks in Technology
See All in Technology
1Q86
kawaguti
PRO
2
190
Money-saving tips for the frugal serverless developer
theburningmonk
1
420
OPENLOGI Company Profile for engineer
hr01
1
2.2k
大規模言語モデル (LLM)における低精度数値表現
pfn
PRO
3
870
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
910
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
3.2k
Google Cloudを組織(企業)で運用する時のベストプラクティス × 健康の環境分離戦略 #まるクラ勉強会
yasumuusan
0
190
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
2
230
技術力の伸ばし方を考える
khirata
0
150
[PyconUS 2024] Having fun with Pydantic and pattern matching
enforcerpl
0
200
データ分析力を高めるSQL研修サービス『SQL Everyone』
hikarut
1
400
20240516 OpenID TechNight Vol.21 「OIDFシェアードシグナルフレームワーク(ID2)を利用してリアルタイムでセキュリティシグナルを共有するための最新情報」
oidfj
0
170
Featured
See All Featured
Statistics for Hackers
jakevdp
790
220k
Music & Morning Musume
bryan
41
5.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Embracing the Ebb and Flow
colly
80
4.2k
In The Pink: A Labor of Love
frogandcode
138
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
Making Projects Easy
brettharned
109
5.5k
Automating Front-end Workflow
addyosmani
1357
200k
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