Javascript: State of the Union


Jordi Boggiano
@seldaek

Language specification

Libraries

JS Languages

Building projects

Upcoming features

Language Specification



Ecma

Since 1961 and continuing in full force today, Ecma International®facilitates the timely creation of a wide range of global Information and Communications Technology (ICT) and Consumer Electronics (CE) standards

Ecma

TC39 / Technical Committee 39

Standardization of the general purpose, cross platform, vendor-neutral programming language ECMAScript.

ECMAScript = ES = JavaScript

ES Versions

ES5 (2009)

ES6 > ES2015

ES7 > ES2016

ES8 > ES2017

ES5

strict mode, getters/setters, JSON support

ES2015

classes/modules


export default class Foo { ... }
import Foo from './file'
                

export class Foo { ... }
import { Foo } from './file'
                

ES2015

Better object literals

{
    foo,
    [var + '_foo']: 321
}
                

ES2015

fat arrow functions

someData.map((item) => item.key)

someData.map((item) => {
    return item.key;
})
                

ES2015

rest/spread operator

function foo(arg, ...rest) {
    forward(...rest) // = forward(rest[0], rest[1], rest[2], rest[3], etc)
}
                

ES2015

object/array destructuring

function foo({bar}) {
    // bar = 1
}

let obj = {
    bar: 1,
    baz: 2,
};

foo(obj);
                

ES2015

generator functions

let/const

promises

String.includes()

Array.map/.filter/.forEach/.find/.every/.some

`Template ${string}s`

argument defaults: function (foo = "default") {}

collections, typed arrays, binary data, ..

ES2016

Array.includes(), **, internal cleanups

ES2017

await/async

Libraries

YAT & JS fatigue

Millions of frameworks, libraries, tools, ...

"JS Fatigue happens when people use tools they don't need to solve problems they don't have."

YAT & JS fatigue

No need to use ALL the things

Understand what tools do and use those fixing problems you have

Frameworks?

Just use React

Declarative programming, very PHP-y

Minimalistic, quick to get started

Read the docs, twice

React Resources

Create React App

React Tutorial

React Fundamentals

Higher Order Components in React

Languages

ClojureScript, Elm, CoffeeScript, TypeScript, Flow, ..

Just use TypeScript

TypeScript

Pure JS / ES2017 + types

Static analysis / compile time errors

Great for refactoring

Set noImplicitAny + convert all files

Supports JSX / React

15+% bug reduction (study)

Building Projects

Grunt, Gulp, Webpack, ...

PostCSS + Babel

Pluggable language toolchains

CSS / SASS

Use browserlist + CSS autoprefixer
to avoid -css-prefixes

Babel

browserlist + babel-preset-env to code to latest ES specification

Downcompile to least common denominator browser

jQuery, lodash, underscore.js, ...

(Mostly) Not needed anymore

Use native ES functionality and shrink your code as browsers adopt

Babel + core-js polyfills as needed

$.each() / _.forEach / ...

array.forEach((item) => {
    item.something();
});

Object.keys(obj).forEach((key) => {
    obj[key].something();
});
                

$('.foo').addClass/removeClass

document.querySelector('.foo')
    .classList.add('foo');
                

DOMElement.classList has add/remove/contains/toggle/replace

Use module loading to reduce size

<script type="module" src="es2015.js"></script>
<script type="text/javascript" src="legacy.js"></script>
                

Details at https://philipwalton.com/articles/deploying-es2015-code-in-production-today/

What's next?

Prepack

Facebook-built compile time optimizations, still pre-release

Web Assembly

Successor of asm.js, Google's NaCl. Standardized JS bytecode

Web Components

<template> + shadow DOM + custom elements + imports

Polymer polyfills available

No more framework-bound component libs

Regex Improvements

Lookbehinds, dotall, ..

Private Class Properties

#prop syntax looks like PHP's \

Promise.finally

Resources

Kangax's compatibility table (includes Babel/TypeScript)
kangax.github.io/compat-table/

Can I use? caniuse.com

Thank you.

Questions?

@seldaek

slides.seld.be

Feedback

joind.in/talk/896c0