Slide 1
Slide 1 text
Wednesday, September 11, 13
Slide 2
Slide 2 text
INCREASING
COMPLEXITY
AS OUR APPLICATIONS
EVOLVE, COMPLEXITY
WILL INCREASE
Wednesday, September 11, 13
Slide 3
Slide 3 text
★ Functions
★ Libraries
★ Frameworks
★ Architectures
Complexity is present at
all levels
Wednesday, September 11, 13
Slide 4
Slide 4 text
Our mission
To build complex
systems without
knowing their final state
Wednesday, September 11, 13
Slide 5
Slide 5 text
Be pragmatic
Surely someone else has
done the work before us
Wednesday, September 11, 13
Slide 6
Slide 6 text
How does
nature do it?
Wednesday, September 11, 13
Slide 7
Slide 7 text
Wednesday, September 11, 13
Slide 8
Slide 8 text
Modular
Systems
Wednesday, September 11, 13
Slide 9
Slide 9 text
Increasing complexity
through composition
of modules
Wednesday, September 11, 13
Slide 10
Slide 10 text
What are
modules?
Wednesday, September 11, 13
Slide 11
Slide 11 text
Functional Elements
˒ Reusable
˒ Isolated
˒ Self-contained
˒ Promote separation
of concerns
˒ Allow composition
Wednesday, September 11, 13
Slide 12
Slide 12 text
What else does a
modular system
need?
Wednesday, September 11, 13
Slide 13
Slide 13 text
What else?
˒ Standardized
interfaces
˒ Communication
(optional)
Wednesday, September 11, 13
Slide 14
Slide 14 text
Ok so nature does
it, how does this
help me front-end?
Wednesday, September 11, 13
Slide 15
Slide 15 text
Benefits go beyond complexity
Wednesday, September 11, 13
Slide 16
Slide 16 text
˒ Provide scalability
˒ Structure
˒ Ease of change
˒ Testability
˒ Lower Cost
˒ Flexibility
˒ Augmentation
Wednesday, September 11, 13
Slide 17
Slide 17 text
Great, but this is not news.
We’ve been trying to do it
for a long time.
Wednesday, September 11, 13
Slide 18
Slide 18 text
Webmaster days
(the dark ages)
Wednesday, September 11, 13
Slide 19
Slide 19 text
Wednesday, September 11, 13
Slide 20
Slide 20 text
Increasing complexity
“Coloring my ascii art
is getting very difficult”
Wednesday, September 11, 13
Slide 21
Slide 21 text
Let there be CSS!
(middle ages)
Wednesday, September 11, 13
Slide 22
Slide 22 text
We started thinking
about separation of
concerns
Wednesday, September 11, 13
Slide 23
Slide 23 text
˒Content
˒Presentation
˒Behavior
Wednesday, September 11, 13
Slide 24
Slide 24 text
˒HTML
˒CSS
˒JS
* Not necessarily a 1 to 1 relationship
Wednesday, September 11, 13
Slide 25
Slide 25 text
Files are
getting too big
Break stuff into more
files with less
complexity
Wednesday, September 11, 13
Slide 26
Slide 26 text
Excuse me,
what about
performance?
Wednesday, September 11, 13
Slide 27
Slide 27 text
(sidetrack.js)
Wednesday, September 11, 13
Slide 28
Slide 28 text
Front-end
modularity has an
enemy
Wednesday, September 11, 13
Slide 29
Slide 29 text
Code is not
executed where it
lives
Wednesday, September 11, 13
Slide 30
Slide 30 text
Deliver smallest size
in the least amount
of trips
Wednesday, September 11, 13
Slide 31
Slide 31 text
!modular
Wednesday, September 11, 13
Slide 32
Slide 32 text
Add a build step
for production
Wednesday, September 11, 13
Slide 33
Slide 33 text
(unsidetrack.js)
Wednesday, September 11, 13
Slide 34
Slide 34 text
What about today?
(age of discovery)
Wednesday, September 11, 13
Slide 35
Slide 35 text
Wednesday, September 11, 13
Slide 36
Slide 36 text
Modern Libraries
and Frameworks
Wednesday, September 11, 13
Slide 37
Slide 37 text
Package
Management
Wednesday, September 11, 13
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
What about tomorrow?
(age of reason and
beyond)
Wednesday, September 11, 13
Slide 40
Slide 40 text
Web Components
(work in progress)
Wednesday, September 11, 13
Slide 41
Slide 41 text
Web Components
★ Templates
★ Decorators
★ Custom Elements
★ Shadow DOM
★ HTML Imports
★ Other stuff
(mutation observers, pointer events, data binding)
Wednesday, September 11, 13
Slide 42
Slide 42 text
Templates
![]()
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);
}
Wednesday, September 11, 13
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
Custom Elements
★ Allow author definition of DOM elements
★ Access to prototype via nested
★ Element lifecycle callbacks
★ Available via markup and scripts
★ Are extensible via extends=”” attribute
Wednesday, September 11, 13
Slide 45
Slide 45 text
:
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
}
});
Wednesday, September 11, 13
Slide 46
Slide 46 text
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
Slide 47
Slide 47 text
HTML Imports
★ Allow components to be loaded from
external resources
Wednesday, September 11, 13
Slide 48
Slide 48 text
Tomorrow
Come Today
Wednesday, September 11, 13
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
demo
http://buriti.ca/demos/jqcon-austin.html
Wednesday, September 11, 13
Slide 51
Slide 51 text
The search of ideal
modularity will
end when our
applications stop
increasing in
complexity
Wednesday, September 11, 13
Slide 52
Slide 52 text
Go play, learn
and file bugs!!
Wednesday, September 11, 13
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
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
Slide 55
Slide 55 text
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
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
Gracias!
Juan Pablo Buriticá
@buritica
http://buriti.ca
Wednesday, September 11, 13