Django under the hood: modern javascript - Idan Gazit¶

How did we get here?¶

Originally, javascript saw limited use to put snow on your screen during christmas time and some form validation. Then came google with a super-fast javascript engine, V8. Node (=server side javascript) is basically the V8 engine with some libraries.

So you have the browser world and the node world. Packaging for the browser is by hand or with bower and so. Packaging for node is done with “npm”.

For a long time, “ecmascript 5” was the main javascript. A bit like python 2. Everybody supported it. in 2015 there finally came a new, improved version: “ES6”, “ecmascript 6”. They’ve now decided to bring out a new version every year! The process is transparent, a bit like pep8, and all on github.

ES6 can be used safely, all modern browser support almost everything. It is not bleeding edge.

Fortunately, there’s Babel is a transformer that converts any modern javascript version to ES5. Most of the new features are syntactic sugar anyway.

Javascript can be pretty, too¶

What is it that makes modern javascript friendlier and easier and cleaner?

• Modules. No more var math = require('lib/math'). Now you can use import math from 'lib/math'.

• You now have default arguments to functions.

• Template strings! Multiline strings!

• Prototype based inheritance is still weird, but the way you write it in ES6 makes much more sense and is actually readable.

• Actually, there is a real class keyword that works like you expect it to.

• A huge problem is javascript’s this. Where python’s self is clear, this can mean various things in various places based on who asks for it. The new ES6 => syntax helps here.

• Promises. A solution for the callback hell. “then/catch”. If a promise, which would normally be a callback, is resolved, the “then” parts are handled. If the promise fails, the “catch” will be invoked. It makes it much easier to reason about then regular callbacks.

Tooling and culture¶

So… the core language is now nicer. What also improved: the tooling. Every week the tools you should use change. Best practice from 4 months ago is ridiculed as out-of-date today. It is a cambrian explosion.

The upside: lots of nice experiments are done. Lots of nice stuff comes out of those experiments.

And… you don’t need to use the latest library just because it is mentioned on hackernews!

And you don’t need to update your npm packages every day. He updates it once per month on a specific “npm update day”. It does also take a day, btw.

A problem: hypermodularity. On the other hand: it takes unix’ “a tool should do only one thing” to its logical extreme.

Everybody applauded when Idan named and thanked Donald Stufft for his work on python’s packaging infrastructure that works very nice.

Look at yarn. If you see NPM as “easy_install”, yarn is “pip”.

Also use ESlint to check your code and warn about formatting problems. You can also use “StandardJS”. So set it up in your editor and on your testing machine.

On a scale form “strongly typed” to “loosely typed”, javascript is even further off from the spectrum… That breeds a lots of bugs. You could look at static typing: “flow” and “typescript” are two tools you can use.

If you want something like ipython/jupyter: look at https://runkit.com/home

Frameworks¶

React tastes like Django. And it has the clearest mental model of all the front end frameworks.

Ember tastes like Rails. He likes it less. There is a lot of convention instead of configuration.

Angular: he hasn’t done any work with it. There are two versions, angular and angular2. They are completely different animals. Completely incompatible.

There are lots and lots more.

Orchestration and deployment¶

Modularity invites a wealth of tooling, but you don’t want to run separate tools all the time to package it all up. So tools like “grunt” and “gulp” came along.

Webpack is rapidly becoming the dominant tool in this area. It not only knows how to deal with javascript, but also css and images. So code and static assets. Asset hashing. Dependency resolution. Loaders and plugins. Bundle splitting. “Tree shaking”: automatically excluding everything from your codebase that you don’t actually use.

The nicest thing about modern javascript (and webpack) is hot module replacement. You can now reload entire parts of your running application without losing state. He loves it. Setting up webpack can be a bit of a pain, but it is well worth the effort.

Closing comments¶

With modern javascript, you might not feel completely at home yet, but there’s no need to fear it or to feel completely out of place. There’s lots of of fun to be had.

Photo explanation: this is a railway crossing in a currently unused railway (“Eifelquerbahn” near Uersfeld in Germany). But the old tracks are still there and the automatic railway crossing mechanism will undoubtedly still work. Very robust stuff and still in daily use in many places. You can do wonders with the modern internet and with javascript, but what is the lifespan compared to this 50 year old perfectly functioning rail safety equipment?