$30 off During Our Annual Pro Sale. View Details »

Rise above the Framework: JSCamp 2018

Rise above the Framework: JSCamp 2018

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

Mike Hartington

July 23, 2018
Tweet

More Decks by Mike Hartington

Other Decks in Technology

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