Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski
23
OPTIMISING AND AUTOMATING YOUR FRONT END WORKFLOW atmosphere 2014
-
Upload
proidea -
Category
Presentations & Public Speaking
-
view
108 -
download
2
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 of Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski
OPTIMISING AND AUTOMATING YOUR FRONT END WORKFLOW
atmosphere 2014
Hi!
@ch4zm
OPTIMISING AND AUTOMATING YOUR FRONT END WORKFLOW
“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
TOOLS
Package Managers
Node Package Manager
BOWER
GRUNT
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
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']
GULP
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
• (grunt|gulp) test • (grunt|gulp) build • (grunt|gulp) serve
test task
• linting (JSLint, JSHint, ESLint) • testing (Jasmine, Mocha, QUnit)
build task
• code preprocess • concatenation • minification • versioning
serve task
• http server • watch • livereload
DEMO
AUTOMATE ALL THE FRONT-END THINGS!
T.HANKS
?
T.HANKS
