quel avenir pour les applications web: node.js , coffeescript etc

1. Node.js - backbone.js - coffeescript
et les autres.. LA REVOLUTION.
Eric German - german.eric@gmail.com - @germanlinux PARIS juin 2012

2. Présentation technique stratégique
tio ns
pp lica
des a ?)
nir
ave iques ( web
?
L' at
info rm

3. Eric German
Employeur : DGFiP
Profession : Enthousiaste
blog: http://germanlinux.blogspot.com
Cloud : http://apprendre1chosechaquejour.herokuapp.com

4. Plan de la présentation
Etat de l'art
Les évolutions
Les acteurs
La révolution
Les perspectives

5. Model-View-Controller (MVC)
Il était une fois en .. 1979
Trygve M. H. Reenskaug
Ce n'est que du modèle de conception
(design pattern)

6. Le règne du web: 1990

7. Le web
est un
formidable
système
de
distribution

8. BDD framework MVC WEB
data,
data html, js,
css, img

9. Client lourd Client léger

10. BDD framework MVC data,
html, js,
css, img
data,
html, js,
data css, img
data,
html, js,
css, img

12. data,
html, js,
Serveur WEB css, img
BDD
ajax
data js, css,
img
ajax (data)

13. Le duel
"client side vs
serveur side"
model Data
Controleur
View
Coté client : client side Coté serveur : server side

14. Evolution des applications
informatiques:
M V C
1990
mainframe vs
mainframe
2012

15. MVC n'est pas le meilleur moyen de
faire des applications web

16. C'est mon oncle Bob qui le dit !
Architecture the Lost Years
(Ruby Midwest 2011)
Bob martin

17. Problème : quand le client est
distant..
.. L'observation est difficile

18. Pendant ce temps
Le monde change
Les terminaux : smartphones - tablettes
Le réseau : hétérogène , interruptible
Le volume des données
Les usages : géolocalisation , mode push , cloud

19. Les Révolutionnaires (Hall of fame)
John RESIG
Ryan DAHL
Jeremy ASHKENAS

20. John Resig :
Il a mis tout le monde d'accord sur la
librairie javascript pour le navigateur.

21. Ryan DAHL
Moteur V8 de
Chrome
+
API d'accès au
File system
etc..
Asynchrone
non bloquant
boucle
d'evenement
node.js

22. Jeremy ASHKENAS

23. Node.js est révolutionnaire ?
Affirmation VRAI FAUX
Le même langage coté
serveur et client ?
Simplifie les
développements
Est plus performant
scalable
indic
e:
La bo
nne r
épon
se est 4
2

24. Le même langage de bout en bout ?
Du java qui génère du
javascript ...

25. Simplifie les développements ?
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello Worldn');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
Node.js n'est pas un serveur web

26. Performance et scalabilité ?

27. Alors quelle révolution ?
Le modèle en couche (node.js)
Le modèle OOP (node.js / javascript)
Les DSL (node.js / coffeescript)
Les langages fonctionnels (underscore.js,
node.js) )
Algorithmie vs scalabilité (node.js)
2 réponses

28. R1
Ryan Dahl a remis en
cause la règle la
plus importante
de la galaxy :
L'architecture
en
couche

29. Couches MVC
Couches OOP
Couches
systèmes
etc ....

30. R2
Apres...
Avant

31. Les développeurs javascript
sont ... bons
OOP sans classe
Asynchrone essayez
coffeeescript
Code complexe - callback
Sous contrainte (taille, performance)

32. ADN des nouvelles applications
Node.js
backbone.js
Rails
django
coffeescript

33. BDD
Data BUS
N
J SO
data
ajax/WSo
JSON
(json)
JS
ON

34. BDD
Data BUS data
data
N
JSO
data data
JSON ajax/WSo data
(json) html
JS
ON data
data

35. Prendre la bonne
direction

36. Organiser son code coté client ?

