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.

ClojureScript in Magento 2 - PHPUGMRN

352 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

ClojureScript in Magento 2 - PHPUGMRN

  1. 1. ClojureScript in Magento 2
  2. 2. /me Freelance Developer & Consultant Web Developer since 1997 Magento since 2008 ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  3. 3. Topic for today: Frontend Development with ClojureScript in Magento 2 ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  4. 4. WTF?! Why? ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  5. 5. 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
  6. 6. Don't fight the framework! We need to GET STUFF DONE!! ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. How do I work with Magento and deliver on time? Go "headless"? ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  11. 11. 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
  12. 12. 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
  13. 13. Options: * JavaScript * TypeScript * ScalaJS * ClojureScript * Elm * PureScript ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  14. 14. What is ClojureScript? ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  15. 15. LISP (List + Processor) ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  16. 16. Clojure Hosted Language   * JVM   * JavaScript (Browser & Node)   * CLR (Clojure, ClojureScript, ClojureCLR) ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  17. 17. Clojure Embraces the host runtime -> interop ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  18. 18. 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
  19. 19. PHP print("Magento") Clojure (print "Magento") ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  20. 20. But JS haz Objects...! ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  21. 21. JavaScript "Magento".toLowerCase() // => "magento" ClojureScript (.toLowerCase "Magento") ;; => "magento" ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  22. 22. 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
  23. 23. 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
  24. 24. Why do we need different data structures? ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  25. 25. 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
  26. 26. 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
  27. 27. Demo ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  28. 28. Clojure * Quick feedback loop * Lovely developer experience ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  29. 29. Clojure * stable * 10 years of growth ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  30. 30. Clojure * More Clojure devs than Clojure jobs ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  31. 31. 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
  32. 32. 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
  33. 33. Want to dig in? Clojure for the Brave and True ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22
  34. 34. Thank you! Questions, Thoughts, Ideas? Demo Source: https://github.com/Vinai/magento-cljs-giftlist ClojureScript in Magento 2 - (c) @VinaiKopp - #PHPUGMRN - 2018-02-22

×