codedarmor 2012 - 13/11 - dart, un langage moderne pour le web

53
Dart Un langage moderne pour le web Julien Vey Consultant & Formateur, Zenika

Upload: codedarmor

Post on 03-Jul-2015

457 views

Category:

Technology


0 download

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

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

DartUn langage moderne pour le web

Julien VeyConsultant & Formateur, Zenika

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

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

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

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

Dart, un langage moderne pour le Web - Code D'armor 3/53

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

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

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

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

Dart, un langage moderne pour le Web - Code D'armor 5/53

Page 6: Codedarmor 2012 - 13/11 - Dart, un langage moderne pour le web
Page 7: Codedarmor 2012 - 13/11 - Dart, un langage moderne pour le web

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

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

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

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

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

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

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

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

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

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

Dart, un langage moderne pour le Web - Code D'armor 12/53

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Les librairies

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

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

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

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

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

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

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

Les modes d'exécution

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

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

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

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

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

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

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

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

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

Dart Web ComponentsLe framework web de Dart

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DartEn conclusion

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

É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

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

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

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

Démo Dart Editor

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

Questions ?

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

<Thank You!>