37. Pourquoi organiser son
ce
erfa
l'int
de
ent ée s
tem onn
por es d -------
om
le c rt d
code coté client ?
-
i fixe l'e xpo --------
n qu tion et --------
nctio ina ---- {
// fo la pag -------- ( that ) ;
our
- /// ng')
----- tion ////// n.p
// p -------- = func ////// { turn
;
xt_o
--- have
//- b e ////// tion () es ) re mg/ne
/// nc
. ion ////// u ag n/i
this aginat /////////// over( f t.maxp plicatio g');
// p ///////// ge').h == tha t + '/ap ; ff.pn
turn /next_o
// ///// s_pa page ontex s ) re g
plu m _c age n/im g');
$('# that.nu ('src', axp plicatio ff.pn
if( ttr at.m p v_o ';
is).a (){ = th xt + '/a g /pre +'.png
$(th tion ge
=
te n/im ge
nc numpa ', _con s ){ atio umpa
}, fu hat. age ppli
c
t.n
'src axp + '/a ' + tha
if( t ).attr( n (){ that.m text n_
is io
$(th k(funct page < _ con n/img/ ng')
;
lic m ; rc', tio le.p
}).c hat.nu age++ ').attr('s applica t_id
t p e '/ { /nex
if( t.num pag xt + mi); es ) /img
tha oins_ conte rc', nu axpag lication
m _
$('# umi = .attr('s that.m + '/app
n ') = t
var _page age = contex
n p
$('# at.num ('src', _
if( th ).attr );
$(th
is that
le( ;
_tab ng')
} he on.p
.affic er')
; ev_
that oint n ()
{
g/pr
r', 'p ctio ; /im
urso fun n tion ;
} er( ) retur pplica ng')
ss('c .hov a off.p
} ). c ge') e == 1 ext + '/ ev_
a
s_p mpag cont g/pr
moin nu ', _ rn ; n/im g');
$('# ( that. ttr('src atio f.pn ';
retu applic t_of
if ).a 1) '/ /nex e +'.pn
g
$( this n (){ ge == text + g
ctio pa on n/im ag
}, fun t.num rc', _c catio t.nump
a 's ppli ha
if( th ).attr( on (){ 1 ){ + '/a /n_' + t
is
$(th k(functi age > text g ');
', _ con tion/im .png
lic mp ; _idle
}).c hat.nu page-- ttr('src applica rev
if( t t.num age').a xt + '/ mi); /p
/img
tha lus_p conte rc', nu tion
p _ lica
$('# umi = ').attr('s 1 ){ '/ app
n = t+
var _page age = contex
n p
$('# at.num ('src', _
r
if( th is).att t );
$(th tha g');
ble( n.pn
e_ta n_o
}
.a ffich ; / dow
that er') img
oint (){ cation/ g');
r', 'p tion pli ff.pn
}
urso func + '/ap n_o
ss('c o ver( ntext /dow
} ). c s').h co n/im
g
line 'src', _ atio
lus_ r( plic
$ ('#p is).att t+
'/ap
$(th ntex
{ _co nes
){
}, n () rc', xlig
ctio .attr('s (){
fun is) io n a t.ma
$(th k(funct p < th
lic xlp
}).c hat.ma p++; ow();
t
if( t.max at lp aSh
tha BuildD
.
that

38. Source : Scaling Isomorphic Javascript Code
http://blog.nodejitsu.com
MVC MVC 2
MVVM
MVP

39. Les collections
Les modeles JSON Data
MVVM
Les vues
Les contrôleurs (routes) Coté client :
client side
Coté serveur :
server side

40. Backbone.js
SproutCore 1.x
Sammy.js
Spine.js
Cappuccino
Knockout.js
Javascript MVC
Google Web Toolkit
Google Closure
Ember.js
Angular.js
Batman.js
Data- binding
http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/

43. HTML5
REDIS
NoSQL
Cloud

44. Restez sur les Rails

45. Toujours...

46. Il y a plus 1 an .. : David Heinemeier Hansson créateur de Ruby on Rails
Backbone.js , node.js etc …

47. QUES
T IONS
?
MERCI !
blog: http://germanlinux.blogspot.com
Cloud : http://apprendre1chosechaquejour.herokuapp.com