Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Mike Hartington

Other Decks in Technology


  1. OR

  2. Web Development used to be "easy" Take some jQuery, add

    a bit of Backbone, and done Need something more hands on? 
 Angular, Knockout, Ember
  3. In a short amount of time, we went from simple

    Script tags, to more advanced MVC-styled application architecture
  4. Then… JSX, Decorators, Template compilation, 
 code splitting, lazy loading,

    CSS preprocessors,
 CSS-In-JS, build tools, configs files…
  5. GLOBAL CSS Can affect any component in the DOM Cascade

    becomes difficult to reason Resets/Overrides become a thing
  6. SHADOW DOM! Isolates component internals CSS is scoped: No more

    global Simplified rules http://bit.ly/2L9fT7R
  7. 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
  8. :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
  9. REACT 
 class AppRoot extends Component { render() { return(

    <div> <h1>hello world</h1> </div> ) } }
  10. class HelloWorld extends HTMLElement { constructor() { super(); } connectedCallback()

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