frontend

developer

workflow

Tools 

  1. Vagrant
  2. Sublime
  3. editorconfig
  4. live reload
  5. Preprocessing
  6. Hint / Lint
  7. Documentation
  8. Unit / Intergration testing
  9. Synchronized device testing
  10. Performance Optimization
  11. Visual Diff
  12. Build tools
  13. Package management
  14. Scaffolding

Vagrant

Vagrant

  • Use virtualbox 
  • Consistent, shared dev environment
  • Say goodbye to "works on my machine"
  • Work locally, develop virtually

Vagrant


  • Include a Vagrantfile in your repo    
  • Git like syntax vagrant init, vagrant up
  • Install software not dependencies
  • sublime

    sublime

    • Lightweight, highly extensible
    • Multiple cursors
    • Easy duplication
    • Easy find, replace 
    • http://www.sublimetext.com/

    Emmet

    emmet

    • Snippets/Abbreviations
    • Lorem Ipsum generator
    • Wrap with Abbreviation
    • Quick close tag
    • http://docs.emmet.io/

    Editor Config

    Editor config

    • Maintain consistent rules for white spaces
    • Plugins for every editor you might work on

    EDITOR CONFIG

    live reload


    live reload

    • Watch files for changes 
    • Reload your browser
    • Perfect when developing
       with multiple monitors

    preprocessing


    • Requires a compiler for development
    • Compilation takes care of best practices 
    • Keeps code smaller, more readable and maitainable

    html preprocessing

    HTML PREPROCESSING

    http://slim-lang.com/

    HTML PREPROCESSING

    HTML PREPROCESSING

    http://handlebarsjs.com/

    CSS preprocessing

    http://learnboost.github.io/stylus/

    CSS PREPROCESSING

    CSS PREPROCESSING

    Javascript Preprocessing

    http://coffeescript.org/

    JAVASCRIPT PREPROCESSING

    JAVASCRIPT PREPROCESSING

    http://www.typescriptlang.org/

    JAVASCRIPT PREPROCESSING

    preprocess all the things

    Hint / lint 


    hint / Lint

    HINT / LINT

    HINT / LINT

    documentation

    • Literate programming, documentation
    • Create living styleguides

    DOCUMENTATION


    DOCUMENTATION



    DOCUMENTATION


    Unit / Integration Testing

    • Prevent regression - Open / Close principle 
    • TDD / BDD 
    test("root lists first page of posts", function(){
    visit("/"); andThen(function() { equal(find(".post").length, 5, "The first page should have 5 posts"); // Assuming we know that 5 posts display per page and that there are more than 5 posts }); });

    UNIT / INTEGRATION TESTING



    UNIT / INTEGRATION TESTING

    UNIT / INTEGRATION TESTING

    UNIT / INTEGRATION TESTING

    UNIT / INTEGRATION TESTING


    synchronized device testing


    SYNCHRONIZED DEVICE TESTING


    SYNCHRONIZED DEVICE TESTING


    performance optimization

    PageSpeed Insights CLI

    PERFORMANCE OPTIMIZATION


    PERFORMANCE OPTIMIZATION


    VISUAL DIFF

    Responsive
    Automated 
    Visual Diffs

    visual diff


    • Phantom 
    • Imagemagick

    Visual diff


    visual diff

    build tools

    • Environment specific builds - dev vs production
    • Lint / Hint
    • Compile files using preprocessor
    • Concat and minify 
    • Copy files to dist folder 
    • Clear assets folder 
    • Watch for changes and live reload browser
    • Run integration tests 
    • Run visual tests 
    • Repeat

    Node 

    GRUNT


    grunt

    • Add package.json and Gruntfile.js
    • grunt
    • Ignore node_modules in .gitignore

    GRUNT

    Sample package.json

       "grunt-contrib-clean": "~0.5.0",
        "grunt-contrib-sass": "~0.7.0",
        "grunt-contrib-concat": "~0.3.0",
        "grunt-contrib-connect": "~0.7.1",
        "grunt-contrib-copy": "~0.5.0",
        "grunt-contrib-jasmine": "~0.6.3",
        "grunt-contrib-jst": "~0.6.0",
        "grunt-contrib-uglify": "~0.4.0",
        "grunt-contrib-watch": "~0.6.1",


    • npm install

    GRUNT

    http://gruntjs.com/sample-gruntfile

    grunt dev
    grunt prod

    grunt

    Gulp

    Package Management

    PACKAGE MANAGEMENT

    • Separate vendor dependencies 
    • Don't track vendor code in your repo
    • Recursively track dependencies 
    • Avoid redundancies
    • Track updates through semantic versioning

    package management

    Sample Bower file
    bower install
    bower update 

    Scaffolding


    • Scaffold out new projects instantly 
    • Community best practices 

    scaffolding


    Scaffolding

    • git like syntax 
    • yo angular
    • yo ember 
    • yo webapp 

    scaffolding

    Write your own generators

    Have fun

    Placekitten

    HAVE FUN


    have fun


    Github Selfies