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!

6. None

7. Sublime Text
   TextMate
   UltraEdit
   vi
   Emacs
   ...

8. You can edit in the browser!

9. Browser

10. None

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?

13. None

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“

28. None

29. http://dotfiles.github.io

30. Please install the Swiss army knife of every web developer.

31. None

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

56. None

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
62. None

63. BOOM!

64. None

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