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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Hitchhiker's guide to the front end development

Similar to Hitchhiker's guide to the front end development (20)

Recently uploaded

Recently uploaded (20)

Hitchhiker's guide to the front end development