Download to read offline
More Related Content
![[D2 오픈세미나]2.모바일웹디버깅](https://cdn.slidesharecdn.com/ss_thumbnails/2-140804011239-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Build your next single page app in ClojureScript and re-frame
Build your next single page app in ClojureScript and re-frame
- 1. Build your nextsingle page app in ClojureScript and re-frame Paul Bostrom @pbostrom
- 2. The speaker • Generalist- mostly backend and devops; some frontend experience • Prefer Clojure/ClojureScript - 7 years experience (hobby/work) - Don’t consider myself an expert - I can go fast and get things mostly right • Current project is first production ClojureScript
- 3. The audience • Clojuredevelopers who want to try frontend • Tech leads who need to choose a frontend tech • JavaScript developers who want to try something new • ClojureScript skeptics
- 4.
- 5. ClojureScript for Skeptics •JavaScript interop and npm ecosystem is available • Tooling grunt, gulp, webpack, babel, browserify, yeoman, brunch vs. ClojureScript compiler, figwheel, lein (or boot, tools.deps) • Performance is equivalent (or better: immutability + React) • clojure.spec in lieu of types • Editor support: emacs, vim, Atom, VS Code • core.async (compare with async/await) • Code size: advanced compilation, code-splitting/output modules
- 6. JavaScript vs ClojureScript Somehigh-level characteristics • Permissiveness • Expressiveness • Top-down vs bottom-up design
- 8. JavaScript permissiveness • Mutability •Classes, prototypes, inheritance • Accidental global variables • hoisting • callback hell, promises, async/await • this • funky truthiness
- 10.
- 11. Top-down vs bottom-up design https://en.wikipedia.org/wiki/Top-down_and_bottom-up_design A top-down approachis essentially the breaking down of a system to gain insight into its compositional sub-systems. Top down approach starts with the big picture. It breaks down from there into smaller segments. A bottom-up approach is the piecing together of systems to give rise to more complex systems, thus making the original systems sub-systems of the emergent system. Bottom-up processing is a type of information processing based on incoming data from the environment to form a perception.
- 12. Top-down vs bottom-up design •Web design: visual, wire-frames, big picture • Clojure design: data, data, data Bottom Up vs Top Down Design in Clojure - Mark Bastian https://www.youtube.com/watch?v=Tb823aqgX_0
- 13. JavaScript vs ClojureScript Anobservation High-level language characteristics (permissiveness, expressiveness, design approach) permeate the development ecosystem
- 14. The project • Browser-basedsingle page web app • Not necessarily optimized for mobile, but should still be usable • Multiple data sources: HTTP APIs, WebSockets
- 15.
- 16. Why do weneed a framework? https://medium.com/dailyjs/the-deepest-reason-why- modern-javascript-frameworks-exist-933b86ebc445
- 17. re-frame • Data orienteddesign. Events are data. Effects are data. DOM is data. The functions which transform data are registered and looked up via data. • Uses reagent: “minimalistic interface between ClojureScript and React” • Hiccup-like syntax for describing UI
- 18.
- 19.
- 20. re-frame app state view event/effects handlers subscriptions events events/effects update state Async HTTP fetchlogs scroll HTTP API fetching fetching
- 21.
- 22.
- 23.
- 24. re-frame • Around since2015 • Stable • Rich ecosystem: https://github.com/Day8/re-frame/blob/master/docs/ External-Resources.md • re-frame-10x: http://localhost:3000
- 25. Code size Advanced compilation,gzipped Not bad, even for mobile Avg case: < 1s Worst case: slow 3G connection ~ 5-10s
- 26.
- 27. Misc. • What aboutVue.js or AngularJS? • Onboarding new developers • 3rd party libraries: npm deps, CLJSJS • Advanced compilation • Testing: doo, chrome-headless, re-frame.test
- 28.