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.5k
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
alecthomas/kong はいいぞ
fujiwara3
6
1.4k
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
180
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
190
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.6k
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
410
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
420
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
150
Kiroから考える AIコーディングツールの潮流
s4yuba
4
650
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
170
AWS re:Inforce 2025 re:Cap Update Pickup & AWS Control Tower の運用における考慮ポイント
htan
1
200
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
570
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
1.7k
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Cult of Friendly URLs
andyhume
79
6.5k
Facilitating Awesome Meetings
lara
54
6.5k
What's in a price? How to price your products and services
michaelherold
246
12k
How to train your dragon (web standard)
notwaldorf
96
6.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Thoughts on Productivity
jonyablonski
69
4.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Documentation Writing (for coders)
carmenintech
73
5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
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>