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

680 views
569 views

Published on

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.

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
680
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. DartUn langage moderne pour le webJulien VeyConsultant & Formateur, Zenika
  2. 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 Darmor 2/53
  3. 3. De nos jours, côté serveur... Dart, un langage moderne pour le Web - Code Darmor 3/53
  4. 4. www.flickr.com/photos/25797459@N06/5438799763/
  5. 5. De nos jours, côté navigateur... Dart, un langage moderne pour le Web - Code Darmor 5/53
  6. 6. 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 Darmor 7/53
  7. 7. Pourquoi Dart ?Parce que le développement web cest bien...· Aucune installation· Multi-Devices · Desktop · Tablette · Smartphone· Itératif et rapide Dart, un langage moderne pour le Web - Code Darmor 8/53
  8. 8. Pourquoi Dart ?Parce que le développement web cest bien... Mais cest 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 Darmor 9/53
  9. 9. Quelques mots sur JavaScript· JavaScript a beaucoup davantages 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 Darmor 10/53
  10. 10. Quelques mots sur JavaScript· Les VMs JavaScript sont très performantes· On atteint la limite des optimisations possibles· Cest pourquoi... Dart, un langage moderne pour le Web - Code Darmor 11/53
  11. 11. Dart, un langage moderne pour le Web - Code Darmor 12/53
  12. 12. Dart, Kesako ?Dart, cest...· 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 Darmor 13/53
  13. 13. 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 Darmor 14/53
  14. 14. 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 Darmor 15/53
  15. 15. Il était une fois...un/ Pitdeté dueapiainDr / on nre n plcto at DR ATmi( { 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 ocinsyel(tiggop { aHloSrn ru) pit"el $ru"; rn(Hlo gop) / Afcaedn l cnoe / fihg as a osl} Dart, un langage moderne pour le Web - Code Darmor 16/53
  16. 16. Les classescasCodnes{ 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 Darmor 17/53
  17. 17. Les constructeurscasCodnes{ 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 Darmor 18/53
  18. 18. Les constructeurs nomméscasCodnes{ 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é davoir deux constructeurs avec la même signature, maisdeux noms différents Dart, un langage moderne pour le Web - Code Darmor 19/53
  19. 19. HéritagecasPron { 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 Darmor 20/53
  20. 20. Pas dinterfaces explicitesChaque classe Dart déclare une interface implicitePour définir une "pseudo-interface", il faut passer par une classeabstraiteasrc 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 Darmor 21/53
  21. 21. Le typage statique optionnelP’tet’ ben qu’oui... p’tet’ ben qu’non... !?· Les types sont syntaxiquement optionnels· Ils nont aucun effet au runtime· Servent à documenter le code· Sont interprétés par les IDE pour fournir des feedback rapides et favoriser la complétionMais pourquoi donc un typage Optionnel ?Pour permettre une adoption massive par le plus grand nombre dedéveloppeurs, habitués au typage statique ou au typage dynamique Dart, un langage moderne pour le Web - Code Darmor 22/53
  22. 22. Le typage statique optionnelUn exempleLes deux syntaxes suivantes sont strictement équivalentesvi syel(tignm) od aHloSrn ae{ DR AT pitel $ae) rn(Hlo nm;}syel(ae{ aHlonm) DR AT pitel $ae) rn(Hlo nm;} Dart, un langage moderne pour le Web - Code Darmor 23/53
  23. 23. Fonctions et ClosuresLes fonctionsvi syel(tignm) od aHloSrn ae{ DR AT pitel $ae) rn(Hlo nm;}/ Etéuvln à / s qiaetvi syel(tignm)= pitel $ae) od aHloSrn ae > rn(Hlo nm;Les fonctions sont des objets de premier niveauvrls =[Jle en,al] a it uin, Ja Pu; DR ATls.oEc(aHlo itfrahsyel)Que lon peut aussi écrire ainsils.oEc(e = pitel $) itfrah() > rn(Hlo e) DR AT Dart, un langage moderne pour le Web - Code Darmor 24/53
  24. 24. Opérateur CascadeÀ la place de...vrbto =qeybto a utn ur(#utn) DR ATbto.et=lc t Cnim utntx Cik o ofrbto.lse.d(iprat) utncassadmotnbto.ncikad()= wno.lr(Cnimd) utno.lc.d(e > idwaetofre!);On peut écrire...qeybto ur(#utn) DR AT .tx =lc t Cnim .et Cik o ofr .cassadmotn .lse.d(iprat) .o.lc.d(e = wno.lr(Cnimd) .ncikad() > idwaetofre!); Dart, un langage moderne pour le Web - Code Darmor 25/53
  25. 25. 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 Darmor 26/53
  26. 26. Les librairies
  27. 27. dart:htmlManipuler les objets et éléments du DOMUne API de recherche déléments à la JQueryEeetee1=qeymnd) lmn lm ur(#oi; / U é é e t a a t l i D i / n l m n y n d m AdoR nTEeetee2=qeycsls; lmn lm ur(.sCas) / U ééetaatl cassCas / n lmn yn a ls cslsLs<lmn>ees =qeyl(dv) itEeet lm1 urAli; / Tu lsééet aatl tg(dv) / os e lmns yn e a <i>.Ls<lmn>ees =qeyl(ipttp=tx";/ Fn altx ipt. itEeet lm2 urAlnu[ye"et]) / id l et nusLa gestion des évènementsqeysbiIf.ncikad()= sbiDt() ur(#umtno)o.lc.d(e > umtaa); DR ATMais aussi... création et modifications déléments HTML... HttpRequest Dart, un langage moderne pour le Web - Code Darmor 28/53
  28. 28. dart:isolateLa gestion de la concurrence made in DartDart est monothread, mais propose un modèle de concurrenceinspiré dErlang et basé sur les acteursTout code Dart est exécuté au sein dun IsolateLes isolates ne partagent aucun espace mémoireIls communiquent par passage de messages uniquement Dart, un langage moderne pour le Web - Code Darmor 29/53
  29. 29. Les autres librairies Dart· dart:core · Collections, Exceptions, classes utilitaires· dart:io · Pour lexécution côté serveur· dart:math· dart:json· dart:crypto Dart, un langage moderne pour le Web - Code Darmor 30/53
  30. 30. Les modes dexécution
  31. 31. Dans le navigateur, nativementLe mode classique dexécution<cittp=apiaindr srp yeplcto/at> HM TL vi mi( { od an) HMEeeteeet=dcmn.eEeetydesg; TLlmn lmn ouetgtlmnBI(msae) eeetinrTL=el Lnin; lmn.neHM Hlo ano }<srp> /citLe code est exécuté par la VM Dart dans le navigateurNe fonctionne que dans Dartium... pour linstant Dart, un langage moderne pour le Web - Code Darmor 32/53
  32. 32. Dans le navigateur, compilé en JavaScriptLe 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/atjOn 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/atjSi le navigateur nest pas capable dexécuter du Dart, il utilise laversion compilé en JavaScript avec dart2js Dart, un langage moderne pour le Web - Code Darmor 33/53
  33. 33. dart2jsdart2js transforme une application Dart en application JavaScriptPhase de compilation semblable à ce que lon peut avoir avec GWT· Supression de code mort· Optimisation et obfuscationÉtape obligatoire pour quune application Dart soit compatible avectous les navigateurs du marché Dart, un langage moderne pour le Web - Code Darmor 34/53
  34. 34. Dart côté serveurLe mode full dartDart fourni une machine virtuelle autonome pouvant être lancée enligne de commandePermet de développer des applications Dart Serveur Dart, un langage moderne pour le Web - Code Darmor 35/53
  35. 35. Dart Web ComponentsLe framework web de Dart
  36. 36. Web ComponentsUne initiative commune aux différents acteurs du webFavoriser la composition et la réutilisation déléments HTML et CSShttp://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.htmlDeux spécifications en cours· HTML Templates· Shadow DOM Dart, un langage moderne pour le Web - Code Darmor 37/53
  37. 37. Web ComponentsLes 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> /epaevrt=dcmn.urSlco(#omnTmlt"; a ouetqeyeetr"cmetepae)/ Pplt cnetadigsc vle i tetmlt. / ouae otn n m[r] aus n h epaesmEeetapnCidtcnetcoeoe); oelmn.pedhl(.otn.lnNd()Lélément est parsé mais le code nest pas exécuté et le dom nest pasaffiché Dart, un langage moderne pour le Web - Code Darmor 38/53
  38. 38. Web ComponentsLes é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 Darmor 39/53
  39. 39. Web ComponentsLes é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 Darmor 40/53
  40. 40. Web ComponentsLe shadow DOMLe DOM contenu dans lélément custom nest pas visibleSeul le contenu de lélément content est visible Dart, un langage moderne pour le Web - Code Darmor 41/53
  41. 41. Web ComponentsEn conclusionLes Web Components constituent une grande avancée pour ledéveloppement dapplications WebLes spécifications nen sont quà létat DraftCes fonctionnalités ne sont donc pas encore disponibles dans tous nosnavigateursQue fait Dart pour y remédier ? Dart, un langage moderne pour le Web - Code Darmor 42/53
  42. 42. Dart & les Web ComponentsLe toolingDart fournit un pré-compilateur pour permettre lutilisation des WebComponents pour tous les navigateurs· En ligne de commande· Embarqué dans le Dart Editor Dart, un langage moderne pour le Web - Code Darmor 43/53
  43. 43. Dart & les Web ComponentsModel-Driven-ViewOutre les composants, Dart Web Component fournit également unmécanisme de databinding· Databinding unidirectionnel· Databinding bidirectionnel· Template conditionnel· Boucles· Listener dévènements du DOM Dart, un langage moderne pour le Web - Code Darmor 44/53
  44. 44. 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 Darmor 45/53
  45. 45. 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 Darmor 46/53
  46. 46. 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 Darmor 47/53
  47. 47. DartEn conclusion
  48. 48. É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 Darmor 49/53
  49. 49. 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 Darmor 50/53
  50. 50. Démo Dart Editor
  51. 51. Questions ?
  52. 52. <Thank You!>

×