Modern Frontend Development

Transcript

1. MODERN
   FRONTEND
   DEVELOPMENT NFQ Office Kaunas
2. THORSTEN
   RINNE ‣ studied CS ‣ Team Lead Engineering ‣ Yatego GmbH ‣ phpMyFAQ ! ‣ @ThorstenRinne
3. Today’s agenda Editor / IDE Browser Browser Dev Tools $ The command line Development Tools Demo
4. Editor / IDE
5. Let the developers decide!
7. Sublime Text
   TextMate
   UltraEdit
   vi
   Emacs
   ...
8. You can edit in the browser!
9. Browser
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
12. Is someone missing?
14. Which IE versions? Internet Explorer 7 (?) Internet Explorer 8 Internet Explorer 9 Internet Explorer 10 Internet Explorer 11
15. Browser Developer Tools
16. chrome://flags Experimental Developer Tools experiments
17. Live Editing + Autosave
18. Performance measuring
19. Performance measuring Overview of memory usage Helps searching for performance problems Layout or scripts Our goal should be 60 frames per second :-)
20. Memory and DOM Leaks
21. Memory and DOM Leaks JavaScript CPU Profiling Heap Snapshot for JavaScript objects DOM nodes Search for potential memory and/or DOM leaks
22. Mobile Testing
23. Mobile Testing User Agent Different devices Android iOS Windows Phone Simulation of touch events Changing geolocation and accelerometers
24. The Terminal
25. NO
    FEAR
26. The command line makes you smile
    ❤ ~/
27. Let the CLI look awesome!
    Please install „dotfiles“
29. http://dotfiles.github.io
30. Please install the Swiss army knife of every web developer.
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
33. Linting on save on commit during build
34. Automatisation
35. Why?
36. Developers are lazy!
37. Linting Resolve depedencies Concat and compiling Testing Remove debug code
38. $ npm install grunt-cli -g The JavaScript Task Runner
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
40. $ cd /path/to/project ! $ npm install grunt --save-dev How to install Grunt
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 or JSLint .jshintrc $ npm install grunt-contrib-jshint --save-dev
46. LiveReload Plugins for Chrome Firefox Safari Triggers page reload via grunt watch Browser extensions on http://livereload.com/
47. Package Manager for the web Install and remove packages No external dependencies No sudo permissions Blazing fast installation:
 
 $ npm install bower -g
48. How to install packages ! ! ! $ bower install $ bower install <package> $ bower install <package>#<version> $ bower install <name>=<package>#<version>
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
50. Search packages $ bower search <package>
51. Simple package usage <script 
 src="/bower_components/jquery/jquery.min.js">
 </script>
52. Deleting packages $ bower remove <package>
53. Configuration .bowerrc { "directory": "./components" }
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"
 }
 }
55. Useful Grunt tasks grunt-contrib-copy grunt-contrib-concat grunt-contrib-uglify grunt-contrib-cssmin grunt-contrib-imagemin
57. Testing Unittests with Jasmine PhantomJS Chrome Firefox Chrome Canary Firefox Nightly
 UI Testing with 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 for Jasmine QUnit Mocha Buster.js For all browsers and PhantomJS
61. How to install Test‘em $ npm install testem -g
 
 $ testem
63. BOOM!
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
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(); } };
67. Testing with DalekJS
68. Awesome. And now?
69. Why couldn’t it be more easy?
70. Yeoman!
71. Yeoman Scaffolding of new apps Writes Grunt configuration Yeoman = Grunt + Bower + Awesomeness Blazing fast installation
 
 $ npm install -g yo

72. Yeoman $ npm install -g generator-webapp
 
 $ cd /path/to/webroot
 
 $ mkdir nfqApp
 
 $ cd nfqApp
 
 $ yo nfqApp

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

74. Generator WebApp Watcher for HTML, CSS and JS with LiveReload Builtin Webserver at Port 9000 JSHint Mocha tests Bootstrap 3
75. DEMO
76. Available generators AngularJS WordPress EmberJS Firefox OS Apps ExpressJS Laravel Knockout Jekyll Phonegap Meteor Symfony2
77. Example Yatego 2.0 www.yatego.com
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
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
80. Questions? Comments?
81. Thanks for your attention! :-) Twitter: @ThorstenRinne Slides: http://speakerdeck.com/u/thorsten Thorsten Rinne
 Yatego GmbH
 thorsten@yatego.com