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

Frontend Tooling 101

Frontend Tooling 101

A runaround on all modern tools used in Frontend development


Thanos Polychronakis

December 22, 2014

More Decks by Thanos Polychronakis

Other Decks in Technology


  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

  24. Questions? Thanasis Polychronakis @thanpolas #FrontMASS Get the slides speakerdeck.com/thanpolas