Hitchhiker's guide to the front end development

HITCHHIKER'S
GUIDE TO THE FRONT-END
@kjy2143
1

11st. Front End Developer
2 . 1

Front End Developer
in 2016
3 . 2

Front End Developer
in past
4 . 1

Front End Developer
in 2016
5 . 1

scss css
$primary-color: #333;
@mixin border-radius($radius) {
border-radius: $radius;
}
%message {
border: 1px solid #ccc;
padding: 10px;
}
.wrap {
@include border-radius(10px);
color: $primary-color;
.box {
display:flex;
}
}
.success {
@extend %message;
border-color: green;
}
.error {
@extend %message;
border-color: red;
}
.warning {
@extend %message;
border-color: yellow;
}
.success, .error, .warning {
padding: 10px;
}
.wrap {
border-radius: 10px;
color: #333;
}
.wrap .box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.success {
}
.error {
border-color: red;
}
.warning {
}
sass
5 . 11

scss css
}
%message {
padding: 10px;
}
.wrap {
.box {
display:flex;
}
}
.success {
@extend %message;
}
.error {
@extend %message;
border-color: red;
}
.warning {
@extend %message;
}
padding: 10px;
}
.wrap {
color: #333;
}
.wrap .box {
display: flex;
}
.success {
}
.error {
border-color: red;
}
.warning {
}
sass
5 . 12

scss css
}
%message {
padding: 10px;
}
.wrap {
.box {
display:flex;
}
}
.success {
@extend %message;
}
.error {
@extend %message;
border-color: red;
}
.warning {
@extend %message;
}
padding: 10px;
}
.wrap {
color: #333;
}
.wrap .box {
display: flex;
}
.success {
}
.error {
border-color: red;
}
.warning {
}
sass
5 . 13

scss css
}
%message {
padding: 10px;
}
.wrap {
.box {
display:flex;
}
}
.success {
@extend %message;
}
.error {
@extend %message;
border-color: red;
}
.warning {
@extend %message;
}
padding: 10px;
}
.wrap {
color: #333;
}
.wrap .box {
display: flex;
}
.success {
}
.error {
border-color: red;
}
.warning {
}
sass
5 . 14

2016/2017 MUST-KNOW
WEB DEVELOPMENT TECH
CSS Preprocessor Compile
ES2016+ Compile
Optimization
Linting
Unit Testing
Module Bundling
Package Management
5 . 22

GRUNT
The JavaScript Task Runner
6 . 2

module.exports = function(grunt){
grunt.initConfig({
clean: ['dist/'],
less: {
production: {
files: {
"src/css/combined.css" : "src/less/main.less"
}
}
},
jshint: {
options: {
reporter: require('jshint-stylish'),
jshintrc: true
},
all: ['Gruntfile.js', 'src/js/compiled.js']
}]
});
// Add plugins
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
// Register tasks
grunt.registerTask('default', ['clean', 'jshint']);
};
Grunt
6 . 3

Automate and enhance your workﬂow
6 . 6

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import del from 'del';
import browserSync from 'browser-sync';
import runSequence from 'run-sequence';
gulp.task('font', () => {
return gulp.src(config.src.font)
.pipe(gulp.dest(`${config.dist}/font`));
});
gulp.task('img', () => {
return gulp.src(config.src.img)
.pipe(gulp.dest(`${config.dist}/img`));
});
gulp.task('styles', () => {
gulp.src(`${config.src.styles}/custom.scss`)
.pipe($.sass({
includePaths: ['./node_modules/material-design-lite/src']
}))
.pipe($.minifyCss())
.pipe(gulp.dest(`${config.dist}/css`))
.pipe(browserSync.stream());
});
gulp.task('clean', del.bind(null, [config.dist]));
gulp.task('build', cb => {
runSequence('clean', ['styles','font', 'img'], cb);
});
Gulp
6 . 7

{
"name": "spinner",
"scripts": {
"clean": "rimraf dist",
"spritesmith": "spritesmith --rc .spritesmith.js && imagemin dist/tmp/* -o dist/img && rimraf dist/tmp",
"sass": "node-sass --output-style expanded --source-map true src/sass/*.scss -o dist/css/",
"autoprefixer": "postcss -u autoprefixer -r dist/css/*.css",
"build:spritesmith": "npm run spritesmith",
"build:css": "npm-run-all --sequential sass autoprefixer",
"dev:js": "webpack -d --watch --config webpack.dev.config.js",
"build:js": "webpack -p --config webpack.prd.config.js",
"build": "npm run clean && npm-run-all --sequential build:*",
"watch:css": "onchange "src/sass" -- npm run build:css",
"watch:js": "onchange "src/js" -- npm run dev:js",
"watch": "npm-run-all --parallel watch:*",
"serve": "browser-sync start --server --port 8081 --directory --no-ui --files "dist/**/*.*, doc/**/*.*"",
"start": "npm run build && npm-run-all --parallel serve watch"
},
"homepage": "https://github.com/poohding/spinner#readme"
}
npm scripts(package.json)
6 . 10

