codedarmor 2012 - 13/11 - dart, un langage moderne pour le web
DESCRIPTION
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.TRANSCRIPT
DartUn langage moderne pour le web
Julien VeyConsultant & Formateur, Zenika
Qui suis-je ?
Dart, un langage moderne pour le Web - Code D'armor
Julien Vey
Zenika
·
Consultant et Formateur à Zenika Paris
Développeur Java, GWT... Dart
·
·
·
Java, Open Source, Agilité
Paris, Rennes, Nantes, Lyon
www.zenika.com
blog.zenika.com
·
·
·
·
2/53
De nos jours, côté serveur...
Dart, un langage moderne pour le Web - Code D'armor 3/53
www.flickr.com/photos/25797459@N06/5438799763/
De nos jours, côté navigateur...
Dart, un langage moderne pour le Web - Code D'armor 5/53
Pourquoi Dart ?
Dart, un langage moderne pour le Web - Code D'armor
Proposer une alternative à JavaScript
Faciliter le développement de larges applications web
Parce que Google
·
·
·
7/53
Pourquoi Dart ?Parce que le développement web c'est bien...
Dart, un langage moderne pour le Web - Code D'armor
Aucune installation
Multi-Devices
Itératif et rapide
·
·
Desktop
Tablette
Smartphone
·
·
·
·
8/53
Pourquoi Dart ?Parce que le développement web c'est bien... Mais c'est aussi
Dart, un langage moderne pour le Web - Code D'armor
Manque de structure
Outillage très limité
Les concepts de librairies, packages et modules ne sont pasinhérents au langage.
·
·
·
9/53
Quelques mots sur JavaScript
Dart, un langage moderne pour le Web - Code D'armor
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
·
·
·
·
·
10/53
Quelques mots sur JavaScript
Dart, un langage moderne pour le Web - Code D'armor
Les VMs JavaScript sont très performantes
On atteint la limite des optimisations possibles
C'est pourquoi...
·
·
·
11/53
Dart, un langage moderne pour le Web - Code D'armor 12/53
Dart, Kesako ?Dart, c'est...
Dart, un langage moderne pour le Web - Code D'armor
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
·
·
·
·
·
·
13/53
Objectifs & Contraintes
Dart, un langage moderne pour le Web - Code D'armor
Objectifs
Contraintes
·
Fournir un riche ensemble de fonctionnalités
Performant
Facile à développer
·
·
·
·
Doit être vu comme un langage familier pour la majorité desdéveloppeurs
Doit compiler efficacement en JavaScript
·
·
14/53
Le langage en quelques mots
Dart, un langage moderne pour le Web - Code D'armor
Orienté objet
À base de classes
Héritage simple
Typage optionnel
Reflexion basée sur des "Mirrors"
Mécanisme de concurrence basé sur les acteurs
·
·
·
·
·
·
15/53
Il était une fois...un
Dart, un langage moderne pour le Web - Code D'armor
// Point d'entrée d'une application Dartmain() { var group = "Code d'Armor"; // Déclaration et initialisation d'une variable sayHello(group); // Appel de fonction}
// On définit une fonctionsayHello(String group) { print("Hello $group"); // Affichage dans la console}
DART
16/53
Les classes
Dart, un langage moderne pour le Web - Code D'armor
class Coordonnees { num latitude, longitude; // getter et setter implicites}
DART
main() { var lannion = new Coordonnees(); lannion.latitude = 48; // Utilisation du setter implicite
assert(lannion.latitude == 48 ); // Utilisation du getter implicite assert(lannion.longitude == null); // Les attributs ont pour valeur null par défaut}
DART
17/53
Les constructeurs
Hum... un peu de sucre syntaxique ?
Dart, un langage moderne pour le Web - Code D'armor
class Coordonnees { num latitude, longitude;
Coordonnees(num latitude, num longitude) { this.latitude = latitude; this.longitude = longitude; }}
DART
class Coordonnees { num latitude, longitude;
Coordonnees(this.latitude, this.longitude);}
DART
18/53
Les constructeurs nommés
Possibilité d'avoir deux constructeurs avec la même signature, maisdeux noms différents
Dart, un langage moderne pour le Web - Code D'armor
class Coordonnees { num latitude, longitude;
Coordonnees.equateur(num longitude) { this.latitude = 0; this.longitude = longitude; }}
DART
main(){ var coord = new Coordonnees.equateur(12);}
DART
19/53
Héritage
Dart, un langage moderne pour le Web - Code D'armor
class Personne { String prenom; Personne.fromPrenom(this.prenom);}
class Developpeur extends Personne { Developpeur.fromPrenom(String prenom) : super.fromPrenom(prenom); // L'appel à super est obligatoire car Personne n'a pas de constructeur par défaut}
main() { var julien = new Developpeur.fromPrenom("Julien");}
DART
20/53
Pas d'interfaces explicites
Chaque classe Dart déclare une interface implicite
Pour définir une "pseudo-interface", il faut passer par une classeabstraite
Dart, un langage moderne pour le Web - Code D'armor
abstract class I { String aMethod();}
class A implements I { String aMethod() => "some text";}
DART
21/53
Le typage statique optionnelP’t'et’ ben qu’oui... p’t'et’ ben qu’non... !?
Mais 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 D'armor
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 etfavoriser la complétion
·
·
·
·
22/53
Le typage statique optionnelUn exemple
Les deux syntaxes suivantes sont strictement équivalentes
Dart, un langage moderne pour le Web - Code D'armor
void sayHello(String name){ print('Hello $name');}
DART
sayHello(name){ print('Hello $name');}
DART
23/53
Fonctions et Closures
Les fonctions
Les fonctions sont des objets de premier niveau
Que l'on peut aussi écrire ainsi
Dart, un langage moderne pour le Web - Code D'armor
void sayHello(String name){ print('Hello $name');}// Est équivalent àvoid sayHello(String name) => print('Hello $name');
DART
var list = ['Julien', 'Jean', 'Paul'];list.forEach(sayHello)
DART
list.forEach((e) => print('Hello $e')) DART
24/53
Opérateur Cascade
À la place de...
On peut écrire...
Dart, un langage moderne pour le Web - Code D'armor
var button = query('#button')button.text = 'Click to Confirm' button.classes.add('important') button.on.click.add((e) => window.alert('Confirmed!'));
DART
query('#button') ..text = 'Click to Confirm' ..classes.add('important') ..on.click.add((e) => window.alert('Confirmed!'));
DART
25/53
Encore un peu ?
Dart, un langage moderne pour le Web - Code D'armor
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
...
·
·
·
·
·
·
·
26/53
Les librairies
dart:htmlManipuler les objets et éléments du DOM
Une API de recherche d'éléments à la JQuery
La gestion des évènements
Mais aussi... création et modifications d'éléments HTML... HttpRequest
Dart, un langage moderne pour le Web - Code D'armor
Element elem1 = query('#monid'); // Un élément ayant l'id 'monid'Element elem2 = query('.cssClass'); // Un élément ayant la class 'cssClass'List<Element> elems1 = queryAll('div'); // Tous les éléments ayant le tag (<div>).List<Element> elems2 = queryAll('input[type="text"]'); // Find all text inputs.
DART
query('#submitInfo').on.click.add((e) => submitData()); DART
28/53
dart:isolateLa gestion de la concurrence made in Dart
Dart est monothread, mais propose un modèle de concurrenceinspiré 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
Les autres librairies Dart
Dart, un langage moderne pour le Web - Code D'armor
dart:core
dart:io
dart:math
dart:json
dart:crypto
·
Collections, Exceptions, classes utilitaires·
·
Pour l'exécution côté serveur·
·
·
·
30/53
Les modes d'exécution
Dans le navigateur, nativementLe mode 'classique' d'exécution
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
<script type='application/dart'> void main() { HTMLElement element = document.getElementById('message'); element.innerHTML = 'Hello Lannion'; }</script>
HTML
32/53
Dans le navigateur, compilé en JavaScriptLe mode compatibilité
Ajout du script dart.js dans le code source
On le retrouve ainsi dans le DOM
Si le navigateur n'est pas capable d'exécuter du Dart, il utilise laversion compilé en JavaScript avec dart2js
Dart, un langage moderne pour le Web - Code D'armor
<script type="application/dart" src="web/CodeDarmor.dart"></script><script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"
HTML
<script src="http://127.0.0.1:3030/Users/julienvey/dart/CodeDarmor/web/CodeDarmor.dart.js"<script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"
HTML
33/53
dart2js
dart2js transforme une application Dart en application JavaScript
Phase de compilation semblable à ce que l'on peut avoir avec GWT
Étape obligatoire pour qu'une application Dart soit compatible avectous les navigateurs du marché
Dart, un langage moderne pour le Web - Code D'armor
Supression de code mort
Optimisation et obfuscation
·
·
34/53
Dart côté serveurLe mode 'full dart'
Dart fourni une machine virtuelle autonome pouvant être lancée enligne de commande
Permet de développer des applications Dart Serveur
Dart, un langage moderne pour le Web - Code D'armor 35/53
Dart Web ComponentsLe framework web de Dart
Web ComponentsUne 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
Dart, un langage moderne pour le Web - Code D'armor
HTML Templates
Shadow DOM
·
·
37/53
Web ComponentsLes templates
L'élément est parsé mais le code n'est pas exécuté et le dom n'est pasaffiché
Dart, un langage moderne pour le Web - Code D'armor
<template id="commentTemplate"> <div> <img src=""> <div class="comment"></div> … </div></template>
var t = document.querySelector("#commentTemplate");// Populate content and img[src] values in the template.someElement.appendChild(t.content.cloneNode());
HTML
38/53
Web ComponentsLes éléments Custom - Définition
Dart, un langage moderne pour le Web - Code D'armor
<element extends="button" name="x-fancybutton"> <template> <style scoped> div.fancy { … } </style> <div class="fancy"> <content></content> <div id="t"></div> <div id="l"></div> <div id="b"></div> </div> </template></element>
HTML
39/53
Web ComponentsLes éléments Custom - Utilisation
Dart, un langage moderne pour le Web - Code D'armor
<element extends="button" name="x-fancybutton"> <!-- definition --> ...</element>
<button is="x-fancybutton" onclick="showTimeClicked(event);"> <!-- use --> Show time</button>
HTML
40/53
Web ComponentsLe 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
Web ComponentsEn conclusion
Les Web Components constituent une grande avancée pour ledé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 nosnavigateurs
Que fait Dart pour y remédier ?
Dart, un langage moderne pour le Web - Code D'armor 42/53
Dart & les Web ComponentsLe tooling
Dart fournit un pré-compilateur pour permettre l'utilisation des WebComponents pour tous les navigateurs
Dart, un langage moderne pour le Web - Code D'armor
En ligne de commande
Embarqué dans le Dart Editor
·
·
43/53
Dart & les Web ComponentsModel-Driven-View
Outre les composants, Dart Web Component fournit également unmécanisme de databinding
Dart, un langage moderne pour le Web - Code D'armor
Databinding unidirectionnel
Databinding bidirectionnel
Template conditionnel
Boucles
Listener d'évènements du DOM
·
·
·
·
·
44/53
Databinding
Dart, un langage moderne pour le Web - Code D'armor
<div> Input: <input type="text" data-bind="value:str" placeholder="type something here"> <div> Value: {{str}}</div> <div> Length: {{str.length}}</div></div><script type="application/dart"> String str = ''; main() {}</script>
HTML
45/53
Templating conditionnel
Dart, un langage moderne pour le Web - Code D'armor
<div> <div> Input1: <input type="text" data-bind="value:str1"></div> <div> Input2: <input type="text" data-bind="value:str2"></div> <template instantiate="if str1 == str2"> <div>They match!</div> </template></div><script type="application/dart"> String str1 = ''; String str2 = ''; main() {}</script>
HTML
46/53
Handlers d'évènements
Dart, un langage moderne pour le Web - Code D'armor
<div> <button data-action="click:increment">Click me</button> <span>(click count: {{count}})</span></div><script type="application/dart"> int count = 0; void increment(e) { count++; } main() {}</script>
HTML
47/53
DartEn conclusion
État des lieux
Dart, un langage moderne pour le Web - Code D'armor
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
Google investit fortement dans Dart
·
·
·
·
Temps au démarrage 10x plus rapide·
·
Une vingtaine de développeurs à plein temps dans différentspays
De nombreuses présentations lors du dernier Google I/O
·
·
49/53
Quelques resources
Dart, un langage moderne pour le Web - Code D'armor
Site officiel
les patterns JavaScript en Dart
Les sources de Dart
Communauté Française sur le langage Dart
·
dartlang.org·
·
synonym.dartlang.org·
·
https://github.com/dart-lang·
·
gplus.to/dartlangfr
groups.google.com/forum/#!forum/dartlangfr
·
·
50/53
Démo Dart Editor
Questions ?
<Thank You!>