Slide 1

Slide 1 text

MODERNES FRONTEND DEVELOPMENT International PHP Conference 2013

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Editor / IDE

Slide 5

Slide 5 text

Manager anwesend?

Slide 6

Slide 6 text

Lasst den Entwickler entscheiden!

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Sublime Text TextMate UltraEdit vi Emacs ...

Slide 9

Slide 9 text

Geht sogar im Browser...

Slide 10

Slide 10 text

Browser

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Fehlt da nicht jemand?

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Browser Developer Tools

Slide 17

Slide 17 text

chrome://flags Experimental Developer Tools experiments

Slide 18

Slide 18 text

Live Editing + Autosave

Slide 19

Slide 19 text

Performance-Messung

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Memory und DOM Leaks

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Mobile Testing

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Das Terminal

Slide 26

Slide 26 text

KEINE ANGST

Slide 27

Slide 27 text

Die Kommandozeile macht Spaß! ❤ ~/

Slide 28

Slide 28 text

Lass sie gut aussehen! Installiert „dotfiles“

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

http://dotfiles.github.io

Slide 31

Slide 31 text

Installiert das Schweizer Taschermesser des Webentwicklers!

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Linting beim Speichern beim Commit bei Build

Slide 34

Slide 34 text

Automatisierung

Slide 35

Slide 35 text

Warum?

Slide 36

Slide 36 text

Entwickler sind faul.

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

{ "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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Pakete installieren $ bower install $ bower install $ bower install # $ bower install =#

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Pakete suchen $ bower search

Slide 51

Slide 51 text

Pakete verwenden

Slide 52

Slide 52 text

Pakete löschen $ bower remove

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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" } }

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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); }); });

Slide 59

Slide 59 text

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.

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

BOOM!

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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(); } };

Slide 67

Slide 67 text

Testing mit DalekJS

Slide 68

Slide 68 text

Schön. Und nun?

Slide 69

Slide 69 text

Geht das nicht noch einfacher?

Slide 70

Slide 70 text

Yeoman!

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Yeoman $ grunt server $ grunt test $ grunt build

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

DEMO

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Beispiel Yatego 2.0

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Fragen? Kommentare?

Slide 81

Slide 81 text

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]