building a javascript module framework at gilt
DESCRIPTION
For modules to function within a large-scale system and on third-party sites, they need to be self-contained units with minimal dependencies. They also need to keep their hands off of other modules and library code. Gilt's module framework manages multiple independent components, providing them with what they need, and only what they need, to do their jobs.TRANSCRIPT
![Page 1: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/1.jpg)
Building a JavaScript Module Framework
at Gilt
Eric Shepherd@arkitrave
![Page 2: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/2.jpg)
Whois?
‣ background‣ music | architecture |
web design | front end engineering‣ companies‣ fisher-price | condé nast | gilt groupe
![Page 3: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/3.jpg)
Thank You!
‣ Nicholas Zakas‣ scalable javascript application
architecture presentation‣ jQuery Conference 2010‣ presentations on pubsub, templating,
yepnope, and js architecture
![Page 4: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/4.jpg)
Why?
![Page 5: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/5.jpg)
Why?
‣ code organization‣ small files + objects, each with a
defined role
![Page 6: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/6.jpg)
Why?
‣ code organization‣ reduce points of dependency‣ modules communicate through only
one channel
![Page 7: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/7.jpg)
Why?
‣ code organization‣ reduce points of dependency‣ unobtrusiveness for third-parties‣ other sites can include your code
without fear
![Page 8: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/8.jpg)
Why?‣ code organization‣ reduce points of dependency‣ unobtrusiveness for third-parties‣ adaptability + extensibility‣ any piece of the application can be
switched out without affecting the rest of the application
![Page 9: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/9.jpg)
Demands
![Page 10: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/10.jpg)
Demands
‣ allows multiple unique module instances
![Page 11: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/11.jpg)
Demands
‣ allows multiple unique module instances
‣ does not allow modules to talk to each other‣ freedom in clear boundaries
![Page 12: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/12.jpg)
Demands‣ allows multiple unique module
instances‣ does not allow modules to talk to
each other‣ tightly restricts dom access (with a
few exceptions)‣ the page doesn’t need to worry
about being messed with
![Page 13: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/13.jpg)
Demands‣ allows multiple unique module
instances‣ does not allow modules to talk to
each other‣ tightly restricts dom access (with a
few exceptions)‣ touches as little global code as
possible‣ ideally, only one global var
![Page 14: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/14.jpg)
Components
![Page 15: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/15.jpg)
Components
‣ Gilt.App‣ there is only one‣ manages all modules, provides one
sandbox to each module ‣ public api is register(), start(), stop(),
startAll(), stopAll(), view.register()
![Page 16: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/16.jpg)
Components
‣ Gilt.App‣ Gilt.Sandbox‣ instantiable, one instance per module‣ provides pubsub, state management,
dom interaction, services, views
![Page 17: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/17.jpg)
Components‣ Gilt.App‣ Gilt.Sandbox‣ module itself‣ implements a simple create() and
destroy() interface‣ it’s an overprotected child, with a
limited view of the world
![Page 18: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/18.jpg)
Components
‣ Gilt.App‣ Gilt.Sandbox‣ module itself‣ …along with core code and helpers
![Page 19: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/19.jpg)
Architecture
![Page 20: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/20.jpg)
Flow‣ a module is a function, passed to
App.register() as a creator‣ on App.start(), a new Sandbox()
instance is passed to that creator, which returns public create and destroy methods, and…
‣ the new module instance’s create() is called
![Page 21: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/21.jpg)
Architecture
![Page 22: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/22.jpg)
Gilt.App
![Page 23: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/23.jpg)
Gilt.App
![Page 24: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/24.jpg)
Architecture
![Page 25: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/25.jpg)
Gilt.Sandbox
![Page 26: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/26.jpg)
Gilt.Sandbox
![Page 27: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/27.jpg)
Architecture
![Page 28: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/28.jpg)
Module
![Page 29: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/29.jpg)
Module
![Page 30: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/30.jpg)
Module View (opt.)
![Page 31: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/31.jpg)
Module View (opt.)
![Page 32: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/32.jpg)
Architecture
![Page 33: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/33.jpg)
The Hoff Helpers‣ jQuery‣ underscore.js‣ handlebars.js‣ yepnope.js‣ &c…but modules can’t know
anything about these (jQuery as a partial exception due to its plugin architecture)
![Page 34: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/34.jpg)
Architecture
![Page 35: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/35.jpg)
Wiring It Up
‣ on your own site‣ page controller
‣ on a third-party site‣ bootstrap as js loader and controller
![Page 36: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/36.jpg)
WTF
![Page 37: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/37.jpg)
A Better Bootstrap
‣ don’t be a jerk – think of the children‣ protect the global scope – you’re in
someone else’s house!‣ make it easy to inline or inject the
script dynamically‣ keep the payload light – it’s like
spending someone else’s money
![Page 38: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/38.jpg)
A Better Bootstrap
![Page 39: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/39.jpg)
…Which Returns…
![Page 40: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/40.jpg)
Server-GeneratedClosure
![Page 41: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/41.jpg)
Yep. Nope.
![Page 42: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/42.jpg)
Watch Out For…
![Page 43: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/43.jpg)
Watch Out For…
‣ make sure your bootstrap is RESTful
![Page 44: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/44.jpg)
Watch Out For…‣ make sure your bootstrap is RESTful‣ css‣ conflicts are a bitch‣ and you can’t use id selectors‣ !important is your only hope‣ jquery.important can help, but it’s the
roach motel, and animations are out
![Page 45: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/45.jpg)
Watch Out For…
‣ make sure your bootstrap is RESTful‣ css‣ jQuery‣ plugin convention requires a globally-
accessible jQuery object‣ so noConflict(true) will work only if
you don’t need plugins‣ use sandbox.getContainer().find()
![Page 46: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/46.jpg)
Watch Out For…
‣ make sure your bootstrap is RESTful‣ css‣ jQuery‣ cross-domain issues‣ make sure your feeds are jsonp
![Page 47: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/47.jpg)
Watch Out For…‣ make sure your bootstrap is RESTful‣ css‣ jQuery‣ cross-domain issues‣ assumptions of shared code‣ included code can later introduce
dependencies unavailable on a third-party site, hard to test
![Page 48: Building a JavaScript Module Framework at Gilt](https://reader037.vdocuments.site/reader037/viewer/2022103000/5550d0c0b4c905f2318b4d89/html5/thumbnails/48.jpg)
You Can Do Anything
‣ anything at all‣ the only limit is yourself‣ …yes…