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 status 2016

118 views

Published on

Javascript status 2016

Published in: Software
  • Be the first to comment

  • Be the first to like this

Javascript status 2016

  1. 1. Javascript, ES6/7, Coffeescript, Typescript and sh**t
  2. 2. Javascript - What the hell is it?
  3. 3. Official release 1.0 at 1995 in Netscape Navigator Developed by Brendan Eich Javascript core called ECMAScript Javascript - What the hell is it?
  4. 4. Object inheritance instead of class inheritance Javascript is prototype-based
  5. 5. Javascript supports object- oriented, imperative, and functional programming styles
  6. 6. x = 9; x = "Hello"; Javascript is dynamic
  7. 7. x = 9; y = "Hello"; z = {"Number": 5}; Javascript is untyped
  8. 8. No need to compile!!! Javascript is interpreted
  9. 9. It’s a crazy language
  10. 10. if (typeof obj === 'object') { alert(obj.prop); } if (typeof obj === 'object' && obj !== null) { alert(obj.prop); } It’s a crazy language
  11. 11. 1 == 1; //true 'foo' == 'foo'; //true [1,2,3] == [1,2,3]; //false new Array(3) == ",,"; //true new Array(3) === ",,"; //false It’s a crazy language
  12. 12. {} + {}; //NaN [] + []; //"" [] + {}; //[object Object] [] + {} === {} + []; //false It’s a crazy language
  13. 13. Scoooooopes…
  14. 14. Technical Committee for ES development Active from 2008 Released ES5 on 2009 Released ES6 on December 2015 Plan to release ES7 on 2016 Plan to release next versions once in a year TC39
  15. 15. So what’s new in ES6?
  16. 16. class Person { constructor(name, age) { this.name = name, this.age = age } about() { log(this.name, this.age); } }; Classes
  17. 17. var jack = new Person('jack', 22); jack.about(); //=> jack 22 Classes
  18. 18. class Son extends Person { constructor(name, age) { super(name, age); this.son = true; } }; Classes
  19. 19. var jack = new Son('jack', 22); jack.about(); //=> jack 22 jack.son; //=> true Classes
  20. 20. var nums = [1,2,3]; nums.map(function(x) { return x * 2; }; nums.map((x) => x * 2); Maps
  21. 21. var [a, b] = [1, 2]; var [a, ,b] = [1, 2, 3]; var {a, b} = {a: 2, b: 3}; var {a, b} = {b: 3}; Destructuring
  22. 22. var f = `My awesome multiline string`; var name = 'jack'; var age = 22; var s = `${name} is ${age} years old`; Template strings
  23. 23. function getInfo(print: false) { if (print) { console.log(this.name, this.age); } else { return `${this.name} ${this.age}`; } } Function arguments
  24. 24. function length (...nums) { console.log(nums.length); } length(1,2,3); // 3 Function arguments
  25. 25. Global scope Function scope Block scope Scope
  26. 26. foo = 2; //Global scope var fad = 2; //Global scope function() { bar = 3; //Global scope var baz = 4; //Function scope } Scope
  27. 27. function() { if (x) { var foo = 3; //Function scope } var baz = 4; //Function scope } Scope
  28. 28. foo = 2; //Global scope function() { var baz = 4; //Function scope if (x) { let y = 2; //Block scope } } Scope
  29. 29. //app.js var foo = 2; var baz = 3; export {foo, bar}; /////////////////////// //foo.js import {foo} from 'app' console.log(foo); // 2 Modules
  30. 30. //app.js export var foo = 2; /////////////////////// //foo.js import {foo} from 'app' console.log(foo); // 2 Modules
  31. 31. //app.js export default function foo(){ return 2; }; /////////////////////////// //foo.js import foo from 'app' console.log(foo()); // 2 Modules
  32. 32. //app.js export var foo = 2; export var baz = 3; /////////////////////// //foo.js import stuff from 'app' stuff.foo // 2 stuff.baz // 3 Modules
  33. 33. You can just start using it, or…
  34. 34. Use Babel
  35. 35. Do you want a real power up?
  36. 36. Type annotations Public / Private Compile-time type checking Type interface Interfaces Enums Mixins Generics Optional properties Tuple types Typescript
  37. 37. If you come from Java or C# If you believe in compile-time type checking If you have problems with type-related bugs If you use Microsoft Visual Studio If you have a really large project that should scale and need conventions When should you use it?
  38. 38. I’m not really gonna talk about it… http://coffeescript.org/ Coffeescript
  39. 39. It’s a lot of new stuff
  40. 40. Why should I care about JS?
  41. 41. Web - client side: Must Javascript Web - server side: Javascript, Python, Ruby Browser extension: Must Javascript Iphone app: Swift Android app: Java Windows app: C#, Java Linux app: C++, Python OS X app: Swift So which skills do I need?
  42. 42. This is wrong!!!
  43. 43. Web - client side: React.js, Angular, … Web - server side: Node,js, Express.js, Meteor,… Browser extension: Jquery, … Iphone app: React native, PhoneGap, … Android app: React native, PhoneGap, … Windows app: Electron, AppJS, … Linux app: Electron, AppJS, … OS X app: Electron, AppJS, … So which frameworks to use?
  44. 44. http://nodeframework.com/ So which frameworks to use?
  45. 45. What about ecosystem?
  46. 46. Almost 300,000 packages!!!
  47. 47. What about ecosystem?
  48. 48. What about ecosystem?
  49. 49. What about ecosystem?
  50. 50. JS is the fastest scripting language on the server side Browsers war brought us super optimised interpreters/compilers With regular expressions, V8 is even faster than C and C++ Another reason - performance
  51. 51. Another reason - performance
  52. 52. WebStorm Sublime Text Atom Komodo Aptana Cloud 9 Codeanywhere Codenvy Koding Orionhub IDEs
  53. 53. People you need to know…
  54. 54. Boris Dinkevich Nir Kaufman Benjamin GruenbaumShai Reznik
  55. 55. http://www.meetup.com/JavaScript-Israel/
  56. 56. ES7 content: https://tc39.github.io/ecma262/ http://caniuse.com/ http://www.clock.co.uk/blog/javascript- frameworks-in-2016 Useful links
  57. 57. Questions?

×