Progressive Web Apps
in Clojure(Script)
or: How I Learned to Stop Worrying and Isomorphic Everything
- Tejas Dinkar
Slide 2
Slide 2 text
twitter: @tdinkar
github.com/gja
Chief Production Crasher
Slide 3
Slide 3 text
– github.com/malcolmsparks
“In the grand tradition of Clojure libraries
we begin with an irrelevant quote.”
Slide 4
Slide 4 text
Progressive Web Apps
Threat or Menace?
Or the best thing since #slicedBread?
Slide 5
Slide 5 text
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)
Slide 6
Slide 6 text
Video 1 Here
Slide 7
Slide 7 text
Video 1 Here
Slide 8
Slide 8 text
PWA of Thrones
• Available at https://github.com/gja/pwa-clojure
• Deployed https://pwa-clojure.staging.quintype.io
Slide 9
Slide 9 text
Progressive Web App
Slide 10
Slide 10 text
Progressive
as in Progressive Rendering
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Web
as in, the www
Slide 13
Slide 13 text
Apps
as in, well, y’know
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Isomorphism
Your client and server need to work closer together
Slide 16
Slide 16 text
#clojure
Because AFAIK, it’s your only non-js choice ;-)
Slide 17
Slide 17 text
–Tejas Dinkar (aka, me)
“This talk started out as vapourware,
ended up as a mini framework”
Slide 18
Slide 18 text
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)
Slide 19
Slide 19 text
Puzzle Pieces
Server
(clj)
Browser
(chrome)
Client
(cljs)
BTW, meet my friend
/service-worker.js
Slide 20
Slide 20 text
Puzzle Pieces
Server
(clj)
Browser
(chrome)
Client
(cljs)
ServiceWorker
(cljs)
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.
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Isomorphic Routing
• Which of the routes are part of the PWA?
• PWA Routes
• Data Routes (/api)
• Server only routes (POST apis, robots.txt, etc..)
Slide 28
Slide 28 text
bidi
because routes are data!
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
– Phil Karlton
There are two hard things in computer science:
cache invalidation, naming things, and off-by-
one errors.”
Slide 35
Slide 35 text
Isomorphic Flow
#explainLikeI’m5
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
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)
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Isomorphic Data
Loading
Slide 40
Slide 40 text
JSON is amazing
Please don’t return edn/clj from APIs
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Managing App State
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
redux
One state to rule them all
Slide 48
Slide 48 text
Application State
(a single atom)
Components
(and browser)
Actions
(change state)
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
missing:
Compile HTML to rum
enlive/kioo doesn’t count
Slide 56
Slide 56 text
manifest.json
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
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