SlideShare a Scribd company logo
Build the mobile

web you want
@k88hudson
The web

is broken
Build the mobile web you want
UI perf
Offline/

intermittent

network
Auth/security
Device/OS
Integration
– browser vendors
We’re working on it
Native Web
ok pretty bad
terrible,
working on it
meh
ok sometimes
What do we do?
“I feel like it’s time to
revisit the web vs. native
debate, and concede defeat — or,
at least, concede that the web
cannot, and should not, compete
with native when it comes to
complex, app-like structures.”
“Conceding defeat will force us to
rethink the web’s purpose and
unique strengths — and that’s long
overdue.”
This is a totally reasonable,
rational argument
2004
Kazaa
Wallpapers
Build the mobile web you want
Build the mobile web you want
Build the mobile web you want
An app… in JavaScript?!
When I decided to write the
Gmail interface in Javascript,
pretty much everyone who knew
anything about Javascript or web
browsers told me that it was a
bad idea. It had been tried in
the past, and always ended in
disaster.
– Paul Buchheit, lead developer
of Gmail in 2004
Build the mobile web you want
“While I am personally opposed to
all use of JavaScript, I understand
that JavaScript can do some things
that you can't do with normal HTML…
Just remember, if Amazon can [do
without JavaScript], so can you.”
– “Anti-JavaScript FAQ”
“A lot of designers think it’s
their god-given right to annoy the
hell out of visitors with bulky
Javascript effects, so turning off
Javascript is almost a requirement
to visit some websites.”
– “Javascript is Evil”
“Blindly accepting a high level of
security risk on the web [by
enabling JavaScript] is as shaky as
a ride on the Canadian space
shuttle (made of birch bark and
pine gum)”
– “Stupid JavaScript Security Tricks”
“The XML HTTP thing”
“The XML HTTP thing”
You are here because

of a massive hack
Build the mobile web you want
Now is the time to hack
The three
levels of hack
Test new features before their time
The First Level of Hack
Service workers!!
(Coming to FF in fall 2015)
Transpile! Polyfill!
(This is not controversial stuff)
Build new abstractions
The Second Level of Hack
Build the mobile web you want
https://github.com/filerjs/filer
Build the mobile web you want
Blow sh*t up
The Third Level of Hack
What if you could
hack your user agent?
https://wiki.mozilla.org/Mobile/Get_Involved
“Hybrid apps”
https://cordova.apache.org/
Let’s build our own
Build the mobile web you want
Build the mobile web you want
• Poor offline experience
• Memory leaks in long-lived
processes
• UI perf
• Android <4.4
Basic architecture
Android Activity
Create an activity
MainActivity
main_activity
AndroidManifest.xml
Android Activity
Web view
Instantiate a WebView
MainActivity.java
What about Android 4.2, 4.0, ..?
https://crosswalk-project.org/
Android Activity
Web view
Communication
Layer
Loading resources
Expose a custom Java
interface to Javascript
Expose a custom Java
interface to Javascript
MainActivity.java
index.js
Build the mobile web you want
App.java
Similar to server side
routing, but we get native
Android transitions
What about state?
Web: React view
Android: Router,
SharedPreferences
JavascriptInterface.java
Passing route params
MainComponent.js
JavascriptInterface.java
Caching state
Caching state
MainComponent.js
Device integration?
Camera integration
Camera integration
What else?
• Bind to Android’s offline network
caching utilities
• Hook into native gestures
• Device/OS integration
• ???
Will it work? Who knows…
You get to build

the web you want
Build the mobile web you want
is finding adequate solutions
to problems that matter, in a
way that someone in the
future can understand and
improve on.
Really good engineering
Hack the good hack,
my friends
@k88hudson

More Related Content

PPTX
Mobile native-hacks
KEY
PPTX
The Final Frontier
PPTX
Real World Windows 8 Apps in JavaScript
PDF
XSS Without Browser
PDF
Bringing The Sexy Back To WebWorkers
PDF
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
PDF
The ES6 Conundrum - All Things Open 2015
Mobile native-hacks
The Final Frontier
Real World Windows 8 Apps in JavaScript
XSS Without Browser
Bringing The Sexy Back To WebWorkers
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
The ES6 Conundrum - All Things Open 2015

What's hot (20)

PDF
I Promise You
PPTX
External JavaScript Widget Development Best Practices
PPTX
External JavaScript Widget Development Best Practices (updated) (v.1.1)
PPTX
Realtime web2012
PPTX
Java scriptwidgetdevelopmentjstanbul2012
PPTX
Untangling spring week9
PDF
Cross-Platform Desktop Apps with Electron
PPTX
Testing your Single Page Application
PPTX
DevDay 2018 - Blazor
PPTX
Untangling spring week8
PPTX
Untangling spring week10
PDF
Firefox OS - HTML5 for a truly world-wide-web
PDF
Erase and Rewind - Open Web Camp 2015
PPTX
Untangling the web - fall2017 - class 4
PDF
The State of the Web - Helsinki meetup
PDF
jQuery Conference San Diego 2014 - Web Performance
PPTX
PDF
Future of web_apps
PDF
PhoneGap in a Day
PDF
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
I Promise You
External JavaScript Widget Development Best Practices
External JavaScript Widget Development Best Practices (updated) (v.1.1)
Realtime web2012
Java scriptwidgetdevelopmentjstanbul2012
Untangling spring week9
Cross-Platform Desktop Apps with Electron
Testing your Single Page Application
DevDay 2018 - Blazor
Untangling spring week8
Untangling spring week10
Firefox OS - HTML5 for a truly world-wide-web
Erase and Rewind - Open Web Camp 2015
Untangling the web - fall2017 - class 4
The State of the Web - Helsinki meetup
jQuery Conference San Diego 2014 - Web Performance
Future of web_apps
PhoneGap in a Day
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
Ad

