ModernFront-end Workflow

Shun Tedokon

๏ I'm Programmer @ RyukyuInteractive, Inc.๏ I ♥ JavaScript๏ I ♥ Swift

Problems ofWeb Development

fix checkdirection

...iterates too many times😭

Automation and Productivity

Tim

e Cost

Scope

Quarity

Automation save time and boost productivity.

Next GenerationJavaScript & CSS

Future JavaScript?

๏ JavaScript is based on ECMAScript standard

๏ ECMAScript has Edition

๏ A lot of feature

ECMAScriptEdition Published at Change log

1 1997 first edition

2 1998 -

3 1999 ReExp, try/catch, ...etc.

4 - -

5 2009 "strict mode", getter/setter, JSON, ...etc.

5.1 2011 -

6 (2015) 2015 class and modules, iterator, generator, arrow functions, let/const, template string, Symbol, Promise, ...etc.

2016 2016 exponentiation operator (**), Array.prototype.includes

2017 -

But... legacy browser does not support ES2016😭

๏ Babel is JavaScript Compiler (Transpiler)๏ Use next generation JavaScript, today!

ES2016 (Development)

ES5 (Production)

class Shape { constructor(id, x, y) { this.id = id; this.move(x, y); }

move(x, y) { this.x = x; this.y = y; } }

var Shape = function (id, x, y) { this.id = id; this.move(x, y); };

Shape.prototype.move = function (x, y) { this.x = x; this.y = y; };

Future CSS?

PostCSS

๏ All features by 100+ plugins

๏ Fallbacks

๏ Language extension

๏ Optimizations

๏ Shortcuts

๏ Analytics

๏ Faster than Sass

@mdo: Creator of says

๏ automatic vendor prefixes๏ custom properties & var()๏ custom properties set & @apply๏ reduced calc()๏ custom media queries๏ media queries ranges๏ custom selectors

๏ nesting๏ color() function๏ hwb() function๏ gray() function๏ #rrggbbaa colors๏ rgba function (rgb fallback)๏ rebeccapurple color

๏ font-variant property๏ filter property (svg fallback)๏ initial value๏ rem unit (px fallback)๏ :any-link pseudo-class๏ :matches pseudo-class๏ :not pseudo-class (to l.3)

๏ ::pseudo syntax (: fallback)๏ overflow-wrap property (word-wrap fallback)๏ attribute case insensitive๏ rgb() function (functional-notation)๏ hsl() function (functional-notation)

Linter

ESLint

Avoid human error with static code analysis.

๏ Atom๏ Sublime Text๏ Vim๏ Emacs๏ etc...

Example (Vim + Syntastic + ESLint)

๏ Most popular Task Runner๏ Build assets๏ Automation๏ Faster than Grunt.js

๏ Live reloads๏ Interaction sync (scroll, click, input text)๏ CSS Injection๏ Cuts out repetitive manual tasks.

Video

๏ "yo"๏ Generic scaffolding system๏ Lot of publicly generators๏ Rapidly create a new project

Video

Conclusion

๏ Scaffold with Yeoman๏ Coding with Babel & PostCSS๏ Avoid human error with Lint๏ Build with Gulp๏ Preview with Browsersync

– Thank You -

“Happy coding with automation!!”