npm scripts(package.json)
6 . 11

spinner
https://github.com/poohding/spinner
7 . 1

Development Platform & IDE
Version Control System
&
Package Management
CSS Preprocess
(CSS Concatenating & Minify)
(autopreﬁxer plugin)
Optimization
goorm.io
Git github
NPM
Sass
PostCSS
CSS Sprites
Image Minify
MVC JavaScript Framework
+ &
UI Library
JavaScript Task Runner

Vanilla JS
ES 2016 Webpack Babel.js
Vanilla JS
NPM Scripts
spinner
7 . 2

goorm
https://www.goorm.io/
8 . 1

Node.js & NPM Upgrade
$ npm -v
1.4.28
$ npm install npm@latest -g
$ npm -v
3.10.9
$ node -v
v0.10.38
$ npm install -g n
$ n stable
$ node -v
v0.10.38
8 . 13

git clone & npm install
$ git clone https://github.com/poohding/spinner.git
$ cd spinner
$ npm install
8 . 15

https://{{id}}_prd.goorm.io/practice/spinner/doc/spinner.html
8 . 22

Add HTML
$ git checkout add_html
9 . 1

Add Sass
$ git reset --hard HEAD
$ git checkout add_sass
10 . 1

{
"scripts": {
"spritesmith": "spritesmith --rc .spritesmith.js && imagemin dist/tmp/* -o dist/img && rimraf d
"build:css": "npm run sass",
"build": "npm run clean && npm-run-all --sequential build:*"
}
}
npm run build
package.json
usage
10 . 2

Change Image
$ git checkout change_image
11 . 1

{
"scripts": {
"build": "npm run clean && npm-run-all --sequential build:*"
}
}
npm run build
package.json
usage
11 . 2

Add Serve
$ git checkout add_serve
12 . 1

{
"scripts": {
"serve": "browser-sync start --server --port 8081 --directory --no-ui --files "dist/**/*.*, do
}
}
npm run build
npm start
package.json
usage
12 . 2

Add Style
$ git checkout add_style
13 . 1

{
"scripts": {
}
}
npm run build
npm start
package.json
usage
13 . 2

Add Webpack
$ git checkout add_webpack
14 . 1

{
"scripts": {
"dev:js": "webpack -d --watch --config webpack.dev.config.js",
"build:js": "webpack -p --config webpack.prd.config.js",
"watch:js": "onchange "src/js" -- npm run dev:js",
}
}
npm run build
npm start
package.json
usage
14 . 2

webpack.common.conﬁg.js
module.exports = {
entry: './src/js/spinner.js',
output: {
path: './dist/js',
filename: 'spinner.bundle.js',
},
module: {
loaders: [{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}]
},
plugins: []
};
14 . 3

webpack.dev.conﬁg.js
var config = require('./webpack.common.config'),
webpack = require('webpack');
config.devtool = 'eval';
module.exports = config;
14 . 4

webpack.prd.conﬁg.js
var config = require('./webpack.common.config'),
webpack = require('webpack');
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
}
})
);
config.devtool = 'sourcemap';
module.exports = config;
14 . 5

Front End Developer
in 2016
15 . 2

2016/2017 MUST-KNOW
WEB DEVELOPMENT TECH
CSS Preprocessor Compile
ES2016+ Compile
Optimization
Linting
Unit Testing
Module Bundling
Package Management
15 . 4

spinner
https://github.com/poohding/spinner
15 . 5

Development Platform & IDE
Version Control System
&
Package Management
CSS Preprocess
(CSS Concatenating & Minify)
(autopreﬁxer plugin)
Optimization
goorm.io
Git github
NPM
Sass
PostCSS
CSS Sprites
Image Minify
MVC JavaScript Framework
+ &
UI Library
JavaScript Task Runner

Vanilla JS
ES 2016 Webpack Babel.js
Vanilla JS
NPM Scripts
spinner
15 . 6

Hitchhiker's guide to the front end development

More Related Content

What's hot

Similar to Hitchhiker's guide to the front end development

Recently uploaded

Hitchhiker's guide to the front end development