Jonathan Snook – Falling to Pieces: The Componentization of the Web (Turing Fest 2017)

Transcript

1. Falling to Pieces The Componentization
 of the Web
2. Style is important.
3. Thinking in Pages
4. Wired Redesign
5. Blog Design
9. #header h1, #header h2 { font-size:13px; font-weigh… } #header h1 { color: #680; float:right; padding-b…} #header h2 { float:left; padding:18px 20px; posi…} #header h2 img { position:absolute; left:0; top:0; } #header h2 a { text-decoration:none; color:#333; } #main .article.inside h1 { text-transform:uppercase;…} #comments .comment .meta .authorname { text-transfo… } #comments .comment .meta .commentnumber a { float: … } #main .article.inside h1 { text-transform:uppercase;…} #sidebar h2 { text-transfo… } #comments .comment .meta .commentnumber a { float: … }
12. OOCSS, SMACSS, BEM
13. What does it mean to be modular?
14. A module is “each of a set of standardized parts or independent units that can be used to construct a more complex structure.” –Dictionary
19. What hurdles are there to being truly independent?
20. • Inheritance
 • Cascade
 • Browser Default Styling
 • Putting modules/components together
21. Inheritance
22. • Typography
 e.g. color, font-size, font-family
 • List Styles
 e.g. list-style
 • Table Styles 
 e.g. border-collapse
23. • A Good Thing ™
24. Cascade
25. The cascade is how the browser decides what properties to apply when you have multiple rules declared on the same element.
26. • Don’t write multiple rules for the same element
 • Inline styles
 • Create a structured layering system to prevent conflicts
27. Browser Defaults
28. <button class="button"> .button {
 border:1px solid purple;
 padding: 5px 10px;
 color: pink;
 } <a href="/" class="button"> text-decoration: none;
29. Putting Modules Together
30. Send
31. Cancel Send
32. .button + .button { 
 margin-left: 10px; 
 }
33. Cancel Send
34. Send Email
35. .button + .button,
 .input + .button { 
 margin-left: 10px; 
 } * + * { 
 margin-left: 10px; 
 }
36. Send Subscribe Email
37. http://snk.ms/26
38. • Separate layout from module
 • Micro layout classes
39. <span class=“layout-inline”> <input><button>Send</button> </span> <span class=“layout-inline”> <button>Subscribe</button> </span>
40. <input><button>Send</button> <button class=“u-margin-left- small”>Subscribe</button>
41. Oh, right. SMACSS.
49. Visualizing related things makes it easier to see disparities
50. Design has a cost.
51. Every piece of design ends up in code.
52. • Reduce the intersections
 • Simplify selectors
 • Need to be able to understand cascade Pros
53. • Requires diligence
 • No tooling
 Cons
54. Atomic CSS/ Functional CSS
55. “Atomic CSS, like inline styles, offers single- purpose units of style, but applied via classes.”
56. <div class="Bgc(#0280ae.5) C(#fff) P(20px)"> Lorem ipsum </div>
57. Human-powered CSS optimization
58. Optimizing CSS is hard
59. • Need to know rendered HTML to know what CSS will be applied
 • Need to be able to know how HTML will change via JavaScript
 • Need to be able to understand cascade
60. JavaScript Eats the World
61. React.render( <XUIButton type={type}> My Button! </XUIButton> );
62. var XUIButton = React.createClass({ render: function() { return ( <button className="{this.props.type}"> {this.props.children} </button> ); } });
63. var myStyle = { color: '#FFF', backgroundColor: '#330000' } var XUIButton = React.createClass({ render: function() { return ( <button style="{myStyle}"> {this.props.children} </button> ); }
64. • Styled Components 
 http://snk.ms/28
 • CSS Modules
 http://snk.ms/29
65. • Tooling avoids namespacing and cascade issues
 • CSS embedded with JS allows easier visualization/ understanding of how the component and the styles for the component are linked
 • Bundling CSS and HTML with JS has potential for cohesive understanding and enable optimization
 • Automate what SMACSS/BEM does through convention Pros
66. • Handling CSS’s state management at the JS level can cause performance issues or require workarounds
 • Like everything else, the solutions don’t understand the HTML and have no way to optimize 
 • Side effects when working outside of tooling ecosystem Cons
67. Web Components
68. • Templates
 • Shadow DOM
 • Custom Elements
 • HTML Imports
69. • Web Components can be used across JavaScript frameworks
 GE did this: http://snk.ms/2a
 • Shadow DOM avoids cascade and namespacing issues Pros
70. • No performance tooling (yet)
 • For now, cross-browser support is spotty and requires polyfills that don’t behave the same Cons
71. • Think about standardized and modular design.
 • Frameworks like React can help.
 • Web Components are coming. (So is winter.)
72. Thank you.
 http://snook.ca/
 @snookca