Your SlideShare is downloading. ×
0
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
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

Kann JavaScript elegant sein?

3,138

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
3,138
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
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. Kann  JavaScript   elegant  sein?   Neue  JavaScript  Frameworks   versuchen  die  komplexe   browsersei<ge  Programmierung  zu   erleichtern.    Jonas  Bandi  h+p://blog.jonasbandi.net  h+p://twi+er.com/jbandi  
  • 2. How  the  enterprise  sees  JavaScript   developers…  
  • 3. A  very  large  group  of  developers  s0ll  thinks  of  JavaScript  as  a  joke.   -­‐  Davy  Bryon  Im  convinced  there  is  a  need  to  replace  JavaScript   -­‐  Mar?n  Fowler  JavaScript  is  fast  becoming  a  serious  contender  to  JVM  languages.   -­‐  Aslak  Hellesoy  
  • 4. Agenda  •  JavaScript:  The  Language  •  Recent  Success  of  JavaScript  •  JavaScript  Frameworks  •  Example  of  “modern”  JavaScript  development   with  Backbone.js  
  • 5. The  History  of  JavaScript     •  HyperCard  for  the   browser   Java Scheme Self JavaScript •  Make  it  look  like  Java   •  Completed  in  10  days  Brendan  Eich    
  • 6. The  History  of  JavaScript  •  1995:  Netscape  Navigator  2.0  –  LiveScript   –  Coopera?on  with  Sun:  JavaScript  1.0  •  1996:  IE  3  -­‐  JScript  •  1997:  ECMAScript,  1998:  ISO-­‐Norm  •  2010:  JavaScript  1.8.2  /  EcmaScript  5   –  Mozilla  4,  IE  9  •  Work  in  Progress:  JavaScript  2.0  “ECMAScript  Harmony”  •  Java  SE  6  contains  a  complete  JavaScript  Run?me  (Rhino)    
  • 7. Year   JavaScript   JScript   ECMAScript  1996   1.0   1.0  1996   1.1   2.0  1997   1.2  1998   1.3   3.0   Edi?on  1   1.4   4.0   5.0  1999   5.1  2000   1.5   5.5   Edi?on  2   5.6   Edi?on  3  2005   1.6   8  2006   1.7  2008   1.8  2009   1.8.2   Edi?on  5  2010   1.8.5   9  2011   Edi?on  5.1  
  • 8. JavaScript  a     mature     language?  
  • 9. Common  OO  language:   JavaScript:      •  Method   •  Func?on  •  Class  •  Constructor  •  Module  
  • 10. this?
  • 11. ThoughtWorks  Technology  Radar,  July  2011  
  • 12. GWT  GWT  is  a  reasonable  implementa?on  of  a  poor  architectural  choice.  GWT  a+empts  to  hide  many  of  the  details  of  the  web  as  a  plaeorm  by  crea?ng  desktop  metaphors  in  Java  and  genera?ng  JavaScript  code  to  implement  them.  First,  in  many  ways,  JavaScript  is  more  powerful  and  expressive  than  Java,  so  we  suspect  that  the  genera?on  is  going  in  the  wrong  direc?on.    ThoughtWorks  Technology  Radar,  July  2011   h+p://www.thoughtworks.com/radar  
  • 13. The  Success  of  JavaScript      •  Every  OS  ships  with  a  WebBrowser  •  Every  Smartphone  ships  with  a  WebBrowser  •  Performance  Improvements  in  Browsers   –  very  performant  JS  Engines   –  Hardware  accelera?on  •  REST  &  The  Cloud  -­‐  Simple  JS  Interfaces  to  Services   –  JSON   –  No  middleware  needed   –  Services  directly  addressable  from  Browser  /  Mashups   –  Simplicity  –  No  Middleware  Needed!  •  HTML5  
  • 14. Success  of  JavaScript  •  Windows  8:  Metro  /  WinRT  •  NodeJS:  JavaScript  on  the  Server   –  Most  popular  project  on  Github   –  Modules:  h+ps://github.com/joyent/node/wiki/modules   –  5.5k  Packages:  h+p://search.npmjs.org/  •  NoSQL  Databases   –  JavaScript,  JSON   –  CouchDB  
  • 15. Any  applica0on  that  can  be  wriBen  in  JavaScript,  will  eventually  be  wriBen  in  JavaScript.   -­‐  Atwood’s  Law   h+p://www.codinghorror.com/blog/2007/07/the-­‐principle-­‐of-­‐least-­‐power.html  
  • 16. Cloud9  IDE:  h+p://c9.io/  
  • 17. Popularity  of  JavaScript   h+p://www.?obe.com/index.php/content/paperinfo/tpci/index.html  
  • 18. h+ps://github.com/languages  
  • 19. h+ps://github.com/popular/watched  
  • 20. Leverage  a  vast  amount  of  Web   Developers  
  • 21. Modern  JavaScript   development.  
  • 22. The  Problem  •  Things  s?ll  tend  to  get  messy  •  Spaghej:   –  Selectors  Callbacks  callbacks  selectors  callbacks  •  The  DOM  is  everywhere  •  Where  is  the  state?   –  In  the  callbacks   –  In  the  DOM  •  No  clear  applica?on  structure  
  • 23. DOM-­‐Manipula?on   HTML/DOM   Selectors   Event-­‐Callbacks   Event-­‐   JavaScript   Callbacks  Request  Response   Request  Response   AJAX   Network-­‐Callbacks   Server  
  • 24. Can  you  draw  a     UML  diagram    of  your  JavaScript  code?  
  • 25. What  is  the  Presenta?on  Layer   anyways?   ring   Ini0al  Request:  HTML  Rende Presenta?on  Layer   HTML/DOM   Service  Layer   JavaScript   Applet   Browser  
  • 26. What  is  the  Presenta?on  Layer   anyways?   HTML  /  JSON   ring   Rende HTML/DOM  Service  Layer   JavaScript   Applet   Browser  
  • 27. A  “Second  Genera?on”  of  JavaScript   Frameworks  •  Backbone.js  •  Spine.js  •  JavaScript  MVC  •  Knockout.js  •  Lightweight  •  MVC  in  the  Browser  •  Dealing  with  state  without  using  the  DOM  •  Building  a  “Class-­‐Infrastructure”  •  Conven?ons  
  • 28. Backbone  •  Architectural  Pa+ern:  MVC  •  Modulariza?on  /  Structure  /  Code   organiza?on  •  Client  Side  Rendering  /  Client  Side  Templa?ng  •  Browser  State  Management  (loca?on.hash)  •  Client  Side  Rou?ng  •  Simplifying  RESTful  communica?on  •  Designed  for  Single  Page  Apps  
  • 29. Who  Uses  It?  
  • 30. Features  •  Separa?on  of  concerns  with  “Base-­‐Classes”:   •  Models  &  Collec?ons   •  Views   •  Router  •  Events  •  Infrastructure  for  Persistence     •  “HTTP-­‐Persistence”  -­‐>  RESTful  CRUD   •  Local  Persistence  (HTML5)  •  Testability  
  • 31. Demo:  Backbone  Tunes  
  • 32. Can  you  draw  a     UML  diagram    of  your  JavaScript  code?  
  • 33. Backbone  Tunes:  Models    
  • 34. Backbone  Tunes:  Views  
  • 35. Models:   Views:   BackboneTunes window player Player PlayListView LibraryView library Playlist Albums PlayListAlbumView LibraryAlbumView Album AlbumView
  • 36. Code!
  • 37. Models:   Views:  
  • 38. What  about  REAL  structure?   •  Asset  Pipeline   •  Build/Deploy   Source  Code   Compile   Assemble   Deployment  Ar?fact  
  • 39. Demo:  CRUD  Admin  
  • 40. Challenges  •  JavaScript  •  Consistency  between  client  and  server  •  Interna?onaliza?on  •  Security?  
  • 41. Advantages  •  Avoid  spaghej  code  •  Cleanly  separated  concerns  •  Easy  to  learn  /  simple  to  integrate  •  No  abstrac?on  of  web-­‐technologies   –  Request  /  Response   –  DOM   –  “Hands-­‐On”  in  the  Browser,  Fast  Development  Feedback   –  …  
  • 42. JavaScript  Tes?ng  
  • 43. Debugging  
  • 44. elegant  sein?  Kann  JavaScript  
  • 45. h+p://yuiblog.com/crockford/  
  • 46. h+p://peepcode.com/   h+p://tekpub.com/   h+p://backbonescreencasts.com/  

×