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
vs.
Grunt
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
Testing
Unit-Testing
Regression Testing
Functional Tests
Want to know more?
Testing
Performance Tooling
Follow
@drublic
Post- und Preprocessors
ES6 Transpiler: BabelJS
Use next generation JavaScript, today.
LESS
Sass
PostCSS
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
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
Frontend Tooling
- 4,757