Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski

410 views

Published on

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
410
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Atmosphere 2014: Optimising and Automating your Front End Workflow - Szymon Przybylski

  1. 1. OPTIMISING AND AUTOMATING YOUR FRONT END WORKFLOW atmosphere 2014
  2. 2. Hi! @ch4zm
  3. 3. OPTIMISING AND AUTOMATING YOUR FRONT END WORKFLOW
  4. 4. Front-End Ops smashingmagazine.com/front-end-ops
  5. 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. 6. TOOLS
  7. 7. Package Managers
  8. 8. Node Package Manager
  9. 9. BOWER
  10. 10. GRUNT
  11. 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. 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. 13. GULP
  14. 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. 15. • (grunt|gulp) test • (grunt|gulp) build • (grunt|gulp) serve
  16. 16. test task • linting (JSLint, JSHint, ESLint) • testing (Jasmine, Mocha, QUnit)
  17. 17. build task • code preprocess • concatenation • minification • versioning
  18. 18. serve task • http server • watch • livereload
  19. 19. DEMO
  20. 20. AUTOMATE ALL THE FRONT-END THINGS!
  21. 21. T.HANKS
  22. 22. ?
  23. 23. T.HANKS

×