Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

RISE ABOVE THE FRAMEWORK Mike Hartington • @mhartington

Slide 3

Slide 3 text

Slide 4

Slide 4 text

HOW I LEARNED   TO LOVE TO WEB STANDARDS AND STOP WORRYING

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

I WANT TO BUILD AN APP!

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

WHAT HAPPENED…

Slide 13

Slide 13 text

Web Development used to be "easy" Take some jQuery, add a bit of Backbone, and done Need something more hands on?   Angular, Knockout, Ember

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Then… JSX, Decorators, Template compilation,   code splitting, lazy loading, CSS preprocessors,  CSS-In-JS, build tools, configs files…

Slide 16

Slide 16 text

WHAT.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

CSS JAVASCRIPT COMPONENTS

Slide 19

Slide 19 text

CSS Global Styles Variables/Dynamic values

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

CSS-in-JS or CSS Modules

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

const header = document.createElement('div'); const shadowRoot = header.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = ` h1 { font-family: "Impact"; }

Hello From Shadow DOM

`; document.body.append(header); https://bit.ly/2L6QVWG

Slide 24

Slide 24 text

DYNAMIC VALUES?

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

: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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

JAVASCRIPT Cost of transpiling Reliance on Build Tools

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

BUT GUESS WHAT?

Slide 32

Slide 32 text

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

But what about older browsers?

Slide 35

Slide 35 text

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

COMPONENTS Removing lock in Cross-framework support

Slide 38

Slide 38 text

COMPONENTS From MVC to Component AngularJS Directive (first?)

Slide 39

Slide 39 text

REACT All components, all the time

Slide 40

Slide 40 text

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

hello world

) } }

Slide 41

Slide 41 text

ANGULAR   @Component({ selector: `app-root`, template: `

Hello World

` }) class AppRoot{}

Slide 42

Slide 42 text

VUE   Vue.component('app-root', { template: `

Hello World

` });

Slide 43

Slide 43 text

Different Framework Different API

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

class HelloWorld extends HTMLElement { constructor() { super(); } connectedCallback() { this.init(); } init() { this.innerHTML = `

Hello World

`; } } window.customElements.define('hello-world', HelloWorld);

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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