Getting started with ClojureScript

9,683 views
9,437 views

Published on

0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,683
On SlideShare
0
From Embeds
0
Number of Embeds
6,297
Actions
Shares
0
Downloads
86
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Getting started with ClojureScript

  1. 1. getting started with cljs - Siva JagadeesanMonday, February 11, 13 1
  2. 2. About me Siva Jagadeesan Zolodeck :: Clojure + Storm + Datomic + CLJS @sivajag siva@zololabs.comMonday, February 11, 13 2
  3. 3. What we will cover today Compiling ClojureScript Javascript Interop Setting up development Environment Building a simple Web Application using ClojureScript and ClojureMonday, February 11, 13 3
  4. 4. Why ClojureScript?Monday, February 11, 13 4
  5. 5. Why JavaScript? Web 2.0 / Web 3.0 It is lightweight It is flexible Functions are first class It is in every browserMonday, February 11, 13 5
  6. 6. Why not Javascript?Monday, February 11, 13 6
  7. 7. JavaScript as a Compilation Target Tools Google Web Toolkit Languages CoffeeScript DartMonday, February 11, 13 7
  8. 8. “ClojureScript is a new compiler for Clojure that targets JavaScript”Monday, February 11, 13 8
  9. 9. Why ClojureScript?Monday, February 11, 13 9
  10. 10. ClojureScript - Design Clojure ClojureScript JVM JavaScriptMonday, February 11, 13 10
  11. 11. ClojureScript - Compiler ClojureScript No Minification ClojureScript No Optimization Compiler JavaScriptMonday, February 11, 13 11
  12. 12. ClojureScript - Compiler Uses Google Closure Compiler for minification and optimizationMonday, February 11, 13 12
  13. 13. Google Closure Compiler - Optimization Whitespace Only Simple Optimization Advanced OptimizationMonday, February 11, 13 13
  14. 14. ClojureScript and Google Closure ClojureScript Optimized JavaScript ClojureScript Compiler Google Closure JavaScript CompilerMonday, February 11, 13 14
  15. 15. Hello World lein new cljspressMonday, February 11, 13 15
  16. 16. Project StructureMonday, February 11, 13 16
  17. 17. Edit project.cljMonday, February 11, 13 17
  18. 18. Create src/cljs/cljspress/client.cljsMonday, February 11, 13 18
  19. 19. Create resources/public/index.htmlMonday, February 11, 13 19
  20. 20. Compile lein repl (require cljs.closure) (cljs.closure/build "src/cljs" {:output-to "resources/public/cljspress.js" :optimizations :advanced})Monday, February 11, 13 20
  21. 21. Compilation Demystified (cljs.closure/build source options-map)Monday, February 11, 13 21
  22. 22. Compilation Demystified - Options :optimizations :output-to :output-dir :pretty-print :target :libs :foreign-libs :externsMonday, February 11, 13 22
  23. 23. Compilation Demystified - Options :optimizations :none :whitespace :simple :advancedMonday, February 11, 13 23
  24. 24. Compilation Demystified - Options :output-to & :ouput-dir ClojureScript :output-to Optimized JavaScript ClojureScript Compiler Google Closure JavaScript Compiler :output-dirMonday, February 11, 13 24
  25. 25. Loading Optimized Code <script src="cljspress.js" type="text/javascript"></script> <script> cljspress.client.main(); </script>Monday, February 11, 13 25
  26. 26. Loading Unoptimized Code <script src="js/goog/base.js"></script> <script src="cljspress.js"></script> <script> goog.require(cljspress.client); </script> <script> cljspress.client.main(); </script> loads the Google Closure Library from goog/base.js loads the dependency information for your application load your application launches your applicationMonday, February 11, 13 26
  27. 27. Compilation Demystified - Options :pretty-print Production - {:optimizations :advanced} Development - {:optimizations :whitespace :pretty-print true}Monday, February 11, 13 27
  28. 28. Hello World ... The Date is ...Monday, February 11, 13 28
  29. 29. Edit src/cljs/cljspress/client.cljsMonday, February 11, 13 29
  30. 30. Edit src/cljs/cljspress/client.cljs n g ro WMonday, February 11, 13 30
  31. 31. JavaScript Interop The js namespace Methods and Fields Constructor Functions Scope of this ExceptionsMonday, February 11, 13 31
  32. 32. JavaScript Interop The js namespace Javascript does not have a concept of namespace People use Java Objects as “modules” ClojureScript has built-in support for namespaces js namespace refers to JavaScript Global namespaceMonday, February 11, 13 32
  33. 33. JavaScript Interop Methods and Fields (def m “Hello World”) (def l (.-length m) (def r (.join m “-”)Monday, February 11, 13 33
  34. 34. JavaScript Interop Constructor Functions (def d (js/Date.))Monday, February 11, 13 34
  35. 35. JavaScript Interop Scope of this (def g (Raphael/color “00ff00”)) (def g (.color js/Raphael “00ff00”))Monday, February 11, 13 35
  36. 36. JavaScript Interop Exceptions (throw (js/Error. “Bad”))Monday, February 11, 13 36
  37. 37. Edit src/cljs/cljspress/client.cljsMonday, February 11, 13 37
  38. 38. Hello Name ... The Date is ...Monday, February 11, 13 38
  39. 39. Edit project.cljMonday, February 11, 13 39
  40. 40. Create src/clj/cljspress/server.cljMonday, February 11, 13 40
  41. 41. Edit src/cljs/cljspress/client.cljsMonday, February 11, 13 41
  42. 42. Running Start Server lein run Compile CLJS Goto http://localhost:5000/indexMonday, February 11, 13 42
  43. 43. RunningMonday, February 11, 13 43
  44. 44. RunningMonday, February 11, 13 44
  45. 45. Consuming Libraries Clojurescript Libraries Javascript Google Closure Libraries JavaScript Plain Old Libraries Compatible with Advanced mode compilation Not Compatible with Advanced mode compilationMonday, February 11, 13 45
  46. 46. Consuming Libraries ClojureScript Libraries Simple Case Include in Classpath :require or :use Invoke functions like normal ClojureScript FunctionsMonday, February 11, 13 46
  47. 47. Consuming Libraries JavaScript Google Closure Libraries Reference the relative path in :libs compiler options :require or :use Invoke functions using JS interop formMonday, February 11, 13 47
  48. 48. Consuming Libraries JavaScript Plain Old Libraries with Advanced Mode Compilation Reference the relative path and namespace in :foreign-libs compilation option :require or :use Invoke functions using JS interop formMonday, February 11, 13 48
  49. 49. Consuming Libraries JavaScript Plain Old Libraries without Advanced Mode Compilation Create an externs file and add it to :externs compilation option Include the library directly as script tag in HTML Invoke functions using JS interop formMonday, February 11, 13 49
  50. 50. lein cljs-build “is a Leiningen plugin that makes it quick and easy to automatically compile your ClojureScript code into Javascript whenever you modify it.”Monday, February 11, 13 50
  51. 51. Edit project.clj to include lein-cljsbuidMonday, February 11, 13 51
  52. 52. Basic commands of lein- cljsbuild lein trampoline cljsbuild once lein trampoline cljsbuild auto lein trampoline cljsbuild cleanMonday, February 11, 13 52
  53. 53. Repl please lein trampoline cljsbuild rhino-replMonday, February 11, 13 53
  54. 54. Even better Browser Repl ClojureScript Webpage REPL bREPL bREPL Server Client JVM BrowserMonday, February 11, 13 54
  55. 55. bRepl Client Create src/cljs/cljspress/core.cljsMonday, February 11, 13 55
  56. 56. bRepl Server and cljs REPL lein trampoline cljsbuild repl-listen Refresh the web page in Repl type “(js/alert "cool")” You should see a alert box in your web pageMonday, February 11, 13 56
  57. 57. Recap All Compilation options Consuming Different types of libraries Using lein cljs-build Interactive Development using Browser REPLMonday, February 11, 13 57
  58. 58. Thank you @sivajag siva@zololabs.comMonday, February 11, 13 58

×