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
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
370
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.2k
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.7k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
210
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
210
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
210
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
660
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
CSC305 Lecture 06
javiergs
PRO
0
210
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
350
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
460
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
940
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
We Have a Design System, Now What?
morganepeng
53
7.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How to train your dragon (web standard)
notwaldorf
96
6.3k
For a Future-Friendly Web
brad_frost
180
9.9k
A Tale of Four Properties
chriscoyier
160
23k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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