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.

The curious Life of JavaScript - Talk at SI-SE 2015

2,659 views

Published on

My talk about the life of JavaScript, from birth to today.

I went trough the demos and code examples very quickly, rather as a teaser to show how modern JavaScript development might look.

If you are interested in a deep dive into the topic of modern JavaScript development, HTML5, ES6, AngularJS, React, Gulp, Grunt etc, please consider my courses: http://www.ivorycode.com/#schulung

Published in: Software
  • Be the first to comment

The curious Life of JavaScript - Talk at SI-SE 2015

  1. 1. jonas.bandi@ivorycode.com Twitter: @jbandi The curious Life of
  2. 2. D Jonas Bandi 5 Years ago I had no clue about JavaScript Today JavaScript pays my bills
  3. 3. My Journey into JavaScript Land
  4. 4. I went through the five stages of grief.
  5. 5. Denial
  6. 6. Fear
  7. 7. Repulsion
  8. 8. Curiosity
  9. 9. Most of the people writing in JavaScript are not programmers. They lack the training and discipline to write good programs. - Douglas Crockford, 2001 The ecosystem around JavaScript as a serious application platform continues to evolve. - ThoughtWorks Technology Radar, January 2014 A very large group of developers still thinks of JavaScript as a joke. - Davy Brion, 2011 We strongly suggest to adopt JavaScript as a first class language. - ThoughtWorks Technology Radar, 2011 Through 2014, improved JavaScript performance will begin to push HTML5 and the browser as a mainstream enterprise application development environment. - Gartner, October 2013
  10. 10. Any application that can be written in JavaScript, will eventually be written in JavaScript. - Atwood’s Law, 2007 http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html
  11. 11. We are slaves to JavaScript because people have simply started to accept its weirdness and flaws, much like a Stockholm Syndrome phenomenon. - Chris Richardson, 2013 http://www.youtube.com/watch?v=CN0jTnSROsk&list=WLB09959CADB0E3254
  12. 12. Two Worlds?
  13. 13. Childhood
  14. 14. JavaScript had a difficult childhood.
 It spent a lot of time listening to its parents fighting with one another about what they wanted it to be when it grew up. As any young language would, it tried hard to please its parents. As a result it suffers from what can only be described as behavioural quirks. - Dan North, The Rise and Rise of JavaScript http://dannorth.net/2011/12/19/the-rise-and-rise-of-javascript/
  15. 15. Birth
  16. 16. HyperCard for the browser Scheme Self Mocha Make it look like Java! Completed in 10 days! Java JavaScript h"p://javascriptjabber.com/124-­‐jsj-­‐the-­‐origin-­‐of-­‐javascript-­‐with-­‐brendan-­‐eich/ Brendan Eich
  17. 17. JavaScript != Java
  18. 18. The Bad Parts
  19. 19. Adoption
  20. 20. JavaScript has 
 good parts!
  21. 21. • Object • Class • Method • Constructor • Packages • Inheritance Language Constructs • Object • Function ...everything else can be implemented
  22. 22. Closures
  23. 23. Elegant Parts
  24. 24. Revealing Module Pattern var  calcModule  =  (function(){          var  a  =  [1,2,3];          function  calculate(){                  return  (a[0]*a[1])+a[2];          }          function  calcAndAdd(){                  return  calculate()  +  1;          }          function  calcAndSubtract(){                  return  calculate()  -­‐  1;          }          return  {                  add:  calcAndAdd,                  subtract:  calcAndSubtract          }   })();   var  res  =  calcModule.add();IIFE usage public
 API private
  25. 25. You can even implement classes and classical inheritance in JavaScript.
  26. 26. function  Person(first,  last)  {     //  'this'  is  an  empty  object     this.first  =  first;     this.last  =  last;     //  'this'  is  returned  when  called  with  'new'   }   Person.prototype.fullName  =  function()  {          return  this.first  +  '  '  +  this.last;   };   Person.prototype.fullNameReversed  =  function()  {          return  this.last  +  ',  '  +  this.first;   };   var  pers  =  new  Person("John",  "Doe");   console.log(pers.fullName());   console.log(pers.fullNameReversed()); usage sharedm ethods constructor
  27. 27. function Person(name) { this.name = name; }; Person.prototype.getName = function() { return this.name; }; function Employee(name, employer) { // rent-a-constructor Person.call(this, name); // extend with more properties this.employer = employer; }; Employee.prototype = new Person(); var empl = new Employee("Tyler Durden", "TheClub"); empl.getName() super-class sub-class usage
  28. 28. Growing Up
  29. 29. AJAX REVOLUTION 2000 - 2006
  30. 30. SECOND BROWSER WAR Massive JavaScript performance improvement
  31. 31. First Generation Frameworks
  32. 32. Client-Side MVC Application Structure Data-Binding A “Second Generation” of JavaScript Frameworks sf
  33. 33. A “Third Generation” of JavaScript Frameworks Complete Client-Side Application Development
  34. 34. Toolset
  35. 35. Bower
  36. 36. Popularity
  37. 37. http://redmonk.com/dberkholz/2014/05/02/github-language-trends-and-the-fragmenting-landscape/
  38. 38. http://stackoverflow.com/research/developer-survey-2015#tech http://stackoverflow.com/tags
  39. 39. JavaScript is the Language of the Web. Another software technology will come along and kill off the web. That judgement day will arrive very soon. -Forrester Research in 2000 The Web has won!
  40. 40. HTML 5 HTML5 explained: • Html is the structure • CSS is the colour and style • JavaScript is everything else Scott Hanselman:Angle Brackets, Curly Braces http://channel9.msdn.com/Events/Build/2012/3-027
  41. 41. Signs of Maturity
  42. 42. 47 Powerful Parts
  43. 43. h"p://www.thoughtworks.com/radarThoughtWorks  Technology  Radar,  July  2011 GWT  is  a  reasonable  implementaIon  of  a   poor  architectural  choice.  GWT  a"empts  to   hide  many  of  the  details  of  the  web  as  a   plaJorm  by  creaIng  desktop  metaphors  in   Java  and  generaIng  JavaScript  code  to   implement  them.  First,  in  many  ways,   JavaScript  is  more  powerful  and   expressive  than  Java,  so  we  suspect   that  the  generaIon  is  going  in  the  wrong   direcIon.  
  44. 44. var add = function(first, second) { return first + second; }; var splitCall = function(first, func){ return function(second){ return func(first, second); } } var addOne = splitCall(1, add); addOne(22); // -> 23
  45. 45. I now see my early attempts to support the classical model in JavaScript as a mistake. The gift of JavaScript to humanity is class- free object-oriented programming. https://youtu.be/bo36MrBfTk4?t=33m38s
  46. 46. Ecosystem
  47. 47. Write Code Build Test Deploy Language IDE Toolset compile package Test-Frameworks dependency management Libraries / Frameworks
  48. 48. Write Code Build Test Deploy Language IDE Toolset compile package Test-Frameworks dependency management Libraries / Frameworks Bower
  49. 49. Building
  50. 50. PROJECT BUILD Compile Package TestDeploy Develop (IDE) Build jar, war, assembly … into a container (Tomcat, JBoss, IIS …) execute Backend (Java, .NET) Linting Package TestDeploy Develop (Editor, IDE) Minification, Concatenation, Revision copy to directory execute in browser Frontend (JavaScript)
  51. 51. Testing
  52. 52. Dependency Management
  53. 53. LARGE JAVASCRIPT APPLICATIONS ? LoC ? LoC ? LoC
  54. 54. LARGE JAVASCRIPT APPLICATIONS 400’000 LoC (2012) 300’000 LoC (2012) 200’000 LoC (2013)
  55. 55. SPA Architecture View Model Controller Services ClientServer clear boundary "object model" • Rich client programming model in the browser • Clear separation of concern between client and server
  56. 56. Signs of Adolescence
  57. 57. Eco-Mess?
  58. 58. Frontend Libraries & Frameworks
  59. 59. JakeJavaScript build Tool similar to Rake or Make. Broccoli Bower Build Tools
  60. 60. TestemA test runner that makes Javascript unit testing fun. Testing Tools Zombie.js Insanely fast, headless full-stack testing
  61. 61. ACTIVE ECOSYSTEM (Maven Central has 930k artifacts / 109k unique artifacts) www.npmjs.org
  62. 62. http://www.modulecounts.com/
  63. 63. Not every week-end project should be made public and available through Bower. The Javascript community needs to learn to filter itself. - Manuel Bernhardt, 2014 http://manuel.bernhardt.io/2014/12/30/generation-javascript/
  64. 64. Growing Older
  65. 65. Big Momentum
  66. 66. It's Spreading!
  67. 67. Nashorn Beyond the Browser nodebots.io Native Script React Native
  68. 68. • Full-Stack JavaScript • Isomorphic JavaScript • Run JavaScript logic on traditional Java / .NET backend • Validation • Workflow / Scripting Reuse & Sharing Logic View Controller Client Server Business Logic "Code Repository" Model
  69. 69. JavaScript as a CompilationTarget GoogleTraceur by Facebookflowtype.org Clojure Script cappuccino-project.orggwtproject.org https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS babeljs.io "The Assembly Language of the Web"
  70. 70. ECMAScript 6
 "The big makeover..."
  71. 71. Arrows Template Strings Modules Classes
  72. 72. Classes? WTF!?
  73. 73. Arrows Template Strings Modules Classes Generators Promises Enhanced Object Literals Block Scope ... https://github.com/lukehoban/es6features
  74. 74. Questions? Interested in JavaScript courses? Visit: http://ivorycode.com/#schulung

×