$30 off During Our Annual Pro Sale. View Details »

Modern Frontend Development

Modern Frontend Development

Thorsten Rinne

February 13, 2014
Tweet

More Decks by Thorsten Rinne

Other Decks in Programming

Transcript

  1. MODERN
    FRONTEND
    DEVELOPMENT
    NFQ Office Kaunas

    View Slide

  2. THORSTEN
    RINNE
    ‣ studied CS
    ‣ Team Lead Engineering
    ‣ Yatego GmbH
    ‣ phpMyFAQ
    !
    ‣ @ThorstenRinne

    View Slide

  3. Today’s agenda
    Editor / IDE
    Browser
    Browser Dev Tools
    $ The command line
    Development Tools
    Demo

    View Slide

  4. Editor / IDE

    View Slide

  5. Let the developers decide!

    View Slide

  6. View Slide

  7. Sublime Text
    TextMate
    UltraEdit
    vi
    Emacs
    ...

    View Slide

  8. You can edit in the browser!

    View Slide

  9. Browser

    View Slide

  10. View Slide

  11. Which Versions?
    Chrome latest (currently version 32)
    Chromium latest (currently version 34)
    Firefox latest (currently version 27)
    Firefox Nightly latest (currently version 30)
    Safari latest (currently version 6.1 / 7)
    Forget Opera, as it’s just a Chrome

    View Slide

  12. Is someone missing?

    View Slide

  13. View Slide

  14. Which IE versions?
    Internet Explorer 7 (?)
    Internet Explorer 8
    Internet Explorer 9
    Internet Explorer 10
    Internet Explorer 11

    View Slide

  15. Browser Developer Tools

    View Slide

  16. chrome://flags
    Experimental Developer Tools experiments

    View Slide

  17. Live Editing + Autosave

    View Slide

  18. Performance measuring

    View Slide

  19. Performance measuring
    Overview of memory usage
    Helps searching for performance problems
    Layout or scripts
    Our goal should be 60 frames per second :-)

    View Slide

  20. Memory and DOM Leaks

    View Slide

  21. Memory and DOM Leaks
    JavaScript CPU Profiling
    Heap Snapshot for
    JavaScript objects
    DOM nodes
    Search for potential memory and/or DOM leaks

    View Slide

  22. Mobile Testing

    View Slide

  23. Mobile Testing
    User Agent
    Different devices
    Android
    iOS
    Windows Phone
    Simulation of touch events
    Changing geolocation and accelerometers

    View Slide

  24. The Terminal

    View Slide

  25. NO
    FEAR

    View Slide

  26. The command line makes you smile
    ❤ ~/

    View Slide

  27. Let the CLI look awesome!
    Please install „dotfiles“

    View Slide

  28. View Slide

  29. http://dotfiles.github.io

    View Slide

  30. Please install the Swiss army knife
    of every web developer.

    View Slide

  31. View Slide

  32. Socket.IO: cross browser sockets
    Express: like Sinatra or Silex
    Grunt: a JavaScript task runner
    Bower: a package manager for the web
    Yeoman: CLI interface for scaffolding
    JSHint / JSLint

    View Slide

  33. Linting
    on save
    on commit
    during build

    View Slide

  34. Automatisation

    View Slide

  35. Why?

    View Slide

  36. Developers are lazy!

    View Slide

  37. Linting
    Resolve depedencies
    Concat and compiling
    Testing
    Remove debug code

    View Slide

  38. $ npm install grunt-cli -g
    The JavaScript Task Runner

    View Slide

  39. The JavaScript Task Runner
    task based CLI tool
    like make / rake / ant / phing
    Configuration in JavaScript
    Huge community
    hundreds of plugins
    Linting, Concat, Watcher, Testing out of
    the box

    View Slide

  40. $ cd /path/to/project
    !
    $ npm install grunt --save-dev
    How to install Grunt

    View Slide

  41. {
    "name": "yatego.com",
    "version": "2.0.0",
    "dependencies": {},
    "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.2"
    },
    "engines": {
    "node": ">=0.10.0"
    },
    "author": "Yatego GmbH",
    }
    package.json

    View Slide

  42. module.exports = function(grunt) {
    !
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
    options: {
    banner: '/*! <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
    src: 'src/<%= pkg.name %>.js',
    dest: 'build/<%= pkg.name %>.min.js'
    }
    }
    });
    !
    grunt.loadNpmTasks('grunt-contrib-uglify');
    !
    grunt.registerTask('default', ['uglify']);
    !
    };
    Gruntfile.js

    View Slide

  43. // Run Jasmine and DalekJS tests
    grunt.registerTask(

    'testrun',

    ['jshint', 'jasmine', 'dalek']
    );
    !
    // Build production
    grunt.registerTask(

    'production',
    ['copy', 'less', 'cssmin', 'jshint', 'uglify']
    );
    Grunt Tasks

    View Slide

  44. The JavaScript Task Runner
    http://gruntjs.com
    http://gruntjs.com/plugins

    View Slide

  45. Linting
    JSHint or JSLint
    .jshintrc
    $ npm install grunt-contrib-jshint --save-dev

    View Slide

  46. LiveReload
    Plugins for
    Chrome
    Firefox
    Safari
    Triggers page reload via grunt watch
    Browser extensions on http://livereload.com/

    View Slide

  47. Package Manager for the web
    Install and remove packages
    No external dependencies
    No sudo permissions
    Blazing fast installation:


    $ npm install bower -g

    View Slide

  48. How to install packages
    !
    !
    !
    $ bower install
    $ bower install
    $ bower install #
    $ bower install =#

    View Slide

  49. Package resources
    Registered Bower packages like jQuery
    Git repositories
    Local folders
    URLs with .zip/.tar.gz files
    Will be installed to bower_components by default

    View Slide

  50. Search packages
    $ bower search

    View Slide

  51. Simple package usage
    src="/bower_components/jquery/jquery.min.js">


    View Slide

  52. Deleting packages
    $ bower remove

    View Slide

  53. Configuration .bowerrc
    {
    "directory": "./components"
    }

    View Slide

  54. Configuration bower.json
    {

    "name": "yatego.com",

    "version": "2.0.0",

    "dependencies": {

    "jquery": "1.10.2",

    "bootstrap": "3.0.0",

    "modernizr": "2.6.2"

    },

    "devDependencies": {

    "jasmine": "~1.3.1",
    },

    "resolutions": {

    "jquery": "1.10.2"

    }

    }

    View Slide

  55. Useful Grunt tasks
    grunt-contrib-copy
    grunt-contrib-concat
    grunt-contrib-uglify
    grunt-contrib-cssmin
    grunt-contrib-imagemin

    View Slide

  56. View Slide

  57. Testing
    Unittests with Jasmine
    PhantomJS
    Chrome
    Firefox
    Chrome Canary
    Firefox Nightly

    UI Testing with DalekJS
    PhantomJS
    Chrome
    Firefox
    Internet Explorer!

    View Slide

  58. Jasmine
    describe("Cart", function() {
    !
    beforeEach(function() {
    $.yategoCart().removeAll();
    });
    !
    it("Checks if add item works", function() {
    $.yategoCart().addItem("test-pos-1", "test-offer-1", 3);
    expect($.yategoCart().hasItem("test-offer-1")).toEqual(true);
    });
    !
    it("Checks if change quantity works", function() {
    $.yategoCart().addItem("test-pos-2", "test-offer-2", 3);
    $.yategoCart().addItemQty("test-offer-2", 2);
    expect($.yategoCart().getItemQty("test-offer-2")).toEqual(5);
    });
    });

    View Slide

  59. Jasmine via PhantomJS
    $ grunt jasmine
    Running "jasmine:pivotal" (jasmine) task
    Testing jasmine specs via phantom
    ............................
    28 specs in 0.229s.
    >> 0 failures
    !
    Done, without errors.

    View Slide

  60. Test‘em Testrunner
    Test Framework for
    Jasmine
    QUnit
    Mocha
    Buster.js
    For all browsers and PhantomJS

    View Slide

  61. How to install Test‘em
    $ npm install testem -g


    $ testem

    View Slide

  62. View Slide

  63. BOOM!

    View Slide

  64. View Slide

  65. Testing with DalekJS
    New UI Testing Framework
    Early stage, currently version 0.0.8
    Faster than Selenium
    Tests written in JavaScript
    Supports all browsers and PhantomJS

    View Slide

  66. Testing with DalekJS
    module.exports = {
    'Page title is correct': function (test) {
    test.open('http://www.yatego.dev')
    .assert.title().is('Yatego Shopping', 'It has title')
    .done();
    },
    'Search page is correct': function (test) {
    test.open('http://www.yatego.dev/search?q=Test')
    .assert.title().is('Test - yatego.com', 'It has title')
    .done();
    }
    };

    View Slide

  67. Testing with DalekJS

    View Slide

  68. Awesome. And now?

    View Slide

  69. Why couldn’t it be more easy?

    View Slide

  70. Yeoman!

    View Slide

  71. Yeoman
    Scaffolding of new apps
    Writes Grunt configuration
    Yeoman = Grunt + Bower + Awesomeness
    Blazing fast installation


    $ npm install -g yo


    View Slide

  72. Yeoman
    $ npm install -g generator-webapp


    $ cd /path/to/webroot


    $ mkdir nfqApp


    $ cd nfqApp


    $ yo nfqApp


    View Slide

  73. Yeoman
    $ grunt server
    !
    $ grunt test
    !
    $ grunt build


    View Slide

  74. Generator WebApp
    Watcher for HTML, CSS and JS with LiveReload
    Builtin Webserver at Port 9000
    JSHint
    Mocha tests
    Bootstrap 3

    View Slide

  75. DEMO

    View Slide

  76. Available generators
    AngularJS
    WordPress
    EmberJS
    Firefox OS Apps
    ExpressJS
    Laravel
    Knockout
    Jekyll
    Phonegap
    Meteor
    Symfony2

    View Slide

  77. Example Yatego 2.0
    www.yatego.com

    View Slide

  78. Frontend vs. Backend
    Frontend
    3 Developer
    Bootstrap 3 based
    Testen via Jasmine
    Grunt / LiveReload
    Deployment
    Assetserver

    Backend
    6 Developer
    Symfony 2.3
    Testen via PHPUnit
    app/console + ant
    Deployment

    Capifony

    View Slide

  79. Advantages
    everyone could use his own workflow
    Test-Driven-Development for frontend and backend
    LiveReload saves hitting the F5 key all the time
    Many JavaScript errors were found before the release

    View Slide

  80. Questions?
    Comments?

    View Slide

  81. Thanks for your attention! :-)
    Twitter: @ThorstenRinne
    Slides: http://speakerdeck.com/u/thorsten
    Thorsten Rinne

    Yatego GmbH

    [email protected]

    View Slide