Le web et ses standards évolue rapidement, très rapidement, trop rapidement... Les navigateurs n'arrivent pas forcément à suivre le mouvement et les utilisateurs bloqués sans mise à jour encore moins. Il devient frustrant pour les développeurs de sans cesse entendre parler de nouveautés qu'il ne pourra pas utiliser avant des années. Heureusement des outils comme Babel et PostCSS nous permettent d'enfin utiliser les dernières normes et de les laisser se préoccuper de la compatibilité ! Venez découvrir ces super outils qui vous permettront de développer dans le futur dès aujourd'hui !

1. DEvelopper
dans le futur
Dès maintenant…

2. Mathieu PARISOT
Développeur Web et Java - Formateur
http://matparisot.fr
@matparisot
https://www.google.com/+ParisotMathieu
http://humantalks.com http://brownbaglunch.fr

8. Flexbox
Grid Layout
Service workers
GamePad API
Shadow DOM
CSS variables
Fetch API
Canvas
Media Queries lvl4
HTML imports
IndexDb

9. Flexbox
Grid Layout
Service workers
GamePad API
Shadow DOM
CSS variables
Fetch API
Canvas
Media Queries lvl4
HTML imports
IndexDb
WebSQL
Calendar API

10. Classes
Modules
Fat arrow functions
Iterators
Generators
String templates
Spreading
Destructuring
Rest operator
Default parameters

12. Mise à jour du slide en cours
Merci de patienter

13. Evergreen Browsers

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

20. I
Standards

24. http://caniuse.com

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

29. 71%
79%
85%
56%
54% (0.12 : 17%)

30. Parlons du temps…

31. Les conférences / blogs

32. Les conférences / blogs Le monde réel

33. Les conférences / blogs
Passé :
Toutes les normes dont on ne parle plus
car majoritairement implémentée

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

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

36. Le monde réel
Maintenant :
Les navigateurs que vos utilisateurs possèdent

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

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

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

41. if (Modernizr.webgl){
loadAllWebGLScripts();
} else {
alert('WebGL not supported');
}
Modernizr.load({
test: Modernizr.geolocation,
yep : 'myJs.js',
nope: 'html5-polyfill.js'
});

44. Ca ne marche pas pour tout


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

46. Et si on touche à la syntaxe ?

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

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

50. Télécharge le fichier

51. Télécharge le fichier
Le parse

52. Télécharge le fichier
Le parse
Transforme le résultat

53. Télécharge le fichier
Le parse
Transforme le résultat
Injecte le résultat

55. Et si on ne le faisait qu’une fois ?

56. (faisons un aparté)

57. Un transpiler transforme un langage informatique
en un autre de haut niveau

58. Un transpiler transforme un langage informatique
en un autre de haut niveau
Java  C
Java  JavaScript
Coffreescript  JavaScript
TypeScript  JavaScript
JavaScript  JavaScript
Etc.

59. Un transpiler est un compilateur un peu spécial…

60. ES2015 ES5

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

64. (faisons un autre aparté)

65. Un préprocessor étend un langage informatique
avec de nouvelles features
Sass  CSS
Less  CSS
Stylus  CSS
Etc.

66. Un postprocessor transforme du CSS
en CSS

67. Visiblement ça marche aussi avec les développeurs…

68. CSS3 standard CSS3 compatible

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

70. $ npm install babel postcss

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

73. Plugins

74. Et des
presets
Ou des
packs

75. Développer dans le futur
Dès maintenant…

78. :root {
--mainColor: red;
}
a {
color: var(--mainColor);
}

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

80. @supports (display: flex) {
}

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

82. // A simple decorator
@annotation
class MyClass { }
function annotation(target) {
// Add a property on target
target.annotated = true;
}

83. On recap !

84. On recap !
Build

85. On recap !
Javascript standard Javascript compatible
Build

86. On recap !
Javascript standard Javascript compatible
CSS standard CSS compatible
Build

87. On recap !
Javascript standard Javascript compatible
CSS standard CSS compatible
Build

88. Sauf qu’il nous manque un truc…

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

90. AMD CommonJs

91. Modules + packaging

92. Modules + packaging
+ un serveur avec live reload…

93. Plugins
& loaders

94. On veut voir du code !
Du code
Sinon rien !

95. La conclusion

97. Plugins ! Plugins everywhere !!!

99. Keep it Simple !

102. Standards Frameworksou

103. Standards Frameworkset

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

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