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
Tweet

More Decks by Thanos Polychronakis

Other Decks in Technology

Transcript

  1. mathiasbynens/dotfiles cowboy/dotfiles necolas/dotfiles The Dotfiles The Dotfiles Track your shell

    preferences on git Track your shell preferences on git @thanpolas #FrontMASS
  2. rupa/z The Z The Z Traverse seamlessly through your projects

    Traverse seamlessly through your projects @thanpolas #FrontMASS
  3. Scaffolding :: Yeoman Scaffolding :: Yeoman The Web's scaffolding tool

    for modern webapps The Web's scaffolding tool for modern webapps @thanpolas #FrontMASS
  4. 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
  5. 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
  6. 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
  7. Your super best friends Your super best friends Development Workflow

    Development Workflow @thanpolas #FrontMASS Makefile Rakefile
  8. Development Workflow Development Workflow Your super best friends Your super

    best friends @thanpolas #FrontMASS JUST PICK ONE!
  9. Watch tasks Watch tasks Development Workflow Development Workflow @thanpolas #FrontMASS

    Watch multiple folders Perform multiple tasks Trigger with just a save Trigger Live Reload
  10. 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
  11. 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
  12. 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