Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web development tools { starter pack }

94 views

Published on

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

You can find our simple webapp architecture here :
https://github.com/53js/simple-webapp/

53JS
https://www.53js.fr
Hugo Mallet
François Michaudon

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Web development tools { starter pack }

  1. 1. Web development tools @_francois06 @hugomallet @53JSdevDecember 2016 University of Nice Sophia Antipolis { starter pack }
  2. 2. Who we are
  3. 3. And we love gif !
  4. 4. #WhatDoWeNeed? Web development tools
  5. 5. FAST D.R.Y. FLEXIBLE
  6. 6. Improve development Localhost server LiveReload Package manager Module bundler SASS with sourcemap ... to focus on the features of your own app
  7. 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
  8. 8. > 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);
  9. 9. Automate and enhance your workflow
  10. 10. npm install -g gulp-cli npm init npm install gulp --save-dev
  11. 11. 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
  12. 12. streams gulp .src('scripts/*.js') .pipe(applySomething()) .pipe(gulp.dest('dist/scripts'));
  13. 13. 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')); });
  14. 14. WATCH & RELOAD 1. Start a server 2. Watch files 3. Reload files in browser
  15. 15. 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
  16. 16. SCSS ! $color: blue; li { // menu links a { background: $color; } }
  17. 17. 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')); });
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. Let’s require('modules') in the browser
  22. 22. 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)); }); }); });
  23. 23. 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
  24. 24. be prepared for ES6 Modules export function multiply(a, b) { … } import { multiply } from './lib/module'
  25. 25. +≃
  26. 26. ESLint Share style guides ! Avoid mistakes ! # .eslintrc /* * Extending the code style * of the devs at Airbnb */ { 'extends': 'eslint-config-airbnb' }
  27. 27. { SOURCEMAPS }
  28. 28. > npm publish
  29. 29. 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/
  30. 30. And now you need to choose a good JavaScript framework http://todomvc.com/
  31. 31. Thank you ! https://www.53js.fr
  32. 32. Last important thing

×