Javascript the New Parts v2

2,603 views

Published on

Updated version of talk "Javascript the New Parts".
I gave this at JsDay on May 12th 2011.
I updated with latest stats and improved es5 coverage, most notably strict mode.

Abstract:
At last, ecmascript 5th edition is landing in all modern browsers. What are the new parts of the language and how can they help us to write better code?

Also
http://federico.galassi.net/
http://www.jsday.it/

Follow me on Twitter!
https://twitter.com/federicogalassi

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,603
On SlideShare
0
From Embeds
0
Number of Embeds
183
Actions
Shares
0
Downloads
40
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Javascript the New Parts v2

  1. 1. Javascript the New Parts v2federico.galassi@cleancode.itslideshare.net/fgalassi
  2. 2. • Short history of javascript• The new parts• State of the onion
  3. 3. Javascript public in 1996
  4. 4. No time to fix
  5. 5. Standard 1999 Ecmascript 3rd edition “Worst name ever”
  6. 6. TC39Committee
  7. 7. Years later... “It turns out that standard bodies are not good places to innovate. That’s what laboratories and startups are for. Standards must be drafted by consensus.”http://yuiblog.com/blog/2008/08/14/premature-standardization/
  8. 8. They couldn’t agree
  9. 9. splitES 3.1 ES 4small heavyfixes stuff
  10. 10. the winner ES 3.1Ecmascript5th edition
  11. 11. the loser ES 4Harmony
  12. 12. ES5 just fixesjavascript
  13. 13. • Short history of javascript• The new parts• State of the onion
  14. 14. Betterobject oriented programming
  15. 15. Javascript is prototypalbart simpsons prototypename: “bart” surname: “simpsons”bart.surname>  “simpsons”
  16. 16. Wannabe classicalfunction  Simpsons(name)  { constructor this.name  =  name}Simpsons.prototype.surname  =   class“simpsons”bart  =  new  Simpsons(“bart”) object
  17. 17. Ugly
  18. 18. Create objectssimpsons  =  {  surname:  “simpsons”  } objectbart  =  Object.create(simpsons) objectbart.name  =  “bart”bart.age  =  10hugo  =  Object.create(bart) objecthugo.name  =  “hugo”hugo.nature  =  “evil”
  19. 19. Simple andPowerful
  20. 20. Back to the fatherhomer  =  Object.create( Object.getPrototypeOf(bart))homer.name  =  “homer”homer.age  =  38
  21. 21. Getters and settershomer  =  { beers:  3, get  drunk()  { return  this.beers  >  5 }}homer.drunk>  falsehomer.beers  =  7homer.drunk>  true
  22. 22. Uniformaccess
  23. 23. Properties were valuesbart.age>  10
  24. 24. Properties now configurableObject.getOwnPropertyDescriptor( bart,  “age”)>  { value:  10, enumerable:  true, writable:  true, configurable:  true}
  25. 25. Properties can be definedObject.defineProperty(bart,  “age”,  { value:  10, enumerable:  true, writable:  true, configurable:  true})
  26. 26. More than oneObject.defineProperties(bart,  { name:  { value:  “bart”, enumerable:  true, writable:  true, configurable:  true }, age:  { value:  10, enumerable:  true, writable:  true, configurable:  true }})
  27. 27. At creation timebart  =  Object.create(simpsons,  { name:  { value:  “bart”, enumerable:  true, writable:  true, configurable:  true }, age:  { value:  10, enumerable:  true, writable:  true, configurable:  true }})
  28. 28. Bettersecurity
  29. 29. writable Can i assign to it ?Object.defineProperty(bart,  “age”,  { value:  10, writable:  false})bart.age  =  5>  5bart.age>  10
  30. 30. configurable Can i delete it ?Object.defineProperty(bart,  “age”,  { value:  10, configurable:  false})delete  bart.age>  falsebart.age>  10
  31. 31. configurable Can i configure it ?Object.defineProperty(bart,  “age”,  { value:  10, configurable:  false})Object.defineProperty(bart,  “age”,  { configurable:  true})>  TypeError:  Cannot  redefine  property
  32. 32. enumerable + writable security
  33. 33. Even more security//  Can’t  add  propertiesObject.preventExtensions(obj)//  !isExtensible  +  all  configurable  =  falseObject.seal(obj)//  isSealed  +  all  writable  =  falseObject.freeze(obj)Object.isExtensible(obj)Object.isSealed(obj)Object.isFrozen(obj)
  34. 34. The road tosafe mashups
  35. 35. Betterextensibility
  36. 36. enumerableDoes for/in show it up ?Object.defineProperty(bart,  “phobia”,  { value:  “coffins”, enumerable:  false})//  Like  for/in  and  collect  keysObject.keys(bart)>  [“name”,  “surname”,  “age”]
  37. 37. No morepollution
  38. 38. Hide behaviorObject.defineProperty(bart,  “play”,  { value:  function()  {  ..play..  }, enumerable:  false})
  39. 39. natives finally extensible !Object.defineProperty(Array.prototype,  “last”,  { value:  function()  { return  this[this.length  -­‐  1] }, enumerable:  false})[4,3,5,1].last()>  1
  40. 40. more native with getterObject.defineProperty(Array.prototype,  “last”,  { get:  function()  { return  this[this.length  -­‐  1] }, enumerable:  false})[4,3,5,1].last>  1
  41. 41. works with DOMObject.defineProperty(HTMLElement.prototype,  “classes”,  { get:  function()  { return  this.getAttribute(“class”)                      .split(/s+/) }, enumerable:  false})$(“<div  class=‘one  two’  />”).get(0).classes>  [“one”,  “two”]
  42. 42. The world is yours
  43. 43. Better performance//  Native  jsonJSON.parse(string)JSON.stringify(object)
  44. 44. Better functional programming[1,  2,  3].map(double)>  [2,  4,  6][2,  4,  6].every(isEven)>  true[1,  2,  3].filter(isEven)>  [2]//  forEach,  some,  reduce,  reduceRight//  indexOf,  lastIndexOf
  45. 45. Function.bind()var  bart  =  { name:  “bart”}var  hello  =  function(greet)  { return  greet  +  “i  am  “  +  this.name}//  bind  to  this  and  partial  application(hello.bind(bart,  “hey”))()>  “hey,  i  am  bart”
  46. 46. More operations on nativesArray.isArray([1,2,3])>  true“        hello  world          ”.trim()>  “hello  world”Date.now()>  1289395540416(new  Date).toISOString()>  2010-­‐02-­‐20T05:52:53.649Z
  47. 47. No more annoyances//  reserved  keyword  as  propertiesbart.class  =  “cartoon”//  abstract,  boolean,  byte,  char,  const  ...//  OK  trailing  comma[1,  2,  3,  ]  //  OK  trailing  comma{ name:  “bart”,}//  8  instead  of  0  !!!parseInt(“08”)
  48. 48. Strict mode
  49. 49. Invoking //  Globally “use  strict”; ...  strict  code  ... //  in  function  scope function  test()  {    “use  strict”;    ...  strict  code  ... }http://hacks.mozilla.org/2011/01/ecmascript-5-strict-mode-in-firefox-4/
  50. 50. Mistakes throw errors “use  strict”; typo  =  5  //  no  var,  ERROR NaN  =  10  //  invalid  assign delete  Object.prototype  //  invalid  delete var  o  =  {  p:  1,  p:  2  }  //  double  property  !? function  dumb(p,  p)      //  double  parameter  !???http://hacks.mozilla.org/2011/01/ecmascript-5-strict-mode-in-firefox-4/
  51. 51. Securing javascript “use  strict”; function  miracle()  {  return  this  } miracle() //  undefined  !!!!!http://hacks.mozilla.org/2011/01/ecmascript-5-strict-mode-in-firefox-4/
  52. 52. JOY
  53. 53. • Short history of javascript• The new parts• State of the onion
  54. 54. State of the Onion
  55. 55. Onion becauseyou can start crying
  56. 56. 7 8 9http://kangax.github.com/es5-compat-table/
  57. 57. no IE6 I don’tshoot thered cross
  58. 58. 3 3.5 4http://kangax.github.com/es5-compat-table/
  59. 59. 3.2 4 5 webkithttp://kangax.github.com/es5-compat-table/
  60. 60. 5 6 7 - 11http://kangax.github.com/es5-compat-table/
  61. 61. 10.1 10.5, 10.6, 10.7, 11, 11.10http://kangax.github.com/es5-compat-table/
  62. 62. My pick is chrome firefox 4
  63. 63. ModernBrowsers OK
  64. 64. OldBrowsers ARGH
  65. 65. The realproblem“IE6 is fading very slowly. Five years ago I predicted that IE6 would fade away in five years.”
  66. 66. even worse
  67. 67. Go figure
  68. 68. we need a Miracle
  69. 69. http://joind.in/3374 federico.galassi@cleancode.it twitter.com/federicogalassi slideshare.net/fgalassi

×