JavaScript: The Past, Present and Future

6c51c14716e24bc1f1a3fb5ad234e773?s=47 Kim Joar Bekkelund
April 17, 2015
Programming
0
4

JavaScript: The Past, Present and Future

An introduction to the role of JavaScript. Given to students at NTNU in Trondheim, Norway.

6c51c14716e24bc1f1a3fb5ad234e773?s=128

Kim Joar Bekkelund

April 17, 2015
Tweet

More Decks by Kim Joar Bekkelund

See All by Kim Joar Bekkelund
6c51c14716e24bc1f1a3fb5ad234e773?s=48 kimjoar
0
26
6c51c14716e24bc1f1a3fb5ad234e773?s=48 kimjoar
12
1.9k
6c51c14716e24bc1f1a3fb5ad234e773?s=48 kimjoar
1
140
6c51c14716e24bc1f1a3fb5ad234e773?s=48 kimjoar
20
1.3k
6c51c14716e24bc1f1a3fb5ad234e773?s=48 kimjoar
22
1.9k
6c51c14716e24bc1f1a3fb5ad234e773?s=48 kimjoar
1
130
6c51c14716e24bc1f1a3fb5ad234e773?s=48 kimjoar
9
730
6c51c14716e24bc1f1a3fb5ad234e773?s=48 kimjoar
2
200

Other Decks in Programming

See All in Programming
93775dfd8e4f0078d4b724a622d734d7?s=48 sandrag
1
310
439ebe4787a98881df8a59d41baf4a43?s=48 ra1028
8
220
85caff7f89434c74e9c6b4287d3c8e05?s=48 yoseiyamagishi
2
110
A4d1023b1de7890c67a083d14573882d?s=48 ktgrstsh
1
470
47c092e185020f83fcb35e3ed998ca0e?s=48 leocavalcante
2
200
Dcc589548f0372645aaeb95bda8e22c2?s=48 cpp
39
18k
D3be793aaf76ed1915295001712ce0f1?s=48 jrfk
0
1.6k
0ea7f61aec8fee539be0cf39b7bab77c?s=48 eregon
0
650
Fd3442482c4a9b2d2353448a6e379823?s=48 matsu_chara
2
340
9ec05c5a1b9b0ce9cd53ec3a63838b9a?s=48 yuuu
2
170
55517518e318b28906211d115c24208b?s=48 clyang
0
530
Cc8ec9594b83b5dc3c7eef345c05dc8d?s=48 shiz
9
650

Featured

See All Featured
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
70
3.5k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
366
42k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
230
770k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
236
23k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
4
490
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
274
31k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
9.9k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
228
17k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.5k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k

Transcript

  1. JavaScript The Past, Present and Future

  2. Kim Joar Bekkelund @kimjoar kim.bekkelund@bekk.no Fagleder i JS-plattform Jobbet i

    BEKK siden 2011
  3. None
  4. None

  5. It all started at 1995

  6. Brendan Eich + 10 days = JavaScript

  7. What did we do with this new language? (You really

    don't want to know)

  8. CUT & PASTE

  9. None
  10. None
  11. None

  12. … and this went on for almost 10 years

  13. 2004

  14. 2005

  15. What happened?

  16. What happened?

  17. What happened?

  18. What happened?

  19. JavaScript went from nothing to …

  20. "any application that can be written in JavaScript, will eventually

    be written in JavaScript." Atwood's Law

  21. JavaScript Where are we now?

  22. We expect more!

  23. None
  24. None

  25. SPA Single-page applications

  26. None

  27. 10/90? 50/50? 70/30?

  28. None
  29. None

  30. WebSockets Client Server Set up connection

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

  32. None

  33. Node.js in production?

  34. “Assembly language of the web”

  35. None

  36. # 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

  37. 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.

  38. 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

  39. (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

  40. asm.js Speeding up compiled languages

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

    of JavaScript"

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

  43. int f(int i) { return i + 1; } C

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

  44. But what happens when you can run C and C++

    code in the browser?
  45. None
  46. None
  47. None

  48. millions of lines of C compiled to asm.js/JavaScript running in

    a browser !

  49. JavaScript The future

  50. language, apps, ecosystem, VM

  51. LANGUAGE the

  52. ES1 1997 ES2 1998 ES3 1999 ES4 Abandoned ES5 2009

    ES6 2015 ES7 est. 2016

  53. Adjustments based on real-world problems

  54. None

  55. <!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
  56. None

  57. ECOSYSTEM the

  58. None

  59. Cryptography API, Audio API, WebRTC, File API …

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

    one thread
  61. None

  62. from mostly huge frameworks to thousands of small libraries

  63. None

  64. Rendering to …

  65. WebGL

  66. vimeo.com/105880197 javazone webgl

  67. React Native

  68. None
  69. None

  70. APPS the

  71. None
  72. None

  73. offline first

  74. Full-featured online apps

  75. None
  76. None

  77. Desktop and mobile apps

  78. None

  79. chrome os, windows 8, firefox os JavaScript as a first-class

    citizen

  80. We will see more of the backend developers on the

    frontend … and that's a great thing!

  81. VM the

  82. Browser = rendering engine + JavaScript engine

  83. Chakra SpiderMonkey JavaScriptCore V8 Nashorn

  84. Super-competitive market Push for new features and better performance

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

  86. None

  87. Want to learn JS?

  88. None
  89. None

  90. Takk for meg!