Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Apps In Clojure(Script)

Tejas Dinkar
November 26, 2016

Progressive Web Apps In Clojure(Script)

Talk given at In/Clojure 2016.

Tejas Dinkar

November 26, 2016

More Decks by Tejas Dinkar

Other Decks in Technology


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

    Stop Worrying and Isomorphic Everything - Tejas Dinkar
  2. 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)
  3. 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
  4. 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
  5. 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)
  6. 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.
  7. Isomorphic Routing • Which of the routes are part of

    the PWA? • PWA Routes • Data Routes (/api) • Server only routes (POST apis, robots.txt, etc..)
  8. – Phil Karlton There are two hard things in computer

    science: cache invalidation, naming things, and off-by- one errors.”
  9. 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
  10. 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)
  11. 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
  12. 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