or: How I learned to love web standards and stop worrying.
View Slide
RISE ABOVE THEFRAMEWORKMike Hartington • @mhartington
OR
HOW I LEARNED TO LOVE TO WEBSTANDARDS ANDSTOP WORRYING
I WANT TO BUILD AN APP!
WHAT HAPPENED…
Web Development used to be "easy"Take some jQuery, add a bit of Backbone, and doneNeed something more hands on? Angular, Knockout, Ember
In a short amount of time, we went from simpleScript tags, to more advanced MVC-styledapplication architecture
Then… JSX, Decorators, Template compilation, code splitting, lazy loading, CSS preprocessors, CSS-In-JS, build tools, configs files…
WHAT.
FrustratingBut when in doubt, look to the standardsFinding balance
CSSJAVASCRIPTCOMPONENTS
CSSGlobal StylesVariables/Dynamic values
GLOBAL CSSCan affect any component in the DOMCascade becomes difficult to reasonResets/Overrides become a thing
CSS-in-JSorCSS Modules
SHADOW DOM!Isolates component internalsCSS is scoped: No more globalSimplified ruleshttp://bit.ly/2L9fT7R
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
DYNAMIC VALUES?
CSS VARIABLES!Custom Properties: User declared valuesWorks with/without ShadowDOMSimplifies theming
: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
.style.setProperty(`--app-color-red`, val);https://bit.ly/2O1AxUZ
JAVASCRIPTCost of transpilingReliance on Build Tools
JAVASCRIPTAdding Code the old way: Script TagsES5 was guaranteed
ESNEXTJavaScript moves fastBuild Tools: New features, but todayBuild Tool Fatigue
BUT GUESS WHAT?
<br/>
Supports async/awaitSupports Classes.Supports arrow functions.Fetch, Promises, Map, Set, and more!
But what about older browsers?
COMPONENTSRemoving lock inCross-framework support
COMPONENTSFrom MVC to ComponentAngularJS Directive (first?)
REACTAll components, all the time
REACT class AppRoot extends Component {render() {return(hello world)}}
ANGULAR @Component({selector: `app-root`,template: ` Hello World`})class AppRoot{}
VUE Vue.component('app-root', {template: `Hello World`});
Different FrameworkDifferent API
CUSTOM ELEMENTS!Standards-based APIReusable components... NATIVELYNo Framework required
class HelloWorld extends HTMLElement {constructor() {super();}connectedCallback() {this.init();}init() {this.innerHTML = `Hello World`;}}window.customElements.define('hello-world', HelloWorld);
Element Attributes & PropertiesShadowDom (optional)Lifecycle HooksCustom Events
MICRO-LIBSStencilJSSkateJSLit-html/Lit-element/Lit-html-element
Angular Elements: Angular Components as WCVue Target: --target web-componentReact: custom-elements-everywhere.com
What can Web Standards Do to help
THANK YOU