Progressive Web Apps In Clojure(Script)

9245f8593dc19a394a021ea0f17f9e0f?s=47 Tejas Dinkar
November 26, 2016

Progressive Web Apps In Clojure(Script)

Talk given at In/Clojure 2016.

9245f8593dc19a394a021ea0f17f9e0f?s=128

Tejas Dinkar

November 26, 2016
Tweet

Transcript

  1. Progressive Web Apps in Clojure(Script) or: How I Learned to

    Stop Worrying and Isomorphic Everything - Tejas Dinkar
  2. twitter: @tdinkar github.com/gja Chief Production Crasher

  3. – github.com/malcolmsparks “In the grand tradition of Clojure libraries we

    begin with an irrelevant quote.”
  4. Progressive Web Apps Threat or Menace? Or the best thing

    since #slicedBread?
  5. about.talk • This talk will talk about • A lot

    about HTML5 ServiceWorker + PWA • Clj + Cljs working together, without duplication • This talk will not cover • a lot of plumbing (which you can find in repo)
  6. Video 1 Here

  7. Video 1 Here

  8. PWA of Thrones • Available at https://github.com/gja/pwa-clojure • Deployed https://pwa-clojure.staging.quintype.io

  9. Progressive Web App

  10. Progressive as in Progressive Rendering

  11. Cuz Progressive! • Browsers without JS get a static •

    Browsers with JS only get a web app • Browsers with ServiceWorker gets offline mode • Android phones can make use of app mode
  12. Web as in, the www

  13. Apps as in, well, y’know

  14. Progressive Web Apps • Open standard, built on HTML 5

    • HTTPs ONLY! • Built on ServiceWorker, enabling offline use • Users can ‘promote’ a web app to look native • Make use of app like features, like pushes
  15. Isomorphism Your client and server need to work closer together

  16. #clojure Because AFAIK, it’s your only non-js choice ;-)

  17. –Tejas Dinkar (aka, me) “This talk started out as vapourware,

    ended up as a mini framework”
  18. Puzzle Pieces Server (clj) Browser (chrome) Yo! Gimme this page!

    No problems, here’s some HTML / CSS / JS Amaze! Let me run that JS Client (cljs)
  19. Puzzle Pieces Server (clj) Browser (chrome) Client (cljs) BTW, meet

    my friend /service-worker.js
  20. Puzzle Pieces Server (clj) Browser (chrome) Client (cljs) ServiceWorker (cljs)

  21. Client (cljs) ServiceWorker (cljs) Puzzle Pieces Server (clj) Browser (chrome)

    Want HTML/CSS Want AJAX
  22. None
  23. Isomorphic Routing

  24. Progressive Shell + [{:name “Jon”}] =

  25. PRPL Pattern • Push critical resources for the initial URL

    route. • Render initial route. • Pre-cache remaining routes. • Lazy-load and create remaining routes on demand.
  26. None
  27. Isomorphic Routing • Which of the routes are part of

    the PWA? • PWA Routes • Data Routes (/api) • Server only routes (POST apis, robots.txt, etc..)
  28. bidi because routes are data!

  29. None
  30. None
  31. None
  32. None
  33. None
  34. – Phil Karlton There are two hard things in computer

    science: cache invalidation, naming things, and off-by- one errors.”
  35. Isomorphic Flow #explainLikeI’m5

  36. Isomorphic Flow • There are 3 ways to load a

    page • Render the page “cold” from the server • Jump from one page to another • PWA - Start with a shell, and load the page
  37. Isomorphic Flow • The flow remains the same • Figure

    out which page you want show • Determine what data is needed, load it • Render the correct view (component)
  38. None
  39. Isomorphic Data Loading

  40. JSON is amazing Please don’t return edn/clj from APIs

  41. None
  42. None
  43. None
  44. None
  45. Managing App State

  46. None
  47. redux One state to rule them all

  48. Application State (a single atom) Components (and browser) Actions (change

    state)
  49. None
  50. Isomorphic Rendering • This one is probably the best explored

    till now • Examples here use rum, because it’s easy • Stop using cljx, use reader conditionals instead
  51. None
  52. None
  53. None
  54. None
  55. missing: Compile HTML to rum enlive/kioo doesn’t count

  56. manifest.json

  57. None
  58. Miscellania • The shell is itself a rum component •

    an entire ‘cache’ is evicted from the browser • gulp can fingerprint assets, ServiceWorker • push notifications can be done too
  59. Questions?