Rise above the Framework: JSCamp 2018

Transcript

1. 1.

   None
2. 2.

   RISE ABOVE THE FRAMEWORK Mike Hartington • @mhartington

3. 3.

   OR

4. 4.

   HOW I LEARNED 
 TO LOVE TO WEB STANDARDS AND

   STOP WORRYING
5. 5.

   None
6. 6.

   I WANT TO BUILD AN APP!

7. 7.

   None
8. 8.

   None
9. 9.

   None
10. 10.

    None
11. 11.

    None
12. 12.

    WHAT HAPPENED…

13. 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. 14.

    In a short amount of time, we went from simple

    Script tags, to more advanced MVC-styled application architecture
15. 15.

    Then… JSX, Decorators, Template compilation, 
 code splitting, lazy loading,

    CSS preprocessors,
 CSS-In-JS, build tools, configs files…
16. 16.

    WHAT.

17. 17.

    Frustrating But when in doubt, look to the standards Finding

    balance
18. 18.

    CSS JAVASCRIPT COMPONENTS

19. 19.

    CSS Global Styles Variables/Dynamic values

20. 20.

    GLOBAL CSS Can affect any component in the DOM Cascade

    becomes difficult to reason Resets/Overrides become a thing
21. 21.

    CSS-in-JS or CSS Modules

22. 22.

    SHADOW DOM! Isolates component internals CSS is scoped: No more

    global Simplified rules http://bit.ly/2L9fT7R
23. 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. 24.

    DYNAMIC VALUES?

25. 25.

    CSS VARIABLES! Custom Properties: User declared values Works with/without ShadowDOM

    Simplifies theming
26. 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. 27.

    <ELEMENT>.style.setProperty(`--app-color-red`, val); https://bit.ly/2O1AxUZ

28. 28.

    JAVASCRIPT Cost of transpiling Reliance on Build Tools

29. 29.

    JAVASCRIPT Adding Code the old way: Script Tags ES5 was

    guaranteed
30. 30.

    ESNEXT JavaScript moves fast Build Tools: New features, but today

    Build Tool Fatigue
31. 31.

    BUT GUESS WHAT?

32. 32.

    <script type="module">

33. 33.

    Supports async/await Supports Classes. Supports arrow functions. Fetch, Promises, Map,

    Set, and more!
34. 34.

    But what about older browsers?

35. 35.

    <script nomodule></script>

36. 36.

    None
37. 37.

    COMPONENTS Removing lock in Cross-framework support

38. 38.

    COMPONENTS From MVC to Component AngularJS Directive (first?)

39. 39.

    REACT All components, all the time

40. 40.

    REACT 
 class AppRoot extends Component { render() { return(

    <div> <h1>hello world</h1> </div> ) } }
41. 41.

    ANGULAR 
 @Component({ selector: `app-root`, template: ` <div> <h1> Hello

    World</h1> </div> ` }) class AppRoot{}
42. 42.

    VUE 
 Vue.component('app-root', { template: ` <div> <h1>Hello World</h1> </div>`

    });
43. 43.

    Different Framework Different API

44. 44.

    CUSTOM ELEMENTS! Standards-based API Reusable components... NATIVELY No Framework required

45. 45.

    class HelloWorld extends HTMLElement { constructor() { super(); } connectedCallback()

    { this.init(); } init() { this.innerHTML = `<h1>Hello World</h1>`; } } window.customElements.define('hello-world', HelloWorld);
46. 46.

    Element Attributes & Properties ShadowDom (optional) Lifecycle Hooks Custom Events

47. 47.

    MICRO-LIBS StencilJS SkateJS Lit-html/Lit-element/Lit-html-element

48. 48.

    Angular Elements: Angular Components as WC Vue Target: --target web-component

    React: custom-elements-everywhere.com
49. 49.

    None
50. 50.

    CSS JAVASCRIPT COMPONENTS

51. 51.

    What can Web Standards Do to help

52. 52.

    THANK YOU </html>