Front-End
Tooling

Hans Christian Reinl

Freelance Frontend Developer, Cologne

Agenda

Build Tools

Quality Assurance

Workflow Tooling

 

The deal: Learn something new.

Build Tools

Grunt

Gulp

compare Grunt with Gulp

vs.

Grunt

Gulp

compare Grunt with Gulp

vs.

Usage

Numbers from May 2015 via npm-stat, by sixrevisions.com

$ npm run jshint

Quality Assuarance

Why?

www.theregister.co.uk/2011/09/22/software_bug_fine/, 06.06.2015

Linter

JSHint - Example - also check out ESLINT

SCSS-Lint - Example - How To Start

JSCS

JavaScript Code Style Checker

Example

Testing

Unit-Testing

Regression Testing

Functional Tests

Unit-Testing

Karma

Karma is a framework agnostic test runner for different environments

Example

Regression Testing & Functional Testing

Casper JS *

Example

Want to know more?

Testing

Jasmine - Example

PhantomCSS - Example

Wraith - Example

Performance Tooling

WebPagetest

Phantomas - Example

Follow

@drublic

Post- und Preprocessors

ES6 Transpiler: BabelJS

Use next generation JavaScript, today. 

LESS

Sass

PostCSS

Pleeease

All the annoying CSS stuff we don't want to do in one tool!

Example

Image Processing

jpegtran, optipng, SVGO

Packaging Tools

Webpack

WORKFLOW Tooling

CONTINUOUS INTEGRATION

CI Tool

pulls from Git repository

runs QA tasks against the code

builds artifacts

deploys automatically to the server

Frameworks *

Bootstrap

Foundation

MVC Boilerplate

AngularJS

ReactJS

MVC Frameworks

Backbone Boilerplate

ng-Boilerplate - ngbp

React Starter Kit

How Can I get this to work

with my CMS?

Separate Frontend from Backend

Useful Developer Tools

Ghostlab Generate an open IP of your local website in your Network and synchronize navigation and scrolling.

Localtunnel Generate an URL from your local website which you can access from everywhere.

ImageOptim (Lossless) optimize images (also check out Kraken.io).

Skitch Making notes on screenshots and designs.

Affinity Designer Alternative for Photoshop at round € 50.

ModernIE Download images of different IE versions and use them as Virtual Machine.

Static Site Generators

3RD PARTY SERVICES

IT's harD TO FOLLOW

Thank you!

Frontend Tooling

By Hans Christian Reinl

Loading comments...

More from Hans Christian Reinl