Développez dans le futur, dès maintenant !
•Télécharger en tant que PPTX, PDF•
0 j'aime•61 vues
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 !
Signaler
Partager
Développez dans le futur, dès maintenant !
- 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
- 20. I Standards
- 29. 71% 79% 85% 56% 54% (0.12 : 17%)
- 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; } }
- 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 ?
- 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
- 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
- 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
- 92. Modules + packaging + un serveur avec live reload…
- 94. On veut voir du code ! Du code Sinon rien !
- 95. La conclusion
- 97. Plugins ! Plugins everywhere !!!
- 99. Keep it Simple !
- 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