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

Five Kung Fu Moves for Front-End Hero

Five Kung Fu Moves for Front-End Hero

Presented at SFJS Meetup: http://www.meetup.com/jsmeetup/events/229522886/

After you built an awesome app using React and integrated its Mocha tests with Jenkins, what should you do next? To reach the highest app quality and to move yourself to the next level, there is a few more skills you need to master: leverage Git hooks, manage code complexity, monitor code coverage, run smoke tests with evergreen browsers, and track the downstream projects.

Ariya Hidayat

April 26, 2016
Tweet

More Decks by Ariya Hidayat

Other Decks in Programming

Transcript

  1. 5 Kung Fu Moves for Front-End Hero

    View full-size slide

  2. What shall I do next?

    View full-size slide

  3. T D D B D D
    P D D

    View full-size slide

  4. You either die a JavaScript hero, or you live long
    enough to read those JavaScript fatigue articles.

    View full-size slide

  5. Sample Project

    View full-size slide

  6. Test Runner
    Test Library Assertion Library
    Style Checker
    github.com/ariya/from-zero-to-hero

    View full-size slide

  7. > npm start
    > [email protected] start /home/ariya/from-hero-to-zero
    > http-server -p 9000
    Starting up http-server, serving ./
    Available on:
    http://127.0.0.1:9000
    http://192.168.1.69:9000
    Hit CTRL-C to stop the server

    View full-size slide

  8. Prevent regressions with
    Git hooks

    View full-size slide

  9. git commit
    Run pre-commit hook
    Exit
    code
    = 0
    ?
    Continue
    Abort the
    commit process
    Y
    N

    View full-size slide

  10. git push
    Run pre-push hook
    Exit
    code
    = 0
    ?
    Continue
    Abort the
    push process
    Y
    N

    View full-size slide

  11. cat << EOF >> .git/hooks/pre-commit
    npm run jscs
    EOF
    Create a pre-commit hook script
    chmod +x .git/hooks/pre-commit
    Ensure that it is executable

    View full-size slide

  12. > git commit -a -m "Fix bug #666"
    > [email protected] jscs /home/ariya/from-hero-to-zero
    > jscs -p idiomatic js/*.js
    Invalid quote mark found at js/todoModel.js :
    1 |var app = app || {};
    2 |(function() {
    3 | 'use strict';
    ------------^
    4 | var Utils = app.Utils;
    5 | // Generic "model" object. You can use whatever
    1 code style error found.

    View full-size slide

  13. Manage
    code complexity

    View full-size slide

  14. http://ariya.ofilabs.com/2013/05/continuous-monitoring-of-javascript-code-complexity.html

    View full-size slide

  15. > cr -f plain search.js
    search.js
    Function: searchConsultant
    Line No.: 1
    Physical LOC: 17
    Logical LOC: 13
    Parameter count: 0
    Cyclomatic complexity: 6
    Cyclomatic complexity density: 46.15384615384615%
    Halstead difficulty: 15.235294117647058
    Halstead volume: 371.5647232790157
    Halstead effort: 5660.897842897945

    View full-size slide

  16. Monitor and track
    code coverage

    View full-size slide

  17. Istanbul
    Instrumenter + Coverage analysis

    View full-size slide

  18. Source
    Instrumented Source
    Tests
    Coverage Report

    View full-size slide

  19. Karma configuration
    module.exports = function(config) {
    config.set({
    basePath: '..',
    autoWatch: true,
    frameworks: ['mocha', 'chai'],
    files: ['js/*.js', 'test/*.js' ],
    plugins: [ 'karma-mocha', 'karma-chai', 'karma-coverage',
    'karma-phantomjs-launcher'],
    browsers: ['PhantomJS'],
    singleRun: true,
    preprocessors: { 'js/*.js': ['coverage'] },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
    dir : 'coverage/',
    reporters: [{ type: 'html', subdir: 'html' },]
    }
    });
    };

    View full-size slide

  20. Coverage Report
    Statistics
    Uncovered
    Statements

    View full-size slide

  21. Code Coverage Dashboard

    View full-size slide

  22. Repository
    Build system
    Dashboard
    Cobertura
    Report

    View full-size slide

  23. Coverage Tracking in Pull Request
    http://ariya.ofilabs.com/2015/08/javascript-code-coverage-dashboard-with-codecov-io.html

    View full-size slide

  24. “If you think JSLint hurts
    your feelings, wait until you
    use Istanbul.”
    @davglass

    View full-size slide

  25. ...I gave you my heart
    But the very next day you gave it away...

    View full-size slide

  26. Run quick smoke tests with
    evergreen browsers

    View full-size slide

  27. http://ariya.ofilabs.com/2015/09/javascript-testing-with-latest-firefox-and-chrome-on-appveyor.html

    View full-size slide

  28. appveyor.yml
    install:
    - choco install firefox
    - choco upgrade firefox
    - choco install googlechrome
    - choco upgrade googlechrome
    - ps: Install-Product node $env:nodejs_version
    - node --version
    - npm --version
    - npm install
    test_script:
    - npm test

    View full-size slide

  29. https://chocolatey.org/packages/Firefox

    View full-size slide

  30. Running Install scripts
    choco install firefox
    Installing the following packages:
    firefox
    By installing you accept licenses for the packages.
    Firefox v41.0.2 already installed.
    Use --force to reinstall, specify a version to install, or try upgrade.
    Chocolatey installed 0/1 package(s). 0 package(s) failed.
    choco upgrade firefox
    Upgrading the following packages:
    firefox
    By upgrading you accept licenses for the packages.
    You have Firefox v41.0.2 installed. Version 44.0.2 is available based on
    your source(s).
    Firefox v44.0.2
    Downloading Firefox 32 bit
    Installing Firefox...
    Firefox has been installed.
    The upgrade of firefox was successful.

    View full-size slide

  31. Test your
    downstream projects

    View full-size slide

  32. Google V8
    Node.js
    Express

    View full-size slide

  33. Library
    Framework
    Application

    View full-size slide

  34. function test_downstream_project(project, repo) {
    console.log('Cloning', repo, '...');
    execute('git clone --depth 1 ' + repo + ' ' + project);
    process.chdir(project);
    console.log();
    execute('npm install');
    console.log();
    console.log('Replacing awesome with a fresh one...');
    copy_file(source, './node_modules/awesome/awesome.js');
    console.log();
    try {
    execute('npm test');
    } catch (e) {
    console.log('Failing: ', e.toString());
    process.exit(1);
    }
    process.chdir('..');
    }
    Clone a downstream project
    Replace the library with
    a fresh one
    Install dependencies
    Run the test suite

    View full-size slide

  35. Run different tests in parallel

    View full-size slide

  36. Verify code coverage
    Run cross-browser tests
    Check downstream project

    View full-size slide

  37. Parallel Execution
    Verify code coverage
    Monitor complexity
    Run cross-browser tests
    Check downstream project

    View full-size slide

  38. This is the hero you’re looking for

    View full-size slide

  39. Thank You
    Some artworks are from http://openclipart.org.
    @ariyahidayat
    shapesecurity.com
    speakerdeck.com/ariya

    View full-size slide