The document discusses whether JavaScript can be elegant. It notes that new JavaScript frameworks aim to simplify complex browser-side programming. It also includes quotes from different people discussing how enterprises view JavaScript developers and whether JavaScript needs to be replaced.

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

3. How
the
enterprise
sees
JavaScript
developers…

9. A
very
large
group
of
developers
s0ll
thinks
of
JavaScript
as
a
joke.
-­‐
Davy
Bryon
I'm
convinced
there
is
a
need
to
replace
JavaScript
-­‐
Mar?n
Fowler
JavaScript
is
fast
becoming
a
serious
contender
to
JVM
languages.
-­‐
Aslak
Hellesoy

11. Agenda
• JavaScript:
The
Language
• Recent
Success
of
JavaScript
• JavaScript
Frameworks
• Example
of
“modern”
JavaScript
development
with
Backbone.js

12. The
History
of
JavaScript
• HyperCard
for
the
browser
Java Scheme Self
JavaScript
• Make
it
look
like
Java
• Completed
in
10
days
Brendan
Eich

13. 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)

14. 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

16. JavaScript
a
mature
language?

18. Common
OO
language:
JavaScript:
• Method
• Func?on
• Class
• Constructor
• Module

23. this?

24. ThoughtWorks
Technology
Radar,
July
2011

25. 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

26. 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

27. 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

28. 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

29. Cloud9
IDE:
h+p://c9.io/

30. Popularity
of
JavaScript
h+p://www.?obe.com/index.php/content/paperinfo/tpci/index.html

31. h+ps://github.com/languages

32. h+ps://github.com/popular/watched

33. Leverage
a
vast
amount
of
Web
Developers

35. Modern
JavaScript
development.

37. 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

39. DOM-­‐Manipula?on
HTML/DOM
Selectors
Event-­‐Callbacks
Event-­‐
JavaScript
Callbacks
Request
Response
Request
Response
AJAX
Network-­‐Callbacks
Server

40. Can
you
draw
a
UML
diagram
of
your
JavaScript
code?

41. What
is
the
Presenta?on
Layer
anyways?
ring
Ini0al
Request:
HTML
Rende
Presenta?on
Layer
HTML/DOM
Service
Layer
JavaScript
Applet
Browser

42. What
is
the
Presenta?on
Layer
anyways?
HTML
/
JSON
ring
Rende
HTML/DOM
Service
Layer
JavaScript
Applet
Browser

43. 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

44. 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

45. Who
Uses
It?

46. 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

47. Demo:
Backbone
Tunes

48. Can
you
draw
a
UML
diagram
of
your
JavaScript
code?

49. Backbone
Tunes:
Models

50. Backbone
Tunes:
Views

51. Models:
Views:
BackboneTunes
window
player
Player PlayListView LibraryView
library
Playlist Albums
PlayListAlbumView LibraryAlbumView
Album AlbumView

52. Code!

53. Models:
Views:

54. What
about
REAL
structure?
• Asset
Pipeline
• Build/Deploy
Source
Code
Compile
Assemble
Deployment
Ar?fact

55. Demo:
CRUD
Admin

57. Challenges
• JavaScript
• Consistency
between
client
and
server
• Interna?onaliza?on
• Security?

58. 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
– …

59. JavaScript
Tes?ng

60. Debugging

61. elegant
sein?
Kann
JavaScript

62. h+p://yuiblog.com/crockford/

64. h+p://peepcode.com/
h+p://tekpub.com/
h+p://backbonescreencasts.com/