Modern front-end Workflow
- 2. ๏ I'm Programmer @ RyukyuInteractive, Inc. ๏ I ♥ JavaScript ๏ I ♥ Swift
- 3. Problems of Web Development fix checkdirection ...iterates too many times😭
- 4. Automation and Productivity Time Cost Scope Quarity Automation save time and boost productivity.
- 5. Next Generation JavaScript & CSS
- 6. Future JavaScript? ๏ JavaScript is based on ECMAScript standard ๏ ECMAScript has Edition ๏ A lot of feature
- 7. 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 -
- 8. But... legacy browser does not support ES2016😭
- 9. ๏ Babel is JavaScript Compiler (Transpiler) ๏ Use next generation JavaScript, today!
- 10. 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; };
- 11. Future CSS?
- 12. PostCSS ๏ All features by 100+ plugins ๏ Fallbacks ๏ Language extension ๏ Optimizations ๏ Shortcuts ๏ Analytics ๏ Faster than Sass
- 13. @mdo: Creator of says
- 15. ๏ 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)
- 16. Linter ESLint Avoid human error with static code analysis.
- 17. ๏ Atom ๏ Sublime Text ๏ Vim ๏ Emacs ๏ etc... Example (Vim + Syntastic + ESLint)
- 18. ๏ Most popular Task Runner ๏ Build assets ๏ Automation ๏ Faster than Grunt.js
- 19. ๏ Live reloads ๏ Interaction sync (scroll, click, input text) ๏ CSS Injection ๏ Cuts out repetitive manual tasks.
- 20. Video
- 21. ๏ "yo" ๏ Generic scaffolding system ๏ Lot of publicly generators ๏ Rapidly create a new project
- 22. Video
- 23. Conclusion ๏ Scaffold with Yeoman ๏ Coding with Babel & PostCSS ๏ Avoid human error with Lint ๏ Build with Gulp ๏ Preview with Browsersync
- 24. – Thank You - “Happy coding with automation!!”