Frontend Tooling 101

A runaround on all modern tools used in Frontend development

Transcript

1. @thanpolas #FrontMASS Frontend Tooling 101 Frontend Tooling 101 from shell to browser from shell to browser
2. The Shell The Shell your foundation your foundation @thanpolas #FrontMASS
3. mathiasbynens/dotfiles cowboy/dotfiles necolas/dotfiles The Dotfiles The Dotfiles Track your shell preferences on git Track your shell preferences on git @thanpolas #FrontMASS
4. rupa/z The Z The Z Traverse seamlessly through your projects Traverse seamlessly through your projects @thanpolas #FrontMASS
5. Scaffolding Scaffolding @thanpolas #FrontMASS
6. Scaffolding :: Yeoman Scaffolding :: Yeoman The Web's scaffolding tool for modern webapps The Web's scaffolding tool for modern webapps @thanpolas #FrontMASS
7. Scaffolding :: Yeoman Scaffolding :: Yeoman @thanpolas #FrontMASS http://yeoman.io It's a CLI tool Very cool interface 1200+ Generators You can create your own Guide for Best Practises
8. Your Editor Your Editor The app you spend most of The app you spend most of your time with your time with by far @thanpolas #FrontMASS
9. Your Editor Your Editor @thanpolas #FrontMASS Doesn't matter which one you use Know it really really well All ​Keyboard shortcuts Packages / Plugins Snippets A soothing theme
10. Your Editor Your Editor @thanpolas #FrontMASS BUT WHATEVER YOU DO... INSTALL A live linter Editor Config
11. Development Development Workflow Workflow @thanpolas #FrontMASS
12. Your super best friends Your super best friends Development Workflow Development Workflow @thanpolas #FrontMASS Makefile Rakefile
13. Development Workflow Development Workflow Your super best friends Your super best friends @thanpolas #FrontMASS JUST PICK ONE!
14. Watch tasks Watch tasks Development Workflow Development Workflow @thanpolas #FrontMASS Watch multiple folders Perform multiple tasks Trigger with just a save Trigger Live Reload
15. Testing Automation Testing Automation @thanpolas #FrontMASS
16. Tools of the trade Tools of the trade Testing Automation Testing Automation @thanpolas #FrontMASS (headless WebKit) (Angular test runner) (Wraps selenium) (VMs 360) (VMs 360) PhantomJS Karma Protractor Browserling Sauce Labs
17. Dependency Dependency Management Management @thanpolas #FrontMASS
18. Dependency Management Dependency Management @thanpolas #FrontMASS CommonJS Asynchronous Model Definition Browserify RequireJS
19. RequireJS RequireJS Dependency Management Dependency Management @thanpolas #FrontMASS Load modules asynchronously (XHR) Does not require build step (F5 works) Has a runtime Has a build tool Was all the rage couple years ago Testing issues Edgy, requires too much attention
20. Browserify Browserify Dependency Management Dependency Management @thanpolas #FrontMASS [CJS] Node.js Style Reduces context switching (when on node) Allows usage of the 100k npm modules Ok not all of them... Requires a build step (no F5) Transpiles ES5 to ES3 Perfect for testing Setup and forget
21. Build Flows Build Flows remember our friends? remember our friends? Makefile Rakefile @thanpolas #FrontMASS
22. Build Flows Build Flows @thanpolas #FrontMASS Source Maps Minification Cache Busting ES6 to ES5 / ES3 Transpiling
23. Thank you (here is where you applaud) Thanasis Polychronakis @thanpolas #FrontMASS
24. Questions? Thanasis Polychronakis @thanpolas #FrontMASS Get the slides speakerdeck.com/thanpolas