Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Scalable Vector Ember 
Death to HTML. Long live the DOM.
@mixonic 
httP://madhatted.com 
matt.beale@madhatted.com
201 Created 
We build õ-age apps with Ember.js. We take 
teams from £ to • in no time flat.
1 <svg> 
2 {{#each d in paths}} 
3 <path {{bind-attr d=d}} /> 
4 {{/each}} 
5 </svg>
http://emberjs.jsbin.com/woxes/10/edit 
1.7: http://emberjs.jsbin.com/woxes/9 
! 
1.8: http://emberjs.jsbin.com/woxes/10
Preamble 
Vector Graphics
Raster Graphic (PNG) 
w3.org
Benefits of Raster Graphics 
• Small file-size (photos) 
• Computationally simple to 
render
Vector Graphic (SVG) 
1 <?xml version="1.0" standalone="no"?> 
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
3 "http:/...
Benefits of Vector Graphics 
• Small file-size (graphics) 
• Arbitrary resolution
Part I 
Scalable Vector Graphics
Why are we talking about this in 2014?
1998 Vector Markup Language proposed 
by Macromedia, Microsoft. PGML 
proposed by Adobe, Sun. W3C kick off 
SVG. 
2001 SVG...
Benefits of SVG Standard 
• Easy-to-parse metadata 
• Links 
• Animation
1998 Vector Markup Language proposed 
by Macromedia, Microsoft. PGML 
proposed by Adobe, Sun. W3C kick off 
SVG. 
2001 SVG...
5upmushroom.tumblr.com
1998 Vector Markup Language proposed 
by Macromedia, Microsoft. PGML 
proposed by Adobe, Sun. W3C kick off 
SVG. 
2001 SVG...
0.5% Woo! 
(almost) 
w3techs.com
( ๑‾̀◡‾́)σ» 
(´⊙ω⊙`) 
w3techs.com
3 ways to use SVG 
logo.svg 
<svg> 
document.createElementNS
3 ways to use SVG 
logo.svg 
<svg> 
document.createElementNS
Creating elements with a namespace 
1 var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
2 svg.setA...
Setting SVG attributes 
• Attributes are case sensitive 
1 var div = document.createElement("div"); 
2 div.setAttribute("s...
Changing namespaces 
1 <div> 
2 <span></span> 
3 <svg> 
4 <path></path> 
5 <foreignObject> 
6 <div></div> 
7 </foreignObje...
Part II 
Old Man Ember, Young Man Ember
Handlebars 
HTMLBars
THERE CAN ONLY BE ONE
THERE CAN ONLY BE DECK
A template 
1 <section> 
2 {{if isShowing}} 
3 <span>Howdy!</span> 
4 {{/if}} 
5 </section>
Ember.js pre-1.8 
1 var buffer = "<section>n"; 
2 buffer += "<script metamorph-0-start></script>"; 
3 if (isShowing) { 
4 ...
Ember.js pre-1.8 
1 var 
2 buffer 
3 if (isShowing) { 
4 buffer 
5 } 
6 buffer 
7 buffer 
8 
9 rootElement.innerHTML 
STRI...
Ember.js 1.10 
1 var outerChilden = [document.createElement('section')]; 
2 
3 var innerChildren; 
4 if (isShowing) { 
5 i...
Ember.js 1.10 
1 var 
2 
3 var 
4 if (isShowing) { 
5 innerChildren 
6 innerChildren[ 
7 while (innerChildren[ 
8 outerChi...
Ember.js 1.8-1.9 
1 var buffer, parsingNode; 
2 
3 buffer = "<section>n</section>"; 
4 parsingNode = document.createElemen...
Ember.js 1.8-1.9 
1 var 
2 
3 buffer 
4 parsingNode 
5 parsingNode.innerHTML 
6 var 
7 
8 if (isShowing) { 
9 buffer 
10 p...
Tricky stuff in 1.8+ 
• managing a context 
• detecting a namespace 
!
Tricky stuff in 1.8+ 
1 var string = handlebarsTemplate(context, options); 
2 var nodes = domHelper.parseHTML(string, morp...
HTMLBARS, Tricky stuff in 1.8+ 
1.10 
1 var nodes = htmlbarsTemplate(context, env, morph.contextualElement); 
2 
3 var nod...
Tricky stuff in 1.8+ 
• managing a context 
• detecting a namespace 
!
Tricky stuff in 1.8+ 
1 var root = document.createElement('div'); 
2 
3 root.innerHTML = "<svg><foreignObject><div></div><...
Tricky stuff in 1.8+ 
1 var root = document.createElementNS(svgNs, 'svg');! 
2 ! 
3 root.innerHTML = "<foreignObject><div>...
Tricky stuff in 1.8+ HTMLBARS, 1.10 
1 var template = htmlbarsCompile( 
2 "<foreignObject><div></div></foreignObject>" 
3 ...
Part III 
Death to HTML. Long live the DOM.
HTML is transmitted as a string.
• JS String (.jst, Ember <1.10) 
• HTML (Angular, Polymer) 
• JavaScript (React, Ember > 1.9, 
Mithril)
But that doesn’t mean we should process it as a string.
• innerHTML (.jst, Ember <1.10) 
• DOM (Angular, React, Ember > 1.9, 
Polymer, Mithril)
ACTIONS UP 
! 
BINDINGS DOWN
transmit strings 
! 
process DOM
CONTROLLERS LEFT 
! 
YEHUDA’S RIGHT
Thank you
Scalable vector ember
Scalable vector ember
Scalable vector ember
Scalable vector ember
Scalable vector ember
Upcoming SlideShare
Loading in …5
×

Scalable vector ember

5,047 views

Published on

Published in: Technology
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2ZDZFYj ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/2ZDZFYj ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Scalable vector ember

  1. 1. Scalable Vector Ember Death to HTML. Long live the DOM.
  2. 2. @mixonic httP://madhatted.com matt.beale@madhatted.com
  3. 3. 201 Created We build õ-age apps with Ember.js. We take teams from £ to • in no time flat.
  4. 4. 1 <svg> 2 {{#each d in paths}} 3 <path {{bind-attr d=d}} /> 4 {{/each}} 5 </svg>
  5. 5. http://emberjs.jsbin.com/woxes/10/edit 1.7: http://emberjs.jsbin.com/woxes/9 ! 1.8: http://emberjs.jsbin.com/woxes/10
  6. 6. Preamble Vector Graphics
  7. 7. Raster Graphic (PNG) w3.org
  8. 8. Benefits of Raster Graphics • Small file-size (photos) • Computationally simple to render
  9. 9. Vector Graphic (SVG) 1 <?xml version="1.0" standalone="no"?> 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 4 <svg width="12cm" height="4cm" viewBox="0 0 1200 400" 5 xmlns="http://www.w3.org/2000/svg" version="1.1"> 6 <desc>Example rect01 - rectangle with sharp corners</desc> 7 8 <rect x="400" y="100" width="400" height="200" 9 fill="yellow" stroke="navy" stroke-width="10" /> 10 </svg> w3.org
  10. 10. Benefits of Vector Graphics • Small file-size (graphics) • Arbitrary resolution
  11. 11. Part I Scalable Vector Graphics
  12. 12. Why are we talking about this in 2014?
  13. 13. 1998 Vector Markup Language proposed by Macromedia, Microsoft. PGML proposed by Adobe, Sun. W3C kick off SVG. 2001 SVG 1.0 2003 SVG 1.1
  14. 14. Benefits of SVG Standard • Easy-to-parse metadata • Links • Animation
  15. 15. 1998 Vector Markup Language proposed by Macromedia, Microsoft. PGML proposed by Adobe, Sun. W3C kick off SVG. 2001 SVG 1.0 2003 SVG 1.1 2004 Konqueror 3.2 support 2005 Gecko (Firefox) support 2006 WebKit (Chrome, Safari) support
  16. 16. 5upmushroom.tumblr.com
  17. 17. 1998 Vector Markup Language proposed by Macromedia, Microsoft. PGML proposed by Adobe, Sun. W3C kick off SVG. 2001 SVG 1.0 2003 SVG 1.1 2004 Konqueror 3.2 support 2005 Gecko (Firefox) support 2006 WebKit (Chrome, Safari) support 2011 IE9 is the last platform to support SVG
  18. 18. 0.5% Woo! (almost) w3techs.com
  19. 19. ( ๑‾̀◡‾́)σ» (´⊙ω⊙`) w3techs.com
  20. 20. 3 ways to use SVG logo.svg <svg> document.createElementNS
  21. 21. 3 ways to use SVG logo.svg <svg> document.createElementNS
  22. 22. Creating elements with a namespace 1 var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 2 svg.setAttribute("viewBox", "0 0 1200 400"); 3 svg.setAttribute("width", "12cm"); 4 svg.setAttribute("height", "4cm"); 5 var path = document.createElementNS("http://www.w3.org/2000/svg", "path"); 6 path.setAttribute("x", "400"); 7 path.setAttribute("y", "100"); 8 path.setAttribute("width", "400"); 9 path.setAttribute("height", "200"); 10 path.setAttribute("fill", "yellow"); 11 path.setAttribute("stroke", "navy"); 12 path.setAttribute("stroke-width", "10"); 13 svg.appendChild(path); 14 document.body.appendChild(svg);
  23. 23. Setting SVG attributes • Attributes are case sensitive 1 var div = document.createElement("div"); 2 div.setAttribute("someWacky", "foo"); 3 div.getAttribute("someWacky"); // => "foo" 4 div.getAttribute("somewacky"); // => "foo" 5 6 var svg = document.createElementNS(svgNS, "svg"); 7 svg.setAttribute("someWow", "boo") 8 svg.getAttribute("someWow"); // => "boo" 9 svg.getAttribute("somewow"); // => null • Property values are not primitives 1 svg.viewBox; // => SVGAnimatedRect {animVal: SVGRect, baseVal: SVGRect} 2 var viewBox = new SVGAnimatedRect(); // => TypeError: Illegal constructor 3 svg.viewBox = "0 0 100 100"; 4 svg.getAttribute("viewBox"); // => null
  24. 24. Changing namespaces 1 <div> 2 <span></span> 3 <svg> 4 <path></path> 5 <foreignObject> 6 <div></div> 7 </foreignObject> 8 </svg> 9 </div> Entrance to namespace dictated by next element Exit from namespace dictated by previous element
  25. 25. Part II Old Man Ember, Young Man Ember
  26. 26. Handlebars HTMLBars
  27. 27. THERE CAN ONLY BE ONE
  28. 28. THERE CAN ONLY BE DECK
  29. 29. A template 1 <section> 2 {{if isShowing}} 3 <span>Howdy!</span> 4 {{/if}} 5 </section>
  30. 30. Ember.js pre-1.8 1 var buffer = "<section>n"; 2 buffer += "<script metamorph-0-start></script>"; 3 if (isShowing) { 4 buffer += " <span>Howdy!</span>n"; 5 } 6 buffer += "<script metamorph-0-end></script>"; 7 buffer += "</section>"; 8 9 rootElement.innerHTML = buffer;
  31. 31. Ember.js pre-1.8 1 var 2 buffer 3 if (isShowing) { 4 buffer 5 } 6 buffer 7 buffer 8 9 rootElement.innerHTML STRINGS, INNERHTML
  32. 32. Ember.js 1.10 1 var outerChilden = [document.createElement('section')]; 2 3 var innerChildren; 4 if (isShowing) { 5 innerChildren = [document.createElement('span');] 6 innerChildren[0].appendChild(document.createTextNode('Howdy!')); 7 while (innerChildren[0]) { 8 outerChilden[0].appendChild(innerChildren[0]); 9 } 10 } 11 12 while (outerChilden[0]) { 13 rootElement.appendChild(outerChilden[0]); 14 }
  33. 33. Ember.js 1.10 1 var 2 3 var 4 if (isShowing) { 5 innerChildren 6 innerChildren[ 7 while (innerChildren[ 8 outerChilden[ 9 } 10 } 11 12 while (outerChilden[ 13 rootElement.appendChild(outerChilden[ 14 } DOM! HTMLBARS! WOOOMG!
  34. 34. Ember.js 1.8-1.9 1 var buffer, parsingNode; 2 3 buffer = "<section>n</section>"; 4 parsingNode = document.createElement('div'); 5 parsingNode.innerHTML = buffer; 6 var outerChilden = parsingNode.childNodes; 7 8 if (isShowing) { 9 buffer = " <span>Howdy!</span>n"; 10 parsingNode.innerHTML = buffer; 11 var innerChildren = parsingNode.childNodes; 12 while (innerChildren[0]) { 13 outerChilden[0].appendChild(innerChildren[0]); 14 } 15 } 16 17 while (outerChilden[0]) { 18 rootElement.appendChild(outerChilden[0]); 19 }
  35. 35. Ember.js 1.8-1.9 1 var 2 3 buffer 4 parsingNode 5 parsingNode.innerHTML 6 var 7 8 if (isShowing) { 9 buffer 10 parsingNode.innerHTML 11 12 while (innerChildren[ 13 outerChilden[ 14 } 15 } 16 17 while (outerChilden[ 18 rootElement.appendChild(outerChilden[ 19 } STRING TEMPLATES, DOM for stitching
  36. 36. Tricky stuff in 1.8+ • managing a context • detecting a namespace !
  37. 37. Tricky stuff in 1.8+ 1 var string = handlebarsTemplate(context, options); 2 var nodes = domHelper.parseHTML(string, morph.contextualElement); 3 4 var node; 5 while (node = nodes[0]) { 6 rootElement.appendChild(node); 7 }
  38. 38. HTMLBARS, Tricky stuff in 1.8+ 1.10 1 var nodes = htmlbarsTemplate(context, env, morph.contextualElement); 2 3 var node; 4 while (node = nodes[0]) { 5 rootElement.appendChild(node); 6 }
  39. 39. Tricky stuff in 1.8+ • managing a context • detecting a namespace !
  40. 40. Tricky stuff in 1.8+ 1 var root = document.createElement('div'); 2 3 root.innerHTML = "<svg><foreignObject><div></div></foreignObject></svg>"; 4 5 var svg = div.firstChild; 6 var foreignObject = svg.firstChild; 7 var div = foreignObject.firstChild; 8 9 svg.namespaceURI; // http://www.w3.org/2000/svg 10 foreignObject.namespaceURI; // http://www.w3.org/2000/svg 11 div.namespaceURI; // undefined
  41. 41. Tricky stuff in 1.8+ 1 var root = document.createElementNS(svgNs, 'svg');! 2 ! 3 root.innerHTML = "<foreignObject><div></div></foreignObject>";! 4 ! 5 var foreignObject = root.firstChild;! 6 var div = foreignObject.firstChild;! 7 ! 8 svg.namespaceURI; // http://www.w3.org/2000/svg! 9 foreignObject.namespaceURI; // http://www.w3.org/2000/svg! 10 div.namespaceURI; // undefined!
  42. 42. Tricky stuff in 1.8+ HTMLBARS, 1.10 1 var template = htmlbarsCompile( 2 "<foreignObject><div></div></foreignObject>" 3 ); 4 // so long as contextualElement is an SVG tag... 5 var nodes = template(context, env, morph.contextualElement); 6 7 var foreignObject = nodes[0]; 8 var div = foreignObject.firstChild; 9 10 foreignObject.namespaceURI; // http://www.w3.org/2000/svg 11 div.namespaceURI; // undefined
  43. 43. Part III Death to HTML. Long live the DOM.
  44. 44. HTML is transmitted as a string.
  45. 45. • JS String (.jst, Ember <1.10) • HTML (Angular, Polymer) • JavaScript (React, Ember > 1.9, Mithril)
  46. 46. But that doesn’t mean we should process it as a string.
  47. 47. • innerHTML (.jst, Ember <1.10) • DOM (Angular, React, Ember > 1.9, Polymer, Mithril)
  48. 48. ACTIONS UP ! BINDINGS DOWN
  49. 49. transmit strings ! process DOM
  50. 50. CONTROLLERS LEFT ! YEHUDA’S RIGHT
  51. 51. Thank you

×