Build the mobile web you want

Build the mobileweb you want

@k88hudson

The webis broken

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

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

“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

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 abstractionsThe Second Level of Hack

https://github.com/filerjs/filer

Blow sh*t upThe 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

• 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 JavascriptMainActivity.java

index.js

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 stateMainComponent.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

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