Web development tools { starter pack }

Web development
tools
@_francois06
@hugomallet
@53JSdevDecember 2016
University of Nice Sophia Antipolis
{ starter pack }

#WhatDoWeNeed?
Web development tools

Improve development
Localhost server
LiveReload
Package manager
Module bundler
SASS with sourcemap
...
to focus on the features of your own app

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

> 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);

Automate and
enhance your
workflow

npm install -g gulp-cli
npm init
npm install gulp --save-dev

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

streams
gulp
.src('scripts/*.js')
.pipe(applySomething())
.pipe(gulp.dest('dist/scripts'));

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'));
});

WATCH & RELOAD
1. Start a server
2. Watch files
3. Reload files in browser

SCSS !
$color: blue;
li {
// menu links
a {
background: $color;
}
}

CSS
# dist/main.css
li a {
background: blue;
}
const sass = require('gulp-sass');
.pipe(sass())
});

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

Be lazy : example
const sass = require('gulp-sass');
const debug = require('gulp-debug');
.pipe(debug())
.pipe(sass())
});
const $ = require('gulp-load-plugins')(),
.pipe($.debug())
.pipe($.sass())
});
npm i -D gulp-load-plugins

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

Let’s require('modules')
in the browser

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));
});
});
});

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

be prepared for
ES6 Modules
export function multiply(a, b) { … }
import { multiply } from './lib/module'

ESLint
Share style guides !
Avoid mistakes !
# .eslintrc
/*
* Extending the code style
* of the devs at Airbnb
*/
{
'extends': 'eslint-config-airbnb'
}

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/

And now you need to
choose a good JavaScript
framework
http://todomvc.com/

Thank you !
https://www.53js.fr

Web development tools { starter pack }

More Related Content

What's hot (19)

Viewers also liked (7)

Similar to Web development tools { starter pack } (20)

Recently uploaded (20)

Web development tools { starter pack }