atmosphere 2014: optimising and automating your front end workflow - szymon przybylski
DESCRIPTION
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.TRANSCRIPT
![Page 1: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/1.jpg)
OPTIMISING AND AUTOMATING YOUR FRONT END WORKFLOW
atmosphere 2014
![Page 2: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/2.jpg)
Hi!
@ch4zm
![Page 3: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/3.jpg)
OPTIMISING AND AUTOMATING YOUR FRONT END WORKFLOW
![Page 5: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/5.jpg)
“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
![Page 6: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/6.jpg)
TOOLS
![Page 7: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/7.jpg)
Package Managers
![Page 8: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/8.jpg)
Node Package Manager
![Page 9: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/9.jpg)
BOWER
![Page 10: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/10.jpg)
GRUNT
![Page 11: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/11.jpg)
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
![Page 12: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/12.jpg)
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']
![Page 13: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/13.jpg)
GULP
![Page 14: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/14.jpg)
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
![Page 15: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/15.jpg)
• (grunt|gulp) test • (grunt|gulp) build • (grunt|gulp) serve
![Page 16: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/16.jpg)
test task
• linting (JSLint, JSHint, ESLint) • testing (Jasmine, Mocha, QUnit)
![Page 17: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/17.jpg)
build task
• code preprocess • concatenation • minification • versioning
![Page 18: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/18.jpg)
serve task
• http server • watch • livereload
![Page 19: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/19.jpg)
DEMO
![Page 20: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/20.jpg)
AUTOMATE ALL THE FRONT-END THINGS!
![Page 21: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/21.jpg)
T.HANKS
![Page 22: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/22.jpg)
?
![Page 23: Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski](https://reader034.vdocuments.us/reader034/viewer/2022051515/54c7391c4a7959e5208b4649/html5/thumbnails/23.jpg)
T.HANKS