Your SlideShare is downloading. ×
0
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Javascript the New Parts
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript the New Parts

16,310

Published on

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

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
31 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,310
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
119
Comments
6
Likes
31
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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?

×