JavaScript: The Past, Present and Future

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

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
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
12. … and this went on for almost 10 years
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!
25. SPA Single-page applications
27. 10/90? 50/50? 70/30?
30. WebSockets Client Server Set up connection
31. JavaScript + I/O Single-threaded, non-blocking
33. Node.js in production?
34. “Assembly language of the web”
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?
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
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
57. ECOSYSTEM the
59. Cryptography API, Audio API, WebRTC, File API …
60. 60fps, but only one thread Web Workers 60fps, but only one thread
62. from mostly huge frameworks to thousands of small libraries
64. Rendering to …
65. WebGL
66. vimeo.com/105880197 javazone webgl
67. React Native
70. APPS the
73. offline first
74. Full-featured online apps
77. Desktop and mobile apps
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
87. Want to learn JS?
90. Takk for meg!