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.3k
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
140
Fast PWAs With Angular
mhartington
3
26
Awesome PWAs with Angular
mhartington
1
180
Rethinking Mobile with Ionic 2
mhartington
0
230
Other Decks in Technology
See All in Technology
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
71
8.8k
Docker and Python
trallard
37
2.9k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Designing for Performance
lara
604
67k
It's Worth the Effort
3n
181
27k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Gamification - CAS2011
davidbonilla
78
4.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
For a Future-Friendly Web
brad_frost
173
9.2k
Agile that works and the tools we love
rasmusluckow
325
20k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
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>