Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rise above the Framework: JSCamp 2018
Search
Mike Hartington
July 23, 2018
Technology
1
1.4k
Rise above the Framework: JSCamp 2018
or: How I learned to love web standards and stop worrying.
Mike Hartington
July 23, 2018
Tweet
Share
More Decks by Mike Hartington
See All by Mike Hartington
Ionic And Vue For Fast Mobile Apps
mhartington
0
190
Fast PWAs With Angular
mhartington
3
29
Awesome PWAs with Angular
mhartington
1
180
Rethinking Mobile with Ionic 2
mhartington
0
240
Other Decks in Technology
See All in Technology
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
750
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
320
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1.1k
shake-upを科学する
rsakata
7
1k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
110
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
三視点LLMによる複数観点レビュー
mhlyc
0
230
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Building an army of robots
kneath
306
45k
Typedesign – Prime Four
hannesfritz
42
2.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Transcript
None
RISE ABOVE THE FRAMEWORK Mike Hartington • @mhartington
OR
HOW I LEARNED TO LOVE TO WEB STANDARDS AND
STOP WORRYING
None
I WANT TO BUILD AN APP!
None
None
None
None
None
WHAT HAPPENED…
Web Development used to be "easy" Take some jQuery, add
a bit of Backbone, and done Need something more hands on? Angular, Knockout, Ember
In a short amount of time, we went from simple
Script tags, to more advanced MVC-styled application architecture
Then… JSX, Decorators, Template compilation, code splitting, lazy loading,
CSS preprocessors, CSS-In-JS, build tools, configs files…
WHAT.
Frustrating But when in doubt, look to the standards Finding
balance
CSS JAVASCRIPT COMPONENTS
CSS Global Styles Variables/Dynamic values
GLOBAL CSS Can affect any component in the DOM Cascade
becomes difficult to reason Resets/Overrides become a thing
CSS-in-JS or CSS Modules
SHADOW DOM! Isolates component internals CSS is scoped: No more
global Simplified rules http://bit.ly/2L9fT7R
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
DYNAMIC VALUES?
CSS VARIABLES! Custom Properties: User declared values Works with/without ShadowDOM
Simplifies 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
<ELEMENT>.style.setProperty(`--app-color-red`, val); https://bit.ly/2O1AxUZ
JAVASCRIPT Cost of transpiling Reliance on Build Tools
JAVASCRIPT Adding Code the old way: Script Tags ES5 was
guaranteed
ESNEXT JavaScript moves fast Build Tools: New features, but today
Build Tool Fatigue
BUT GUESS WHAT?
<script type="module">
Supports async/await Supports Classes. Supports arrow functions. Fetch, Promises, Map,
Set, and more!
But what about older browsers?
<script nomodule></script>
None
COMPONENTS Removing lock in Cross-framework support
COMPONENTS From MVC to Component AngularJS Directive (first?)
REACT All components, all the time
REACT class AppRoot extends Component { render() { return(
<div> <h1>hello world</h1> </div> ) } }
ANGULAR @Component({ selector: `app-root`, template: ` <div> <h1> Hello
World</h1> </div> ` }) class AppRoot{}
VUE Vue.component('app-root', { template: ` <div> <h1>Hello World</h1> </div>`
});
Different Framework Different API
CUSTOM ELEMENTS! Standards-based API Reusable components... NATIVELY No Framework required
class HelloWorld extends HTMLElement { constructor() { super(); } connectedCallback()
{ this.init(); } init() { this.innerHTML = `<h1>Hello World</h1>`; } } window.customElements.define('hello-world', HelloWorld);
Element Attributes & Properties ShadowDom (optional) Lifecycle Hooks Custom Events
MICRO-LIBS StencilJS SkateJS Lit-html/Lit-element/Lit-html-element
Angular Elements: Angular Components as WC Vue Target: --target web-component
React: custom-elements-everywhere.com
None
CSS JAVASCRIPT COMPONENTS
What can Web Standards Do to help
THANK YOU </html>