Django under the Hood - JavaScript

Speaker: Idan Gazit works at heroku.

Links: ECMAScript 6 Features, leftpad, blog post on tool chains

How to work with modern JS

without missing Python terribly

People think JavaScript is scary, complex and should be avoided. There is less syntactic sugar, there are easily nested callbacks, the culture and ecosystem is … different.

How did we get here?

There was JS used for non-critical stuff. Then Chrome came with V8, the super-fast new shiny engine, which stands aside of Monkey (FF), Squirrelfish (Safari), and Chakra (IE). Packaging is done by hand or bower (etc), and includes via <script> tags or require.js.

Then there is Node: bringing its own engine, and packaging via npm, and including modules by calling require().

JavaScript is officially ECMAScript. For the longest time, since 2009, there was ECMAScript 5 (think Python 2). ECMAScript 6 (ES2015) came in 2015 - it's backwards compatible, with a following yearly release cycle, running through five clearly defined stages, freely available on GitHub for participation.

There is Babel, which can take all features you specify (by feature stage) and can compile it down to ECMAScript 5, which will run without problems in all browsers.

What is here?

Old vs new

  • Requirements
    • Old: var math = require('lib/math');
    • New: import math from 'lib/math' or import * as math from 'lib/math' or import {floor, pi} from 'lib/math'
  • Destructuring, pretty much like unpacking
  • Default arguments
  • Template strings: Hello $(user.name}), and multiline strings via backticks.
  • Inheritance via prototypes: syntax changes from giving __proto__: SomeClass to using extends
  • and much, much, much more (see link on top)

But there are features that are not just syntactic sugar.

  • Arrow functions make everything shorter and more concise - they are similarly terse as a lambda function.
  • Promises are … kind of tamper-proof state machines: Fulfilled or Rejected or Pending.
  • Side note: put a catch at the end of your promise chain
  • Async statements with await coming sooon.

Tooling and culture

  • So much tool churn (see: blog post link up top)
  • Have a npm upgrade day per $interval
  • Hypermodularity is kind of made more bearable by semantic versioning (see: leftpad link up top)
  • NPM client: virtualenv by default
  • Also, there is now yarn which replaces npm (client)
  • No single PEP8, but there is ESLint (with many plugins/rulesets) or StandardJS
    • never start a line with backtick, [ ( then you'll never need a semicolon
  • Typing is, like, not existent
    • Flow (facebook) and TypeScript (Microsoft, overlaps with babel) graft typing onto JS.
  • There is a REPL by node, and also babel-node. RunKit replaces IPython/Jupiter

Frameworks

  • React is similar to Django
  • ember is like rails
  • Angular has two completely different versions
  • There are so many more

Orchestration and Deployment

  • Grunt started out with tasks
  • Gulp came along with sources, filters and sinks
  • Webpack for code and static assets, dependency resolution, loads of features, especially hot module replacement
    • Literally switching out your module for the newer version while it is running

What's next

  • Better APIs
  • Service Workers
  • Be as good as webapps/bring native app feeling to the web