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
Why Mobile Web Still Sucks
Search
Ilya Pukhalski
June 05, 2014
Technology
3
500
Why Mobile Web Still Sucks
What comes next into our browsers: Service Workers, Push API, Browser Sync, Installable Web Apps.
Ilya Pukhalski
June 05, 2014
Tweet
Share
More Decks by Ilya Pukhalski
See All by Ilya Pukhalski
There's a bot for that
pukhalski
1
280
50 Shades of Flux
pukhalski
3
350
Responsive Typography: Wrap-Up
pukhalski
8
370
Next Level SVG
pukhalski
1
1.5k
XFramework: the story so far
pukhalski
0
450
XFramework: build cross-platform responsive web apps easily
pukhalski
3
870
Mobile Cross-Platform Development
pukhalski
2
290
Rest in PS: рабочий процесс современного веб-дизайнера
pukhalski
12
1.5k
Что сломалось в белорусском интернете?
pukhalski
4
500
Other Decks in Technology
See All in Technology
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
3.9k
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
Nix入門パラダイム編
asa1984
2
200
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
730
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.7k
バクラクにおける可観測性向上の取り組み
yuu26
3
410
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
1
39
RailsConf 2023
tenderlove
29
880
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Docker and Python
trallard
40
3.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Making Projects Easy
brettharned
115
5.9k
Practical Orchestrator
shlominoach
186
10k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Transcript
Why Mobile Web Still Sucks? Ilya Pukhalski May MMXIV
@pukhalski ! Solution Architect, EPAM Systems Lecturer, British Higher School
of Art & Design
% of time spent 2013 2014 14 20 86 80
Apps Mobile Web
Why apps? • Easy to control over stores • Rich-get-richer
dynamics • Easier to retain users
None
None
HTML5 vs Native on mobile Web
Watch your language • HTML5 is a marketing buzzword •
Responsive Web Design doesn’t exist Good design is responsive by default.
What is web?
– Wiki “Web is a system of interlinked “hypertext documents
that run “on and are accessed “via the Internet.”
None
Custom URL schemas • fb://profile/(fbid) • tel:+180022933 • twitter://username •
…
applinks.org
Native is a part of Web ecosystem
What is native?
“Native — software or data “formats supported by a certain
“system with minimal overhead “and additional components” – Wiki
Web technologies are native for browsers
Browsers are responsible for standards support
Apps boom Do you remember dot-com boom?
Why do we love apps? • Push Notifications • Offline
Mode • Performance ! ! • Look & Feel • Distribution • Background Sync
Look & Feel
famo.us
None
Touch Events, Pointer Events, Mouse Events
~300ms delay
tap.js
document .getElementById('any-element') .addEventListener('tap', function (e) { // All the magic
happens here }); $('#any-element').on('tap', function (e) { // All the magic happens here });
Performance
Heavy DOM
Facebook React.js Model DOM Virtual DOM Redraw on requestAnimationFrame Changes
Changes Changes
Animations
2010-2013
2014
requestAnimationFrame
None
None
element.animate([ {cssProperty: value0}, {cssProperty: value1}, {cssProperty: value2}, //... ], {
duration: timeInMs, iterations: iterationCount, delay: delayValue });
Offline Mode
Cache Manifest
A declarative way CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.png
/main.js ! NETWORK: login.asp ! FALLBACK: /html/ /offline.html
A mess CACHE MANIFEST # v1 index.html js/lib/mapbox.js js/lib/iscroll.min.js js/lib/jquery/dist/jquery.min.js
js/lib/backbone/backbone.min.js js/lib/underscore/underscore.min.js js/xf.min.js js/app.js styles/xf.min.css styles/app.css styles/mapbox.css js/components/PointsList.js tmpl/desktop/PointsList.tmpl tmpl/mobile/PointsList.tmpl js/components/PointsMap.js https://api.tiles.mapbox.com/mapbox.js/v1.6.1/images/icons-000000.png http://api.tiles.mapbox.com/mapbox.js/v1.6.1/images/icons-000001.png http://api.tiles.mapbox.com/mapbox.js/v1.6.1/images/icons-000002.png http://api.tiles.mapbox.com/mapbox.js/v1.6.1/images/icons-000003.png http://api.tiles.mapbox.com/mapbox.js/v1.6.1/images/icons-000004.png http://api.tiles.mapbox.com/mapbox.js/v1.6.1/images/icons-000005.png http://a.tiles.mapbox.com/v3/witchfinderx.hb934388.json http://a.tiles.mapbox.com/v3/marker/pin-s-fuel+fc4353.png http://a.tiles.mapbox.com/v3/marker/pin-m-circle+f0a.png NETWORK: http://api.tomtom.com/ http://a.tiles.mapbox.com/ http://b.tiles.mapbox.com/ http://c.tiles.mapbox.com/
Debugging hell 1. Change the code 2. Change manifest 3.
Clean cache 4. Debug 5. GOTO 1
None
Meet Service Worker
Event-driven scripts that run independently of web pages
• Handling resource requests • Foundation for other standards
navigator.serviceWorker.register('/worker.js') .then(function(serviceWorker) { // To use the serviceWorker immediately, //
you might call window.location.reload() });
var base = "https://videos.example.com"; var inventory = new URL("/inventory.json", base)
+ ""; ! ! this.addEventListener("fetch", function(e) { var url = e.request.url; if (url == inventory) { e.respondWith(new Response({ statusCode: 200, body: JSON.stringify({ videos: { /* ... */ } }) })); } });
var base = "https://videos.example.com"; ! this.addEventListener("install", function(e) { ! var
cachedResources = new Cache( base + "/base.css", base + "/app.js", base + "/logo.png" ); ! ! e.waitUntil(cachedResources.ready()); ! ! caches.set("videos-cache", cachedResources); });
this.addEventListener("fetch", function(e) { ! e.respondWith( caches.match(e.request, “videos-cache") ); });
var base = "https://videos.example.com"; var inventory = new URL("/inventory.json", base)+"";
! this.addEventListener("fetch", function(e) { var url = e.request.url; if (url == inventory) { e.respondWith( fetch(url).then( null, function() { return caches.match(inventory); } ) ); } });
Distribution
Stores • App Store • Google Play • BlackBerry AppWorld
• Amazon Appstore • EPAM Mobile Appstore
Stores • App Store • Google Play • BlackBerry AppWorld
• Amazon Appstore • EPAM Mobile Appstore
Will you install an app to buy a car?
None
None
None
Install this app
navigator .mozApps .install("path/to/manifest");
Notifications
Web Notifications
var Notification = window.Notification || window.mozNotification || window.webkitNotification; ! Notification.requestPermission(
function (permission) { // console.log(permission); } );
! var notification = new Notification( "SEC Spring 2014", {
body: "I hope you enjoy the conference" } ); ! notification.onclick = function () { // Something to do };
• Opened website • Client-side only
Safari Remote Notifications
The Flow • Request permissions • Register the device •
Send notifications
{! ! "aps": {! ! "alert": {! ! "title": "Flight
A998 Now Boarding",! ! "body": "Boarding has begun for Flight A998.",! ! "action": "View"! ! },! ! "url-args": ["boarding", "A998"]! ! }! ! }!
• Server-side • Offline
Service Worker Push Notifications
The Flow • Register locally • Register on the server
side • Send notifications
navigator.serviceWorker.register("/sw.js"); ! navigator.serviceWorker.whenReady().then(function(sw) { ! navigator.push.has("regId").catch(function() { navigator.push.register({ sender: {
// sender data... } }); }).then(function (registration) { asyncXHR( "http://example.com/push/activate" + toQueryString(registration); ); }); });
this.onpush = function(e) { console.log(e.message.data); // Cache the data //
... }
Background Sync
Service Worker? Yes!
navigator.serviceWorker.register("/sw.js"); ! ! navigator.serviceWorker.whenReady() .then(function(sw) { ! navigator.registerSync( "id", {
interval: 'daily', data: '', description: '', lang: '', dir: '' } ); });
this.onsync = function(event) { var data = JSON.parse(event.data); ! if
(event.id === "id") { // make something with data } };
How to make mobile web suck less?
Blame the implementation, not technique
Thanks @pukhalski
[email protected]