Modern Frontend Development

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

    thorsten@yatego.com
    

    View Slide