In Search of Front-end Modularity

Given at jQuery Conference - Austin 2013

Front-end developers must create complex solutions with limited available tooling in browser environments in order to modularize their applications and produce reusable code.

With new specs like web components, developers are now able to leverage existing knowledge to build widgets and components that can be reused easily.

In this talk, we explore the current state of modular browser components and discuss newly available libraries and frameworks to provide attendees with the tools to move towards optimized modularization.

Transcript

1. Wednesday, September 11, 13
2. INCREASING COMPLEXITY AS OUR APPLICATIONS EVOLVE, COMPLEXITY WILL INCREASE Wednesday, September 11, 13
3. ★ Functions ★ Libraries ★ Frameworks ★ Architectures Complexity is present at all levels Wednesday, September 11, 13
4. Our mission To build complex systems without knowing their final state Wednesday, September 11, 13
5. Be pragmatic Surely someone else has done the work before us Wednesday, September 11, 13
6. How does nature do it? Wednesday, September 11, 13
7. Wednesday, September 11, 13
8. Modular Systems Wednesday, September 11, 13
9. Increasing complexity through composition of modules Wednesday, September 11, 13
10. What are modules? Wednesday, September 11, 13
11. Functional Elements ˒ Reusable ˒ Isolated ˒ Self-contained ˒ Promote separation of concerns ˒ Allow composition Wednesday, September 11, 13
12. What else does a modular system need? Wednesday, September 11, 13
13. What else? ˒ Standardized interfaces ˒ Communication (optional) Wednesday, September 11, 13
14. Ok so nature does it, how does this help me front-end? Wednesday, September 11, 13
15. Benefits go beyond complexity Wednesday, September 11, 13
16. ˒ Provide scalability ˒ Structure ˒ Ease of change ˒ Testability ˒ Lower Cost ˒ Flexibility ˒ Augmentation Wednesday, September 11, 13
17. Great, but this is not news. We’ve been trying to do it for a long time. Wednesday, September 11, 13
18. Webmaster days (the dark ages) Wednesday, September 11, 13
19. Wednesday, September 11, 13
20. Increasing complexity “Coloring my ascii art is getting very difficult” Wednesday, September 11, 13
21. Let there be CSS! (middle ages) Wednesday, September 11, 13
22. We started thinking about separation of concerns Wednesday, September 11, 13
23. ˒Content ˒Presentation ˒Behavior Wednesday, September 11, 13
24. ˒HTML ˒CSS ˒JS * Not necessarily a 1 to 1 relationship Wednesday, September 11, 13
25. Files are getting too big Break stuff into more files with less complexity Wednesday, September 11, 13
26. Excuse me, what about performance? Wednesday, September 11, 13
27. (sidetrack.js) Wednesday, September 11, 13
28. Front-end modularity has an enemy Wednesday, September 11, 13
29. Code is not executed where it lives Wednesday, September 11, 13
30. Deliver smallest size in the least amount of trips Wednesday, September 11, 13
31. !modular Wednesday, September 11, 13
32. Add a build step for production Wednesday, September 11, 13
33. (unsidetrack.js) Wednesday, September 11, 13
34. What about today? (age of discovery) Wednesday, September 11, 13
35. Wednesday, September 11, 13
36. Modern Libraries and Frameworks Wednesday, September 11, 13
37. Package Management Wednesday, September 11, 13
38. Modular Front-end Architectures ★ Everything is a component ★ Small Core ★ Base (DOM, utils, etc) ★ Messaging via events AuraJS and Twitter Flight Wednesday, September 11, 13
39. What about tomorrow? (age of reason and beyond) Wednesday, September 11, 13
40. Web Components (work in progress) Wednesday, September 11, 13
41. Web Components ★ Templates ★ Decorators ★ Custom Elements ★ Shadow DOM ★ HTML Imports ★ Other stuff (mutation observers, pointer events, data binding) Wednesday, September 11, 13
42. Templates <template id="commentTemplate"> <div> <img src=""> <div class="comment-text"></div> </div> </template> <script> function addComment(imageUrl, text) { var t = document.querySelector("#commentTemplate"); var comment = t.content.cloneNode(true); // Populate content. comment.querySelector('img').src = imageUrl; comment.querySelector('.comment-text').textContent = text; document.body.appendChild(comment); } </script> Wednesday, September 11, 13
43. Decorators ★ Do not have a spec yet! ★ Are meant to enhance or override presentation of an existing element ★ In theory, would be applied by CSS Wednesday, September 11, 13
44. Custom Elements ★ Allow author definition of DOM elements ★ Access to prototype via nested <script> ★ Element lifecycle callbacks ★ Available via markup and scripts ★ Are extensible via extends=”” attribute Wednesday, September 11, 13
45. <element extends="my-element" name="tick-tock-clock"> <template> <span id="hh"></span> <span id="sep">:</span> <span id="mm"></span> </template> <script> var template = document.currentScript.parentNode.querySelector('template'); function start() { this.tick(); this._interval = window.setInterval(this.tick.bind(this), 1000); } function stop() { window.clearInterval(this._interval); } function fmt(n) { return (n < 10 ? '0' : '') + n; } ({ readyCallback: function () { // awesome codez }, insertedCallback: start, removedCallback: stop, tick: function () { // awesome codez }, chime: function () { // awesome codez } }); </script> </element> Wednesday, September 11, 13
46. Shadow DOM ★ Provides encapsulation and enables composition ★ The meat of web components ★ Complex concepts which go beyond scope of this talk ★ Check out the spec https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html Wednesday, September 11, 13
47. HTML Imports ★ Allow components to be loaded from external resources <link rel="import" href="clock.html"> Wednesday, September 11, 13
48. Tomorrow Come Today Wednesday, September 11, 13
49. Polyfills available*!! ★ Polymer.js (Google) http://www.polymer-project.org ★ Brick + X-Tag (Mozilla) http://mozilla.github.io/brick/ ★ *subject to browser compatibility Wednesday, September 11, 13
50. demo http://buriti.ca/demos/jqcon-austin.html Wednesday, September 11, 13
51. The search of ideal modularity will end when our applications stop increasing in complexity Wednesday, September 11, 13
52. Go play, learn and file bugs!! Wednesday, September 11, 13
53. Modular Architecture Resources ★ http://www.slideshare.net/nzakas/scalable- javascript-application-architecture ★ http://addyosmani.com/largescalejavascript/ ★ http://aurajs.com ★ http://twitter.github.io/flight/ Wednesday, September 11, 13
54. Web Component Resources ★ http://www.w3.org/TR/2013/WD-components- intro-20130606/ ★ http://customelements.io/ ★ http://www.polymer-project.org/ ★ http://mozilla.github.io/brick/ ★ https://plus.google.com/103330502635338602217/posts ★ https://www.youtube.com/watch?v=2txPYQOWBtg Wednesday, September 11, 13
55. Shadow DOM Resources ★ https://dvcs.w3.org/hg/webcomponents/raw- file/tip/spec/shadow/index.html ★ http://www.html5rocks.com/en/tutorials/ webcomponents/shadowdom/ ★ http://www.sitepoint.com/dark-shadow-dom/ ★ http://glazkov.com/2011/01/14/what-the-heck- is-shadow-dom/ Wednesday, September 11, 13
56. Photo Credits ★ http://www.flickr.com/photos/postbear/8560714141/ ★ http://www.flickr.com/photos/wellcomeimages/6795233302/ ★ http://commons.wikimedia.org/wiki/File:Neurons-axons- dendrites-synapses.PNG ★ http://www.aquascapingworld.com/gallery/images/ 1/1_plantedtank_islandscape2.jpg ★ http://www.flickr.com/photos/25408600@N00/61523666/ ★ http://www.flickr.com/photos/webstock06/5453863583/ Wednesday, September 11, 13
57. Gracias! Juan Pablo Buriticá @buritica http://buriti.ca Wednesday, September 11, 13