Rise above the Framework: JSCamp 2018

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

Transcript

1. View Slide

2. RISE ABOVE THE
   FRAMEWORK
   Mike Hartington • @mhartington
   

   View Slide

3. OR
   

   View Slide

4. HOW I LEARNED 

   TO LOVE TO WEB
   STANDARDS AND
   STOP WORRYING
   

   View Slide

5. View Slide

6. I WANT TO BUILD AN APP!
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. WHAT HAPPENED…
    

    View Slide

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
    

    View Slide

14. In a short amount of time, we went from simple
    Script tags, to more advanced MVC-styled
    application architecture
    

    View Slide

15. Then… JSX, Decorators, Template compilation, 

    code splitting, lazy loading, CSS preprocessors,

    CSS-In-JS, build tools, configs files…
    

    View Slide

16. WHAT.
    

    View Slide

17. Frustrating
    But when in doubt, look to the standards
    Finding balance
    

    View Slide

18. CSS
    JAVASCRIPT
    COMPONENTS
    

    View Slide

19. CSS
    Global Styles
    Variables/Dynamic values
    

    View Slide

20. GLOBAL CSS
    Can affect any component in the DOM
    Cascade becomes difficult to reason
    Resets/Overrides become a thing
    

    View Slide

21. CSS-in-JS
    or
    CSS Modules
    

    View Slide

22. SHADOW DOM!
    Isolates component internals
    CSS is scoped: No more global
    Simplified rules
    http://bit.ly/2L9fT7R
    

    View Slide

23. const header = document.createElement('div');
    const shadowRoot = header.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
    
    <br/>h1 {<br/>font-family: "Impact";<br/>}<br/>
    Hello From Shadow DOM
    `;
    document.body.append(header);
    https://bit.ly/2L6QVWG
    

    View Slide

24. DYNAMIC VALUES?
    

    View Slide

25. CSS VARIABLES!
    Custom Properties: User declared values
    Works with/without ShadowDOM
    Simplifies theming
    

    View Slide

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
    

    View Slide

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

    View Slide

28. JAVASCRIPT
    Cost of transpiling
    Reliance on Build Tools
    

    View Slide

29. JAVASCRIPT
    Adding Code the old way: Script Tags
    ES5 was guaranteed
    

    View Slide

30. ESNEXT
    JavaScript moves fast
    Build Tools: New features, but today
    Build Tool Fatigue
    

    View Slide

31. BUT GUESS WHAT?
    

    View Slide

32. <br/>

    View Slide

33. Supports async/await
    Supports Classes.
    Supports arrow functions.
    Fetch, Promises, Map, Set, and more!
    

    View Slide

34. But what about older browsers?
    

    View Slide

35. 
    

    View Slide

36. View Slide

37. COMPONENTS
    Removing lock in
    Cross-framework support
    

    View Slide

38. COMPONENTS
    From MVC to Component
    AngularJS Directive (first?)
    

    View Slide

39. REACT
    All components, all the time
    

    View Slide

40. REACT
    

    class AppRoot extends Component {
    render() {
    return(
    
    hello world
    
    )
    }
    }
    

    View Slide

41. ANGULAR
    

    @Component({
    selector: `app-root`,
    template: `
    
    Hello World
    
    `
    })
    class AppRoot{}
    

    View Slide

42. VUE
    

    Vue.component('app-root', {
    template: `
    
    Hello World
    `
    });
    

    View Slide

43. Different Framework
    Different API
    

    View Slide

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

    View Slide

45. class HelloWorld extends HTMLElement {
    constructor() {
    super();
    }
    connectedCallback() {
    this.init();
    }
    init() {
    this.innerHTML = `Hello World`;
    }
    }
    window.customElements.define('hello-world', HelloWorld);
    

    View Slide

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

    View Slide

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

    View Slide

48. Angular Elements: Angular Components as WC
    Vue Target: --target web-component
    React:
    custom-elements-everywhere.com
    

    View Slide

49. View Slide

50. CSS
    JAVASCRIPT
    COMPONENTS
    

    View Slide

51. What can Web Standards Do to help
    

    View Slide

52. THANK YOU
    

    View Slide