Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript: The Past, Present and Future
Search
Kim Joar Bekkelund
April 17, 2015
Programming
0
110
JavaScript: The Past, Present and Future
An introduction to the role of JavaScript. Given to students at NTNU in Trondheim, Norway.
Kim Joar Bekkelund
April 17, 2015
Tweet
Share
More Decks by Kim Joar Bekkelund
See All by Kim Joar Bekkelund
ASTs in JavaScript
kimjoar
0
98
Writing Beautiful JavaScript Tests
kimjoar
12
2.6k
WebSockets and Server-Sent Events
kimjoar
1
240
Patterns of Large-Scale JavaScript Applications
kimjoar
20
1.5k
Patterns of Large-Scale JavaScript Applications
kimjoar
22
2.3k
Enkle JavaScript-abstraksjoner
kimjoar
1
160
Simple JavaScript Abstractions
kimjoar
9
780
Introduksjon til forretningsmodeller
kimjoar
2
350
Other Decks in Programming
See All in Programming
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
220
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
370
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
プログラマのための作曲入門
cheebow
0
530
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
実践AIチャットボットUI実装入門
syumai
7
2.4k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
300
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
クラシルを支える技術と組織
rakutek
0
190
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
130
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Designing for humans not robots
tammielis
254
25k
The Language of Interfaces
destraynor
162
25k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
A better future with KSS
kneath
239
17k
Balancing Empowerment & Direction
lara
4
680
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Site-Speed That Sticks
csswizardry
11
880
Transcript
JavaScript The Past, Present and Future
Kim Joar Bekkelund @kimjoar
[email protected]
Fagleder i JS-plattform Jobbet i
BEKK siden 2011
None
None
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
None
None
None
… and this went on for almost 10 years
2004
2005
What happened?
What happened?
What happened?
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!
None
None
SPA Single-page applications
None
10/90? 50/50? 70/30?
None
None
WebSockets Client Server Set up connection
JavaScript + I/O Single-threaded, non-blocking
None
Node.js in production?
“Assembly language of the web”
None
# 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?
None
None
None
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
None
<!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
None
ECOSYSTEM the
None
Cryptography API, Audio API, WebRTC, File API …
60fps, but only one thread Web Workers 60fps, but only
one thread
None
from mostly huge frameworks to thousands of small libraries
None
Rendering to …
WebGL
vimeo.com/105880197 javazone webgl
React Native
None
None
APPS the
None
None
offline first
Full-featured online apps
None
None
Desktop and mobile apps
None
chrome os, windows 8, firefox os JavaScript as a first-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
None
Want to learn JS?
None
None
Takk for meg!