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

Modernes Frontend Development

Modernes Frontend Development

Thorsten Rinne

October 30, 2013
Tweet

More Decks by Thorsten Rinne

Other Decks in Programming

Transcript

  1. MODERNES
    FRONTEND
    DEVELOPMENT
    International PHP Conference 2013

    View full-size slide

  2. THORSTEN
    RINNE
    ‣ Diplom-Informatiker (FH)
    ‣ Team Lead Engineering
    ‣ Yatego GmbH
    ‣ phpMyFAQ
    ‣ @ThorstenRinne

    View full-size slide

  3. Eine Art Agenda ...
    Editor / IDE
    Browser
    Browser Dev Tools
    Die Kommandozeile
    Development Tools
    Demo

    View full-size slide

  4. Editor / IDE

    View full-size slide

  5. Manager anwesend?

    View full-size slide

  6. Lasst den Entwickler
    entscheiden!

    View full-size slide

  7. Sublime Text
    TextMate
    UltraEdit
    vi
    Emacs
    ...

    View full-size slide

  8. Geht sogar im Browser...

    View full-size slide

  9. Welche Versionen?
    Chrome latest (derzeit Version 30)
    Chromium latest (derzeit Version 32)
    Firefox latest (derzeit Version 25)
    Firefox Nightly latest (derzeit Version 28)
    Safari latest (derzeit Version 6.1 bzw 7)
    Opera kann man sich sparen, da wie Chrome

    View full-size slide

  10. Fehlt da nicht jemand?

    View full-size slide

  11. Welche IE Versionen?
    Internet Explorer 7 (?)
    Internet Explorer 8
    Internet Explorer 9
    Internet Explorer 10
    Internet Explorer 11

    View full-size slide

  12. Browser Developer Tools

    View full-size slide

  13. chrome://flags
    Experimental Developer Tools experiments

    View full-size slide

  14. Live Editing + Autosave

    View full-size slide

  15. Performance-Messung

    View full-size slide

  16. Performance-Messung
    Übersicht des Speicherverbrauchs
    Hilft bei Suche nach Performanceproblemen
    Layout oder Skripte
    Ziel: 60 Frames pro Sekunde :-)

    View full-size slide

  17. Memory und DOM Leaks

    View full-size slide

  18. Memory und DOM Leaks
    JavaScript CPU Profiling
    Heap Snapshot für
    JavaScript Objekte
    DOM Knoten
    Suche nach potentiellen Memory und DOM Leaks

    View full-size slide

  19. Mobile Testing

    View full-size slide

  20. Mobile Testing
    User Agent
    Verschiedene Endgeräte
    Android
    iOS
    Windows Phone
    Simulation von Touch Events
    Ändern der Geolocation und des Accelerometers

    View full-size slide

  21. Das Terminal

    View full-size slide

  22. Die Kommandozeile macht Spaß!
    ❤ ~/

    View full-size slide

  23. Lass sie gut aussehen!
    Installiert „dotfiles“

    View full-size slide

  24. http://dotfiles.github.io

    View full-size slide

  25. Installiert das Schweizer
    Taschermesser des Webentwicklers!

    View full-size slide

  26. Linting
    beim Speichern
    beim Commit
    bei Build

    View full-size slide

  27. Automatisierung

    View full-size slide

  28. Entwickler sind faul.

    View full-size slide

  29. Linting
    Abhängigkeiten auflösen
    Zusammenfügen und Kompilieren
    Testing
    Debug Code entfernen

    View full-size slide

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

    View full-size slide

  31. The JavaScript Task Runner
    aufgabenbasiertes Kommandozeilen-
    Tool
    ähnlich make / rake / ant / phing
    Konfiguration in JavaScript
    Große Community
    Hunderte Plugins
    Linting, Concat, Watcher, Testing out of
    the box

    View full-size slide

  32. $ cd /path/to/project
    $ npm install grunt --save-dev
    Grunt installieren

    View full-size slide

  33. {
    "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 full-size slide

  34. 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 full-size slide

  35. // Run Jasmine and DalekJS tests
    grunt.registerTask(
    'testrun',
    ['jshint', 'jasmine', 'dalek']
    );
    // Build production
    grunt.registerTask(
    'production',
    ['copy', 'less', 'cssmin', 'jshint', 'uglify']
    );
    Grunt Tasks

    View full-size slide

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

    View full-size slide

  37. Linting
    JSHint oder JSLint
    .jshintrc
    $ npm install grunt-contrib-jshint --save-dev

    View full-size slide

  38. LiveReload
    Plugin
    Chrome
    Firefox
    Safari
    Triggert Seitenreload via grunt watch
    Browser Extensions auf http://livereload.com/

    View full-size slide

  39. Package Manager für das Web
    Installieren und Entfernen von Paketen
    Keine Abhängigkeiten
    keine sudo Rechte nötig
    Schnell installiert:
    $ npm install bower -g

    View full-size slide

  40. Pakete installieren
    $ bower install
    $ bower install
    $ bower install #
    $ bower install =#

    View full-size slide

  41. Paket-Quellen
    Registrierte Bower-Pakete wie z.B. jQuery
    Git-Repositories
    Lokale Ordner
    URLs mit .zip/.tar.gz Dateien
    Werden normal nach bower_components installiert

    View full-size slide

  42. Pakete suchen
    $ bower search

    View full-size slide

  43. Pakete verwenden
    src="/bower_components/jquery/jquery.min.js">

    View full-size slide

  44. Pakete löschen
    $ bower remove

    View full-size slide

  45. Konfiguration .bowerrc
    {
    "directory": "./components"
    }

    View full-size slide

  46. Konfiguration 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 full-size slide

  47. Packen und Kompilieren
    grunt-contrib-copy
    grunt-contrib-concat
    grunt-contrib-uglify
    grunt-contrib-cssmin
    grunt-contrib-imagemin

    View full-size slide

  48. Testing
    Unittests mit Jasmine
    PhantomJS
    Chrome
    Firefox
    Chrome Canary
    Firefox Nightly
    UI Testing mit DalekJS
    PhantomJS
    Chrome
    Firefox
    Internet Explorer!

    View full-size slide

  49. 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 full-size slide

  50. 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 full-size slide

  51. Test‘em Testrunner
    Test Framework für
    Jasmine
    QUnit
    Mocha
    Buster.js
    Für alle Browser und PhantomJS

    View full-size slide

  52. Test‘em instalieren
    $ npm install testem -g
    $ testem

    View full-size slide

  53. Testing mit DalekJS
    Neues UI Testing Framework
    Sehr neu, aktuell Version 0.0.6
    Schneller als Selenium
    Tests schreibt man in JavaScript
    Unterstützt alle Browser und PhantomJS

    View full-size slide

  54. Testing mit 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 full-size slide

  55. Testing mit DalekJS

    View full-size slide

  56. Schön. Und nun?

    View full-size slide

  57. Geht das nicht noch einfacher?

    View full-size slide

  58. Yeoman
    Scaffolding neuer Apps
    Schreibt Grunt Konfiguration
    Yeoman = Grunt + Bower + Awesomeness
    Installation
    $ npm install -g yo

    View full-size slide

  59. Yeoman
    $ npm install -g generator-webapp
    $ cd /path/to/webroot
    $ mkdir ipc-app
    $ cd ipc-app
    $ yo webapp

    View full-size slide

  60. Yeoman
    $ grunt server
    $ grunt test
    $ grunt build

    View full-size slide

  61. Generator WebApp
    Watcher für HTML, CSS und JS mit LiveReload
    Builtin Webserver auf Port 9000
    JSHint
    Mocha-Tests
    Bootstrap 3

    View full-size slide

  62. Verfügbare Generatoren
    AngularJS
    WordPress
    EmberJS
    Firefox OS Apps
    ExpressJS
    Laravel
    Knockout
    Jekyll
    Phonegap
    Meteor
    Symfony2

    View full-size slide

  63. Beispiel Yatego 2.0

    View full-size slide

  64. Frontend vs. Backend
    Frontend
    3 Developer
    Bootstrap 3 basierend
    Testen via Jasmine
    Grunt / LiveReload
    Deployment
    Assetserver
    Backend
    6 Developer
    Symfony 2.3
    Testen via PHPUnit
    app/console + ant
    Deployment
    Capifony

    View full-size slide

  65. Vorteile
    Jeder hatte seinen Workflow
    Test-Driven-Development für Frontend und Backend
    LiveReload schützt die F5-Taste
    Viele JavaScript-Fehler vor dem Release gefunden

    View full-size slide

  66. Fragen?
    Kommentare?

    View full-size slide

  67. Vielen Dank für Eure Aufmerksamkeit!
    Joind.in: https://joind.in/9562
    Twitter: @ThorstenRinne
    App.net: https://alpha.app.net/thorsten
    Slides: http://speakerdeck.com/u/thorsten
    Thorsten Rinne
    Yatego GmbH
    [email protected]

    View full-size slide