Writing front end for web app can be tricky these days. Variety of frameworks, boilerplates, standards and devices can overwhelm. How to utilize that ecosystem for our advantage? We’ll cover tools like package managers, code preprocessors and build tools. We will see how all of them can help us be more productive at every stage of front end web development. Szymon Przybylski - Szymon is a full stack developer with a frontend background. He is an early adopter of tools and technolgies, who constatly pushes Allegro’s frontend stack forward, keeping it up to date and ready for the future. He actively uses several langugage on a daily basis which gives oportunities to port good engeenering practices between them. He took a key role in developing and implemtenting tools for automatic minification, optimization and serving Allegro’s static assets.

1. OPTIMISING AND AUTOMATING
YOUR FRONT END WORKFLOW
atmosphere 2014

2. Hi!
@ch4zm

3. OPTIMISING AND AUTOMATING
YOUR FRONT END WORKFLOW

4. Front-End Ops
smashingmagazine.com/front-end-ops

5. “Such a person would need to be an expert at
serving and hosting front-end resources.
(…) They would find the best ways to piece together
the parts of a Web application, and they’d be pros at
versioning, caching and deployment.”
Alex Sexton

6. TOOLS

7. Package Managers

8. Node Package
Manager

9. BOWER

10. GRUNT

11. module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
!
grunt.initConfig({
jshint: {
src: ['./lib/*.js']
},
concat: {
src: {
src: ['lib/*.js'],
dest: 'temp/all.js'
}
},
uglify: {
src: {
files: {
'dist/all.js': 'temp/all.js'
}
}
}
});
!
grunt.registerTask('build', ['concat', 'uglify']);
};
Gruntfile.js

12. Gruntfile.coffee
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-contrib-jshint'
grunt.loadNpmTasks 'grunt-contrib-concat'
grunt.loadNpmTasks 'grunt-contrib-uglify'
grunt.initConfig
jshint:
src: ['./lib/*.js']
!
concat:
src:
src: ['lib/*.js']
dest: 'temp/all.js'
!
uglify:
src:
files:
'dist/all.js': 'temp/all.js'
!
grunt.registerTask 'build', ['concat', 'uglify']

13. GULP

14. var gulp = require('gulp');
!
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
!
gulp.task('jshint', function() {
gulp.src('./lib/*.js')
.pipe(jshint());
});
!
gulp.task('build', function() {
gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/'))
});
gulpfile.js

15. • (grunt|gulp) test
• (grunt|gulp) build
• (grunt|gulp) serve

16. test task
• linting (JSLint, JSHint, ESLint)
• testing (Jasmine, Mocha, QUnit)

17. build task
• code preprocess
• concatenation
• minification
• versioning

18. serve task
• http server
• watch
• livereload

19. DEMO

20. AUTOMATE ALL THE
FRONT-END THINGS!

21. T.HANKS

22. ?

23. T.HANKS