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
Going Progressive with Ember
Search
Samanta de Barros
March 28, 2017
Programming
0
730
Going Progressive with Ember
Samanta de Barros
March 28, 2017
Tweet
Share
Other Decks in Programming
See All in Programming
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
130
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
チームの境界をブチ抜いていけ
tokai235
0
160
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
140
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
230
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
710
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
理論と実務のギャップを超える
eycjur
0
130
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
400
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Faster Mobile Websites
deanohume
310
31k
What's in a price? How to price your products and services
michaelherold
246
12k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Producing Creativity
orderedlist
PRO
347
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Transcript
GOING PROGRESSIVE WITH SAMANTA DE BARROS EMBERCONF 2017
+
PROGRESSIVE WEB APP CARMELO, URUGUAY
“Progressive Web Apps take advantage of new technologies to bring
the best of mobile sites & native apps to users. They’re reliable, fast, and engaging. They originate from a secure origin and load regardless of network state.“ - Addy Osmani
I HAVE A DREAM…
None
None
None
None
PROGRESSIVE WEB APP? LA PEDRERA, URUGUAY
LOOKS GOOD
LOOKS GOOD INSTALLS ON DEVICE
LOOKS GOOD INSTALLS ON DEVICE WORKS OFFLINE
LOOKS GOOD INSTALLS ON DEVICE WORKS OFFLINE WORKS FAST
PUNTA DEL ESTE, URUGUAY LOOKS GOOD?
NATIVE VS WEB
PUNTA DEL DIABLO, URUGUAY INSTALLS ON DEVICE?
THE WEB APP MANIFEST
None
None
None
None
None
BEFORE
AFTER
None
None
BEFORE
AFTER
None
ember-web-app Generates App Manifest and iOS tags from config file
github: san650/ember-web-app
config/manifest.js
LOOKS GOOD INSTALLS ON DEVICE WORKS OFFLINE WORKS FAST
WORKS OFFLINE? LA PEDRERA, URUGUAY
None
THE SERVICE WORKER
It’s a script Runs in the background Doesn't need a
web page or user interaction
None
None
None
None
SAVE ASSETS ON INSTALL EVENT
SAVE ASSETS ON INSTALL EVENT INTERCEPT EVERY REQUEST
SAVE ASSETS ON INSTALL EVENT INTERCEPT EVERY REQUEST BACKGROUND SYNC
SAVE ASSETS ON INSTALL EVENT INTERCEPT EVERY REQUEST BACKGROUND SYNC
PUSH NOTIFICATIONS
SAVE ASSETS ON INSTALL EVENT INTERCEPT EVERY REQUEST BACKGROUND SYNC
PUSH NOTIFICATIONS ALL YOU CAN DREAM OF
ember-service-worker broccoli-serviceworker
ember-service-worker Plugable approach Base addon just registers SW Add plugins
for different cache strategies github: dockyard/ember-service-worker
ember-service-worker ember-service-worker-index ember-service-worker-asset-cache ember-service-worker-cache-fallback
broccoli-serviceworker Generates SW based on configuration Pre-caches app files by
default github: jkleinsc/broccoli-serviceworker
app/config/environment.js
None
None
None
None
BEFORE
AFTER
AFTER
None
Chrome 37.7% MOBILE BROWSER USAGE WORLDWIDE Safari 22.2% Firefox 0.1%
IE 0.1% Samsung Internet 5.4% Opera 8.6% http://gs.statcounter.com/browser-market-share/mobile-tablet/worldwide/#monthly-201602-201702-bar
MOBILE BROWSER USAGE Safari 55.9% Chrome 31.4% USA http://gs.statcounter.com/browser-market-share/mobile-tablet/united-states-of-america/#monthly-201602-201702-bar
None
THE APPLICATION CACHE
None
None
None
None
Generates appcache manifest with app resources Can be configured to
ignore certain paths broccoli-manifest github: racido/broccoli-manifest
app/config/environment.js
USER DATA OFFLINE?
LOCAL STORAGE
LOCAL STORAGE WEBSQL
LOCAL STORAGE WEBSQL INDEXED DB
LOCAL STORAGE WEBSQL INDEXED DB LOCAL FORAGE (WRAPS ALL 3)
ember-localstorage-adapter ember-localforage-adapter ember-pouch
ember-localstorage-adapter Ember data adapter for local storage Local storage: key/value
pair store, works with strings github: locks/ember-localstorage-adapter
ember-localforage-adapter github: genkgo/ember-localforage-adapter Ember data adapter for local forage LocalForage:
wrapper for indexedDb and WebSQL that falls back to local storage
ember-pouch Ember Data for PouchDB/ CouchDB Saves data client side
to IndexedDB or WebSQL Can sync to PouchDB github: nolanlawson/ember-pouch
LOOKS GOOD INSTALLS ON DEVICE WORKS OFFLINE WORKS FAST
DOES IT WORK FAST? MONTEVIDEO, URUGUAY
NATIVE VS PWA
FIRST PAGE RENDER
ember-cli-fastboot Server side rendering Still beta github: ember-fastboot/ember-cli-fastboot
SECOND PAGE RENDER
Service Worker / App Cache
TIME TO INTERACTION
Allows composition of apps into a single app Lazy loading
of engines ember-engines github: ember-engines/ember-engines
TOOLS JOSE IGNACIO, URUGUAY
LIGHTHOUSE
None
None
web manifest + service worker + app cache
None
+ fastboot
None
+ ember-engines?
None
BACK TO THAT DREAM… PUNTA DEL ESTE, URUGUAY
1. IT IS POSSIBLE
1. IT IS POSSIBLE 2. IT IS DOABLE WITH EMBER
1. IT IS POSSIBLE 2. IT IS DOABLE WITH EMBER
3. IT CAN GET EVEN BETTER
WE NEED YOUR HELP!
THANKS! @sami_dbc @sdebarros CABO POLONIO, URUGUAY