Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Refresh Detroit - Frontend Tooling

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.

Nick DeNardis

October 15, 2014
Tweet

More Decks by Nick DeNardis

Other Decks in Programming

Transcript

  1. Frontend Tooling
    Nick DeNardis

    View Slide

  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

    View Slide

  3. 2009

    View Slide

  4. 2013

    View Slide

  5. 2014

    View Slide

  6. Pulling in dependencies suck
    Lots of dependencies = large pages
    Why did it get this way?

    View Slide

  7. Sprinkled in for fun
    Workflow

    View Slide

  8. Semantic Versioning
    SEMVER

    View Slide

  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

    View Slide

  10. http://nodejs.org
    NodeJS & NPM

    View Slide

  11. https://github.com/creationix/nvm
    NVM

    View Slide

  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

    View Slide

  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/

    View Slide

  14. npm init
    package.json

    View Slide

  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

    View Slide

  16. Installing packages
    https://www.npmjs.org/
    npm install bower --save-dev
    ...
    "devDependencies": {
    "bower": "~1.3.11"
    }

    View Slide

  17. Pick up on a new machine
    npm install

    View Slide

  18. node_modules
    bower_components
    .idea
    .sass-cache
    vendor
    .rocketeer/logs/
    .gitignore

    View Slide

  19. bower init
    bower.json

    View Slide

  20. bower.json
    {
    name: 'new',
    version: '1.1.0',
    "description": "A new site",
    authors: [
    'Nick DeNardis '
    ],
    main: 'index.html',
    license: 'MIT',
    private: true
    }

    View Slide

  21. http://bower.io/search/
    bower install foundation --save-dev
    ...
    "devDependencies": {
    "foundation": "~5.4.6"
    }
    Installing Bower Assets

    View Slide

  22. Private packages
    "devDependencies": {
    "foundation": "~5.4.6",
    "styleguide": "https://github.
    com/waynestate/styleguide.git#~0.0.3",
    }

    View Slide

  23. Sass
    gem install sass

    View Slide

  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

    View Slide

  25. devDependencies, compile & build
    /bower_components/*
    /dist/styles/*
    /scripts/*
    /images/*
    /fonts/*

    View Slide

  26. touch gulpfile.js
    gulpfile.js

    View Slide

  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

    View Slide

  28. Ruby dependencies for your dependencies
    Gemfile

    View Slide

  29. source 'https://rubygems.org'
    gem 'compass', '1.0.1'
    gem 'sass', '3.4.5'
    Gemfile

    View Slide

  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

    View Slide

  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

    View Slide

  32. node_modules
    bower_components
    .idea
    .sass-cache
    vendor
    .rocketeer/logs/
    .gitignore

    View Slide

  33. Build projects from the same blocks
    Yeoman

    View Slide

  34. http://yeoman.io/generators/

    View Slide

  35. And now..
    $ cd ~/Sites/
    $ mkdir newsite && cd $_
    $ yo foundation5-site
    $ bundle install
    $ npm install
    $ bower install

    View Slide

  36. Old school
    Makefile

    View Slide

  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

    View Slide

  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)

    View Slide

  39. @nickdenardis
    Thank You

    View Slide