![Page 1: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/1.jpg)
React ClojureScript
1
![Page 2: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/2.jpg)
FP, GUI & Writing
ChenYong,
CoffeeScript, ClojureScript
2
![Page 3: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/3.jpg)
•
• ClojureScript
• React
• ClojureScript Virtual DOM
• ,
3
![Page 4: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/4.jpg)
4
![Page 5: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/5.jpg)
– https://facebook.github.io/reason/
“Reason is a new interface to OCaml - a highly expressive dialect of the ML language
featuring type inference and static type checking.”
5
![Page 6: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/6.jpg)
• 1957 Fortron • 1958 LISP • 1962 Simula • 1964 BASIC • 1972 C • 1972 Smalltalk • 1972 ML • 1975 Scheme • 1980 C++ • 1984 Common Lisp • 1986 Erlang
• 1987 Self • 1990 Haskell • 1995 Java • 1995 JavaScript • 2003 Scala • 2007 Clojure • 2009 Go • 2009 CoffeeScript • 2010 Rust • 2011 ClojureScript • 2014 Swift
https://en.wikipedia.org/wiki/History_of_programming_languages
6
![Page 7: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/7.jpg)
• Lisp, a practical mathematical notation for programs, including tree data structures, automatic storage management, dynamic typing, conditionals, higher-order functions, recursion, and the self-hosting compiler.
• Scheme, a minimalist design philosophy, lexical scope, first to require tail-call optimization, (one of first to) support first-class continuations
• ML, "LISP with types", Hindley–Milner type system, type inference, pattern matching
7
![Page 8: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/8.jpg)
• Common Lisp, not an implementation, but rather a language specification
• Haskell, standardized, general-purpose purely functional programming language. By 1987, more than a dozen non-strict, purely functional programming languages existed
• Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro system. support for lazy sequences and encourages the principle of immutability and persistent data structures
8
![Page 9: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/9.jpg)
Clojure(Script)
9
![Page 10: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/10.jpg)
10
![Page 11: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/11.jpg)
Clojure• clojure.org, Rich Hickey
• Dynamic, interactive development
• Lisp, code as data, Macro
• Functional, persistent data structure
• Atoms to manage shared, synchronous, independent state
• JVM, CLR, JavaScript
11
![Page 12: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/12.jpg)
– clojurescript.org
“ClojureScript is a compiler for Clojure that targets JavaScript. It emits JavaScript code
which is compatible with the advanced compilation mode of the Google Closure
optimizing compiler.”
12
![Page 13: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/13.jpg)
ClojureScript
Lumo
13
![Page 14: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/14.jpg)
ClojureScript
• https://learnxinyminutes.com/docs/clojure/
• http://cljs.info/cheatsheet/
• https://github.com/clojure-china/cljs-book
• http://www.michielborkent.nl/fpamsclj/fpamsclj.pdf
14
![Page 15: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/15.jpg)
Reactseeing from ClojureScript side
15
![Page 16: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/16.jpg)
•
• Virtual DOM , ,
• Store updater
16
![Page 17: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/17.jpg)
• , ,
• ,
• ,
17
![Page 18: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/18.jpg)
• , CPU
• , ,
• ,
18
![Page 19: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/19.jpg)
• Single Source of Truth
•
•
• : , (reference)
19
![Page 20: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/20.jpg)
•
• , ,
•
• ( )
20
![Page 21: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/21.jpg)
React bad partsseeing form ClojureScript side
21
![Page 22: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/22.jpg)
this.
• this
• this.setState ,
• ES6 class
• (ClojureScript React, OOP)
22
![Page 23: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/23.jpg)
JSX• XHP, ,
• , , ES6
• JSX (route, fetch)
• if/switch
• (ClojureScript S DSL)
23
![Page 24: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/24.jpg)
Babel
• ES2016,
• (200+ ),
• (ClojureScript, Macro )
24
![Page 25: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/25.jpg)
Redux
• …
• Store ?
• (ClojureScript, + watcher)
25
![Page 26: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/26.jpg)
Immutable.js
• API , .
• JavaScript
• (ClojureScript )
26
![Page 27: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/27.jpg)
• React ,
• JavaScript
• (ClojureScript , )
27
![Page 28: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/28.jpg)
React + ClojureScript
• Reagent, 2306+
• Om, 5796+
• Rum, 802+
• Quiescent, 563+
• Respo, 45+
28
![Page 29: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/29.jpg)
Reagent
• http://reagent-project.github.io/
• Reagent provides a minimalistic interface between ClojureScript and React.
29
![Page 30: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/30.jpg)
30
![Page 31: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/31.jpg)
Respo• http://respo.site
• Virtual DOM
• Virtual DOM
• Patching first screen( )
• state tree,
•
• core.async( Rx)
31
![Page 32: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/32.jpg)
ClojureScript
•
• npm ,
• ,
• , WebAssembly
32
![Page 33: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/33.jpg)
...
33
![Page 34: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/34.jpg)
http://www.slideshare.net/speak_io/electron-flux-react
34
![Page 35: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/35.jpg)
– https://www.confluent.io/blog/turning-the-database-inside-out-with-apache-samza/
“Streams everywhere!”
35
![Page 36: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/36.jpg)
36
![Page 37: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/37.jpg)
• , , ,
•
• (Diff/Patch)
• Virtual DOM
37
![Page 38: W React © ClojureScript - os.alipayobjects.com · • Clojure, a general-purpose programming language with an emphasis on functional programming. treats code as data and has a macro](https://reader030.vdocuments.us/reader030/viewer/2022040709/5e0d760f8eb3e5400236f15c/html5/thumbnails/38.jpg)
Questions?
• clojure-china.org
• map.clj.im
• tiye.me
38