ClojureScript in Magento 2 - PHPUGMRN

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

Topic for today:
Frontend Development with
ClojureScript in Magento 2

WTF?!
Why?

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

Don't ﬁght the framework!
We need to GET STUFF DONE!!

I don't want to ﬁght.
But sometimes it feels like
the framework is ﬁghting me.

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.

I would love to love all UI Components.
But it hasn't happened for me.

How do I work with Magento and deliver on time?
Go "headless"?

Consequences of going headless:
* Need to rebuild every feature.
* Incompatible with all extensions
containing frontend functionality.
* Fun but f'ing expensive.

I need to ﬁnd 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.

Options:
* JavaScript
* TypeScript
* ScalaJS
* ClojureScript
* Elm
* PureScript

What is ClojureScript?

LISP
(List + Processor)

Clojure
Hosted Language
  * JVM
  * JavaScript (Browser & Node)
  * CLR
(Clojure, ClojureScript, ClojureCLR)

Clojure
Embraces the host runtime -> interop

Clojure
One thing which seems important at ﬁrst
turns out to be a non-issue:
Parenthesis

PHP
print("Magento")
Clojure
(print "Magento")

But JS haz Objects...!

JavaScript
"Magento".toLowerCase()
// => "magento"
ClojureScript
(.toLowerCase "Magento")
;; => "magento"

JS
console.log("debug");
ClojureScript
(.log js/console "debug")
;; alternative syntactic JS interop sugar
(js/console.log "debug")

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}

Why do we need different data structures?

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

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

Demo

Clojure
* Quick feedback loop
* Lovely developer experience

Clojure
* stable
* 10 years of growth

Clojure
* More Clojure devs than Clojure jobs

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!

Wow, much good, such beneﬁts!
- 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...

Want to dig in?
Clojure for the Brave and True

Thank you!
Questions,
Thoughts,
Ideas?
Demo Source: https://github.com/Vinai/magento-cljs-giftlist

ClojureScript in Magento 2 - PHPUGMRN

More Related Content

Similar to ClojureScript in Magento 2 - PHPUGMRN (20)

More from vinaikopp (15)

Recently uploaded (20)

ClojureScript in Magento 2 - PHPUGMRN