A quick overview over integrating ClojureScript into the existing Magento 2 frontend. This allows for a better developer experience compared to the default frontend components.

1. ClojureScript in
Magento 2

2. /me
Freelance Developer & Consultant
Web Developer since 1997
Magento since 2008
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

4. Topic for today:
Frontend Development with
ClojureScript in Magento 2
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

5. WTF?!
Why?
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

6. Magento 2 has a "sophisticated" frontend architecture.
$ find vendor/magento/*/view/ -name '*.js' | xargs wc -l
.
.
.
43 vendor/magento/module-user/view//adminhtml/web/app-config.js
159 vendor/magento/module-weee/view//base/web/js/price/adjustment.js
240 vendor/magento/module-wishlist/view//frontend/web/js/wishlist.js
110823 total
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

7. Don't fight the framework!
We need to GET STUFF DONE!!
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

8. I don't want to fight.
But sometimes it feels like
the framework is fighting me.
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

9. As an eCommerce developer,
I want to build sites with Magento,
without being frustrated
by tangled UI Components,
so I can deliver work on time.
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

10. I would love to love all UI Components.
But it hasn't happened for me.
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

11. How do I work with Magento and deliver on time?
Go "headless"?
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

12. Consequences of going headless:
* Need to rebuild every feature.
* Incompatible with all extensions
containing frontend functionality.
* Fun but f'ing expensive.
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

13. I need to find a tool that allows me to
* Use Magento as much as possible.
* Selectively rebuild the parts
that I do not want to work with.
* Make the choice on a case-by-case basis.
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

14. Options:
* JavaScript
* TypeScript
* ScalaJS
* ClojureScript
* Elm
* PureScript
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

15. What is ClojureScript?
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

16. LISP
(List + Processor)
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

17. Clojure
Hosted Language
* JVM
* JavaScript (Browser & Node)
* CLR
(Clojure, ClojureScript, ClojureCLR)
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

18. Clojure
Embraces the host runtime -> interop
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

19. Clojure
One thing which seems important at first
turns out to be a non-issue:
Parenthesis
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

20. PHP
print("Magento")
Clojure
(print "Magento")
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

21. But JS haz Objects...!
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

22. JavaScript
"Magento".toLowerCase()
// => "magento"
ClojureScript
(.toLowerCase "Magento")
;; => "magento"
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

23. JS
console.log("debug");
ClojureScript
(.log js/console "debug")
;; alternative syntactic JS interop sugar
(js/console.log "debug")
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

24. Core Data Structures
PHP JS Clojure
Array [1, 2, 3] [1, 2, 3] [1 2 3]
List [1, 2, 3] [1, 2, 3] (1 2 3)
Map ['foo' => 'bar'] {foo: 'bar'} {:foo "bar"}
Set new
DsSet([2,
42, 5)
new Set([2,
42, 5])
#{2 42 5}
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

25. Why do we need different data structures?
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

26. Language guaranteed characteristics
For example:
Vectors: indexed access O(1),
cheap to grow at end
(def my-vec [4 5 6 2 12 42 33 4 5 1 5])
(get my-vec 5) => 42
Lists: indexed access O(n),
cheap to grow at front
(def my-list (range 100))
(nth my-list 34) => 34
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

27. CLJS in Magento
* In Magento module:
compiled to view/frontend/web/js/
* In Magento base dir:
compiled to pub/js/
* The <script src="..."> tag
needs to precede requirejs
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

28. Demo
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

29. Clojure
* Quick feedback loop
* Lovely developer experience
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

30. Clojure
* stable
* 10 years of growth
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

31. Clojure
* More Clojure devs than Clojure jobs
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

32. So many good ideas in ClojureScript...
I want talk about all of them!
That would take days...
But I can't just leave them out!
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

33. Wow, much good, such benefits!
- Immutability by default
- Large consistent core library
- Google Closure Compiler Inlining and Dead Code Elimination
- Dead Code Elimination also for external node modules
- Closure Spec
- Great concurrency story
- React Native
- GCC module splitting and cross module code motion
- Direct access to the giant JavaScript and Java library ecosystem
- Great testing story
- Modern frontend architecture
- Podcasts, YouTube Channels, International Conferences
- User groups and workshops
- Very cool people and projects to be inspired by
- And much more...
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

34. Want to dig in?
Clojure for the Brave and True
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

35. Thank you!
Questions,
Thoughts,
Ideas?
Demo Source: https://github.com/Vinai/magento-cljs-giftlist
ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22