@thanpolas

#FrontMASS

Frontend Tooling 101

from shell to browser

The Shell

your foundation

@thanpolas

#FrontMASS

The Dotfiles

Track your shell preferences on git

@thanpolas

#FrontMASS

The Z

Traverse seamlessly through your projects

@thanpolas

#FrontMASS

Scaffolding

@thanpolas

#FrontMASS

Scaffolding :: Yeoman

The Web's scaffolding tool for modern webapps

@thanpolas

#FrontMASS

Scaffolding :: Yeoman

@thanpolas

#FrontMASS

  • It's a CLI tool
  • Very cool interface
  • 1200+ Generators
  • You can create your own

 

  • Guide for Best Practises

Your Editor

The app you spend most of your time with

 

 

by far

@thanpolas

#FrontMASS

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

Your Editor

@thanpolas

#FrontMASS

BUT WHATEVER YOU DO...

INSTALL

Development Workflow

@thanpolas

#FrontMASS

Your super best friends

Development Workflow

@thanpolas

#FrontMASS

Makefile
Rakefile

Development Workflow

Your super best friends

@thanpolas

#FrontMASS

JUST PICK ONE!

Watch tasks

Development Workflow

@thanpolas

#FrontMASS

  • Watch multiple folders
  • Perform multiple tasks
  • Trigger with just a save
  • Trigger Live Reload

Testing Automation

@thanpolas

#FrontMASS

Tools of the trade

Testing Automation

@thanpolas

#FrontMASS

Dependency Management

@thanpolas

#FrontMASS

Dependency Management

@thanpolas

#FrontMASS

CommonJS

Asynchronous Model Definition

Browserify

RequireJS

RequireJS

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

Browserify

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

Build Flows

remember our friends?

Makefile
Rakefile

@thanpolas

#FrontMASS

Build Flows

@thanpolas

#FrontMASS

Thank you

(here is where you applaud)

Thanasis Polychronakis

@thanpolas

#FrontMASS

Questions?

Thanasis Polychronakis

@thanpolas

#FrontMASS

Get the slides

speakerdeck.com/thanpolas

Frontend Tooling 101

By thanpolas

Frontend Tooling 101

From shell to browser

  • 405
Loading comments...

More from thanpolas