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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Samanta de Barros
March 28, 2017
Programming
0
750
Going Progressive with Ember
Samanta de Barros
March 28, 2017
Tweet
Share
Other Decks in Programming
See All in Programming
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
tosuri13
4
370
Smart Handoff/Pickup ガイド - Claude Code セッション管理
yukiigarashi
0
130
Apache Iceberg V3 and migration to V3
tomtanaka
0
160
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
yimajo
3
610
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
650
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
220
SourceGeneratorのススメ
htkym
0
190
15年続くIoTサービスのSREエンジニアが挑む分散トレーシング導入
melonps
2
190
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
izumin5210
7
2.3k
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
kekekenta
0
210
Basic Architectures
denyspoltorak
0
670
なぜSQLはAIぽく見えるのか/why does SQL look AI like
florets1
0
450
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.7k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
65
Why Our Code Smells
bkeepers
PRO
340
58k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
120
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
Making Projects Easy
brettharned
120
6.6k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
170
How STYLIGHT went responsive
nonsquared
100
6k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
75
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
96
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
7.9k
Fireside Chat
paigeccino
41
3.8k
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