Rise above the Framework: JSCamp 2018

or: How I learned to love web standards and stop worrying.

Transcript

2. RISE ABOVE THE FRAMEWORK Mike Hartington • @mhartington
3. OR
4. HOW I LEARNED 
 TO LOVE TO WEB STANDARDS AND STOP WORRYING
6. I WANT TO BUILD AN APP!
12. WHAT HAPPENED…
13. Web Development used to be "easy" Take some jQuery, add a bit of Backbone, and done Need something more hands on? 
 Angular, Knockout, Ember
14. In a short amount of time, we went from simple Script tags, to more advanced MVC-styled application architecture
15. Then… JSX, Decorators, Template compilation, 
 code splitting, lazy loading, CSS preprocessors,
 CSS-In-JS, build tools, configs files…
16. WHAT.
17. Frustrating But when in doubt, look to the standards Finding balance
18. CSS JAVASCRIPT COMPONENTS
19. CSS Global Styles Variables/Dynamic values
20. GLOBAL CSS Can affect any component in the DOM Cascade becomes difficult to reason Resets/Overrides become a thing
21. CSS-in-JS or CSS Modules
22. SHADOW DOM! Isolates component internals CSS is scoped: No more global Simplified rules http://bit.ly/2L9fT7R
23. const header = document.createElement('div'); const shadowRoot = header.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = ` <link rel="stylesheet" href="style.css"> <style> h1 { font-family: "Impact"; } </style> <h1>Hello From Shadow DOM</h1> `; document.body.append(header); https://bit.ly/2L6QVWG
24. DYNAMIC VALUES?
25. CSS VARIABLES! Custom Properties: User declared values Works with/without ShadowDOM Simplifies theming
26. :root { --app-color-red: #ff0011; --app-font-family: "Helvetica" } h1 { color: var(--app-color-red); font-family: var(--app-font-family); } https://bit.ly/2L96nBo
27. <ELEMENT>.style.setProperty(`--app-color-red`, val); https://bit.ly/2O1AxUZ
28. JAVASCRIPT Cost of transpiling Reliance on Build Tools
29. JAVASCRIPT Adding Code the old way: Script Tags ES5 was guaranteed
30. ESNEXT JavaScript moves fast Build Tools: New features, but today Build Tool Fatigue
31. BUT GUESS WHAT?
32. <script type="module">
33. Supports async/await Supports Classes. Supports arrow functions. Fetch, Promises, Map, Set, and more!
34. But what about older browsers?
35. <script nomodule></script>
37. COMPONENTS Removing lock in Cross-framework support
38. COMPONENTS From MVC to Component AngularJS Directive (first?)
39. REACT All components, all the time
40. REACT 
 class AppRoot extends Component { render() { return( <div> <h1>hello world</h1> </div> ) } }
41. ANGULAR 
 @Component({ selector: `app-root`, template: ` <div> <h1> Hello World</h1> </div> ` }) class AppRoot{}
42. VUE 
 Vue.component('app-root', { template: ` <div> <h1>Hello World</h1> </div>` });
43. Different Framework Different API
44. CUSTOM ELEMENTS! Standards-based API Reusable components... NATIVELY No Framework required
45. class HelloWorld extends HTMLElement { constructor() { super(); } connectedCallback() { this.init(); } init() { this.innerHTML = `<h1>Hello World</h1>`; } } window.customElements.define('hello-world', HelloWorld);
46. Element Attributes & Properties ShadowDom (optional) Lifecycle Hooks Custom Events
47. MICRO-LIBS StencilJS SkateJS Lit-html/Lit-element/Lit-html-element
48. Angular Elements: Angular Components as WC Vue Target: --target web-component React: custom-elements-everywhere.com
50. CSS JAVASCRIPT COMPONENTS
51. What can Web Standards Do to help
52. THANK YOU </html>