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

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

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

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

Itératif et rapide

Desktop

Tablette

Smartphone

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 pasinhé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

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

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

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

Les classes

class Coordonnees { num latitude, longitude; // getter et setter implicites}

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}

Les constructeurs

Hum... un peu de sucre syntaxique ?

class Coordonnees { num latitude, longitude;

Coordonnees(num latitude, num longitude) { this.latitude = latitude; this.longitude = longitude; }}

Coordonnees(this.latitude, this.longitude);}

Les constructeurs nommés

Possibilité d'avoir deux constructeurs avec la même signature, maisdeux noms différents

Coordonnees.equateur(num longitude) { this.latitude = 0; this.longitude = longitude; }}

main(){ var coord = new Coordonnees.equateur(12);}

Héritage

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

Pas d'interfaces explicites

Chaque classe Dart déclare une interface implicite

Pour définir une "pseudo-interface", il faut passer par une classeabstraite

abstract class I { String aMethod();}

class A implements I { String aMethod() => "some text";}

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

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

Le typage statique optionnelUn exemple

Les deux syntaxes suivantes sont strictement équivalentes

void sayHello(String name){ print('Hello $name');}

sayHello(name){ print('Hello $name');}

Fonctions et Closures

Les fonctions

Les fonctions sont des objets de premier niveau

Que l'on peut aussi écrire ainsi

void sayHello(String name){ print('Hello $name');}// Est équivalent àvoid sayHello(String name) => print('Hello $name');

var list = ['Julien', 'Jean', 'Paul'];list.forEach(sayHello)

list.forEach((e) => print('Hello $e')) DART

Opérateur Cascade

À la place de...

On peut écrire...

var button = query('#button')button.text = 'Click to Confirm' button.classes.add('important') button.on.click.add((e) => window.alert('Confirmed!'));

query('#button') ..text = 'Click to Confirm' ..classes.add('important') ..on.click.add((e) => window.alert('Confirmed!'));

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

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

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.

query('#submitInfo').on.click.add((e) => submitData()); DART

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

Les autres librairies Dart

dart:core

dart:io

dart:math

dart:json

dart:crypto

Collections, Exceptions, classes utilitaires·

Pour l'exécution côté serveur·

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

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

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é

Supression de code mort

Optimisation et obfuscation

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

HTML Templates

Shadow DOM

Web ComponentsLes templates

L'élément est parsé mais le code n'est pas exécuté et le dom n'est pasaffiché

var t = document.querySelector("#commentTemplate");// Populate content and img[src] values in the template.someElement.appendChild(t.content.cloneNode());

Web ComponentsLes éléments Custom - Définition

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

Web ComponentsLes éléments Custom - Utilisation

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

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 & les Web ComponentsLe tooling

Dart fournit un pré-compilateur pour permettre l'utilisation des WebComponents pour tous les navigateurs

En ligne de commande

Embarqué dans le Dart Editor

Dart & les Web ComponentsModel-Driven-View

Outre les composants, Dart Web Component fournit également unmécanisme de databinding

Databinding unidirectionnel

Databinding bidirectionnel

Template conditionnel

Boucles

Listener d'évènements du DOM

Databinding

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

Templating conditionnel

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

Handlers d'évènements

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

DartEn conclusion

É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

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

Quelques resources

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

Démo Dart Editor

Questions ?

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

Technology

dart europe

périgueux ville dart et dhistoire martine baloux

musée dart moderne de lille. s ommaire -h-histoire du...

codedarmor 2012 - 07/02 - gwt, maîtriser html 5 &...

dcaspl[a1] - erwan pouliquen1 panorama des entreprises des...

limpressionnisme. limpressionnisme est arrivé sur la scène...

#parapsychologie moderne

mouvement moderne

larock gérard lo euf dart 2008

l’hydrodynamique moderne

perl moderne

dart jug 2013

la magie des Œuves dart opÈre pour les fÊtes au …

guide de gestion de lentretien des ouvrages dart par :...

les pèlerins demmaüs œuvres dart associées à des textes...

introduction objectifs de dart - wordpress.com · dart est...

laissez vous conter les villes et pays dart et dhistoire

cap moderne

reims management school centre daccueil dart contemporain...

codedarmor 2012 - 06/03 - html5, css3 et javascript