Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Front-end Workflow

Modern Front-end Workflow

Presentation for Creative Island Vietnam Vol.3

http://ryukyu-event.vietnamworks.com/

Shun Tedokon

February 16, 2017
Tweet

Other Decks in Technology

Transcript

  1. Future JavaScript? ๏ JavaScript is based on ECMAScript standard ๏

    ECMAScript has Edition ๏ A lot of feature 6
  2. ECMAScript Edition 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 - It Works! 7
  3. 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; }; Yay! It Works! 10
  4. PostCSS ๏ All features by 100+ plugins ๏ Fallbacks ๏

    Language extension ๏ Optimizations ๏ Shortcuts ๏ Analytics ๏ Faster than Sass 12
  5. 14

  6. ๏ 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) 15
  7. ๏ Atom ๏ Sublime Text ๏ Vim ๏ Emacs ๏

    etc... Example (Vim + Syntastic + ESLint) 17
  8. ๏ Live reloads ๏ Interaction sync (scroll, click, input text)

    ๏ CSS Injection ๏ Cuts out repetitive manual tasks. 19
  9. ๏ "yo" ๏ Generic scaffolding system ๏ Lot of publicly

    generators ๏ Rapidly create a new project 21
  10. Conclusion ๏ Scaffold with Yeoman ๏ Coding with Babel &

    PostCSS ๏ Avoid human error with Lint ๏ Build with Gulp ๏ Preview with Browsersync 23