JavaScript
Dialects
Anton Yan, 2016
Frontend
=
JavaScript
Browsers
Standards
94 95 96 97 98 99 ...dark ages...
ES1
ES2
ES3
LiveScript
JavaScript
AJAX
JSON
5
6
Prehistoric JS
Browsers & Engines
Standards
04 05 06 07 08 09 10 11 12 13
ES5
"Harmony / ES.Next / ES6"
Medieval JS
TypeScript, ...
Common.js
TC39
ES3 vs ES5
- "use strict"; eliminating "Bad parts"
- new Array methods: filter, map, reduce, etc...
- new Object methods
- JSON (de)serialisation
See presentation "Ecmascript 5, The New Parts" by Doug Crockford
1999 2009
Ecma’s Technical Committee 39 (TC39): maintains the ECMAScript language standard (and more). Members of the committee are all major browser vendors and other companies interested in the web. Those companies send delegates to meetings which are also attended by invited experts.
JS Ecosystem
Standards
2014 15 16 17
ES2015
Modern JS
ES2016
ES2017
aka ES6
aka ES7
Transpile:
Babel
Traceur
ClojureScript
Task run:
Grunt
Gulp
Testing:
Mocha
Jasmine
etc...
Platforms:
CLI, Desktop
Backend
Mobile
Packages:
Bower
NPM (337k)
new spec every year
ES5 vs ES2015 (ES6)
- object literal
- destruction
- spread operator
- arrow functions
- default params
- classes
- template string
- block scoped variables
- generators
- collections
- modules
- promises
Were in CoffeeScript since ~2011,
In Babel since 2014, now in all
major browsers natively
2009 2015
Chrome
09 10 11 12 13 14 15 16 17
ES5 & ES2015 Support
Firefox
IE/Edge
iOS Safari
Node.js
ES2015
ES5
83% 100%
61% 83% 93%
ES2015
ES5
ES5
ES2015
25% 57% 89% 97%
34% 67% 74% 92%
ES2015
54% 100%
21% 52% 97%
drop ES3 support
ES2015 spec
ES2015
ES5
Today
ES5 spec
ES2016
- ** operator
- Array.prototype.includes
ES2017, ES2018, ...
All the proposals should pass 4 stages to get into spec. Once a year all proposals reached stage 4 becomes part of new standard.
But you can try out or even use in production lots of experimental features through transpilers (Babel).
Some of the things in here might not look like JavaScript to you. Don't panic. This is the future.
Getting started with React Native
Current stateof.js
Survey for over 9000 devs
Depending on who you ask, right now JavaScript is either turning into a modern, reliable language, or a bloated, overly complex dependency hell. Or maybe both?
- ES6 is the new standard.
- CoffeeScript is past its prime.
- A new wave of JavaScript flavors is coming.
Dialects
Babel
Transpile all the things
- There's ecosystem of plugins which implement lots of features both official and unofficial.
- Plugins are bundled into presets like babel-preset-2015 to transpile ES2015 code into ES5.
- Or preset babel-preset-stage-0 to play with every single current proposal in TC39.
- And also there are plugins for crazy stuff like JSX or CSS.
- You can combine different plugins and presets.
- Try it out on REPL
Babel
There are smart presets for Node to transpile only things that are not yet implemented in current version of Node.
Or when you decide to drop ES5 support at the moment all your clients will support ES2015, you can remove Babel or leave just plugins you need from ES2016+.
It is vendor lock to some extent, but not as big as with other dialects.
Coffee
Ruby & Python awesomness
- Coffee was amazing in 2010, lot of its features became parts of ES2015 and now implemented in browsers.
- There were no major feature updates for some years. Last gem release was April 2015 and last js version release was in August 2015.
- REPL ("Try Coffeescript" button)
TypeScript
C# flavour
- Popular in Angular (enterprise) world.
- TypeScript a strict super-set of JavaScript, which adds optional static typing and class-based object-oriented programming aligned with ES2015 standard. It is compiled down to an idiomatic JavaScript and does not require any kind of runtime library to support it.
- Provides types (for variables and function results), classes and modules.
- REPL
Elm
Functional & Reactive
- Influenced by Haskell, OCaml, F# and others.
- Immutability, static types, time travel debugger.
- "No runtime exceptions in practice" made possible by the Elm compiler's static type checking.
- Best option to go hard on FP in frontend.
ClosureScript
For LISP lovers
Why you need ES6+
First of all it's beautiful :)
- It's finally supported by all major browsers and node.
- There are tons of libraries, modules and awesome tools available to just plug and play with. Most of the new ones written with and for ES6 use.
- It is now basic requirement for frontend job :)
- And it is not so hard, go learn es6-features.org
Questions?
Why frontend is hard?
- Unpredicted environment
hardware: cpu, gpu, ram, connection may differ 100x
software: os, browser, settings, extensions
viewer and input: screen, body, input devices
- 100ms delay means loosing money, 1s is loosing clients
- Small, not oriented to "apps" core APIs, DOM is slow
- everything is async and event-based
- 16ms to get work done for smooth experience
- JS ecosystem is awesome and terrible :)
JavaScript Dialects
By Ante Jan
