Dart est un nouveau langage de programmation pour développer des applications web. Créé par Google et ouvert au grand public en octobre 2011, c’est un langage orienté-objet avec une syntaxe familière que l’on soit développeur Java ou développeur JavaScript. Ses deux objectifs ? Performance et facilité d’utilisation.
Dans cette présentation, nous verrons quels sont les objectifs de Google en introduisant ce nouveau langage. Nous irons au coeur de celui-ci en présentant les différentes spécificités, typage optionnel, les Isolates comme modèle de concurrence, les différents mode d’exécution, la gestion du DOM... Enfin, nous discuterons des échéances à venir pour savoir si Dart saura s’imposer ou non en tant que langage d’avenir pour le web.
Par Julien Vey de Zénika.
2. Qui suis-je ?
· Julien Vey
· Consultant et Formateur à Zenika Paris
· Développeur Java, GWT... Dart
· Zenika
· Java, Open Source, Agilité
· Paris, Rennes, Nantes, Lyon
· www.zenika.com
· blog.zenika.com
Dart, un langage moderne pour le Web - Code D'armor 2/53
3. De nos jours, côté serveur...
Dart, un langage moderne pour le Web - Code D'armor 3/53
5. De nos jours, côté navigateur...
Dart, un langage moderne pour le Web - Code D'armor 5/53
6.
7. Pourquoi Dart ?
· Proposer une alternative à JavaScript
· Faciliter le développement de larges applications web
· Parce que Google
Dart, un langage moderne pour le Web - Code D'armor 7/53
8. Pourquoi Dart ?
Parce que le développement web c'est bien...
· Aucune installation
· Multi-Devices
· Desktop
· Tablette
· Smartphone
· Itératif et rapide
Dart, un langage moderne pour le Web - Code D'armor 8/53
9. Pourquoi Dart ?
Parce que le développement web c'est bien... Mais c'est aussi
· Manque de structure
· Outillage très limité
· Les concepts de librairies, packages et modules ne sont pas
inhérents au langage.
Dart, un langage moderne pour le Web - Code D'armor 9/53
10. Quelques mots sur JavaScript
· JavaScript a beaucoup d'avantages mais a aussi ses défauts
· Beaucoup de conversions de type implicites
· Pas de vérification de type sur les arguments
· Pas de bornes sur les tableaux
· wtfjs.com
Dart, un langage moderne pour le Web - Code D'armor 10/53
11. Quelques mots sur JavaScript
· Les VMs JavaScript sont très performantes
· On atteint la limite des optimisations possibles
· C'est pourquoi...
Dart, un langage moderne pour le Web - Code D'armor 11/53
13. Dart, Kesako ?
Dart, c'est...
· Un langage de programmation, actuellement en version M1
· Un IDE, Dart Editor, basé sur Eclipse
· Une VM standalone
· Une VM embarqué dans Chromium (surnommée Dartium)
· Un ensemble de librairies (html, json, isolate...)
· Un framework web, Dart Web Components
Dart, un langage moderne pour le Web - Code D'armor 13/53
14. Objectifs & Contraintes
· Objectifs
· Fournir un riche ensemble de fonctionnalités
· Performant
· Facile à développer
· Contraintes
· Doit être vu comme un langage familier pour la majorité des
développeurs
· Doit compiler efficacement en JavaScript
Dart, un langage moderne pour le Web - Code D'armor 14/53
15. Le langage en quelques mots
· Orienté objet
· À base de classes
· Héritage simple
· Typage optionnel
· Reflexion basée sur des "Mirrors"
· Mécanisme de concurrence basé sur les acteurs
Dart, un langage moderne pour le Web - Code D'armor 15/53
16. Il était une fois...
un
/ Pitdeté dueapiainDr
/ on 'nre 'n plcto at DR
AT
mi( {
an)
vrgop="oedAmr; / Dcaaine iiilsto duevral
a ru Cd 'ro" / élrto t ntaiain 'n aibe
syel(ru)
aHlogop; / Apld fnto
/ pe e ocin
}
/ O dfntuefnto
/ n éii n ocin
syel(tiggop {
aHloSrn ru)
pit"el $ru";
rn(Hlo gop) / Afcaedn l cnoe
/ fihg as a osl
}
Dart, un langage moderne pour le Web - Code D'armor 16/53
17. Les classes
casCodnes{
ls orone DR
AT
nmlttd,lniue / gte e ste ipiie
u aiue ogtd; / etr t etr mlcts
}
mi( {
an) DR
AT
vrlnin=nwCodnes)
a ano e orone(;
lninlttd =4;
ano.aiue 8 / Uiiaind ste ipiie
/ tlsto u etr mlct
asr(ano.aiue= 4 )
setlninlttd = 8 ; / Uiiaind gte ipiie
/ tlsto u etr mlct
asr(ano.ogtd = nl) / Lsatiusotpu vlu nl prdfu
setlninlniue = ul; / e trbt n or aer ul a éat
}
Dart, un langage moderne pour le Web - Code D'armor 17/53
18. Les constructeurs
casCodnes{
ls orone DR
AT
nmlttd,lniue
u aiue ogtd;
Codnesnmlttd,nmlniue {
orone(u aiue u ogtd)
ti.aiue=lttd;
hslttd aiue
ti.ogtd =lniue
hslniue ogtd;
}
}
Hum... un peu de sucre syntaxique ?
casCodnes{
ls orone DR
AT
nmlttd,lniue
u aiue ogtd;
Codnesti.aiue ti.ogtd)
orone(hslttd, hslniue;
}
Dart, un langage moderne pour le Web - Code D'armor 18/53
19. Les constructeurs nommés
casCodnes{
ls orone DR
AT
nmlttd,lniue
u aiue ogtd;
Codneseutu(u lniue {
orone.qaernm ogtd)
ti.aiue=0
hslttd ;
ti.ogtd =lniue
hslniue ogtd;
}
}
mi({
an) DR
AT
vrcod=nwCodneseutu(2;
a or e orone.qaer1)
}
Possibilité d'avoir deux constructeurs avec la même signature, mais
deux noms différents
Dart, un langage moderne pour le Web - Code D'armor 19/53
20. Héritage
casPron {
ls esne DR
AT
Srn peo;
tig rnm
Pron.rmrnmti.rnm;
esnefoPeo(hspeo)
}
casDvlperetnsPron {
ls eeopu xed esne
DvlperfoPeo(tigpeo):sprfoPeo(rnm;
eeopu.rmrnmSrn rnm ue.rmrnmpeo)
/ LaplàspretolgtiecrPron napsd cntutu prdfu
/ 'pe ue s biaor a esne ' a e osrcer a éat
}
mi( {
an)
vrjle =nwDvlperfoPeo(Jle";
a uin e eeopu.rmrnm"uin)
}
Dart, un langage moderne pour le Web - Code D'armor 20/53
21. Pas d'interfaces explicites
Chaque classe Dart déclare une interface implicite
Pour définir une "pseudo-interface", il faut passer par une classe
abstraite
asrc casI{
btat ls DR
AT
Srn aehd)
tig Mto(;
}
casAipeet I{
ls mlmns
Srn aehd)= "oetx"
tig Mto( > sm et;
}
Dart, un langage moderne pour le Web - Code D'armor 21/53
22. Le typage statique optionnel
P’t'et’ ben qu’oui... p’t'et’ ben qu’non... !?
· Les types sont syntaxiquement optionnels
· Ils n'ont aucun effet au runtime
· Servent à documenter le code
· Sont interprétés par les IDE pour fournir des feedback rapides et
favoriser la complétion
Mais pourquoi donc un typage Optionnel ?
Pour permettre une adoption massive par le plus grand nombre de
développeurs, habitués au typage statique ou au typage dynamique
Dart, un langage moderne pour le Web - Code D'armor 22/53
23. Le typage statique optionnel
Un exemple
Les deux syntaxes suivantes sont strictement équivalentes
vi syel(tignm)
od aHloSrn ae{ DR
AT
pit'el $ae)
rn(Hlo nm';
}
syel(ae{
aHlonm) DR
AT
pit'el $ae)
rn(Hlo nm';
}
Dart, un langage moderne pour le Web - Code D'armor 23/53
24. Fonctions et Closures
Les fonctions
vi syel(tignm)
od aHloSrn ae{ DR
AT
pit'el $ae)
rn(Hlo nm';
}
/ Etéuvln à
/ s qiaet
vi syel(tignm)= pit'el $ae)
od aHloSrn ae > rn(Hlo nm';
Les fonctions sont des objets de premier niveau
vrls =[Jle' 'en,'al]
a it 'uin, Ja' Pu'; DR
AT
ls.oEc(aHlo
itfrahsyel)
Que l'on peut aussi écrire ainsi
ls.oEc(e = pit'el $')
itfrah() > rn(Hlo e) DR
AT
Dart, un langage moderne pour le Web - Code D'armor 24/53
25. Opérateur Cascade
À la place de...
vrbto =qey'bto'
a utn ur(#utn) DR
AT
bto.et='lc t Cnim
utntx Cik o ofr'
bto.lse.d(iprat)
utncassad'motn'
bto.ncikad()= wno.lr(Cnimd')
utno.lc.d(e > idwaet'ofre!);
On peut écrire...
qey'bto'
ur(#utn) DR
AT
.tx ='lc t Cnim
.et Cik o ofr'
.cassad'motn'
.lse.d(iprat)
.o.lc.d(e = wno.lr(Cnimd')
.ncikad() > idwaet'ofre!);
Dart, un langage moderne pour le Web - Code D'armor 25/53
26. Encore un peu ?
· A Tour of the Dart Language
· http://www.dartlang.org/docs/dart-up-and-running/ch02.html
· Les paramètres optionnels
· Les génériques
· La gestion des exceptions
· Packages, librairies, imports
· ...
Dart, un langage moderne pour le Web - Code D'armor 26/53
28. dart:html
Manipuler les objets et éléments du DOM
Une API de recherche d'éléments à la JQuery
Eeetee1=qey'mnd)
lmn lm ur(#oi'; / U é é e t a a t l i 'D i '
/ n l m n y n ' d m AdoR
nT
Eeetee2=qey'csls';
lmn lm ur(.sCas) / U ééetaatl cas'sCas
/ n lmn yn a ls csls'
Ls<lmn>ees =qeyl(dv)
itEeet lm1 urAl'i'; / Tu lsééet aatl tg(dv)
/ os e lmns yn e a <i>.
Ls<lmn>ees =qeyl(ipttp=tx"';/ Fn altx ipt.
itEeet lm2 urAl'nu[ye"et]) / id l et nus
La gestion des évènements
qey'sbiIf'.ncikad()= sbiDt()
ur(#umtno)o.lc.d(e > umtaa); DR
AT
Mais aussi... création et modifications d'éléments HTML... HttpRequest
Dart, un langage moderne pour le Web - Code D'armor 28/53
29. dart:isolate
La gestion de la concurrence made in Dart
Dart est monothread, mais propose un modèle de concurrence
inspiré d'Erlang et basé sur les acteurs
Tout code Dart est exécuté au sein d'un Isolate
Les isolates ne partagent aucun espace mémoire
Ils communiquent par passage de messages uniquement
Dart, un langage moderne pour le Web - Code D'armor 29/53
30. Les autres librairies Dart
· dart:core
· Collections, Exceptions, classes utilitaires
· dart:io
· Pour l'exécution côté serveur
· dart:math
· dart:json
· dart:crypto
Dart, un langage moderne pour le Web - Code D'armor 30/53
32. Dans le navigateur, nativement
Le mode 'classique' d'exécution
<cittp=apiaindr'
srp ye'plcto/at> HM
TL
vi mi( {
od an)
HMEeeteeet=dcmn.eEeetyd'esg';
TLlmn lmn ouetgtlmnBI(msae)
eeetinrTL='el Lnin;
lmn.neHM Hlo ano'
}
<srp>
/cit
Le code est exécuté par la VM Dart dans le navigateur
Ne fonctionne que dans Dartium... pour l'instant
Dart, un langage moderne pour le Web - Code D'armor 32/53
33. Dans le navigateur, compilé en JavaScript
Le mode compatibilité
Ajout du script dart.js dans le code source
<cittp=apiaindr"sc"e/oeamrdr"<srp>
srp ye"plcto/at r=wbCdDro.at>/cit HM
TL
<citsc"tp:/atgolcd.o/v/rnhsbedn_dedr/letdr.s
srp r=hts/dr.ogeoecmsnbace/leigeg/atcin/atj
On le retrouve ainsi dans le DOM
< c i t s c " t p / 1 7 0 0 1 3 3 / s r / u i n e / a t C d D r o / e / Te a m r d r .
s r p r = h t : / 2 . . . : 0 0 U e s j l e v y d r / o e a m r w bH d D r o . a t
CM
oL
<citsc"tp:/atgolcd.o/v/rnhsbedn_dedr/letdr.s
srp r=hts/dr.ogeoecmsnbace/leigeg/atcin/atj
Si le navigateur n'est pas capable d'exécuter du Dart, il utilise la
version compilé en JavaScript avec dart2js
Dart, un langage moderne pour le Web - Code D'armor 33/53
34. dart2js
dart2js transforme une application Dart en application JavaScript
Phase de compilation semblable à ce que l'on peut avoir avec GWT
· Supression de code mort
· Optimisation et obfuscation
Étape obligatoire pour qu'une application Dart soit compatible avec
tous les navigateurs du marché
Dart, un langage moderne pour le Web - Code D'armor 34/53
35. Dart côté serveur
Le mode 'full dart'
Dart fourni une machine virtuelle autonome pouvant être lancée en
ligne de commande
Permet de développer des applications Dart Serveur
Dart, un langage moderne pour le Web - Code D'armor 35/53
37. Web Components
Une initiative commune aux différents acteurs du web
Favoriser la composition et la réutilisation d'éléments HTML et CSS
http://dvcs.w3.org/hg/webcomponents/raw-
file/tip/explainer/index.html
Deux spécifications en cours
· HTML Templates
· Shadow DOM
Dart, un langage moderne pour le Web - Code D'armor 37/53
38. Web Components
Les templates
<epaei=cmetepae>
tmlt d"omnTmlt" HM
TL
<i>
dv
<m sc">
ig r="
<i cas"omn"<dv
dv ls=cmet>/i>
…
<dv
/i>
<tmlt>
/epae
vrt=dcmn.urSlco(#omnTmlt";
a ouetqeyeetr"cmetepae)
/ Pplt cnetadigsc vle i tetmlt.
/ ouae otn n m[r] aus n h epae
smEeetapnCidtcnetcoeoe);
oelmn.pedhl(.otn.lnNd()
L'élément est parsé mais le code n'est pas exécuté et le dom n'est pas
affiché
Dart, un langage moderne pour le Web - Code D'armor 38/53
39. Web Components
Les éléments Custom - Définition
<lmn etns"utn nm=xfnyutn>
eeet xed=bto" ae"-acbto" HM
TL
<epae
tmlt>
<tl soe>
sye cpd
dvfny{
i.ac
…
}
<sye
/tl>
<i cas"ac"
dv ls=fny>
<otn>/otn>
cnet<cnet
<i i=t>/i>
dv d""<dv
<i i=l>/i>
dv d""<dv
<i i=b>/i>
dv d""<dv
<dv
/i>
<tmlt>
/epae
<eeet
/lmn>
Dart, un langage moderne pour le Web - Code D'armor 39/53
40. Web Components
Les éléments Custom - Utilisation
<lmn etns"utn nm=xfnyutn> <- dfnto ->
eeet xed=bto" ae"-acbto" !- eiiin - HM
TL
..
.
<eeet
/lmn>
<utni=xfnyutn ocik"hwielce(vn)" <- ue->
bto s"-acbto" nlc=soTmCikdeet;> !- s -
So tm
hw ie
<bto>
/utn
Dart, un langage moderne pour le Web - Code D'armor 40/53
41. Web Components
Le shadow DOM
Le DOM contenu dans l'élément custom n'est pas visible
Seul le contenu de l'élément content est visible
Dart, un langage moderne pour le Web - Code D'armor 41/53
42. Web Components
En conclusion
Les Web Components constituent une grande avancée pour le
développement d'applications Web
Les spécifications n'en sont qu'à l'état Draft
Ces fonctionnalités ne sont donc pas encore disponibles dans tous nos
navigateurs
Que fait Dart pour y remédier ?
Dart, un langage moderne pour le Web - Code D'armor 42/53
43. Dart & les Web Components
Le tooling
Dart fournit un pré-compilateur pour permettre l'utilisation des Web
Components pour tous les navigateurs
· En ligne de commande
· Embarqué dans le Dart Editor
Dart, un langage moderne pour le Web - Code D'armor 43/53
44. Dart & les Web Components
Model-Driven-View
Outre les composants, Dart Web Component fournit également un
mécanisme de databinding
· Databinding unidirectionnel
· Databinding bidirectionnel
· Template conditionnel
· Boucles
· Listener d'évènements du DOM
Dart, un langage moderne pour le Web - Code D'armor 44/53
45. Databinding
<i>
dv HM
TL
Ipt
nu:
<nu tp=tx"dt-id"au:t"paeodr"yesmtighr"
ipt ye"et aabn=vlesr lchle=tp oehn ee>
<i>Vle {sr}/i>
dv au: {t}<dv
<i>Lnt:{srlnt}<dv
dv egh {t.egh}/i>
<dv
/i>
<cittp=apiaindr"
srp ye"plcto/at>
Srn sr=';
tig t '
mi( {
an) }
<srp>
/cit
Dart, un langage moderne pour le Web - Code D'armor 45/53
46. Templating conditionnel
<i>
dv HM
TL
<i>Ipt:<nu tp=tx"dt-id"au:t1>/i>
dv nu1 ipt ye"et aabn=vlesr"<dv
<i>Ipt:<nu tp=tx"dt-id"au:t2>/i>
dv nu2 ipt ye"et aabn=vlesr"<dv
<epaeisatae"fsr = sr"
tmlt ntnit=i t1 = t2>
<i>hymth<dv
dvTe ac!/i>
<tmlt>
/epae
<dv
/i>
<cittp=apiaindr"
srp ye"plcto/at>
Srn sr =';
tig t1 '
Srn sr =';
tig t2 '
mi( {
an) }
<srp>
/cit
Dart, un langage moderne pour le Web - Code D'armor 46/53
47. Handlers d'évènements
<i>
dv HM
TL
<utndt-cin"lc:nrmn"Cikm<bto>
bto aaato=cikiceet>lc e/utn
<pn(lc cut {cut}<sa>
sa>cik on: {on})/pn
<dv
/i>
<cittp=apiaindr"
srp ye"plcto/at>
itcut=0
n on ;
vi iceete {cut+ }
od nrmn() on+;
mi( {
an) }
<srp>
/cit
Dart, un langage moderne pour le Web - Code D'armor 47/53
49. État des lieux
· Ouverture du langage au public en Octobre 2011
· Sortie en version Milestone 1 en Octobre 2012
· Editor, Web Components en constante amélioration
· Premiers benchs très satisfaisant
· Temps au démarrage 10x plus rapide
· Google investit fortement dans Dart
· Une vingtaine de développeurs à plein temps dans différents
pays
· De nombreuses présentations lors du dernier Google I/O
Dart, un langage moderne pour le Web - Code D'armor 49/53
50. Quelques resources
· Site officiel
· dartlang.org
· les patterns JavaScript en Dart
· synonym.dartlang.org
· Les sources de Dart
· https://github.com/dart-lang
· Communauté Française sur le langage Dart
· gplus.to/dartlangfr
· groups.google.com/forum/#!forum/dartlangfr
Dart, un langage moderne pour le Web - Code D'armor 50/53