clojurescript vs javascript (es5 & es6)files.meetup.com/10978482/cljs vs es6.pdfall existing...

19
CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6) OLIVER MOONEY GETBULB LIMITED, HTTP://WWW.GETBULB.COM

Upload: others

Post on 06-Jul-2020

21 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)OLIVER MOONEY GETBULB LIMITED, HTTP://WWW.GETBULB.COM

Page 2: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

Only Javascript’s Good Parts

Douglas Crockford’s elegant subset:

Object literals, first class functions & closures, prototyping & dynamic object model…

None of the bad:

poor scope rules, global variables, implicit semi-colon insertion, 6 “falsy” values, odd equality rules…

Page 3: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

ES6Implements features found in languages that ‘transpile’ to Javascript, like Coffeescript

Codifies good practice from Javascript

Usable now in production via a transpiler:

http://babeljs.io requires no additional runtime and offers complete language coverage. Source of ES6 examples here!

Only transpiles to ES5, so ie8 only supports a subset

All existing Javascript code is valid ES6 code, even the duff stuff

Page 4: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

ClojurescriptFull-fat clojure experience in javascript (ES3/5) execution environments

Also transpiler driven, in two stages:

Transforms clojurescript to javascript

Then optimises that javascript via the Google Closure compiler

Dead-code elimination, minification, …

Page 5: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

COMPARISONS

Page 6: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

Philosophical differencesClojurescript controls mutable state, and uses values as the default unit of calculation

Javascript embraces unconstrained state mutation via object-oriented conventions

Not worlds apart: both use first-class functions

Mindset using both is quite different; but clojurescript’s “mental model” when programming is much simpler to reason about

Page 7: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

Function literals

ES5 (none):

ES6:

CLJS:

Page 8: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

Classical OO Models

ES6: classical OO via syntactic sugar, still uses prototype model

CLJS: deftype, defrecord & friends

Page 9: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

Object literalsES5: come with a bunch of hidden prototypes & other properties. JSON.

ES6: can set prototype, foo: foo shorthand, super calls. JSON++

CLJS: no direct analogue since Clojurescript (like Clojure) is not specifically object-oriented

But does offer good OO-interaction

Extensible Data Notation analogue to JSON for serialising types

Page 10: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

Template stringsES5: none

ES6: multiline, interpolated strings

CLJS: All strings are multiline, string interpolation available via strint library

Page 11: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

Destructuring: ES6

Binding using pattern-matching

Fail-soft

Allows defaults

Page 12: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

Destructuring: CLJSDestructure anywhere binding expected

Allows defaults

Much richer: bind entire value, match value patterns like maps, vectors…

Page 13: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

Argument handling

ES6: Rest & Spread

CLJS: Rest, pattern matching, dispatch on arity

Page 14: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

Block scopingES5: variables hoisted to top of function; undeclared vars made global (terrorists win)

ES6: use let instead of var for proper block scoping, const for single-assignment let

CLJS: proper lexical scope

Page 15: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

ModulesES5: No default implementation; external tools like AMD, CommonJS widely used. Competing ecosystems

ES6: Codifies ES5 behaviour

CLJS: namespace macro; ES6 and more

Page 16: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

Also see

CLJS for, doseq & core.async vs ES6 iterators, generators & promises

ES6 Maps, Sets, WeakMaps, WeakSets, Proxies (!) & Symbols

CLJS: Maps, Sets, Vectors, Keywords

Page 17: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

Macros: What ES6/7/… will never offer

Macros. Fundamental brake on rich library creation. See core.logic (Prolog logic programming). Compile-time code manipulation in Clojure.

Page 18: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

Starting points for more

CLJS cheatsheet:http://cljs.info/cheatsheet/

CLJS vs Javascript (ES5) detailed comparison:https://kanaka.github.io/clojurescript/web/synonym.html

Babel’s ES6 tour (thanks for the code samples):https://babeljs.io/docs/learn-es6/

Page 19: CLOJURESCRIPT VS JAVASCRIPT (ES5 & ES6)files.meetup.com/10978482/CLJS vs ES6.pdfAll existing Javascript code is valid ES6 code, even the duff stuff Clojurescript Full-fat clojure

THANK YOUOLIVER MOONEY @OLIVERMOONEY [email protected]