Progressive Web Apps In Clojure(Script)

Talk given at In/Clojure 2016.

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
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.
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!
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)
39. Isomorphic Data Loading
40. JSON is amazing Please don’t return edn/clj from APIs
45. Managing App State
47. redux One state to rule them all
48. Application State (a single atom) Components (and browser) Actions (change state)
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
55. missing: Compile HTML to rum enlive/kioo doesn’t count
56. manifest.json
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?