Javascript the New Parts

22,983 views

Published on

Talk i gave at WebTech Conference on November 10th 2010.

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.webtechcon.it

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

6 Comments
35 Likes
Statistics
Notes
No Downloads
Views
Total views
22,983
On SlideShare
0
From Embeds
0
Number of Embeds
1,670
Actions
Shares
0
Downloads
123
Comments
6
Likes
35
Embeds 0
No embeds

No notes for slide

Javascript the New Parts

  1. Javascript the New Parts federico.galassi@cleancode.it slideshare.net/fgalassi
  2. • Short history of javascript • State of the onion • The new parts
  3. Javascript public in 1996
  4. No time to fix
  5. Standard 1999 Ecmascript 3rd edition “Worst name ever”
  6. TC39 Committee
  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. They couldn’t agree
  9. ES 3.1 small fixes ES 4 heavy stuff split
  10. ES 3.1 Ecmascript 5th edition the winner
  11. the loser ES 4 Harmony
  12. ES5 just fixes javascript
  13. • Short history of javascript • State of the onion • The new parts
  14. Better object oriented programming
  15. Javascript is prototypal surname: “simpsons” simpsons name: “bart” bart prototype bart.surname >  “simpsons”
  16. Wannabe classical function  Simpsons(name)  { this.name  =  name } Simpsons.prototype.surname  =   “simpsons” bart  =  new  Simpsons(“bart”) constructor class object
  17. Ugly
  18. Create objects simpsons  =  {  surname:  “simpsons”  } bart  =  Object.create(simpsons) bart.name  =  “bart” bart.age  =  10 hugo  =  Object.create(bart) hugo.name  =  “hugo” hugo.nature  =  “evil” object object object
  19. Simple and Powerful
  20. Back to the father homer  =  Object.create( Object.getPrototypeOf(bart) ) homer.name  =  “homer” homer.age  =  38
  21. Getters and setters homer  =  { beers:  3, get  drunk()  { return  this.beers  >  5 } } homer.drunk >  false homer.beers  =  7 homer.drunk >  true
  22. Uniform access
  23. bart.age >  10 Properties were values
  24. Object.getOwnPropertyDescriptor( bart,  “age” ) >  { value:  10, enumerable:  true, writable:  true, configurable:  true } Properties now configurable
  25. Object.defineProperty(bart,  “age”,  { value:  10, enumerable:  true, writable:  true, configurable:  true }) Properties can be defined
  26. Object.defineProperties(bart,  { name:  { value:  “bart”, enumerable:  true, writable:  true, configurable:  true }, age:  { value:  10, enumerable:  true, writable:  true, configurable:  true } }) More than one
  27. bart  =  Object.create(simpsons,  { name:  { value:  “bart”, enumerable:  true, writable:  true, configurable:  true }, age:  { value:  10, enumerable:  true, writable:  true, configurable:  true } }) At creation time
  28. Better security
  29. writable Can i assign to it ? Object.defineProperty(bart,  “age”,  { value:  10, writable:  false }) bart.age  =  5 >  5 bart.age >  10
  30. configurable Can i delete it ? Object.defineProperty(bart,  “age”,  { value:  10, configurable:  false }) delete  bart.age >  false bart.age >  10
  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. enumerable + writable security
  33. Even more security //  Can’t  add  properties Object.preventExtensions(obj) //  !isExtensible  +  all  configurable  =  false Object.seal(obj) //  isSealed  +  all  writable  =  false Object.freeze(obj) Object.isExtensible(obj) Object.isSealed(obj) Object.isFrozen(obj)
  34. The road to safe mashups
  35. Better extensibility
  36. enumerable Does for/in show it up ? Object.defineProperty(bart,  “phobia”,  { value:  “coffins”, enumerable:  false }) //  Like  for/in  and  collect  keys Object.keys(bart) >  [“name”,  “surname”,  “age”]
  37. No more pollution
  38. Hide behavior Object.defineProperty(bart,  “play”,  { value:  function()  {  ..play..  }, enumerable:  false })
  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. more native with getter Object.defineProperty(Array.prototype,   “last”,  { get:  function()  { return  this[this.length  -­‐  1] }, enumerable:  false }) [4,3,5,1].last >  1
  41. works with DOM Object.defineProperty(HTMLElement.prototype,   “classes”,  { get:  function()  { return  this.getAttribute(“class”)                      .split(/s+/) }, enumerable:  false }) $(“<div  class=‘one  two’  />”).get(0).classes >  [“one”,  “two”]
  42. The world is yours
  43. Better performance //  Native  json JSON.parse(string) JSON.stringify(object)
  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. 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. More operations on natives Array.isArray([1,2,3]) >  true “        hello  world          ”.trim() >  “hello  world” Date.now() >  1289395540416
  47. //  reserved  keyword  as  properties bart.class  =  “cartoon” //  abstract,  boolean,  byte,  char,  const  ... //  OK  trailing  comma [1,  2,  3,  ]   //  OK  trailing  comma { name:  “bart”, } //  8  instead  of  0  !!! parseInt(“08”) No more annoyances
  48. JOY
  49. • Short history of javascript • State of the onion • The new parts
  50. State of the Onion
  51. Onion because you can start crying
  52. http://kangax.github.com/es5-compat-table/ 7 8 9
  53. no IE6 I don’t shoot the red cross
  54. http://kangax.github.com/es5-compat-table/ 3 3.5 4
  55. http://kangax.github.com/es5-compat-table/ 3.2 4 5 webkit
  56. http://kangax.github.com/es5-compat-table/ 5 6 7
  57. http://kangax.github.com/es5-compat-table/ 10.1 10.6 10.7
  58. My pick is chrome chrome 7
  59. Modern Browsers OK
  60. Old Browsers ARGH
  61. The real problem “IE6 is fading very slowly. Five years ago I predicted that IE6 would fade away in five years.”
  62. even worse
  63. Go figure
  64. we need a Miracle
  65. federico.galassi@cleancode.it Questions?

×