Modern Front-end Workflow

Presentation for Creative Island Vietnam Vol.3

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

Transcript

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