Kann	  JavaScript	        elegant	  sein?	                      Neue	  JavaScript	  Frameworks	                        ver...
How	  the	  enterprise	  sees	  JavaScript	                  developers…	  
A	  very	  large	  group	  of	  developers	  s0ll	  thinks	  of	  JavaScript	  as	  a	  joke.	                            ...
Agenda	  •    JavaScript:	  The	  Language	  •    Recent	  Success	  of	  JavaScript	  •    JavaScript	  Frameworks	  •   ...
The	  History	  of	  JavaScript 	  	                                          •  HyperCard	  for	  the	                   ...
The	  History	  of	  JavaScript	  •  1995:	  Netscape	  Navigator	  2.0	  –	  LiveScript	         –  Coopera?on	  with	  S...
Year	     JavaScript	     JScript	     ECMAScript	  1996	     1.0	            1.0	  1996	     1.1	            2.0	  1997	 ...
JavaScript	  a	  	     mature	  	          language?	  
Common	  OO	  language:	     JavaScript:	  	                              	  •  Method	                     •  Func?on	  •...
this?
ThoughtWorks	  Technology	  Radar,	  July	  2011	  
GWT	  GWT	  is	  a	  reasonable	  implementa?on	  of	  a	  poor	  architectural	  choice.	  GWT	  a+empts	  to	  hide	  ma...
The	  Success	  of	  JavaScript 	   	  	  •  Every	  OS	  ships	  with	  a	  WebBrowser	  •  Every	  Smartphone	  ships	  ...
Success	  of	  JavaScript	  •  Windows	  8:	  Metro	  /	  WinRT	  •  NodeJS:	  JavaScript	  on	  the	  Server	      –  Mos...
Any	  applica0on	  that	  can	  be	  wriBen	  in	  JavaScript,	  will	  eventually	  be	  wriBen	  in	  JavaScript.	      ...
Cloud9	  IDE:	  h+p://c9.io/	  
Popularity	  of	  JavaScript	     h+p://www.?obe.com/index.php/content/paperinfo/tpci/index.html	  
h+ps://github.com/languages	  
h+ps://github.com/popular/watched	  
Leverage	  a	  vast	  amount	  of	  Web	               Developers	  
Modern	  JavaScript	   development.	  
The	  Problem	  •  Things	  s?ll	  tend	  to	  get	  messy	  •  Spaghej:	      –  Selectors	  Callbacks	  callbacks	  sele...
DOM-­‐Manipula?on	            HTML/DOM	                       Selectors	                                             Event...
Can	  you	  draw	  a	  	     UML	  diagram	  	  of	  your	  JavaScript	  code?	  
What	  is	  the	  Presenta?on	  Layer	                                                  anyways?	        ring	            ...
What	  is	  the	  Presenta?on	  Layer	                                         anyways?	                                  ...
A	  “Second	  Genera?on”	  of	  JavaScript	                        Frameworks	  •    Backbone.js	  •    Spine.js	  •    Ja...
Backbone	  •  Architectural	  Pa+ern:	  MVC	  •  Modulariza?on	  /	  Structure	  /	  Code	     organiza?on	  •  Client	  S...
Who	  Uses	  It?	  
Features	  •  Separa?on	  of	  concerns	  with	  “Base-­‐Classes”:	         •  Models	  &	  Collec?ons	         •  Views	 ...
Demo:	  Backbone	  Tunes	  
Can	  you	  draw	  a	  	     UML	  diagram	  	  of	  your	  JavaScript	  code?	  
Backbone	  Tunes:	  Models	               	  
Backbone	  Tunes:	  Views	  
Models:	                              Views:	                                                      BackboneTunes          ...
Code!
Models:	     Views:	  
What	  about	  REAL	  structure?	                     •  Asset	  Pipeline	                     •  Build/Deploy	           ...
Demo:	  CRUD	  Admin	  
Challenges	  •    JavaScript	  •    Consistency	  between	  client	  and	  server	  •    Interna?onaliza?on	  •    Securit...
Advantages	  •    Avoid	  spaghej	  code	  •    Cleanly	  separated	  concerns	  •    Easy	  to	  learn	  /	  simple	  to	...
JavaScript	  Tes?ng	  
Debugging	  
elegant	  sein?	  Kann	  JavaScript	  
h+p://yuiblog.com/crockford/	  
h+p://peepcode.com/	                                         h+p://tekpub.com/	    h+p://backbonescreencasts.com/	  
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
×

Kann JavaScript elegant sein?

3,242
-1

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,242
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Kann JavaScript elegant sein?

  1. 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. 2. How  the  enterprise  sees  JavaScript   developers…  
  3. 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. 4. Agenda  •  JavaScript:  The  Language  •  Recent  Success  of  JavaScript  •  JavaScript  Frameworks  •  Example  of  “modern”  JavaScript  development   with  Backbone.js  
  5. 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. 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. 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. 8. JavaScript  a     mature     language?  
  9. 9. Common  OO  language:   JavaScript:      •  Method   •  Func?on  •  Class  •  Constructor  •  Module  
  10. 10. this?
  11. 11. ThoughtWorks  Technology  Radar,  July  2011  
  12. 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. 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. 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. 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. 16. Cloud9  IDE:  h+p://c9.io/  
  17. 17. Popularity  of  JavaScript   h+p://www.?obe.com/index.php/content/paperinfo/tpci/index.html  
  18. 18. h+ps://github.com/languages  
  19. 19. h+ps://github.com/popular/watched  
  20. 20. Leverage  a  vast  amount  of  Web   Developers  
  21. 21. Modern  JavaScript   development.  
  22. 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. 23. DOM-­‐Manipula?on   HTML/DOM   Selectors   Event-­‐Callbacks   Event-­‐   JavaScript   Callbacks  Request  Response   Request  Response   AJAX   Network-­‐Callbacks   Server  
  24. 24. Can  you  draw  a     UML  diagram    of  your  JavaScript  code?  
  25. 25. What  is  the  Presenta?on  Layer   anyways?   ring   Ini0al  Request:  HTML  Rende Presenta?on  Layer   HTML/DOM   Service  Layer   JavaScript   Applet   Browser  
  26. 26. What  is  the  Presenta?on  Layer   anyways?   HTML  /  JSON   ring   Rende HTML/DOM  Service  Layer   JavaScript   Applet   Browser  
  27. 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. 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. 29. Who  Uses  It?  
  30. 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. 31. Demo:  Backbone  Tunes  
  32. 32. Can  you  draw  a     UML  diagram    of  your  JavaScript  code?  
  33. 33. Backbone  Tunes:  Models    
  34. 34. Backbone  Tunes:  Views  
  35. 35. Models:   Views:   BackboneTunes window player Player PlayListView LibraryView library Playlist Albums PlayListAlbumView LibraryAlbumView Album AlbumView
  36. 36. Code!
  37. 37. Models:   Views:  
  38. 38. What  about  REAL  structure?   •  Asset  Pipeline   •  Build/Deploy   Source  Code   Compile   Assemble   Deployment  Ar?fact  
  39. 39. Demo:  CRUD  Admin  
  40. 40. Challenges  •  JavaScript  •  Consistency  between  client  and  server  •  Interna?onaliza?on  •  Security?  
  41. 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. 42. JavaScript  Tes?ng  
  43. 43. Debugging  
  44. 44. elegant  sein?  Kann  JavaScript  
  45. 45. h+p://yuiblog.com/crockford/  
  46. 46. h+p://peepcode.com/   h+p://tekpub.com/   h+p://backbonescreencasts.com/  

×