Viewers also liked (16)

PPTX
Textus; szövegek hálójában
PPT
Studentqgworkingoncampus 110209171107-phpapp02
KEY
Aanikaaaaaalien
PPTX
Economía Popular y Solidaria - José Adrián Gómez G.
PDF
Telling stories with data
PPTX
En el café
PPTX
Sha-Menz-Link-Cleanup-and-Aiditing-for-Fun-and-Profit-SMX-West-2016
DOC
Koningin Paola heeft nu ook vast adres in Rome
PPTX
A'dam Sustainability Jam Introduction booklet
PDF
Internship Report
PDF
Api days tech sparking social change by chief disrupter 2016.ppt
PPTX
Ce 150210107029 presentation
PDF
The Rockefeller Foundation–Lancet Commission on Planetary Health: Safeguardin...
PPTX
La atencion primaria en salud y la bioetica
PDF
Dig Deep: Uncovering the hidden costs of health care
PDF
Vancouver Best Places to Work Roadshow | Earls Kitchen + Bar
Textus; szövegek hálójában
Studentqgworkingoncampus 110209171107-phpapp02
Aanikaaaaaalien
Economía Popular y Solidaria - José Adrián Gómez G.
Telling stories with data
En el café
Sha-Menz-Link-Cleanup-and-Aiditing-for-Fun-and-Profit-SMX-West-2016
Koningin Paola heeft nu ook vast adres in Rome
A'dam Sustainability Jam Introduction booklet
Internship Report
Api days tech sparking social change by chief disrupter 2016.ppt
Ce 150210107029 presentation
The Rockefeller Foundation–Lancet Commission on Planetary Health: Safeguardin...
La atencion primaria en salud y la bioetica
Dig Deep: Uncovering the hidden costs of health care
Vancouver Best Places to Work Roadshow | Earls Kitchen + Bar
Ad

Similar to Build the mobile web you want (20)

KEY
Philly ete-2011
PDF
HTML5 Can't Do That
PDF
Federico Lox Lucignano, War of the worlds web or native both
KEY
Phonegap for Engineers
PDF
Mobile Widgets Development
PDF
Inside Mobile Widgets Publish
PDF
War of The Worlds: Web or Native? Both!
PDF
Rubbing the Sankara Stones the wrong way - From the Front 2014
PDF
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
PDF
What Lies Ahead for HTML5
PDF
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
KEY
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
KEY
Building Cross Platform Mobile Apps
PDF
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App da...
PDF
"The Web - You're Doing it Wrong" for Forum Oxford May 2014
PDF
Web versus Native: round 1!
PDF
Chrome for android_devfestx
PDF
Empowering the Mobile Web - Mills
PDF
Empowering the "mobile web"
PDF
Empowering the “Mobile Web” with Chris Mills
Philly ete-2011
HTML5 Can't Do That
Federico Lox Lucignano, War of the worlds web or native both
Phonegap for Engineers
Mobile Widgets Development
Inside Mobile Widgets Publish
War of The Worlds: Web or Native? Both!
Rubbing the Sankara Stones the wrong way - From the Front 2014
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
What Lies Ahead for HTML5
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
Building Cross Platform Mobile Apps
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App da...
"The Web - You're Doing it Wrong" for Forum Oxford May 2014
Web versus Native: round 1!
Chrome for android_devfestx
Empowering the Mobile Web - Mills
Empowering the "mobile web"
Empowering the “Mobile Web” with Chris Mills

Recently uploaded (20)

PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
KodekX | Application Modernization Development
PDF
Electronic commerce courselecture one. Pdf
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
Encapsulation theory and applications.pdf
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
cuic standard and advanced reporting.pdf
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PPTX
Cloud computing and distributed systems.
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Unlocking AI with Model Context Protocol (MCP)
Advanced methodologies resolving dimensionality complications for autism neur...
KodekX | Application Modernization Development
Electronic commerce courselecture one. Pdf
The Rise and Fall of 3GPP – Time for a Sabbatical?
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Per capita expenditure prediction using model stacking based on satellite ima...
Chapter 3 Spatial Domain Image Processing.pdf
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Encapsulation theory and applications.pdf
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
cuic standard and advanced reporting.pdf
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Encapsulation_ Review paper, used for researhc scholars
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Cloud computing and distributed systems.
Digital-Transformation-Roadmap-for-Companies.pptx
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton

Build the mobile web you want