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
Fiber or Glimmer?
Search
Tommy Graves
January 12, 2018
Programming
0
23
Fiber or Glimmer?
Given at CodeMash 2018
Tommy Graves
January 12, 2018
Tweet
Share
More Decks by Tommy Graves
See All by Tommy Graves
Rethinking Testing for React Applications
tagraves
0
48
Building a Production-Ready React Native App
tagraves
1
140
Learning to Learn From Disagreement
tagraves
0
96
Other Decks in Programming
See All in Programming
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
140
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
560
童醫院敏捷轉型的實踐經驗
cclai999
0
180
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
140
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
100
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
エンジニア向け採用ピッチ資料
inusan
0
160
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
ReadMoreTextView
fornewid
1
460
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
KATA
mclloyd
29
14k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
The Cult of Friendly URLs
andyhume
79
6.5k
Transcript
FIBER OR GLIMMER?
TOMMY GRAVES MEET ME Twitter: @TAGraves GitHub: https://github.com/tagraves Root Insurance:
https://joinroot.com
REACT & EMBER Focuses / Commitments Goals for Fiber /
Glimmer The Future
Focuses / Commitments
REACT’S COMMITMENTS 1. JavaScript only 2. Do one thing
EMBER’S COMMITMENTS 1. Use the best tool for the job
2. Be everything, be opinionated
Goals for Fiber / Glimmer
GOAL #1 ENABLE DEVELOPMENT OF NEW FEATURES FIBER’S GOALS Fragments
Error Boundaries Portals Context
render() { return ( <> <div /> <div /> </>
); } render() { return [ <li key=“A”>A</li>, <li key=“B”>B</li>, ]; } render() { return ‘Just a string!’; } render() { return null; } FRAGMENTS
render() { return ReactDOM.createPortal( <div id=“A” />, document.getElementById(‘X’), ); }
PORTALS
componentDidCatch(errorMessage, errorInfo) { this.setState({ error: errorMessage, }); } ERROR BOUNDARIES
GOAL #2 ENABLE REACT ASYNC FIBER’S GOALS
STACK
FIBER
STACK
FIBER
STACK FIBER Recursive Iterative Uses the stack Uses linked lists
Synchronous Asynchronous Blocking Non-Blocking
GOAL #1 SPLIT THE EMBER RENDERING ENGINE OUT FROM THE
REST OF EMBER GLIMMER’S GOALS
GOAL #2 IMPLEMENT A VM FOR EFFICIENT AND LIGHTWEIGHT RENDERING
GLIMMER’S GOALS
<div>Hello World!</div> {}
<div> Hello {{conference}}! </div> { “conference”: “CodeMash” }
<div class=“days”> {{#each days key="id" as |day|}} {{day.name}} <hr />
{{/each}} </div> { “days”: [ { “name”: “Thursday”, “id”: 1 }, { “name”: “Friday”, “id”: 2 } ] }
The Future?
THANK YOU!