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
   

   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. View Slide

4. View Slide

5. 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