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.

Presentation about ClosureScript fraemework

3,082 views

Published on

Published in: Technology
  • Be the first to comment

Presentation about ClosureScript fraemework

  1. 1. ClojureScript Ilegra – LDC By Jackson dos Santos - @cyber_jso
  2. 2. What is It? <ul><li>A Clojure API that allow us generate Javascript code from clojure code. </li></ul>
  3. 3. How it Works? Download API git clone git://github.com/clojure/clojurescript.git cd clojurescript ./script/bootstraP (ns hello) (defn ^:export greet [n] (str &quot;Hello &quot; n)) Do some Clojure Code ./bin/cljsc samples/ldc/src/hello-ldc/hello-ldc.cljs > hello.js Compilie IT
  4. 4. How it Works? Download API git clone git://github.com/clojure/clojurescript.git cd clojurescript ./script/bootstraP (ns hello) (defn ^:export greet [n] (str &quot;Hello &quot; n)) Do some Clojure Code ./bin/cljsc samples/ldc/src/hello-ldc/hello-ldc.cljs > hello.js Compilie IT
  5. 5. More About Compilation Phase <ul><li>In order </li></ul><ul><ul><li>Clojurescript transforms clojure code in JS code. </li></ul></ul><ul><ul><li>Google closure does </li></ul></ul><ul><ul><ul><li>It provides dependency management </li></ul></ul></ul><ul><ul><ul><li>Minification Javascript code. </li></ul></ul></ul><ul><ul><ul><li>Reduce the code size as small it can </li></ul></ul></ul><ul><ul><ul><li>Kill dead code </li></ul></ul></ul>
  6. 6. Some Examples <ul><li>core.cljs </li></ul><ul><li>(ns hello.core </li></ul><ul><li>(:require [hello.foo.bar :as bar])) </li></ul><ul><li>(defn ^{:export greet} greet [n] </li></ul><ul><li>(str &quot;Hello &quot; n)) </li></ul><ul><li>(defn ^:export sum [xs] </li></ul><ul><li>(bar/sum xs)) </li></ul>
  7. 7. Some Examples <ul><li>foo.cljs </li></ul><ul><li>(ns hello.foo.bar) </li></ul><ul><li>(defn sum [xs] </li></ul><ul><li>(reduce + 0 xs)) </li></ul>
  8. 8. Some Examples <ul><li>Compile your code: </li></ul><ul><ul><li>./bin/cljsc samples/hello/ > samples/hello/hello.js </li></ul></ul><ul><li>Or use the optimized format </li></ul><ul><li>./bin/cljsc samples/hello/ '{:optimizations :advanced}' > samples/hello/hello.js </li></ul>
  9. 9. Some Examples <ul><li>Setup your view: </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title>Hello ClojureScript</title> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><h1>Hello ClojureScript!</h1> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;hello.js&quot;></script> </li></ul></ul><ul><ul><li><script> </li></ul></ul><ul><ul><li>alert(greet(&quot;Everybody know that Jeff is a gay Fish&quot;)); </li></ul></ul><ul><ul><li>alert(&quot;The sum of [1,2,3,4,5,6,7,8,9] is: &quot; + hello.core.sum([1,2,3,4,5,6,7,8,9])); </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  10. 10. And Then...
  11. 11. The generated JS Code <ul><li>The optimized format </li></ul>
  12. 12. The Generated JS Code <ul><li>The unoptimized format </li></ul>
  13. 13. More Examples <ul><li>Calling an external JS library </li></ul><ul><ul><li>Clojure-side.cljls </li></ul></ul><ul><li>(ns hello.extern-example) </li></ul><ul><li>(defn ^:export foo [] 42) </li></ul><ul><li>(external.lib/send_alert &quot;ClojureScript calling a function defined in an externed JavaScript library&quot;) </li></ul>
  14. 14. More Examples <ul><li>Calling an external JS library </li></ul><ul><ul><li>Library.js </li></ul></ul><ul><ul><li>external = {}; </li></ul></ul><ul><ul><li>external.lib = { </li></ul></ul><ul><ul><li>send_alert : function (msg) { </li></ul></ul><ul><ul><li>alert(&quot;Sending Alert via &quot; + msg + &quot;!&quot;); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>}; </li></ul></ul>
  15. 15. More Examples <ul><li>Calling an external JS library </li></ul><ul><ul><li>View.html </li></ul></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title>Hello Externed JavaScript Library</title> </head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;out/goog/base.js&quot;></script> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;library.js&quot;></script> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;hello-extern.js&quot;></script> </li></ul></ul><ul><ul><li><script> </li></ul></ul><ul><ul><li>goog.require('hello.extern_example'); </li></ul></ul><ul><ul><li></script> </li></ul></ul>
  16. 16. What Can I Do With Clojurescript? <ul><li>An application that has dependency to others name spaces. </li></ul><ul><li>Use clojure data structures </li></ul><ul><li>Integrate it with Nodejs </li></ul><ul><li>Use the DOM (event handling, build components) </li></ul>
  17. 17. What Can't i Do With Clojurescript? <ul><li>Clojure transactions feature </li></ul><ul><li>Agents, Atoms </li></ul><ul><li>Protocol handling </li></ul>
  18. 18. What Are the Benefits In Use It? <ul><li>Mix the JS flexibility with the Clojure power </li></ul><ul><li>Target the web like application plataform </li></ul><ul><li>Build complex client web applications </li></ul>
  19. 19. Witch Kind Of Problems Can I've For Starting With It? <ul><li>The application can get complex to test </li></ul><ul><li>It's alpha </li></ul><ul><li>Integrate it with JQUERY and others JS libraries. </li></ul><ul><li>Problems to build the compiled JS Code </li></ul><ul><ul><li>(Setup your $CLOJURESCRIPT_HOME! Read the all documentation before starting) </li></ul></ul>

×