Développez dans le futur, dès maintenant !

DEvelopper dans le futur

Dès maintenant…

Mathieu PARISOTDéveloppeur Web et Java - Formateur

http://matparisot.fr

@matparisot

https://www.google.com/+ParisotMathieu

http://humantalks.com http://brownbaglunch.fr

FlexboxGrid Layout

Service workers

GamePad API

Shadow DOM

CSS variables

Fetch API

Canvas

Media Queries lvl4

HTML imports

IndexDb

FlexboxGrid Layout

Service workers

GamePad API

Shadow DOM

CSS variables

Fetch API

Canvas

Media Queries lvl4

HTML imports

IndexDb

WebSQL

Calendar API

ClassesModules

Fat arrow functions

Iterators

GeneratorsString templates

Spreading

Destructuring

Rest operator

Default parameters

Mise à jour du slide en coursMerci de patienter

Evergreen Browsers

https://github.com/edankwan/Jesus.js

IStandards

http://caniuse.com

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

71%

79%

85%

56%

54% (0.12 : 17%)

Parlons du temps…

Les conférences / blogs

Les conférences / blogs Le monde réel


Passé : Toutes les normes dont on ne parle plus car majoritairement implémentée



Présent : Toutes les normes en cours d’implémentation



Présent : Toutes les normes en cours d’implémentation

Futur : Toutes les normes expérimentales encore en cours de discussions

Le monde réel

Maintenant : Les navigateurs que vos utilisateurs possèdent

“Official W3C policy states that you shouldn’t really use experimental properties in production code, but people do, as they want to make sites look cool and keep on the cutting edge.” – W3C page on optimizing content for different browsers

https://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way

Développer dans le passé Dès maintenant…

if (Modernizr.webgl){ loadAllWebGLScripts();} else { alert('WebGL not supported');}

if (Modernizr.webgl){ loadAllWebGLScripts();} else { alert('WebGL not supported');}

Modernizr.load({ test: Modernizr.geolocation, yep : 'myJs.js', nope: 'html5-polyfill.js'});

Ca ne marche pas pour tout

Développer dans le présent Dès maintenant…

Et si on touche à la syntaxe ?

function buildUrl({protocol = 'http://', domain, port = 80}) { return `${protocol}${domain}:${port}`;}

function* integerGenerator() { let curInt = 0; while(true) { curInt++; yield curInt; }}

Télécharge le fichier


Le parse


Le parse

Transforme le résultat


Le parse

Transforme le résultat

Injecte le résultat

Et si on ne le faisait qu’une fois ?

(faisons un aparté)

Un transpiler transforme un langage informatique

en un autre de haut niveau

Un transpiler transforme un langage informatique

en un autre de haut niveau

Java CJava JavaScriptCoffreescript JavaScriptTypeScript JavaScriptJavaScript JavaScriptEtc.

Un transpiler est un compilateur un peu spécial…

ES2015 ES5

-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;

(faisons un autre aparté)

Un préprocessor étend un langage informatique

avec de nouvelles features

Sass CSSLess CSSStylus CSSEtc.

Un postprocessor transforme du CSS

en CSS

Visiblement ça marche aussi avec les développeurs…

CSS3 standard CSS3 compatible

https://babeljs.io/ https://github.com/postcss/postcss

$ npm install babel postcss

$ babel script.js --out-file script-compiled.js$ postcss style.css –o compatible-style.css

$ npm install babel postcss

Plugins

Et des presetsOu despacks

Développer dans le futur Dès maintenant…

:root { --mainColor: red;}

a { color: var(--mainColor);}

@media screen and (width >= 500px) and (width <= 1200px) { .bar { display: block; }}

@supports (display: flex) { }

async function loadDataAsync() { try { let data = await getJSON('data.json'); addHtml(data); } catch (err) { addError("Oups: " + err.message); }}

// A simple decorator@annotationclass MyClass { }

function annotation(target) { // Add a property on target target.annotated = true;}

On recap !

On recap !

Build

On recap !Javascript standard Javascript compatible

Build

On recap !Javascript standard Javascript compatible

CSS standard CSS compatible

Build

Sauf qu’il nous manque un truc…

export function myFunction()import {myFunction} from 'module'

AMD CommonJs

Modules + packaging

Modules + packaging+ un serveur avec live reload…

Plugins & loaders

On veut voir du code !Du code

Sinon rien !

La conclusion

Plugins ! Plugins everywhere !!!

Keep it Simple !

Standards Frameworksou

Standards Frameworkset

http://matparisot.fr/3-nouveautes-majeurs-decmascript-2015-que-vous-allez-adorer/

http://matparisot.fr/7-nouveautes-qui-vont-vous-simplifier-la-vie-en-es-2015/

https://github.com/mparisot/conf_dev_futur

Merci !@matparisot - http://matparisot.fr

http://humantalks.com http://brownbaglunch.fr

http://matparisot.fr/3-nouveautes-majeurs-decmascript-2015-que-vous-allez-adorer/

http://matparisot.fr/7-nouveautes-qui-vont-vous-simplifier-la-vie-en-es-2015/

https://github.com/mparisot/conf_dev_futur

Développez dans le futur, dès maintenant !

Internet

Transcript of Développez dans le futur, dès maintenant !