Rise above the Framework: JSCamp 2018

Rise above the Framework: JSCamp 2018

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

Be834f0968111acbbc6f3bf67041c8d5?s=128

Mike Hartington

July 23, 2018
Tweet

Transcript

  1. 1.
  2. 3.

    OR

  3. 5.
  4. 7.
  5. 8.
  6. 9.
  7. 10.
  8. 11.
  9. 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
  10. 14.

    In a short amount of time, we went from simple

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

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

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

    GLOBAL CSS Can affect any component in the DOM Cascade

    becomes difficult to reason Resets/Overrides become a thing
  14. 22.

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

    global Simplified rules http://bit.ly/2L9fT7R
  15. 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
  16. 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
  17. 36.
  18. 40.

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

    <div> <h1>hello world</h1> </div> ) } }
  19. 45.

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

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