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

Modern Frontend Development

Modern Frontend Development

5ca293c48862620cf1a5a1f09b1bc9ec?s=128

Thorsten Rinne

February 13, 2014
Tweet

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