Refresh Detroit - Frontend Tooling

Building a single website is tough in itself but building and maintaining hundreds of sites results in an exponential maintenance. Luckily there are frontend tools to help, you’re probably already familiar with a few of them and may use them on a handful of projects. We’ll explore how to use frontend tools to make life easier regardless if you’re working on a single or hundreds of sites.

Focusing on the end resulting HTML, CSS and Javascript brings a whole set of new and evolving tools. This discussion will focus on optimizing workflows with Node.js, NPM, Yeoman, Bower, SASS, Gulp, etc. If you use some or none of these tools at the moment this will be a great introduction and use cases to how they can all work in concert with each to publish the best possible websites.

Transcript

1. Frontend Tooling Nick DeNardis
2. Perpetual minimalist. User experience crafter. Speaker. Realist. Web Director at Wayne State University. Library Scientist. Technical Director for TEDxDetroit. Organizer for HighEdWeb Michigan and Refresh Detroit. Girl Develop It teacher. @nickdenardis Nick DeNardis
6. Pulling in dependencies suck Lots of dependencies = large pages Why did it get this way?
7. Sprinkled in for fun Workflow
8. Semantic Versioning SEMVER
9. Given a version number MAJOR.MINOR.PATCH, increment the: • MAJOR version when you make incompatible API changes, • MINOR version when you add functionality in a backwards-compatible manner, and • PATCH version when you make backwards-compatible bug fixes. • Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format. semver.org 1.2.3
10. http://nodejs.org NodeJS & NPM
11. https://github.com/creationix/nvm NVM
12. $ curl https://raw.githubusercontent.com/creationix/nvm/v0.17.2/install.sh | bash $ nvm install stable $ nvm ls $ nvm use 0.10.32 Installing NVM
13. Updating NPM with NVM $ cd ~ $ npm install -g npm@latest $ rm /home/vagrant/.nvm/v0.10.32/bin/npm $ ln -s /home/vagrant/npm/bin/npm \ /home/vagrant/.nvm/v0.10.32/bin/
14. npm init package.json
15. { "name": "new", "version": "1.0.0", "description": "A new site", "main": "index.html", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "MIT" } package.json
16. Installing packages https://www.npmjs.org/ npm install bower --save-dev ... "devDependencies": { "bower": "~1.3.11" }
17. Pick up on a new machine npm install
18. node_modules bower_components .idea .sass-cache vendor .rocketeer/logs/ .gitignore
19. bower init bower.json
20. bower.json { name: 'new', version: '1.1.0', "description": "A new site", authors: [ 'Nick DeNardis <nick.denardis@gmail.com>' ], main: 'index.html', license: 'MIT', private: true }
21. http://bower.io/search/ bower install foundation --save-dev ... "devDependencies": { "foundation": "~5.4.6" } Installing Bower Assets
22. Private packages "devDependencies": { "foundation": "~5.4.6", "styleguide": "https://github. com/waynestate/styleguide.git#~0.0.3", }
23. Sass gem install sass
24. // Import Compass @import "compass"; // Import Foundation Normalize @import "../../bower_components/foundation/scss/normalize"; // Import Foundation Global (Functions and Default settings) @import "../../bower_components/foundation/scss/foundation/components/global"; // Import Style Guide Functions @import "../../bower_components/styleguide/global/foundation/v5/scss/functions"; // Import Style Guide and Local Vars @import "../../bower_components/styleguide/global/foundation/v5/scss/vars"; @import "vars"; Only use what you need
25. devDependencies, compile & build /bower_components/* /dist/styles/* /scripts/* /images/* /fonts/*
26. touch gulpfile.js gulpfile.js
27. // Compile all the JS files gulp.task('scripts', function() { return gulp.src([foundationJsDir + '/foundation.js', foundationJsDir + '/foundation.topbar.js', foundationJsDir + '/foundation.offcanvas.js', jsDir + '/**/*.js']) .pipe($.plumber()) .pipe($.jshint('.jshintrc')) .pipe($.concat('main.js')) .pipe($.rename({suffix: '.min'})) .pipe($.uglify()) .pipe(gulp.dest(targetJSDir)); }); gulpfile.js
28. Ruby dependencies for your dependencies Gemfile
29. source 'https://rubygems.org' gem 'compass', '1.0.1' gem 'sass', '3.4.5' Gemfile
30. Checking for outdated packages ## Check for outdated Bower components bower list bower update --save-dev ## Check for outdated Gems bundle outdated bundle update ## Check for outdated Node modules npm outdated --depth=0 npm update --save-dev
31. # http://editorconfig.org root = true [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.md] trim_trailing_whitespace = false .editorconfig
32. node_modules bower_components .idea .sass-cache vendor .rocketeer/logs/ .gitignore
33. Build projects from the same blocks Yeoman
34. http://yeoman.io/generators/
35. And now.. $ cd ~/Sites/ $ mkdir newsite && cd $_ $ yo foundation5-site $ bundle install $ npm install $ bower install
36. Old school Makefile
37. BOWERFILE := bower.json NPMFILE := package.json GEMFILE := Gemfile COMPOSERFILE := composer.json GULPFILE := gulp.js all: install install: bowerinstall npminstall bundleinstall composerinstall update: bowerupdate npmupdate bundleupdate composerupdate status: bowercheck npmcheck bundlecheck build: gulp watch bowerinstall: $(BOWERFILE) bower install makefile
38. Your Frontend API make or make install (Install all package) make build (Build the site and turns on watcher) make check (Check for outdated dependencies) make update (Update all dependencies) make clean (Remove all local packages)
39. @nickdenardis Thank You