Frontend Tooling 101 - Speaker Deck

Slide 1

Slide 1 text

@thanpolas #FrontMASS Frontend Tooling 101 Frontend Tooling 101 from shell to browser from shell to browser

Slide 2

Slide 2 text

The Shell The Shell your foundation your foundation @thanpolas #FrontMASS

Slide 3

Slide 3 text

mathiasbynens/dotfiles cowboy/dotfiles necolas/dotfiles The Dotfiles The Dotfiles Track your shell preferences on git Track your shell preferences on git @thanpolas #FrontMASS

Slide 4

Slide 4 text

rupa/z The Z The Z Traverse seamlessly through your projects Traverse seamlessly through your projects @thanpolas #FrontMASS

Slide 5

Slide 5 text

Scaﬀolding Scaﬀolding @thanpolas #FrontMASS

Slide 6

Slide 6 text

Scaffolding :: Yeoman Scaffolding :: Yeoman The Web's scaffolding tool for modern webapps The Web's scaffolding tool for modern webapps @thanpolas #FrontMASS

Slide 7

Slide 7 text

Scaﬀolding :: Yeoman Scaﬀolding :: 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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Your Editor Your Editor @thanpolas #FrontMASS BUT WHATEVER YOU DO... INSTALL A live linter Editor Conﬁg

Slide 11

Slide 11 text

Development Development Workﬂow Workﬂow @thanpolas #FrontMASS

Slide 12

Slide 12 text

Your super best friends Your super best friends Development Workﬂow Development Workﬂow @thanpolas #FrontMASS Makefile Rakefile

Slide 13

Slide 13 text

Development Workﬂow Development Workﬂow Your super best friends Your super best friends @thanpolas #FrontMASS JUST PICK ONE!

Slide 14

Slide 14 text

Watch tasks Watch tasks Development Workﬂow Development Workﬂow @thanpolas #FrontMASS Watch multiple folders Perform multiple tasks Trigger with just a save Trigger Live Reload

Slide 15

Slide 15 text

Testing Automation Testing Automation @thanpolas #FrontMASS

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Dependency Dependency Management Management @thanpolas #FrontMASS

Slide 18

Slide 18 text

Dependency Management Dependency Management @thanpolas #FrontMASS CommonJS Asynchronous Model Deﬁnition Browserify RequireJS

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Build Flows Build Flows remember our friends? remember our friends? Makefile Rakefile @thanpolas #FrontMASS

Slide 22

Slide 22 text

Build Flows Build Flows @thanpolas #FrontMASS Source Maps Miniﬁcation Cache Busting ES6 to ES5 / ES3 Transpiling

Slide 23

Slide 23 text

Thank you (here is where you applaud) Thanasis Polychronakis @thanpolas #FrontMASS

Slide 24

Slide 24 text

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