Modernes Frontend Development

Transcript

1. MODERNES FRONTEND DEVELOPMENT International PHP Conference 2013
2. THORSTEN RINNE ‣ Diplom-Informatiker (FH) ‣ Team Lead Engineering ‣ Yatego GmbH ‣ phpMyFAQ ‣ @ThorstenRinne
3. Eine Art Agenda ... Editor / IDE Browser Browser Dev Tools Die Kommandozeile Development Tools Demo
4. Editor / IDE
5. Manager anwesend?
6. Lasst den Entwickler entscheiden!
8. Sublime Text TextMate UltraEdit vi Emacs ...
9. Geht sogar im Browser...
10. Browser
12. 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
13. Fehlt da nicht jemand?
15. Welche IE Versionen? Internet Explorer 7 (?) Internet Explorer 8 Internet Explorer 9 Internet Explorer 10 Internet Explorer 11
16. Browser Developer Tools
17. chrome://flags Experimental Developer Tools experiments
18. Live Editing + Autosave
19. Performance-Messung
20. Performance-Messung Übersicht des Speicherverbrauchs Hilft bei Suche nach Performanceproblemen Layout oder Skripte Ziel: 60 Frames pro Sekunde :-)
21. Memory und DOM Leaks
22. Memory und DOM Leaks JavaScript CPU Profiling Heap Snapshot für JavaScript Objekte DOM Knoten Suche nach potentiellen Memory und DOM Leaks
23. Mobile Testing
24. Mobile Testing User Agent Verschiedene Endgeräte Android iOS Windows Phone Simulation von Touch Events Ändern der Geolocation und des Accelerometers
25. Das Terminal
26. KEINE ANGST
27. Die Kommandozeile macht Spaß! ❤ ~/
28. Lass sie gut aussehen! Installiert „dotfiles“
30. http://dotfiles.github.io
31. Installiert das Schweizer Taschermesser des Webentwicklers!
33. Linting beim Speichern beim Commit bei Build
34. Automatisierung
35. Warum?
36. Entwickler sind faul.
37. Linting Abhängigkeiten auflösen Zusammenfügen und Kompilieren Testing Debug Code entfernen
38. $ npm install grunt-cli -g The JavaScript Task Runner
39. 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
40. $ cd /path/to/project $ npm install grunt --save-dev Grunt installieren
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
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
43. // Run Jasmine and DalekJS tests grunt.registerTask( 'testrun', ['jshint', 'jasmine', 'dalek'] ); // Build production grunt.registerTask( 'production', ['copy', 'less', 'cssmin', 'jshint', 'uglify'] ); Grunt Tasks
44. The JavaScript Task Runner http://gruntjs.com http://gruntjs.com/plugins
45. Linting JSHint oder JSLint .jshintrc $ npm install grunt-contrib-jshint --save-dev
46. LiveReload Plugin Chrome Firefox Safari Triggert Seitenreload via grunt watch Browser Extensions auf http://livereload.com/
47. 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
48. Pakete installieren $ bower install $ bower install <package> $ bower install <package>#<version> $ bower install <name>=<package>#<version>
49. 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
50. Pakete suchen $ bower search <package>
51. Pakete verwenden <script src="/bower_components/jquery/jquery.min.js"> </script>
52. Pakete löschen $ bower remove <package>
53. Konfiguration .bowerrc { "directory": "./components" }
54. 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" } }
55. Packen und Kompilieren grunt-contrib-copy grunt-contrib-concat grunt-contrib-uglify grunt-contrib-cssmin grunt-contrib-imagemin
57. Testing Unittests mit Jasmine PhantomJS Chrome Firefox Chrome Canary Firefox Nightly UI Testing mit DalekJS PhantomJS Chrome Firefox Internet Explorer!
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); }); });
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.
60. Test‘em Testrunner Test Framework für Jasmine QUnit Mocha Buster.js Für alle Browser und PhantomJS
61. Test‘em instalieren $ npm install testem -g $ testem
63. BOOM!
65. 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
66. 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(); } };
67. Testing mit DalekJS
68. Schön. Und nun?
69. Geht das nicht noch einfacher?
70. Yeoman!
71. Yeoman Scaffolding neuer Apps Schreibt Grunt Konfiguration Yeoman = Grunt + Bower + Awesomeness Installation $ npm install -g yo
72. Yeoman $ npm install -g generator-webapp $ cd /path/to/webroot $ mkdir ipc-app $ cd ipc-app $ yo webapp
73. Yeoman $ grunt server $ grunt test $ grunt build
74. Generator WebApp Watcher für HTML, CSS und JS mit LiveReload Builtin Webserver auf Port 9000 JSHint Mocha-Tests Bootstrap 3
75. DEMO
76. Verfügbare Generatoren AngularJS WordPress EmberJS Firefox OS Apps ExpressJS Laravel Knockout Jekyll Phonegap Meteor Symfony2
77. Beispiel Yatego 2.0
78. 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
79. 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
80. Fragen? Kommentare?
81. 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 thorsten@yatego.com