JavaScript: The Past, Present and Future

JavaScript The Past, Present and Future

Kim Joar Bekkelund @kimjoar [email protected] Fagleder i JS-plattform Jobbet i
BEKK siden 2011

It all started at 1995

Brendan Eich + 10 days = JavaScript

What did we do with this new language? (You really
don't want to know)

CUT & PASTE

… and this went on for almost 10 years

What happened?

JavaScript went from nothing to …

"any application that can be written in JavaScript, will eventually
be written in JavaScript." Atwood's Law

JavaScript Where are we now?

We expect more!

SPA Single-page applications

10/90? 50/50? 70/30?

WebSockets Client Server Set up connection

JavaScript + I/O Single-threaded, non-blocking

Node.js in production?

“Assembly language of the web”

# Assignment: number = 42 opposite = true # Conditions:
number = -42 if opposite # Functions: square = (x) -> x * x # Arrays: list = [1, 2, 3, 4, 5] # Objects: math = root: Math.sqrt square: square cube: (x) -> x * square x Inspired by Ruby and Python Several features will be added to the next JS version

class Point { x: number; y: number; constructor(x: number, y:
number) { this.x = x; this.y = y; } getDist() { return Math.sqrt( this.x * this.x + this.y * this.y ); } } var p = new Point(3,4); var dist = p.getDst(); console.log("Hypotenuse is: " + dist); Optional static typing. Superset of JS.

data Person = Person { name :: String, age ::
Number } showPerson :: Person -> String showPerson (Person o) = o.name ++ ", aged " ++ show o.age examplePerson :: Person examplePerson = Person { name: "Bonnie", age: 26 } Inspired by Haskell

(ns example (:require [om.core :as om] [om.dom :as dom])) (defn
widget [data owner] (reify om/IRender (render [this] (dom/h1 nil (:text data))))) (om/root widget {:text "Hello world!"} {:target (. js/document (getElementById "my-app"))}) A Lisp for the browser

asm.js Speeding up compiled languages

asm.js Speeding up compiled languages "an extraordinarily optimizable, low-level subset
of JavaScript"

C/C++ -> LLVM -> Emscripten -> asm.js

int f(int i) { return i + 1; } C
function f(i) { i = i|0; return (i + 1)|0; } asm.js

But what happens when you can run C and C++
code in the browser?

millions of lines of C compiled to asm.js/JavaScript running in
a browser !

JavaScript The future

language, apps, ecosystem, VM

LANGUAGE the

ES1 1997 ES2 1998 ES3 1999 ES4 Abandoned ES5 2009
ES6 2015 ES7 est. 2016

Adjustments based on real-world problems

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Datainn</title>
<meta name="description" content=""> <meta name="viewport" content="width=device-width"> <script src="../shared/vendor/proj4js/proj4js-compressed.js"></scr <script src="../shared/vendor/bower_components/underscore/undersco <script src="../shared/vendor/bower_components/jquery/jquery.min.j <script src="../shared/vendor/bower_components/spin.js/spin.js"></ <script src="../shared/vendor/bower_components/angular/angular.js" <script src="../shared/vendor/bower_components/angular-route/angul <script src="../shared/vendor/bower_components/angular-animate/ang <script src="../shared/vendor/bower_components/ng-table/ng-table.j <script src="../shared/vendor/bower_components/moment/moment.js">< <script src="../shared/vendor/bower_components/moment/lang/nb.js"> <script src="../shared/vendor/bower_components/based-on/index.js"> <script src="../shared/vendor/bower_components/poller.js/poller.js <script src="../shared/vendor/bower_components/ee.js/ee.js"></scri <script src="../shared/vendor/bower_components/d3/d3.js"></script> <script src="../shared/vendor/bower_components/nvd3/nv.d3.js"></sc

ECOSYSTEM the

Cryptography API, Audio API, WebRTC, File API …

60fps, but only one thread Web Workers 60fps, but only
one thread

from mostly huge frameworks to thousands of small libraries

Rendering to …

vimeo.com/105880197 javazone webgl

React Native

APPS the

offline ﬁrst

Full-featured online apps

Desktop and mobile apps

chrome os, windows 8, ﬁrefox os JavaScript as a ﬁrst-class
citizen

We will see more of the backend developers on the
frontend … and that's a great thing!

VM the

Browser = rendering engine + JavaScript engine

Chakra SpiderMonkey JavaScriptCore V8 Nashorn

Super-competitive market Push for new features and better performance

2/3 of native speed on benchmarks emscripten + asm.js

Want to learn JS?

Takk for meg!

JavaScript: The Past, Present and Future

JavaScript: The Past, Present and Future

More Decks by Kim Joar Bekkelund

Other Decks in Programming

Featured

Transcript