Codedarmor 2012 - 13/11 - Dart, un langage moderne pour le web

Dart
Un langage moderne pour le web

Julien Vey
Consultant & Formateur, Zenika

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

De nos jours, côté serveur...


www.flickr.com/photos/25797459@N06/5438799763/

De nos jours, côté navigateur...


Pourquoi Dart ?

· Proposer une alternative à JavaScript

· Faciliter le développement de larges applications web

· Parce que Google


Pourquoi Dart ?
Parce que le développement web c'est bien...

· Aucune installation

· Multi-Devices
· Desktop
· Tablette
· Smartphone

· Itératif et rapide


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.


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


Quelques mots sur JavaScript
· Les VMs JavaScript sont très performantes

· On atteint la limite des optimisations possibles

· C'est pourquoi...


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


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


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


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
}


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
}


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;
}


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

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)
}


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;
}


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


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';
}


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


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!);


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


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


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

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

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 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 Web Components
Le framework web de Dart

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


Web Components
Les templates

<epaei=cmetepae>
tmlt d"omnTmlt" HM
TL

dv
<m sc">
ig r="
/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é

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>

<otn>/otn>
cnet<cnet
/i>
dv d""<dv
/i>
dv d""<dv
/i>
dv d""<dv
<dv
/i>
<tmlt>
/epae
<eeet
/lmn>

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

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


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 & 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 & 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


Databinding

dv HM
TL
Ipt
nu:
<nu tp=tx"dt-id"au:t"paeodr"yesmtighr"
ipt ye"et aabn=vlesr lchle=tp oehn ee>
Vle {sr}/i>
dv au: {t}<dv
Lnt:{srlnt}<dv
dv egh {t.egh}/i>
<dv
/i>
<cittp=apiaindr"
srp ye"plcto/at>
Srn sr=';
tig t '
mi( {
an) }
<srp>
/cit

Templating conditionnel

dv HM
TL
Ipt:<nu tp=tx"dt-id"au:t1>/i>
dv nu1 ipt ye"et aabn=vlesr"<dv
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>
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

Handlers d'évènements

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

É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


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


Codedarmor 2012 - 13/11 - Dart, un langage moderne pour le web

Contenu connexe

En vedette

Codedarmor 2012 - 13/11 - Dart, un langage moderne pour le web