clojurescript: i can't believe this is javascript · clojurescript vs dom • react •...
TRANSCRIPT
![Page 2: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/2.jpg)
Clojure transpiled to JavaScript
![Page 3: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/3.jpg)
ClojureScriptI can’t believe this is JavaScript!
![Page 4: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/4.jpg)
For the video and transcript of this presentation,
click here:
https://lispcast.com/clojurescript-cant-believe-javascript/
![Page 5: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/5.jpg)
Callback Hell
![Page 6: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/6.jpg)
Callback Hell
• JavaScript uses callback-style for async
• Not just about indentation
• About inversion of control
• I don’t know when or in what order or even if my code will be called!
![Page 7: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/7.jpg)
JavaScript vs Callback hell• Promises
• Helps a lot!
• Still have promises within promises within promises
• async/await
• nice!
• Together: wow, a really good solution!
![Page 8: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/8.jpg)
ClojureScript vs Callback Hell
• core.async
• A library that turns sequential code into callbacks
• Never give up control
• Based on Communicating Sequential Processes
• (the same thing Go is based on)
![Page 9: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/9.jpg)
Code Optimization
![Page 10: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/10.jpg)
Code Optimization• Milliseconds === $$$$
• Minify code
• Remove dead code
• Split code
![Page 11: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/11.jpg)
JavaScript vs Optimization• webpack
• minification
• dead code elimination
• splitting
• Rollup
• tree shaking
![Page 12: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/12.jpg)
ClojureScript vs Optimization
• Google Closure Compiler
• heavily tested
• optimizes Gmail
• “just works”
![Page 13: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/13.jpg)
Stateful DOM
![Page 14: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/14.jpg)
Stateful DOM• Dynamic apps need to modify the DOM
• DOM and your data get out of sync
![Page 15: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/15.jpg)
JavaScript vs DOM• JavaScript sprinkles
• Just use JS for making small improvements to a static page
• Angular/Ember
• Make a new HTML that is responsive to changes to state
• React
• Build new components that manage their view state
• Vue
![Page 16: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/16.jpg)
ClojureScript vs DOM• React
• Re-frame, Om, Rum — Basically just the Virtual DOM
• Manage app state in one place, View in another
• Really fast
• Very functional
• Hoplon
• Spreadsheet cells for changes
![Page 17: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/17.jpg)
Application State Management
![Page 18: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/18.jpg)
Application State• Applications have a lot data to keep track of
• It’s hard to tell what has changed and when
• It’s hard to keep in synch with the server
![Page 19: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/19.jpg)
JavaScript vs State• Mutable objects and variables
• Component state
• Redux
• Immutable.js
• GraphQL
• Falcor
![Page 20: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/20.jpg)
ClojureScript vs State• One mutable variable with immutable data
• Re-frame + Om Next
• Redux was inspired by these
• Manage their own “databases”
• Encourage a “pull model” with the server
![Page 21: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/21.jpg)
Build tool fatigue
![Page 22: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/22.jpg)
Build tool fatigue• There’s a lot of stuff a modern project needs
• linting
• transpiling
• dependency management
• bundling
![Page 23: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/23.jpg)
JavaScript vs Tools• Many options
• Webpack
• Grunt
• Gulp
• Browserify
• NPM
• Rollup
• These are just the bundlers!!
• No clear winner
• Broken promises
• Bad documentation
![Page 24: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/24.jpg)
ClojureScript vs Tools• Leiningen
• Configuration / declarative
• Plugins
• Boot
• Procedural / task-based
• Libraries
![Page 25: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/25.jpg)
Development flow
![Page 26: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/26.jpg)
Development flow• Web development is very visual
• We want to see changes right away
![Page 27: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/27.jpg)
JavaScript vs Flow• “Plain” flow
• Save changes to JS + CSS.
• Watcher recompiles on change.
• Reload the browser.
• Click around to where you were in your app.
• Hot Module Reloading
• Save changes to JS + CSS.
• Watcher recompiles on change.
• Watcher sends new code to browser.
• Works for some applications.
![Page 28: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/28.jpg)
ClojureScript vs Flow• Figwheel
• Compiles ClojureScript and sends it to browser
• See changes in less than a second
• Application state is untouched
![Page 29: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/29.jpg)
Extra slides
![Page 30: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/30.jpg)
Embrace the host
![Page 31: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/31.jpg)
Built-in
![Page 32: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/32.jpg)
Platforms
![Page 33: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/33.jpg)
React
![Page 34: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/34.jpg)
Other Goodies
![Page 35: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/35.jpg)
Module Systems
![Page 36: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/36.jpg)
core.async
![Page 37: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/37.jpg)
EDN
![Page 38: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/38.jpg)
Google Closure Compiler
![Page 39: ClojureScript: I can't believe this is JavaScript · ClojureScript vs DOM • React • Re-frame, Om, Rum — Basically just the Virtual DOM • Manage app state in one place, View](https://reader035.vdocuments.us/reader035/viewer/2022071213/603c9be680da53014d492674/html5/thumbnails/39.jpg)
Eric NormandFollow Eric on:
Eric Normand @EricNormand