Web development tools { starter pack }

Why and what tools we use for the development of our WebApp.
This is an introduction to npm, gulp, browserify ...

https://www.53js.fr

Transcript

1. Web development tools @_francois06 @hugomallet @53JSdev December 2016 University of Nice Sophia Antipolis { starter pack }
2. Who we are
3. And we love gif !
4. #WhatDoWeNeed? Web development tools
5. FAST D.R.Y. FLEXIBLE
6. Improve development Localhost server LiveReload Package manager Module bundler SASS with sourcemap ... to focus on the features of your own app
7. Prepare for deployment Concatenate JS, CSS Minify CSS, HTML, JS, images Copy all the files in dist folder Package your app for differents platforms (apk, ipa, exe, html) Must be done in one command line
10. > npm init > npm install commander > npm test > npm publish #!/usr/bin/env node const program = require('commander'); const pkg = require('./package'); program.version(pkg.version) .option('-n, --name [value]', 'Name') .parse(process.argv); console.log('Hello ' + program.name);
11. Automate and enhance your workflow
12. npm install -g gulp-cli npm init npm install gulp --save-dev
13. Task gulp const gulp = require('gulp'); gulp.task('build', function() { // do something... }); gulp.task('default', 'build', function() { console.log('default task'); }); # gulpfile.js > gulp Starting 'build' Finished 'build' Starting 'default' Finished 'default' > gulp build Starting 'build' Finished 'build' Terminal
14. streams gulp .src('scripts/*.js') .pipe(applySomething()) .pipe(gulp.dest('dist/scripts'));
15. gulp.task('sass', function() { return gulp.src('app/styles/main.scss') .pipe($.sourcemaps.init()) .pipe($.sass({ outputStyle: 'nested', // libsass doesn't support expanded yet precision: 10, includePaths: ['.'], onError: console.error.bind(console, 'Sass error:') }).on('error',$.sass.logError)) .pipe($.if(production, $.replace('node_modules/bootstrap-sass/assets/fonts/bootstrap', 'fonts'))) .pipe($.autoprefixer({ browsers: ['last 1 version'] })) .pipe($.if(production, $.sourcemaps.write('.', { includeContent: false, sourceRoot: './' }))) .pipe(gulp.dest('dist/styles')); });
16. WATCH & RELOAD 1. Start a server 2. Watch files 3. Reload files in browser
17. const connect = require('connect'); const connectLivereload = require('connect-livereload'); const gulp = require('gulp'); const serveStatic = require('serve-static'); gulp.task('serve', function() { var app = connect() .use(connectLivereload({ port: 35729 })) .use(serveStatic('app')) .listen(9000); }); const livereload = require('gulp-livereload'); gulp.task('watch', ['serve'], function() { livereload.listen(); gulp.watch([ 'app/scripts/**/*.js', 'app/images/**/*', '.tmp/styles/*' ]).on('change', livereload.changed); gulp.watch(['styles/**/*.{css,scss}'], ['sass']); }); gulp.task('default', ['watch']); Serve files Watch files and reload
18. SCSS ! $color: blue; li { // menu links a { background: $color; } }
19. CSS # dist/main.css li a { background: blue; } const gulp = require('gulp'); const sass = require('gulp-sass'); gulp.task('sass', function() { return gulp.src('app/styles/main.scss') .pipe(sass()) .pipe(gulp.dest('dist/styles')); });
20. BE LAZY “I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.” ― Bill Gates
21. Be lazy : example const gulp = require('gulp'); const sass = require('gulp-sass'); const debug = require('gulp-debug'); gulp.task('sass', function() { return gulp.src('app/styles/main.scss') .pipe(debug()) .pipe(sass()) .pipe(gulp.dest('dist/styles')); }); const gulp = require('gulp'); const $ = require('gulp-load-plugins')(), gulp.task('sass', function() { return gulp.src('app/styles/main.scss') .pipe($.debug()) .pipe($.sass()) .pipe(gulp.dest('dist/styles')); }); npm i -D gulp-load-plugins
22. Debug gulp-plumber Prevent pipe breaking caused by errors from gulp plugins https://gist.github.com/floatdrop/8269868 gulp-debug Debug vinyl file streams to see what files are run through your gulp pipeline
23. Let’s require('modules') in the browser
24. Require ? # lib/module.js exports.multiply = function multiply(a, b) { return a * b; } exports.add = function add(a, b) { return a + b; } # tests/module.js const assert = require('assert'); const mymath = require('../lib/module'); const multiply = mymath.multiply; describe('mymath', () => { describe('#multiply(a, b)', () => { it('should return 6 with 2 and 3', () => { assert.equal(6, multiply(2, 3)); assert.equal(6, multiply(3, 2)); }); }); });
25. Browserify : require in the browser ! > npm install -g browserify > npm install --save jquery > browserify main.js -o dist/bundle.js const $ = require('jquery'); const mult = require('./lib/module').multiply; let $a = $('.num-a'); let $b = $('.num-b'); $('button').on('click', function onClick(event) { mult($a.val(), $b.val()); }); Terminal # main.js
26. be prepared for ES6 Modules export function multiply(a, b) { … } import { multiply } from './lib/module'
27. + ≃
28. ESLint Share style guides ! Avoid mistakes ! # .eslintrc /* * Extending the code style * of the devs at Airbnb */ { 'extends': 'eslint-config-airbnb' }
29. { SOURCEMAPS }
30. > npm publish
31. This is just an overview ... Build your own gulpfile.js adapted to your tools and methods ! A sample we made for you : https://github.com/53js/simple-webapp/
32. And now you need to choose a good JavaScript framework http://todomvc.com/
33. Thank you ! https://www.53js.fr
34. Last important thing