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
110
Fast PWAs With Angular
mhartington
3
26
Awesome PWAs with Angular
mhartington
1
180
Rethinking Mobile with Ionic 2
mhartington
0
220
Other Decks in Technology
See All in Technology
「ふりかえりのふりかえり」をふりかえり、実のあるふりかえりにする
naitosatoshi
0
220
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
120
AIQ株式会社 エンジニア向け会社紹介資料
aiqlab
0
370
Oracle Cloud Infrastructure:2024年4月度サービス・アップデート
oracle4engineer
PRO
1
110
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.9k
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
220
人間の尊厳、幸福、アクセシビリティ / 第116回「WEB TOUCH MEETING」アクセシビリティSP
nulabinc
PRO
2
180
Four keys改善の取り組み事例紹介
sansantech
PRO
3
230
ChatGPT for IT Service Management (IT Pro)
dahatake
3
220
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
320
エンタープライズ環境下での Active Directory の運用 TIPS
tamaiyutaro
1
1.6k
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
61
18k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
503
110k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Unsuck your backbone
ammeep
662
57k
BBQ
matthewcrist
80
8.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Infographics Made Easy
chrislema
237
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Statistics for Hackers
jakevdp
789
220k
A Philosophy of Restraint
colly
196
16k
Become a Pro
speakerdeck
PRO
10
4.5k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
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>