new App(config);

JavaScript apps that build themselves

Transcript

1. Monday, April 15, 13
2. “In con guration-driven development, developers make all modi cations primarily in XML les.” Monday, April 15, 13
3. Monday, April 15, 13
4. Monday, April 15, 13
5. Monday, April 15, 13
6. Monday, April 15, 13
7. Monday, April 15, 13
8. fire bird Monday, April 15, 13
9. Monday, April 15, 13
10. 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
11. Monday, April 15, 13
12. Limin & her dog Monday, April 15, 13
13. Monday, April 15, 13
14. Monday, April 15, 13
15. Monday, April 15, 13
16. Monday, April 15, 13
17. Monday, April 15, 13
18. 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
19. Monday, April 15, 13
20. "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
21. "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
22. "contentItem"  :  [    "has:stars",      "has:secondaryRatings",      "has:tags",      "feedback",      "secondaryContentList",      "has:secondaryContentBtn" ], Monday, April 15, 13
23. <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
24. Monday, April 15, 13
25. "contentSearch1"  :  {    //  ...    "outlets"  :  {        "showreviews"  :  [{              "component"  :  "reviewContentList1",              "event"  :  "scrolltocontent"          }],        "showquestions"  :  [{              "component"  :"questionContentList1",              "event"  :  "scrolltocontent"          }]    } }, Monday, April 15, 13
26. _(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
27. //  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
28. _(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
29. " 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
30. Monday, April 15, 13
31. 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
32. 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
33. 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
34. @rmurphey  •  rmurphey.com bazaarvoice.com pinboard.in/u:rmurphey/t:config-­‐driven-­‐apps/ Monday, April 15, 13