Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript State of the Union 2015 - English

39,490 views

Published on

Where we are, as Front-End developers? This presentation navigates a short timeline of the computer science focusing on the client-side development as a mean to answer why and what has changed, as well as explore patterns and tendencies for the near future.

English article: https://medium.com/@caiovaccaro/javascript-state-of-the-union-2015-part-1-7ccff74813fa#.8x9y48ohk

Published in: Software, Technology
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • feeling happy
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Javascript State of the Union 2015 - English

  1. 1. September 26th, 2015
  2. 2. Javascript State of the Union Huge September 26th, 2015
  3. 3. 1. Introduction
 2.Where we came from
 3.Where we are
 4.Where we are going to 5. Conclusion Agenda
  4. 4. Introduction.
  5. 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
  6. 6. We make digital products.
  7. 7. State of the Union.
  8. 8. 
 1.Why so many changes? 2.What changed? 3.What doesn’t change? Introduction:
  9. 9. Timeline. Introduction
  10. 10. 
 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:
  11. 11. 
 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:
  12. 12. Where we came from.
  13. 13. 1950.
  14. 14. 1950 Fortran (Imperativa) Fortran (Imperative)
  15. 15. 1950 Fortran (Imperativa) Fortran (Imperative) ComputadorComputer
  16. 16. 1950 Fortran (Imperativa) Fortran (Imperative) Lisp (Funcional) Lisp (Functional) ComputadorComputer
  17. 17. 1950 IBM Fortran (Imperativa) Fortran (Imperative) Lisp (Funcional) Lisp (Functional) ComputadorComputer
  18. 18. Programming paradigms
 1. Imperative. 2. Functional. 3. Reactive. 4. Object oriented. 5. Event oriented. …
  19. 19. 1950 IBM Fortran (Imperativa) Fortran (Imperative) Lisp (Funcional) Lisp (Functional) ComputadorComputer
  20. 20. 1950 Lisp (Funcional) Lisp (Functional) Fortran (Imperativa) Fortran (Imperative)
  21. 21. 1950 Lisp (Funcional) Lisp (Functional) Algol Fortran (Imperativa) Fortran (Imperative)
  22. 22. 1970.
  23. 23. 1950 M.P.P 1970 Algol Fortran Lisp
  24. 24. 1950 M.P.P 1970 Algol Fortran Lisp
  25. 25. 1950 M.P.P 1970 Algol Fortran Lisp IBM Xerox Smalltalk (MVC, OOP) Xerox & Apple
  26. 26. 1950 M.P.P 1970 Algol Fortran Lisp Smalltalk (MVC, OOP)
  27. 27. Software architecture
 1. MV*. 2. Microservices. 3. Peer-to-peer. 4. Publish-subscribe. 5. Dependency injection. …
  28. 28. 1950 M.P.P 1970 Algol Fortran Lisp Smalltalk (MVC, OOP)
  29. 29. M.P.P Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) C C++
  30. 30. M.P.P Concorrência 386 Concurrency HTML Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) C C++
  31. 31. 1990.
  32. 32. M.P.P Concorrência 386 Concurrency HTML Lisp Scheme Haskell 1950 1970 Algol Fortran Smalltalk (MVC, OOP) C C++
  33. 33. Concorrência 386 Concurrency HTML me Haskell OOP) 1990
  34. 34. Athlon Pentium Pentium IIConcorrência 386 Concorrência 386 Concurrency OOP) 1990 Python Ruby PHP Java (Binding) AMD Yahoo eBay/ Amazon Altavista W3C
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 2000.
  40. 40. 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
  41. 41. Pentium II ache by PHP Java (Binding) avascript IE 2000
  42. 42. by PHP Java (Binding) avascript by PHP Java (Binding) avascript Pentium II IE7... ache IEIE 2000
  43. 43. IE7... ache IEIE hoo eBay/ Amazon Altavista W3C Google Pentium II by PHP Java (Binding) avascript 2000 IE Ajax JSON XHTML
  44. 44. 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
  45. 45. “Front-end” was almost declarative.
  46. 46. Pentium III Pentium 4 Pentium II hoo eBay/ Amazon Altavista W3C Google avascript 2000 Wikipedia Netflix Hotmail Ajax JSON XHTML IE7... ache IEIE
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. 2000 Pentium III Pentium 4 Google IE7... Wikipedia Netflix Hotmail Ajax JSON XHTML Mac I Laptops Dual core Quad core Firefox Chrome
  51. 51. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome
  52. 52. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome
  53. 53. Ajax JSON XHTML Wikipedia Netflix Hotmail 2000 Dojo Prototype.js Pentium III Pentium 4 Google IE7... Dual core Quad core Firefox Chrome Facebook Gmail
  54. 54. 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
  55. 55. How was the code back then?
  56. 56. 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
  57. 57. va nding) Node 2000 IE7... Firefox Chrome Dojo Prototype.js IE8 Ajax JSON XHTML ECMA5 Ajax boom RESTful
  58. 58. Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 IE7... Firefox Chrome Dojo Prototype.js IE8
  59. 59. Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass
  60. 60. Ajax JSON XHTML ECMA5 Ajax boom RESTful va nding) Node 2000 Dojo Prototype.js YUI jQuery mooTools CoffeeScript JavascriptMVC Sass
  61. 61. 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
  62. 62. Where we are.
  63. 63. 2010-15.
  64. 64. i7, 6 cores 12 threads 2010 2015
  65. 65. i7, 6 cores 12 threads iPhone iPadSmart TVs 2010 2015
  66. 66. i7, 6 cores 12 threads iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
  67. 67. i7, 6 cores 12 threads HTML5 CSS3 ECMA5 Ajax boom RESTful iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
  68. 68. GUI and “componentization” trend.
  69. 69. “Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages.” Addy Osmani.
  70. 70. 1. MV*. 2. Binding. 3. SPA. 4. Desktop/Mobile. GUI
  71. 71. i7, 6 cores 12 threads HTML5 CSS3 ECMA5 Ajax boom RESTful iPhone iPadSmart TVs IE9 IE10 IE11 2010 2015
  72. 72. 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
  73. 73. 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
  74. 74. 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
  75. 75. 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
  76. 76. WTF? What just happened?
  77. 77. From spaghetti to GUIs. Whereweare
  78. 78. 1.AJAX.
 2. MVC. 3. Binding. 4. Modules. FromspaghettitoGUIs:
  79. 79. Client-side’s benefits. Whereweare
  80. 80. 1. Better experience.
 2. Minimum on the Back-End.
 3. Independent Back-End. 4. Independent Front-End. Client-side’sbenefits:
  81. 81. Client-Side’s problems. Whereweare
  82. 82. 1.White page.
 2. SEO.
 3. Can be slow. 4. Duplicated logic. 5. No serious scalability. Client-side’sproblemsbefore2015:
  83. 83. In 2015.
  84. 84. A possible solution. Whereweare
  85. 85. 1. Functional reactive programming.
 2. Immutable structure.
 3. Smarter query languages. Client-sidein2015,apossiblesolution:
  86. 86. 1.White page.
 2. SEO.
 3. Can be slow. 4. Duplicated logic. 5. No serious scalability. Client-side’sproblemsbefore2015:
  87. 87. Where we are going to.
  88. 88. Javascript. Wherewearegoingto
  89. 89. ES6/ES7/ES8/Macros.
  90. 90. More browser control.
  91. 91. More Back-End in the Front.
  92. 92. Parallelism and concurrency.
  93. 93. Offline and wearables.
  94. 94. Functional.
  95. 95. Universal/Isomorphic.
  96. 96. Web Assembly.
  97. 97. 2020.
  98. 98. 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.
  99. 99. 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.
  100. 100. Unemployment + Drones + AI + IOT + AR
  101. 101. Conclusion.
  102. 102. 
 1.Why so many changes? 2.What changed? 3.What doesn’t change? Conclusion:
  103. 103. But why so many changes?
  104. 104. What do we do?
  105. 105. Humans + Pain + Web = ∞
  106. 106. 
 1. Get close to our reality experience. 2. Go beyond. Web:
  107. 107. We solve problems.
  108. 108. Computers evolve. If the principles changed there would be no base to evolution.
  109. 109. Thanks: • João Pagnoncelli. • Rafael Gomes. • Gabriel Godoy. • Kevin Chevallier. • Isabella Silveira. • Douglas Monteiro. • Marcos Rodrigues.
  110. 110. 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
  111. 111. 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
  112. 112. 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
  113. 113. Thank you. @caiovaccaro /in/caiovaccaro /caiovaccaro
  114. 114. September 26th, 2015

×