Slide 1

Slide 1 text

MODERN FRONTEND DEVELOPMENT NFQ Office Kaunas

Slide 2

Slide 2 text

THORSTEN RINNE ‣ studied CS ‣ Team Lead Engineering ‣ Yatego GmbH ‣ phpMyFAQ ! ‣ @ThorstenRinne

Slide 3

Slide 3 text

Today’s agenda Editor / IDE Browser Browser Dev Tools $ The command line Development Tools Demo

Slide 4

Slide 4 text

Editor / IDE

Slide 5

Slide 5 text

Let the developers decide!

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Sublime Text TextMate UltraEdit vi Emacs ...

Slide 8

Slide 8 text

You can edit in the browser!

Slide 9

Slide 9 text

Browser

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Is someone missing?

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Which IE versions? Internet Explorer 7 (?) Internet Explorer 8 Internet Explorer 9 Internet Explorer 10 Internet Explorer 11

Slide 15

Slide 15 text

Browser Developer Tools

Slide 16

Slide 16 text

chrome://flags Experimental Developer Tools experiments

Slide 17

Slide 17 text

Live Editing + Autosave

Slide 18

Slide 18 text

Performance measuring

Slide 19

Slide 19 text

Performance measuring Overview of memory usage Helps searching for performance problems Layout or scripts Our goal should be 60 frames per second :-)

Slide 20

Slide 20 text

Memory and DOM Leaks

Slide 21

Slide 21 text

Memory and DOM Leaks JavaScript CPU Profiling Heap Snapshot for JavaScript objects DOM nodes Search for potential memory and/or DOM leaks

Slide 22

Slide 22 text

Mobile Testing

Slide 23

Slide 23 text

Mobile Testing User Agent Different devices Android iOS Windows Phone Simulation of touch events Changing geolocation and accelerometers

Slide 24

Slide 24 text

The Terminal

Slide 25

Slide 25 text

NO FEAR

Slide 26

Slide 26 text

The command line makes you smile ❤ ~/

Slide 27

Slide 27 text

Let the CLI look awesome! Please install „dotfiles“

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

http://dotfiles.github.io

Slide 30

Slide 30 text

Please install the Swiss army knife of every web developer.

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Linting on save on commit during build

Slide 34

Slide 34 text

Automatisation

Slide 35

Slide 35 text

Why?

Slide 36

Slide 36 text

Developers are lazy!

Slide 37

Slide 37 text

Linting Resolve depedencies Concat and compiling Testing Remove debug code

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

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 or JSLint .jshintrc $ npm install grunt-contrib-jshint --save-dev

Slide 46

Slide 46 text

LiveReload Plugins for Chrome Firefox Safari Triggers page reload via grunt watch Browser extensions on http://livereload.com/

Slide 47

Slide 47 text

Package Manager for the web Install and remove packages No external dependencies No sudo permissions Blazing fast installation:
 
 $ npm install bower -g

Slide 48

Slide 48 text

How to install packages ! ! ! $ bower install $ bower install $ bower install # $ bower install =#

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Search packages $ bower search

Slide 51

Slide 51 text

Simple package usage 


Slide 52

Slide 52 text

Deleting packages $ bower remove

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Useful Grunt tasks 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 with Jasmine PhantomJS Chrome Firefox Chrome Canary Firefox Nightly
 UI Testing with 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 for Jasmine QUnit Mocha Buster.js For all browsers and PhantomJS

Slide 61

Slide 61 text

How to install Test‘em $ 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 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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Testing with DalekJS

Slide 68

Slide 68 text

Awesome. And now?

Slide 69

Slide 69 text

Why couldn’t it be more easy?

Slide 70

Slide 70 text

Yeoman!

Slide 71

Slide 71 text

Yeoman Scaffolding of new apps Writes Grunt configuration Yeoman = Grunt + Bower + Awesomeness Blazing fast installation
 
 $ npm install -g yo


Slide 72

Slide 72 text

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


Slide 73

Slide 73 text

Yeoman $ grunt server ! $ grunt test ! $ grunt build


Slide 74

Slide 74 text

Generator WebApp Watcher for HTML, CSS and JS with LiveReload Builtin Webserver at Port 9000 JSHint Mocha tests Bootstrap 3

Slide 75

Slide 75 text

DEMO

Slide 76

Slide 76 text

Available generators AngularJS WordPress EmberJS Firefox OS Apps ExpressJS Laravel Knockout Jekyll Phonegap Meteor Symfony2

Slide 77

Slide 77 text

Example Yatego 2.0 www.yatego.com

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Questions? Comments?

Slide 81

Slide 81 text

Thanks for your attention! :-) Twitter: @ThorstenRinne Slides: http://speakerdeck.com/u/thorsten Thorsten Rinne
 Yatego GmbH
 [email protected]