Web development

tools

@_francois06

@hugomallet@53JSdevDecember 2016University of Nice Sophia Antipolis

{ starter pack }

Who we are

And we love gif !

#WhatDoWeNeed?

Web development tools

FASTD.R.Y.FLEXIBLE

Improve development

Localhost serverLiveReload Package managerModule bundlerSASS with sourcemap...

to focus on the features of your own app

Prepare for deployment

Concatenate JS, CSS Minify CSS, HTML, JS, imagesCopy 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 gulpconst 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

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

SCSS !$color: blue;

li {// menu linksa {

background: $color;}

}

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

});

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

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'

+≃

ESLintShare style guides !

Avoid mistakes !

# .eslintrc

/* * Extending the code style * of the devs at Airbnb */

{

'extends': 'eslint-config-airbnb'

}

{ SOURCEMAPS }

> npm publish

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

Last important thing