Javascript State of the Union 2015 - English
•
276 likes•46,629 views
The document provides a history of JavaScript and web development from 1950 to 2015. It discusses the evolution of programming languages, computers, processors, companies, browsers, HTML/CSS, JavaScript frameworks, and more. Key developments include the introduction of imperative and functional programming, Ajax and JSON, mobile devices, and modern JavaScript frameworks. The document predicts continued evolution in areas like WebAssembly, isomorphic code, functional programming, and integration of AI and IoT. Overall it traces the massive changes in the field but argues the underlying principles that allow for continued evolution have remained steady.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to Javascript State of the Union 2015 - English
Similar to Javascript State of the Union 2015 - English (20)
More from Huge
More from Huge (20)
Recently uploaded
Recently uploaded (20)
Javascript State of the Union 2015 - English
- 2. Javascript State of the Union Huge September 26th, 2015
- 3. 1. Introduction 2.Where we came from 3.Where we are 4.Where we are going to 5. Conclusion Agenda
- 5. CaioVaccaro. Senior Web Engineer | Huge. Developer Team Lead. NY / RIO. 8 years of experience. Front-End, Back-End, Infrastructure, Continuous integration, trainings. @caiovaccaro /in/caiovaccaro /caiovaccaro
- 8. We make digital products.
- 9. State of the Union.
- 11. 1.Why so many changes? 2.What changed? 3.What doesn’t change? Introduction:
- 13. 1. Imperative Languages. 2. Functional Languages. 3. Computers and gadgets. 4. Processors. 5. Companies. 6. Internet and browsers. 7. HTML/CSS/JS. 8. JS Frameworks. Timeline:
- 14. 1. Imperative Languages. 2. Functional Languages. 3. Computers and gadgets. 4. Processors. 5. Companies. 6. Internet and browsers. 7. HTML/CSS/JS. 8. JS Frameworks. Timeline:
- 16. 1950.
- 19. 1950 Fortran (Imperativa) Fortran (Imperative) Lisp (Funcional) Lisp (Functional) ComputadorComputer
- 22. Programming paradigms 1. Imperative. 2. Functional. 3. Reactive. 4. Object oriented. 5. Event oriented. …
- 26. 1970.
- 29. 1950 M.P.P 1970 Algol Fortran Lisp IBM Xerox Smalltalk (MVC, OOP) Xerox & Apple
- 32. Software architecture 1. MV*. 2. Microservices. 3. Peer-to-peer. 4. Publish-subscribe. 5. Dependency injection. …
- 34. M.P.P Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) C C++
- 35. M.P.P Concorrência 386 Concurrency HTML Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) C C++
- 36. 1990.
- 37. M.P.P Concorrência 386 Concurrency HTML Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) C C++
- 39. Athlon Pentium Pentium IIConcorrência 386 Concorrência 386 Concurrency OOP) 1990 Python Ruby PHP Java (Binding) AMD Yahoo eBay/ Amazon Altavista W3C
- 40. AMD Yahoo eBay/ Amazon Altavista W3C Athlon Pentium Pentium IIConcorrência 386 Concorrência 386 Concurrency 1990 Python Ruby PHP Java (Binding) wwwl SMTP IRC
- 41. AMD Yahoo eBay/ Amazon Altavista W3C Athlon Pentium Pentium IIConcorrência 386 Concorrência 386 Concurrency HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) wwwl SMTP IRC
- 42. wwwl SMTP IRC Athlon Pentium Pentium IIConcorrência 386 Concorrência 386 Concurrency Netscape Apache HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) Javascript
- 43. wwwl SMTP IRC Athlon Pentium Pentium IIConcorrência 386 Concorrência 386 Concurrency Netscape Apache HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) Javascript IE
- 44. 2000.
- 45. wwwl SMTP IRC Athlon Pentium Pentium IIConcorrência 386 Concorrência 386 Concurrency Netscape Apache HTML HTML2 CSS 1990 Python Ruby PHP Java (Binding) Javascript IE
- 47. by PHP Java (Binding) avascript by PHP Java (Binding) avascript Pentium II IE7... ache IEIE 2000
- 48. IE7... ache IEIE hoo eBay/ Amazon Altavista W3C Google Pentium II by PHP Java (Binding) avascript 2000 IE Ajax JSON XHTML
- 49. IE7... ache IEIE hoo eBay/ Amazon Altavista W3C Google by PHP Java (Binding) avascript 2000 Wikipedia Netflix Hotmail Pentium III Pentium 4 Pentium II Ajax JSON XHTML
- 54. Pentium III Pentium 4 Pentium II hoo eBay/ Amazon Altavista W3C Google avascript 2000 Wikipedia Netflix Hotmail Ajax JSON XHTML IE7... ache IEIE
- 55. Pentium III Pentium 4 Pentium II hoo eBay/ Amazon Altavista W3C Google avascript ache IE7... Wikipedia Netflix Hotmail Ajax JSON XHTML 2000 ndows 3.1 iMac I Laptops
- 56. Pentium III Pentium 4 Pentium II hoo eBay/ Amazon Altavista W3C Google avascript ache IE7... Wikipedia Netflix Hotmail Ajax JSON XHTML 2000 ndows 3.1 iMac I Laptops Dual core Quad core
- 57. Pentium III Pentium 4 Pentium II hoo eBay/ Amazon Altavista W3C Google avascript ache IE7... Wikipedia Netflix Hotmail Ajax JSON XHTML 2000 ndows 3.1 iMac I Laptops Dual core Quad core Firefox Chrome
- 58. 2000 Pentium III Pentium 4 Google IE7... Wikipedia Netflix Hotmail Ajax JSON XHTML Mac I Laptops Dual core Quad core Firefox Chrome
- 59. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome
- 61. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome
- 62. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome Facebook Gmail
- 63. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome Facebook Gmail ECMA5 Ajax boom RESTful IE8
- 64. How was the code back then?
- 72. Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google Ajax JSON XHTML IE7... Dual core Quad core Firefox Chrome Facebook Gmail ECMA5 Ajax boom RESTful IE8
- 73. va nding) Node 2000 IE7... Firefox Chrome Dojo Prototype.js IE8 Ajax JSON XHTML ECMA5 Ajax boom RESTful
- 75. Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 IE7... Firefox Chrome Dojo Prototype.js IE8
- 76. Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass
- 78. Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass
- 79. Ajax JSON XHTML ECMA5 Ajax boom RESTful Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass Mac I Laptops iPhone Touch 2 Google Car 2000
- 80. Where we are.
- 81. 2010-15.
- 82. i7, 6 cores 12 threads 2010 2015
- 83. i7, 6 cores 12 threads iPhone iPadSmart TVs 2010 2015
- 84. i7, 6 cores 12 threads iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
- 85. i7, 6 cores 12 threads HTML5 CSS3 ECMA5 Ajax boom RESTful iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
- 86. GUI and “componentization” trend.
- 87. “Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages.” Addy Osmani.
- 88. 1. MV*. 2. Binding. 3. SPA. 4. Desktop/Mobile. GUI
- 90. i7, 6 cores 12 threads HTML5 CSS3 ECMA5 Ajax boom RESTful iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
- 91. i7, 6 cores 12 threads IE9 IE10 IE11 HTML5 CSS3 ECMA5 Ajax boom RESTful ExtJS Processing Mustache Phonegap Angular Stylus Three.js Backbone Knockout Bootstrap Underscore Jasmine Browserify Ember Socket.IO Q lodash TodoMVC Typescript NPM RxJSLess 2010 2015
- 92. i7, 6 cores 12 threads HTML5 CSS3 ax boom ESTful IE9 IE10 IE11 ExtJS Processing Mustache Phonegap Angular Stylus Three.js Backbone Knockout Bootstrap Underscore Jasmine Browserify Ember Socket.IO Q lodash TodoMVC Typescript NPM RxJSLess 2010 2015
- 93. i7, 6 cores 12 threads HTML5 CSS3 ax boom ESTful IE9 IE10 IE11 ExtJS Processing Mustache Phonegap Angular Stylus Three.js Backbone Knockout Bootstrap Underscore Jasmine Browserify Ember Socket.IO Q lodash TodoMVC Typescript NPM RxJSLess 2010 2015 Edge ECMA6 WebAssembly Isomorphic
- 94. HTML5 CSS3 ax boom ESTful IE9 IE10 IE11 ExtJS Processing Mustache Phonegap Angular Stylus Three.js Backbone Knockout Bootstrap Underscore Jasmine Browserify Ember Socket.IO Q lodash TodoMVC Typescript NPM RxJSLess ECMA6 WebAssembly Isomorphic Meteor Momment Drone Webpack Babel Ionic Immutable React Polymer Aurelia bacon.js flow Velocity Maple Relay Angular 2 Cycle.js Riot Haml Jade 2010 2015 Edge
- 95. WTF? What just happened?
- 96. From spaghetti to GUIs. Whereweare
- 97. 1.AJAX. 2. MVC. 3. Binding. 4. Modules. FromspaghettitoGUIs:
- 99. 1. Better experience. 2. Minimum on the Back-End. 3. Independent Back-End. 4. Independent Front-End. Client-side’sbenefits:
- 101. 1.White page. 2. SEO. 3. Can be slow. 4. Duplicated logic. 5. No serious scalability. Client-side’sproblemsbefore2015:
- 102. In 2015.
- 104. 1. Functional reactive programming. 2. Immutable structure. 3. Smarter query languages. Client-sidein2015,apossiblesolution:
- 105. 1.White page. 2. SEO. 3. Can be slow. 4. Duplicated logic. 5. No serious scalability. Client-side’sproblemsbefore2015:
- 106. Where we are going to.
- 108. ES6/ES7/ES8/Macros.
- 110. More Back-End in the Front.
- 113. Functional.
- 115. Web Assembly.
- 116. 2020.
- 117. 2020: • Code on schools. • More than 1 million jobs for programmers. • Cars with AI. • Delivery, transport and military drones. • AI medical diagnosis. • OS with augmented reality. • 3D printing. • Mobile payments. • People and voice recognition. • Robots. • 4 million unemployed drivers.
- 118. 2020: • Elastic search, GraphQL and others new query languages. • Offline apps. • Wearables. • After-React. • IOT, billions of small things connected to the internet. • Military and industrial IOT. • Smart homes. • Jobs and companies driven by AI.
- 119. Unemployment + Drones + AI + IOT + AR
- 120. Conclusion.
- 121. 1.Why so many changes? 2.What changed? 3.What doesn’t change? Conclusion:
- 123. But why so many changes?
- 124. What do we do?
- 125. Humans + Pain + Web = ∞
- 126. 1. Get close to our reality experience. 2. Go beyond. Web:
- 127. We solve problems.
- 133. Computers evolve. If the principles changed there would be no base to evolution.
- 134. Thanks: • João Pagnoncelli. • Rafael Gomes. • Gabriel Godoy. • Kevin Chevallier. • Isabella Silveira. • Douglas Monteiro. • Marcos Rodrigues.
- 135. Sources: • https://en.wikipedia.org/wiki/Moore%27s_law • https://en.wikipedia.org/wiki/Microprocessor_chronology • https://en.wikipedia.org/wiki/Bell%27s_law_of_computer_classes • https://en.wikipedia.org/wiki/Data_binding • https://people.apache.org/~xli/presentations/history_Intel_CPU.pdf • http://www.wolframalpha.com/docs/timeline/computable-knowledge- history-5.html • http://www.wolframalpha.com/docs/timeline/computable-knowledge- history-6.html • https://en.wikipedia.org/wiki/Timeline_of_computing • https://en.wikipedia.org/wiki/History_of_computing_hardware
- 136. Sources: • https://en.wikipedia.org/wiki/Timeline_of_programming_languages • https://medium.com/javascript-scene/get-ready-for-the-future-f4cf7610b985 • http://cdn.oreillystatic.com/news/graphics/prog_lang_poster.pdf • http://www.worldsciencefestival.com/wp-content/uploads/2013/12/A-History-of- Computer-Science.jpg • http://archive.wired.com/images/article/magazine/1701/ff_mac3_f.jpg • http://anddum.com/timeline/timelinepics/inteltimeline.gif • http://brewhouse.io/images/posts/2015/05/frameworks-1-0.png • http://webdesignergeeks.com/wp-content/uploads/2011/08/800px- Web_development_timeline.png • https://farm9.staticflickr.com/8529/8588701778_91aeb65377_o.png
- 137. Sources: • http://www.w3.org/2005/01/timelines/timeline-2500x998.png • http://www.cooscountywatchdog.com/uploads/8/7/3/0/8730508/4030670.jpg? 697 • http://homepages.rpi.edu/home/37/clarkr6/public_html/images2/timeline.jpg • http://images.hardwarecanucks.com/image//skymtl/CPU/INTEL-2014/ INTEL-2014-4.png • http://i.imgur.com/NFysh.png
- 138. Thank you. @caiovaccaro /in/caiovaccaro /caiovaccaro
- 139. September 26th, 2015