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
Hello World 2018 - We need to talk about Preact
Search
Hello World Tech Conference
February 15, 2018
Programming
1
77
Hello World 2018 - We need to talk about Preact
Hello World Tech Conference
February 15, 2018
Tweet
Share
More Decks by Hello World Tech Conference
See All by Hello World Tech Conference
Hello World 2018 - Learn how to get that dream job at Google!
helloworldconf
0
110
Hello World 2018 - Introduction to Swift
helloworldconf
0
61
Hello World 2018 - Understanding attacker behaviors, motivations and common ways of operation
helloworldconf
0
68
Hello World 2018 - GraphQL A query language for your API
helloworldconf
1
81
Hello World 2018 - Why Ruby?
helloworldconf
0
45
Hello World 2018 - Recent Advances in Machine Learning
helloworldconf
0
65
Hello World 2018 - Quality from the start
helloworldconf
0
32
Hello World 2017 - React Native
helloworldconf
0
110
Hello World 2017 - Testing & QA - Carreira Profissional?
helloworldconf
0
82
Other Decks in Programming
See All in Programming
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
640
Caude codeで爆速開発
codelynx
0
100
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
2
1.3k
AIともっと楽するE2Eテスト
myohei
9
3.1k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
12
7.3k
QA x AIエコシステム段階構築作戦
osu
0
140
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
200
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
150
リッチエディターを安全に開発・運用するために
unachang113
1
240
コーディングエージェント概観(2025/07)
itsuki_t88
0
130
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
670
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
We Have a Design System, Now What?
morganepeng
53
7.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Building Adaptive Systems
keathley
43
2.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Transcript
WE NEED TO TALK ABOUT PREACT
HELLO! I am Sara I work at YLD and make
useless stuff on the internet @NikkitaFTW
Portugal
REMEMBER THIS JOKE?
Y’ALL JUST LOST TO A TEAM OF FLAMINGOS
PREACT
I know what your first question is !
I brought them stickers
1. What ? 2. Who ? 3. Why ? 4.
Future ? 5. The CLI
WHAT IS PREACT ?
None
IS IT PRODUCTION READY ?
None
YES !
WHO MADE PREACT ?
Jason Miller / @developit
WHY PREACT ?
THE COMMUNITY There is an amazing community behind preact !
None
None
None
None
None
IT’S PERFORMANT Preact is 3KB and was made with performance
in mind
X KB OF JS IS NOT THE SAME AS X
KB OF IMAGES The browser has to download it but also parse it and in older devices this may be the biggest problem
BENCHMARKS
Firefox 57.0 (64-bit)
Chrome Version 62 (64-bit)
REACT COMPATIBILITY You can use it with any react component
yarn add preact-compat { // ... resolve: { alias: {
'react': 'preact-compat', 'react-dom': 'preact-compat', // Not necessary unless you consume a module using `createClass` 'create-react-class': 'preact-compat/lib/create-react-class' } } // ... } How ?
What’s included in Preact ?
ES6 CLASS COMPONENTS And all the awesome lifecycle methods of
course
HIGH ORDER COMPONENTS Create them composes
FUNCTIONAL COMPONENTS Functions that just receive props as arguments and
return JSX/VDOM
CONTEXT In some cases, you want to pass data through
the component tree without having to pass the props down manually at every level. You can do this directly in with the “context” API.
REFS We all use it, don’t lie
VIRTUAL DOM DIFFING Preact's diff is simple but effective, and
extremely fast.
What’s added in Preact ?
PROPS AND STATE IN RENDER this.props and this.state are passed
to render() for you. THIS IS SO SWEET
class Home extends Component { constructor() { super(); this.state =
{ loading: true } } render = () => { const { name } = this.props; const { loading } = this.state; return ( <div> {loading ? ‘Loading...’ : name} </div> ) } }
class Home extends Component { state = { loading: true
} render = ({ name }, { loading }) => ( <div> {loading ? ‘Loading...’ : name} </div> ) }
DOM UPDATES Batching of DOM updates, debounced/collated using setTimeout (can
also use requestAnimationFrame)
CSS CLASS You can just use class for CSS classes.
className is still supported, but class is preferred.
Component and element recycling / pooling.
What’s missing in Preact ?
DANGEROUSLY SET innerHTML Do we really want this ? There
is preact-markup to fill this gap
SYNTHETIC EVENTS Preact's browser support target does not require this
extra overhead. Preact uses the browser's native addEventListener for event handling
BROWSER SUPPORT Preact supports modern browsers (Chrome, Firefox, Safari, Edge)
and IE9+
FUTURE
FASTER DIFFING ALGORITHM
ARRAY RETURNS
FRAGMENT SUPPORT
ASYNC DIFFING
DEMO TIME Let’s talk about the preact-cli
THANK YOU