développez dans le futur, dès maintenant !
TRANSCRIPT
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
Les conférences / blogs
Passé : Toutes les normes dont on ne parle plus car majoritairement implémentée
Les conférences / blogs
Passé : Toutes les normes dont on ne parle plus car majoritairement implémentée
Présent : Toutes les normes en cours d’implémentation
Les conférences / blogs
Passé : Toutes les normes dont on ne parle plus car majoritairement implémentée
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
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
Télécharge le fichier
Le parse
Télécharge le fichier
Le parse
Transforme le résultat
Télécharge le fichier
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
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