Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Build the mobile web you want

1,316 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Build the mobile web you want

  1. 1. Build the mobile
 web you want @k88hudson
  2. 2. The web
 is broken
  3. 3. UI perf Offline/
 intermittent
 network Auth/security Device/OS Integration
  4. 4. – browser vendors We’re working on it
  5. 5. Native Web ok pretty bad terrible, working on it meh ok sometimes
  6. 6. What do we do?
  7. 7. “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.”
  8. 8. “Conceding defeat will force us to rethink the web’s purpose and unique strengths — and that’s long overdue.”
  9. 9. This is a totally reasonable, rational argument
  10. 10. 2004
  11. 11. Kazaa Wallpapers
  12. 12. An app… in JavaScript?!
  13. 13. 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
  14. 14. “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”
  15. 15. “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”
  16. 16. “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”
  17. 17. “The XML HTTP thing”
  18. 18. “The XML HTTP thing”
  19. 19. You are here because
 of a massive hack
  20. 20. Now is the time to hack
  21. 21. The three levels of hack
  22. 22. Test new features before their time The First Level of Hack
  23. 23. Service workers!! (Coming to FF in fall 2015)
  24. 24. Transpile! Polyfill!
  25. 25. (This is not controversial stuff)
  26. 26. Build new abstractions The Second Level of Hack
  27. 27. https://github.com/filerjs/filer
  28. 28. Blow sh*t up The Third Level of Hack
  29. 29. What if you could hack your user agent?
  30. 30. https://wiki.mozilla.org/Mobile/Get_Involved
  31. 31. “Hybrid apps”
  32. 32. https://cordova.apache.org/
  33. 33. Let’s build our own
  34. 34. • Poor offline experience • Memory leaks in long-lived processes • UI perf • Android <4.4
  35. 35. Basic architecture
  36. 36. Android Activity
  37. 37. Create an activity MainActivity main_activity AndroidManifest.xml
  38. 38. Android Activity Web view
  39. 39. Instantiate a WebView MainActivity.java
  40. 40. What about Android 4.2, 4.0, ..?
  41. 41. https://crosswalk-project.org/
  42. 42. Android Activity Web view Communication Layer
  43. 43. Loading resources
  44. 44. Expose a custom Java interface to Javascript
  45. 45. Expose a custom Java interface to Javascript MainActivity.java index.js
  46. 46. App.java
  47. 47. Similar to server side routing, but we get native Android transitions
  48. 48. What about state?
  49. 49. Web: React view Android: Router, SharedPreferences
  50. 50. JavascriptInterface.java Passing route params MainComponent.js
  51. 51. JavascriptInterface.java Caching state
  52. 52. Caching state MainComponent.js
  53. 53. Device integration?
  54. 54. Camera integration
  55. 55. Camera integration
  56. 56. What else? • Bind to Android’s offline network caching utilities • Hook into native gestures • Device/OS integration • ???
  57. 57. Will it work? Who knows…
  58. 58. You get to build
 the web you want
  59. 59. is finding adequate solutions to problems that matter, in a way that someone in the future can understand and improve on. Really good engineering
  60. 60. Hack the good hack, my friends
  61. 61. @k88hudson

×