How do we fix the mobile web? By hacking it, of course. My JSConf 2015 slides

1. Build the mobile
web you want
@k88hudson

2. The web
is broken

4. UI perf
Offline/
intermittent
network
Auth/security
Device/OS
Integration

5. – browser vendors
We’re working on it

6. Native Web
ok pretty bad
terrible,
working on it
meh
ok sometimes

7. What do we do?

8. “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.”

9. “Conceding defeat will force us to
rethink the web’s purpose and
unique strengths — and that’s long
overdue.”

10. This is a totally reasonable,
rational argument

11. 2004

12. Kazaa
Wallpapers

16. An app… in JavaScript?!

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

19. “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”

20. “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”

21. “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”

22. “The XML HTTP thing”

23. “The XML HTTP thing”

24. You are here because
of a massive hack

26. Now is the time to hack

27. The three
levels of hack

28. Test new features before their time
The First Level of Hack

29. Service workers!!
(Coming to FF in fall 2015)

30. Transpile! Polyfill!

31. (This is not controversial stuff)

32. Build new abstractions
The Second Level of Hack

34. https://github.com/filerjs/filer

36. Blow sh*t up
The Third Level of Hack

37. What if you could
hack your user agent?

38. https://wiki.mozilla.org/Mobile/Get_Involved

39. “Hybrid apps”

40. https://cordova.apache.org/

41. Let’s build our own

44. • Poor offline experience
• Memory leaks in long-lived
processes
• UI perf
• Android <4.4

45. Basic architecture

46. Android Activity

47. Create an activity
MainActivity
main_activity
AndroidManifest.xml

48. Android Activity
Web view

49. Instantiate a WebView
MainActivity.java

50. What about Android 4.2, 4.0, ..?

51. https://crosswalk-project.org/

52. Android Activity
Web view
Communication
Layer

53. Loading resources

54. Expose a custom Java
interface to Javascript

55. Expose a custom Java
interface to Javascript
MainActivity.java
index.js

57. App.java

58. Similar to server side
routing, but we get native
Android transitions

59. What about state?

60. Web: React view
Android: Router,
SharedPreferences

61. JavascriptInterface.java
Passing route params
MainComponent.js

62. JavascriptInterface.java
Caching state

63. Caching state
MainComponent.js

64. Device integration?

65. Camera integration

66. Camera integration

67. What else?
• Bind to Android’s offline network
caching utilities
• Hook into native gestures
• Device/OS integration
• ???

68. Will it work? Who knows…

69. You get to build
the web you want

71. is finding adequate solutions
to problems that matter, in a
way that someone in the
future can understand and
improve on.
Really good engineering

72. Hack the good hack,
my friends

73. @k88hudson