Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progscon 2017: Taming the wild fronteer - Adventures in Clojurescript

683 views

Published on

Progscon 2017 conference talk, introducing Clojurescript for a functional programming approach to building React.js apps.

Examples include using React.js directly and the Om Clojurescript library that closely follows the React.js API. Also cover a simpler approach to React with the Clojurescript libraries called Reagent and Rum.

Published in: Technology
  • Be the first to comment

Progscon 2017: Taming the wild fronteer - Adventures in Clojurescript

  1. 1. Taming the wild fronteer Adventures in Clojurescript by John Stevenson @jr0cket practicalli.github.io/clojurescript
  2. 2. @jr0cket Speaker, author, conference organiser & community obsessed developer. Loves Clojure, Spacemacs, Cats, Cycling & Agile development. @Heroku @SalesforceDevs In a galaxy far, far away…
  3. 3. Taming The Wild Fronteer Javascript is a highly pervasive platform...
  4. 4. Javascript as a platform is everywhere @jr0cket
  5. 5. Many programming languages have their quirks… @jr0cket www.destroyallsoftware.com/talks/wat
  6. 6. A common view of Javascript as a language @jr0cket
  7. 7. Complex languages … are not easily reasoned about by humans @jr0cket Josh Smith - Tweet Original Gif
  8. 8. ClojureScript A general purpose language made from decades of design
  9. 9. From Javascript to Clojurescript f(x) -> (f x) ;; First element of a list is a function call var foo = “bar” -> (def foo “bar”) ;; bind a name to a value or function @jr0cket
  10. 10. Clojurescript - basic syntax (ns clojure.awesome ) ;; define a namespace (scoping) (defn function-name [args] (behaviour)) ;; define a function, with arguments (function-name data) ;; call a function with the data as its argument (def name “data-or-value”) ;; bind a name to data within the namespace scope (let [name “data-or-value”]) ;; bind a name to a data within the let scope (local) :keyword-name ;; a keyword is a name (symbol) that points to itself ;; Chaining functions: Thread the result of the first fn into the argument of the next fn (-> (function-a “data”) (function-b ,,,) ;; In Clojure commas , are whitespace (function-c ,,, “data”))
  11. 11. Built-in immutable data structures Model state and any other data with built-in (hash) maps, vectors (arrays), (linked) lists, (unique) sets (list 1 2 3 4 5) ‘(“fish” “chips” 42) (vec ‘(1 2 3 4)) [1 2 3 4] {:key “value”} {:name “John” :skill “conferencing”} (set ‘(1 2 3 4 4)) #{1 2 3 4}
  12. 12. Clojure - a few core functions (map fn collection) ;; map a fn over a collection, return new collection (reduce fn collection) ;; return the value of combining elements in collection with fn (for [x collection] (fn x)) ;; iterate over the elements of a collection (filter fn collection) ;; return a collection of values that comply with the filter fn (get {:veg “kale” :fruit “kiwi”} :fruit) ;; return value pointed to by keyword (:fruit {:veg “kale” :fruit “kiwi”}) ;; return value pointed to by keyword (conj collection value) ;; conjoin a value to the collection (assoc collection coll) ;; add a collection to the collection (update {:a 1} :a fn) ;; update value pointed to by the key in a map with the fn
  13. 13. ClojureScript: Managing complexity A pragmatic approach to purity
  14. 14. The Complexity Iceberg - @krisajenkins ● complexity is very dangerous when hidden ● You can't know what a function does for certain if it has side effects
  15. 15. Side Effects
  16. 16. Pure Functions The results of the function are purely determined by its initial output and its own code - no external influence, a function only uses local values - referential transparency (the function can be replaced by its value)
  17. 17. Impure Functions - side causes
  18. 18. Eliminating Side Effects Functional programming is about eliminating side effects where you can, controlling them where you can't - @krisajenkins The features in Functional Programming come from a desire to reduce side effects
  19. 19. Design idiom: Composing functions together You can think of functional design as evaluating one or more functions in series of functions
  20. 20. The Map Reduce Sandwich
  21. 21. Clojure - the Map Reduce Sandwich
  22. 22. Clojure - the Map Reduce Sandwich
  23. 23. Pure Functions & Immutability = Parallelism In simple terms: run the same code across multiple CPU’s / Threads
  24. 24. Parallelism - pmap pmap - the same as map but in parallel
  25. 25. Parallelism - reduce Significantly lower completion time running in parallel using Immutable data structures https://github.com/aphyr/tesser
  26. 26. Managing State State changes should be managed easily
  27. 27. Safe State changes Changing state safely by changing it atomically ● Software Transactional Memory (STM) ○ Gives an mechanism like an in-memory atomic database that manages mutable state changes under the covers ● Atoms ● Refs ● core.async
  28. 28. Concurrency syntax - atoms An online card game has players that can join and have their winnings tracked
  29. 29. Concurrency syntax - atoms The join-game function adds players to the atom by their name, but only up to 2 players
  30. 30. Concurrency syntax - refs join-game-safely adds players to ref & alters their account & game account
  31. 31. ClojureScript - Functional Web Immutability & composable functions for Web Apps
  32. 32. See Clojurescript for Skeptics: https://www.youtube.com/watch?v=gsffg5xxFQI&t=4s
  33. 33. jQuery over all JavaScript frameworks See Clojurescript for Skeptics: https://www.youtube.com/watch?v=gsffg5xxFQI&t=4s
  34. 34. See Clojurescript for Skeptics: https://www.youtube.com/watch?v=gsffg5xxFQI&t=4s
  35. 35. Google Closure tools & libraries
  36. 36. See Clojurescript for Skeptics: https://www.youtube.com/watch?v=gsffg5xxFQI&t=4s
  37. 37. Examples of Clojurescript ● Goya - pixel editor with undo https://jackschaedler.githu b.io/goya/ ● CircleCI ● Style.com ● Klipse - web-based dev tool & library for live-code examples in blogs / workshops
  38. 38. Getting Started with Clojurescript
  39. 39. Clojurescript Environments Nashorn - built into JVM, access Java classes - Oracle Nashorn: A Next-Generation JavaScript Engine for the JVM Browser-REPL - built into modern browsers (Chrome, Firefox, etc) - commonly used for client side web apps Node.js - great for command line utilities and microservices!
  40. 40. Common Clojurescript Tooling Leiningen - build automation tool for Clojure & Clojurescript Figwheel (leiningen plugin) - defacto tool for client side web apps - live reload - multi-broadcast (eg simultaneous dev & test outputs)
  41. 41. Full-stack projects: Chestnut https://github.com/plexus/chestnut - leiningen template for Clojure/ClojureScript apps based - with Om, Reagent, or Rum - instant reloading of Clojure, ClojureScript, and CSS - browser-connected REPL included lein new chestnut project-name
  42. 42. Self-hosted Clojurescript Environments Instant startup times, great for command line tools Lumo (cross-platform) - https://github.com/anmonteiro/lumo Plank (Mac & Linux) - http://planck-repl.org/
  43. 43. Understanding React Basic concepts of React
  44. 44. https://facebook.github.io/react/ https://github.com/reactjs
  45. 45. React Basics (conceptual) React provides an efficient way to update the view
  46. 46. What React Provides React is only the view The view should update the state, not the DOM
  47. 47. Reactive Frameworks All the varieties of life, plus all the Javascript varieties too...
  48. 48. Javascript & Clojurescript frameworks Javascript ● React.js via cljsjs ● Vue.js ??? Clojurescript ● Om / Om-next ● Reagent / Reframe ● Rum More at https://clojurescript.org/community/libraries
  49. 49. React.js Using React.js within Clojurescript
  50. 50. Simple Calculator with React.js
  51. 51. Reagent Clojurescript can directly use the React.js library thanks to cljsjs.github.io
  52. 52. React.js
  53. 53. React.js
  54. 54. React.js
  55. 55. React.js
  56. 56. React.js
  57. 57. React.js
  58. 58. Om / Om-next ClojureScript interface to Facebook's React
  59. 59. Om / Om-next Models the React.js API Rapidly re-render the UI from the root due via Immutable data structures - UIs are snapshot-able and undoable without implementation complexity Om supports features not currently present in React: - Global state management facilities built in - Components may have arbitrary data dependencies, not limited to props & state - Component construction intercepted via :instrument. Simplifies debugging - Stream all application state deltas via :tx-listen. Simplifies on/offline sync - Customizable semantics
  60. 60. Om core functions om.core/IRender - Render a Om component into the DOM - uses reify to provide a specific implementation of the om/IRender interface om.core/IInitState - maintains a local state (eg. for managing user input data) om.core/IRenderState - Render a Om component into the DOM - renders component on change in local & global state
  61. 61. Om core functions om.dom/div attributes content - creates a <div> tag in react - all react tags need to be wrapped in a div in order to be rendered - om.dom/… has all the other tags too - h1, h2, p, a … (sablono can be used instead) #js - converts clojure maps into Javascript objects - nest #js functions to to create JS objects - eg. for inline styles
  62. 62. Om Cursors A cursor is an atom & a path to a location in the atom app-state :schedule 0 Components use the cursor to refer to pieces of the app state - without knowing where they are in the state tree - updating app state is simple as the cursor is in the correct part of the app state
  63. 63. Reagent Interactive development
  64. 64. Reagent Reagent provides a minimalistic interface between ClojureScript and React - define efficient React components using nothing but plain ClojureScript functions and data - describe your UI using a Hiccup syntax [:div [:h1 “Heading”] [:div [:p “Paragraph” ] [:a {:href “/link.html”} “link text”]]] - define arbitrarily complex UIs using a couple of basic concepts - fast enough by default that you rarely have to care about performance.
  65. 65. Reagent Core functions reagent.core/render - Render a Reagent component into the DOM - First argument is either a vector (Reagent Hiccup syntax) or a React element reagent.core/atom - Like clojure.core/atom, plus it tracks components that deref atom & re-renders them
  66. 66. Helper functions Reagent used Clojurescript functions for conversion from - Clojure Maps to Javascript Objects - Clojurescript vectors to Javascript arrays clj->js - convert from Clojurescript to Javascript js->clj - convert from Javascript to Clojurescript
  67. 67. Reagent Examples http://timothypratley.blogspot.co.uk/2017/01/reagent-deep-dive-part-1.html - Uses Klipse to display interactive code snippets for Reagent - Includes use of SVG and Web3D libraries too Graph example - http://leaderboardx.herokuapp.com/
  68. 68. Reframe A micro-framework for Reagent
  69. 69. Re-frame a pattern for writing SPAs in ClojureScript, using Reagent. a framework with pure functions which transform data Architecturally implements "a perpetual loop". Build apps by writing pure functions for certain parts of the loop that transform the data - Re-frame looks after the conveyance of data around the loop, into and out of the transforming functions you write - tag line of "Derived Values, Flowing".
  70. 70. Rum A micro-framework for Reagent
  71. 71. Rum Rum is a client/server library for HTML UI. In ClojureScript, it works as React wrapper, in Clojure, it is a static HTML generator. - Simple semantics: Rum is arguably smaller, simpler and more straightforward than React itself. - Decomplected: Rum is a library, not a framework. Use only the parts you need, throw away or replace what you don’t need, combine different approaches in a single app, or even combine Rum with other frameworks. - No enforced state model: Unlike Om, Reagent or Quiescent, Rum does not dictate where to keep your state. Instead, it works well with any storage: persistent data structures, atoms, DataScript, JavaScript objects, localStorage or any custom solution you can think of. - Extensible: the API is stable and explicitly defined, including the API between Rum internals. It lets you build custom behaviours that change components in significant ways. - Minimal codebase: You can become a Rum expert just by reading its source code (~900 lines).
  72. 72. Rum - at ClojureX https://skillsmatter.com/skillscasts/9149-modern-web-apps-with-rum
  73. 73. Other ClojureScript examples Interactive development
  74. 74. Figwheel (flappy birds example)
  75. 75. Take a journey into Clojurescript
  76. 76. Clojurescript.org & ClojureDocs.org
  77. 77. londonclojurians.org - 4 events per month - Possibly the most active language-specific developer communitie in London
  78. 78. Learning by teaching others I really started thinking in Clojure when I started talking to & teaching others - Coding dojos - talks on Clojure (starting with the basics, showing the art of the possible) - moving on to running conferences - workshops at hack days
  79. 79. Thank you @jr0cket jr0cket.co.uk slideshare.net/jr0cket
  80. 80. You unlock this door with the key of imagination, Beyond it is another dimension
  81. 81. … a dimension of sound Sound design of a language evolved over many years
  82. 82. … a dimension of sight REPL driven development showing you clearly what your code is doing
  83. 83. … a dimension of mind Thinking Functionally, of pure functions & immutability
  84. 84. … of things and ideas Merging of data structures & behaviour in one syntax - homoiconicity
  85. 85. You have just crossed over to... The Clojurescript Zone The boundaries are only your imagination

×