ES6 de plein front avec Browserify

Why and how introduce ES6 and Browserify in your existing codebase.

Code exemples can be found on GitHub : https://github.com/farnoux/web2day-2015-browserify-es6

Presented in the context of the 2015 Web2Day event, in the iAdvize HQ, in beautiful Nantes, France, by @farnoux.

Transcript

2. REAL TIME. REAL PEOPLE. REAL RESULTS. real-time customer engagement platform
3. REAL TIME. REAL PEOPLE. REAL RESULTS. real-time customer engagement platform
4. @farnoux
5. What this talk is about?
6. AND EFFICIENCY I HAVE A DREAM ON FRONT-END SIDE STRUCTURE
7. worst logo ever no logo at all
8. What these tools can bring us?
9. let’s talk about modularity
10. how modularity used to be (function(global) { global.salut = function(name) { console.log(‘salut ’ + name); }; })(this);
11. IIFE scoping (function(global) { global.salut = function(name) { console.log(‘salut ’ + name); }; })(this);
12. namespace via global vars (function(global) { global.salut = function(name) { console.log(‘salut ’ + name); }; })(this);
13. manual dependency management (inclusion order matters) <script src="js/salut.js"></script> <script src="js/michel.js"></script> (function(global) { global.michel = function() { global.salut(‘Michel’); }; })(this);
14. ok for small projects, but not very scalable
15. familiar with Node.js?
16. CommonJS module style // salut.js module.exports = function(name) { console.log(‘salut ’ + name); }; simple syntax scoped namespace
17. automatic dependency management // michel.js var salut = require(‘./salut’); module.exports = function() { salut(‘Michel’); };
18. awesome npm catalog var _ = require(‘lodash’); // package.json { “dependencies”: { “lodash”: “1.0.0” } }
19. enter browserify aka Node-style for the browser
20. parse and manage your dependencies // gulpfile browserify(‘./michel.js’)
21. bundle up all your modules in one file // gulpfile browserify(‘./michel.js’) .bundle() <script src="bundle.js"></script>
22. compilation and bundling are great… or not. (especially for development)
23. hopefully each problem has a solution :)
24. // gulpfile browserify(‘./michel.js’, { debug: true }) .bundle() debugging multiples files in one bundle? source-maps!
25. // gulpfile gulp.watch(‘./**/*.js’, ['build']); compile on each file changes? watch!
26. in brief, browserify gives you an efficient structure and dependency management …on the browser!
27. ES6/2015
28. new Javascript version \o/ ES6/2015
29. brings new syntax features to our old beloved Javascript
30. arrow functions done(function(data) { console.log(data); }); done(data => { console.log(data); }); ES5 ES6
31. default parameters function salut(name) { name = name || ‘Michel’; console.log(‘salut ’ + name); } function salut(name = ‘Michel’) { console.log(‘salut ’ + name); } ES5 ES6
32. const var MICHEL = ‘michel’; const MICHEL = ‘michel’; ES5 ES6
33. class function Man {} Man.prototype.salut = function() { console.log(‘salut’); } class Man { constructor() {} salut() { console.log(‘salut’); } } ES5 ES6
34. and many more… http://es6-features.org/
35. why should you use it?
36. embrace the future and empower your Javascript coding! increase productivity easier to maintain
37. ok but what about browser support?
38. enter babel aka ES6-to-ES5 compiler
39. browserify and babel, why?
40. browserify needs compilation babel needs compilation // gulpfile browserify(‘./index.js’) .transform(babelify()) .bundle() browserify provides “transform”!
41. in brief, productive and easy-to-maintain front-end environment
42. LESS TIME CODING MORE TIME BEING AWESOME
43. Thank you :) https://github.com/farnoux/web2day-2015-browserify-es6
44. we hire! http://www.iadvize.com/en/recruitment