Devoxx France 2015 - Développement web en 2015

Embed Size (px)

Citation preview

  • @romaintaz#DvxFrWeb2015

    Dveloppement WebCe qui nous attend en 2015

  • @romaintaz#DvxFrWeb2015

    Romain Linsolas

    @romaintaz

    Socit GnraleDveloppeur Java & Web

  • FrameworksWeb

  • @romaintaz#DvxFrWeb2015

    Petit panorama du web en 2015

  • Catgorie Valeur sre laquelle nous n'chapperons pas en 2015

    ECMAScript 6

  • @romaintaz#DvxFrWeb2015

    Petit historique d'ECMAScript

    19971998

    1999

    2009

    2015

    ES 1ES 2

    ES 3

    ES 5

    ES 6

    ES 4

  • @romaintaz#DvxFrWeb2015

    ECMAScript 6, les classes

    class DevoxxFrance extends Conference {

    constructor(name) {this.name = name;

    }

    welcome() {return "Welcome to " + this.name;

    }}

  • @romaintaz#DvxFrWeb2015

    ECMAScript 6, "let" & "const"var a = 42, b = 42;if (true) {

    var a = 0;let b = 0; // Porte limite au scope if {}console.log(a); // 0console.log(b); // 0

    }console.log(a); // 0console.log(b); // 42

    for (let i = 0; i < 10; i++) { ... }// i undefined

    const la_reponse = 42;la_reponse = 21;console.log(la_reponse); // retourne 42

  • @romaintaz#DvxFrWeb2015

    ECMAScript 6, "String interpolation"

    var answer = 42;

    console.log(`La rponse est ${answer}`);// La rponse est 42

    function where() {return "Devoxx France";

    }

    console.log(`Bienvenue ${where()}!`);// Bienvenue Devoxx France!

  • @romaintaz#DvxFrWeb2015

    ECMAScript 6, "=>"

    var nombres = [1, 2, 3, 4, 5];var pairs = nombres.filter(n => n % 2 == 0); // retourne [2, 4]// var pairs = nombres.filter(function (n) { // return n % 2 == 0;// });

    function compteur() {this.valeur = 0;

    setInterval(() => { this.valeur++; } // Pas de problme avec this, 1000);

    }

  • @romaintaz#DvxFrWeb2015

    ECMAScript 6, autres

    Promesses Syntaxe forof Modules Structure de donnes Etc.

  • @romaintaz#DvxFrWeb2015

    ECMAScript 6, le support des navigateurs

    https://kangax.github.io/compat-table/es6/

  • @romaintaz#DvxFrWeb2015

    Transpilons !

    6to5 ("Babel") - https://babeljs.io

    Traceur (Google)

    https://github.com/addyosmani/es6-tools

  • Catgorie Autre valeur sre laquelle nous n'chapperons pas en 2015

    Web Components

  • @romaintaz#DvxFrWeb2015

    Pourquoi les Web Components ?

  • @romaintaz#DvxFrWeb2015

    Pourquoi les Web Components ?

    Onglet 1

    Onglet 2

    Contenu 1

    Contenu 2

  • @romaintaz#DvxFrWeb2015

    Pourquoi les Web Components ?

    Onglet 1

    Onglet 2

    Contenu 1

    Contenu 2

    Contenu 1

    Contenu 2

  • @romaintaz#DvxFrWeb2015

    Les standards Web Components

    Shadow DOM Template HTML Import Custom Elements

  • @romaintaz#DvxFrWeb2015

    Crer ses Web Components

    GooglePolymer

    Bosonic

    MozillaX-Tag

    IBMDelite

  • @romaintaz#DvxFrWeb2015

    Les Web Components prts pour la prod?

    Standards encore (un peu) en volution Implmentations trs changeantes Compatibilit des navigateurs

    http://jonrimmer.github.io/are-we-componentized-yet/

  • @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015

    DEMO !

  • Catgorie Valeur peu prs sre mais que de toutes faons tout le monde va en parler, donc autant s'y prparer

    Angular v2

  • @romaintaz#DvxFrWeb2015

    Bref historique

    20092010

    20112012

    20132014

    20152016

    1e release

    1.0 1.11.2

    1.31.4 1.5

    2.0

  • @romaintaz#DvxFrWeb2015

    Angular, un succs !

  • @romaintaz#DvxFrWeb2015

    Adieu, concepts de la v1 ! angular.module $scope Controllers Directive Definition Objects jqLite

  • @romaintaz#DvxFrWeb2015

    La v2, une refonte complte

    Dependency injection Templating Routing Logging Persistence Decorators Benchmarking / monitoring Etc.

  • @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015

    DEMO !

  • Catgorie Pas si vieux, mais qui va faire encore pas mal parler de lui

    React

  • @romaintaz#DvxFrWeb2015

    React

    Projet par acebook Sorti en 2013 Soccupe uniquement de la partie vue (MV*) JavaScript isomorphique (serveur & client) React Native pour des applications mobiles natives

  • @romaintaz#DvxFrWeb2015

    React Principaux avantages

    Dataflow uni-directionnel :o voir React comme une fonction (tat) (DOM)o le mme tat donne toujours le mme rendu

    DOM virtuel :o Manipulation plus rapideo Modifications minimales

  • @romaintaz#DvxFrWeb2015

    Le JSX de React

    ...

    React.render(

    Hello Devoxx!,document.getElementById("message")

    );

    ...

  • @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015

    DEMO !

  • Catgorie Franchement c'est pas mal, a commence bien marcher

    Ionic Framework

  • @romaintaz#DvxFrWeb2015

    Ionic Framework

    SDK destin aux applis mobiles hybrides Dveloppement avec Angular Support Angular 2 prvu

  • @romaintaz#DvxFrWeb2015

    Dmarrer un projet Ionic

    $ npm install g cordova ionic$ ionic start $ ionic platform add ios$ ionic serve$ ionic emulate ios

  • @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015

    DEMO !

  • Catgorie On y croit. Pour au moins 6 mois, ce qui n'est dj pas mal !

    Aurlia

  • @romaintaz#DvxFrWeb2015

    Aurelia

    Vise le long terme :o bas sur ECMAScript 6 (et 7)o utilise le web components

    Compltement modulable

  • @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015

    DEMO !

  • @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015

    Rsumons

  • @romaintaz#DvxFrWeb2015

    Conclusion

    {{ 2015 }} Excitation : plein de nouveaux frameworks :o) Frustration : plein de nouveaux frameworks :o(

    Quelques tendances :o ECMAScript 6o Web components

  • @YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrWeb2015

    Q & A

    http://bit.ly/dvxfr15-web