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

Entwicklung moderner Web-Apps mit HTML5 und JavaScript

Entwicklung moderner Web-Apps mit HTML5 und JavaScript

Thorsten Rinne

March 05, 2014
Tweet

More Decks by Thorsten Rinne

Other Decks in Programming

Transcript

  1. Entwicklung moderner
    Web-Apps mit HTML5
    und JavaScript
    Thorsten Rinne / Sebastian Springer

    View full-size slide

  2. Sebastian Springer
    Team Lead @ Mayflower

    View full-size slide

  3. Thorsten Rinne
    Team Lead Engineering @ Yatego

    View full-size slide

  4. Kontakt
    • Sebastian
    • sebastian.springer@mayflower.de
    • @basti_springer
    • Thorsten
    [email protected]
    • @ThorstenRinne

    View full-size slide

  5. Wer seid ihr?

    View full-size slide

  6. • Browser
    • Yeoman = Bower + Grunt + Awesomeness
    • HTML5 und JavaScript APIs
    • Unsere Web App
    • Tipps & Tricks

    View full-size slide

  7. Was braucht ihr?

    View full-size slide

  8. Welche Versionen?
    • Chrome latest (derzeit Version 32)
    • Chromium latest (derzeit Version 34)
    • Firefox latest (derzeit Version 27)
    • Firefox Nightly latest (derzeit Version 30)
    • Safari latest (derzeit Version 6.1 bzw 7)
    • Opera kann man sich sparen, da wie Chrome

    View full-size slide

  9. Fehlt da nicht jemand?

    View full-size slide

  10. Welche IE Versionen?

    View full-size slide

  11. • Internet Explorer 7 (??)
    • Internet Explorer 8 (?)
    • Internet Explorer 9
    • Internet Explorer 10 (?)
    • Internet Explorer 11

    View full-size slide

  12. Automatisierung

    View full-size slide

  13. Entwickler sind faul.

    View full-size slide

  14. • Linting
    • Abhängigkeiten auflösen
    • Zusammenfügen und Kompilieren
    • Testing
    • Debug Code entfernen

    View full-size slide

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

    View full-size slide

  16. 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

    View full-size slide

  17. Grunt installieren
    $ cd /path/to/project
    $ npm install grunt --save-dev

    View full-size slide

  18. package.json
    {
    "name": „chat.js",
    "version": "1.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"
    }
    }

    View full-size slide

  19. Gruntfile.js
    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']);
    !
    };

    View full-size slide

  20. Grunt Tasks
    // Run Jasmine and DalekJS tests
    grunt.registerTask(

    'testrun',

    ['jshint', 'jasmine', 'dalek']
    );
    !
    // Build production
    grunt.registerTask(

    'production',
    ['copy', 'less', 'cssmin', 'jshint', 'uglify']
    );

    View full-size slide

  21. The JavaScript Task Runner
    • http://gruntjs.com
    • http://gruntjs.com/plugins

    View full-size slide

  22. Linting
    • JSHint oder JSLint
    • .jshintrc
    $ npm install grunt-contrib-jshint --save-dev

    View full-size slide

  23. LiveReload
    • Plugin
    • Chrome
    • Firefox
    • Safari
    • Triggert Seitenreload via grunt watch
    • Browser Extensions auf http://livereload.com/

    View full-size slide

  24. 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

    View full-size slide

  25. Pakete installieren
    $ bower install
    $ bower install
    $ bower install #
    $ bower install =#

    View full-size slide

  26. 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

    View full-size slide

  27. Pakete suchen
    $ bower search angular
    Search results:
    !
    angular git://github.com/angular/bower-angular.git
    angular-mocks git://github.com/angular/bower-angular-mocks.git
    angular-resource git://github.com/angular/bower-angular-resource.git
    angular-scenario git://github.com/angular/bower-angular-scenario.git
    angular-cookies git://github.com/angular/bower-angular-cookies.git
    angular-sanitize git://github.com/angular/bower-angular-sanitize.git
    angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git

    View full-size slide

  28. Pakete verwenden
    src="/components/jquery/jquery.min.js">


    View full-size slide

  29. Pakete löschen
    $ bower remove
    $ bower remove jasmine

    View full-size slide

  30. Konfiguration .bowerrc
    {
    "directory": "public/vendor"
    }

    View full-size slide

  31. 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"

    }

    }

    View full-size slide

  32. Packen und Kompilieren
    • grunt-contrib-copy
    • grunt-contrib-concat
    • grunt-contrib-uglify
    • grunt-contrib-cssmin
    • grunt-contrib-imagemin

    View full-size slide

  33. Schön. Und nun?

    View full-size slide

  34. Geht das nicht noch
    einfacher?

    View full-size slide

  35. Yeoman
    • Scaffolding neuer Apps
    • Schreibt Grunt Konfiguration
    • Yeoman = Grunt + Bower + Awesomeness
    • über 500 Generatoren
    • Installation


    $ npm install -g yo


    View full-size slide

  36. Yeoman
    $ npm install -g generator-webapp


    $ cd /path/to/webroot


    $ mkdir jsdays-app


    $ cd jsdays-app


    $ yo webapp


    View full-size slide

  37. Yeoman und Grunt
    $ grunt server
    $ grunt test
    $ grunt build


    View full-size slide

  38. Generator WebApp
    • Watcher für HTML, CSS und JS mit LiveReload
    • Builtin Webserver auf Port 9000
    • JSHint
    • Mocha-Tests
    • Bootstrap 3

    View full-size slide

  39. Verfügbare Generatoren
    • AngularJS
    • Bootstrap
    • WordPress
    • EmberJS
    • Firefox OS Apps
    • ExpressJS
    • Laravel
    • Knockout
    • Jekyll
    • Phonegap
    • Meteor
    • Symfony2

    View full-size slide

  40. Struktur
    • Frontend
    • JavaScript
    • LESS / CSS
    • Media
    • Tests
    • Backend
    • MVC
    • Templates
    • Routes
    • Tests

    View full-size slide





  41. Hallo, München


    Hallo, München



    View full-size slide





  42. Hallo, München


    Hallo, München



    View full-size slide





  43. Hallo, München


    Hallo, München



    View full-size slide





  44. Hallo, München


    Hallo, München



    View full-size slide





  45. Hallo, München


    Hallo, München



    View full-size slide





  46. Hallo, München


    Hallo, München



    View full-size slide





  47. Hallo, München


    Hallo, München



    View full-size slide





  48. Hallo, München


    Hallo, München


    View full-size slide

  49. JavaScript API
    • FullScreen API
    • Forms
    • Webworkers
    • Geolocation
    • Storage
    • Offline Application

    View full-size slide

  50. var elem = $('#content')[0];
    if (elem.requestFullscreen) {
    elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
    }
    Full Screen

    View full-size slide

  51. Full Screen
    if(document.cancelFullScreen) {
    document.cancelFullScreen();
    } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
    } else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
    }

    View full-size slide

  52. • Bitte mit Vorsicht verwenden
    • Styling für z.B. Hintergrund:
    • -webkit-full-screen
    • -moz-full-screen
    Full Screen

    View full-size slide

  53. Progress
    var interval = setInterval(function () {
    var progress = $('progress');
    !
    if (progress.val() < progress.attr('max')) {
    progress.val(progress.val() + 1);
    } else {
    clearInterval(interval);
    }
    }, 10);

    View full-size slide

  54. Meter
    $('meter').val(100);
    Keine Progress-Bar!
    Zur Anzeige von Werten in einem bestimmten Wertebereich

    View full-size slide

  55. Datalist

    !

    Angela Merkel
    Gerhard Schröder
    ...

    View full-size slide

  56. output
    $('#output').on('input', function () {
    var nr1 = parseInt($('#nr1').val());
    var nr2 = parseInt($('#nr2').val());
    $('output').val(nr1 + nr2);
    });
    Element zur Ausgabe von Berechnungen

    View full-size slide

  57. Input Types
    • Viele Aufgaben, die bisher mit JavaScript erledigt
    wurden, funktionieren jetzt mit HTML5 nativ
    • Können (kaum) angepasst werden

    View full-size slide

  58. Input types
    • tel
    • search
    • url
    • email
    • date
    • month
    • week
    • time
    • number
    • range
    • color

    View full-size slide

  59. HINWEIS
    datetime und datetime-local sind deprecated!

    View full-size slide

  60. Attribute
    • autofocus
    • placeholder
    • form
    • required
    • autocomplete
    • pattern
    • dirname
    • novalidate
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget

    View full-size slide

  61. Webworker
    • Workerthreads im Browser
    • Rechenintensive Prozesse auslagern
    • Zugriff auf: navigator, location, XMLHttpRequest,...
    • Kein Zugriff auf: DOM, window, document, parent

    View full-size slide

  62. Webworker
    var worker = new Worker('/js/
    webworker.js');
    worker.onmessage = function (msg) {
    $('#result').html(msg.data);
    };

    View full-size slide

  63. Webworker
    var i, n = 1, results = 1;
    outerLoop: while (true) {
    n += 1;
    for (i = 2; i <= Math.sqrt(n); i += 1) {
    if (n % i === 0) {
    continue outerLoop;
    }
    }
    self.postMessage(n);
    results += 1;
    if (results >= 1000) {
    self.close();
    }
    }

    View full-size slide

  64. Websockets
    • Bidirektionale Kommunikation zwischen Client und
    Server
    • Protokoll auf TCP-Basis
    • Eventbasiert
    • Sichere Variante wss://

    View full-size slide

  65. Websockets
    var addr = 'ws://localhost:8181/';
    var socket = new WebSocket(addr, 'myapp');
    !
    $('#sayHello').on('click', function () {
    socket.send('Hello Server');
    });
    !
    socket.onmessage = function (msg) {
    $('#response').html(msg.data);
    };
    !

    View full-size slide

  66. var WebSocketServer = require('websocket').server;
    var http = require('http');
    var server = http.createServer().listen(8181);
    wsServer = new WebSocketServer({
    httpServer: server,
    autoAcceptConnections: false
    });
    wsServer.on('request', function(req) {
    var connection = req.accept('myapp',
    req.origin);
    !
    connection.on('message', function(message) {
    connection.sendUTF("Hello Client!");
    console.log(message.utf8Data);
    });
    });

    View full-size slide

  67. Geolocation
    • Aktuelle Position des Clients
    • WLAN-Position
    • GPS-Position

    View full-size slide

  68. Geolocation
    var geolocation = navigator.geolocation;
    !
    geolocation.getCurrentPosition(function (pos) {
    var posString = 'Lat: ' + pos.coords.latitude +
    ' Long: ' + pos.coords.longitude;
    !
    $('#position').html(posString);
    });

    View full-size slide





  69. rel="stylesheet">






    View full-size slide

  70. function initialize() {
    !
    navigator.geolocation.getCurrentPosition(function (pos) {
    var myLatlng = new google.maps.LatLng(pos.coords.latitude,
    pos.coords.longitude);
    var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new
    google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    !
    var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Hello World!'
    });
    });
    }
    !
    google.maps.event.addDomListener(window, 'load', initialize);

    View full-size slide

  71. Storage
    • Local Storage - zeitlich unbegrenzt
    • Session Storage - nur für eine Browser-Session
    • IndexedDB
    • Web SQL

    View full-size slide


  72. Items in Storage:  



    keyvalue





    key:



    value:



    OK


    View full-size slide

  73. var writeLine = function (k, v) {
    var line = '' + k + '' +
    v + 'delete' + '';
    !
    $('#content tbody').append(line);
    writeStorageLength();
    };
    !
    !
    for (var i = 0; i < localStorage.length; i++)
    {
    k = localStorage.key(i);
    v = localStorage.getItem(k);
    writeLine(k, v);
    }

    View full-size slide

  74. var writeStorageLength = function () {
    $('#itemCount').html(localStorage.length);
    };
    $('#save').on('click', function () {
    var k = $('#storageKey').val();
    var v = $('#storageVal').val();
    localStorage.setItem(k, v);
    writeLine(k, v);
    });
    !
    $('#content').on('click', function (e) {
    localStorage.removeItem((e.target).
    data('value'));
    $(e.target).closest('tr').remove();
    writeStorageLength();
    });

    View full-size slide

  75. Offline Application

    View full-size slide

  76. Offline Application
    • Dateien werden nur einmalig vom Server geholt
    • Manifestdatei enthält die Konfiguration

    View full-size slide

  77. Offline Application
    CACHE MANIFEST
    index.html
    !
    js/articles.js
    js/customers.js
    js/init.js
    js/jquery.js
    js/orders.js
    !
    css/bootstrap.css?v=1
    !
    NETWORK:
    orders
    offline.manifest

    View full-size slide

  78. Offline Application

    View full-size slide

  79. Creating Application Cache with manifest http://
    localhost:8080/offline.manifest
    Application Cache Checking event
    Application Cache Downloading event
    Application Cache Progress event (0 of 7) http://
    localhost:8080/js/customers.js
    Application Cache Progress event (1 of 7) http://
    localhost:8080/css/bootstrap.css?v=1
    Application Cache Progress event (2 of 7) http://
    localhost:8080/js/jquery.js
    Application Cache Progress event (3 of 7) http://
    localhost:8080/js/articles.js
    Application Cache Progress event (4 of 7) http://
    localhost:8080/index.html
    Application Cache Progress event (5 of 7) http://
    localhost:8080/js/init.js
    Application Cache Progress event (6 of 7) http://
    localhost:8080/js/orders.js
    Application Cache Progress event (7 of 7)
    Application Cache Cached event

    View full-size slide

  80. HTML5 Demos:

    github.com/thorsten/html5demos

    View full-size slide

  81. CSS LEVEL 3
    • In der Entwicklung seit 2000
    • Modularer Aufbau
    • Bekannte Module
    • Selectors Level 3
    • Media Queries

    View full-size slide

  82. Browser Prefixes
    • -moz-
    • -ms- / -mso-
    • -kthml-
    • -o-
    • -webkit-
    • n/a

    View full-size slide

  83. Browser Prefixes
    .round-corners {
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -o-border-radius: 12px;
    -khtml-border-radius: 12px;
    }

    View full-size slide

  84. Opacity
    Opacity
    Opacity
    Opacity

    View full-size slide

  85. OPACITY
    .my-opacity {
    opacity: 0.8;
    -ms-filter: "alpha(opacity=80)";
    filter:alpha(opacity=80);
    }

    View full-size slide

  86. Gradienten
    background: linear-gradient(135deg,
    #4c4c4c 0%,#595959 12%,#666666
    25%,#474747 39%,#2c2c2c 50%,#000000
    51%,#111111 60%,#2b2b2b 76%,#1c1c1c
    91%,#131313 100%);

    View full-size slide

  87. Gradienten
    filter: progid:
    DXImageTransform.Microsoft.gradient(

    startColorstr='#4c4c4c',
    endColorstr='#131313',

    GradientType=1

    );

    View full-size slide

  88. Border Radius

    View full-size slide

  89. Border Radius
    .curved {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    }

    View full-size slide

  90. Box Shadow
    .shadow {
    -webkit-box-shadow: 

    2px 2px 2px 2px rgba(0, 0, 0, 1);
    box-shadow: 

    2px 2px 2px 2px rgba(0, 0, 0, 1);
    }

    View full-size slide

  91. Media Queries

    View full-size slide

  92. Media Queries
    @media (min-width: 1200px) {

    ... }
    @media (min-width: 768px) and (max-width: 979px) {
    ... }
    @media (max-width: 767px) {

    ... }
    @media (max-width: 480px) {

    ... }

    View full-size slide

  93. Selektoren Level 3
    • a[src^="https"]

    Jedes Element, dessen src-Attribut mit https
    beginnt
    • a[src$=".pdf"]

    Jedes Element, dessen src-Attribut mit .pdf
    endet
    • a[src*="jsdays"]

    Jedes Element, dessen src-Attribut mit jsdays
    beinhaltet

    View full-size slide

  94. Selektoren Level 3
    • p:nth-child(2n)

    Jedes 2. Element seines Elternelements
    • :root

    Das Rootelement eines Dokuments
    • :empty

    Jedes Element ohne Kindelemente

    View full-size slide

  95. Selektoren Level 3
    • input:enabled

    Jedes aktive Element
    • input:disabled

    Jedes nicht aktive Element
    • input:checked

    Jedes „ge-checkte“ Element (Checkbox)

    View full-size slide

  96. Grundlagen und
    fortgeschrittene Themen
    • Modulloader
    • Frameworks
    • ECMAScript 5

    View full-size slide

  97. Modulloader
    • Keine -Tags zum Laden<br/>• Abhängigkeiten auflösen<br/>• AMD Modules (Asynchronous Module Definition)<br/>

    View full-size slide

  98. Modulloader
    • define: Wenn man ein Modul erstellen möchte, auf
    das weitere Module aufbauen
    • require: Wenn man Dinge laden und verwenden
    möchte

    View full-size slide

  99. Modulloader
    define(

    “name”, 

    [deps...], 

    function (deps) {

    ...

    return x;

    });

    View full-size slide

  100. Modulloader
    require(

    [deps...], 

    function (deps) {

    ...

    });

    View full-size slide

  101. ECMAScript 5

    View full-size slide

  102. ECMAScript 5
    • http://www.ecma-international.org/publications/files/
    ECMA-ST/Ecma-262.pdf
    • JSON (parse, stringify)
    • Object.*
    • Strict Mode

    View full-size slide

  103. JSLINT
    „JSLint will hurt your feelings“

    View full-size slide

  104. JSLINT
    • „The JavaScript Quality Tool“
    • http://www.jslint.com/
    • Integriert in
    • CLI
    • IDE

    View full-size slide

  105. “use strict”

    View full-size slide

  106. Strict Mode - Mehr Fehler
    • Keine versehentlichen globals (ReferenceError)
    • Schärfere Regeln bei Zuweisungen
    • Non-writable, getter-only, neue Properties bei non-extensible
    Objekten
    • Kein Löschen von nicht löschbaren Eigenschaften (prototype)
    • Eindeutige Propertynamen
    • Eindeutige Namen für Argumente (function (a, a, b)...)
    • Keine Oktalnotation (z.B. 012 - SyntaxError)

    View full-size slide

  107. Strict Mode
    Einfachere Benutzung
    • “with” ist verboten
    • (var x = 1; with (obj) { x};)
    • Keine neuen Variablen mit “eval”
    • eval(“var x”);
    • Keine Variablen löschen
    • var x = 123; delete x;

    View full-size slide

  108. Strict Mode
    Eval & Arguments
    • eval und arguments können nicht mehr mit
    anderen Werten belegt oder an einen Kontext
    gebunden werden
    • arguments kann nicht mehr durch Aliases
    verändert werden
    • function func(arg) { var arg = 15; return [arg,
    arguments[0]]};
    • arguments.callee existiert nicht mehr - TypeError

    View full-size slide

  109. Strict Mode
    Sicherheit
    • Kein Zugriff mehr auf das globale Objekt aus
    Funktionen
    • function f() { return this; } - undefined
    • Kein Zugriff auf func.arguments und func.caller von
    außerhalb
    • Kein Zugriff auf Variablen in einer Funktion von
    außerhalb

    View full-size slide

  110. Strict Mode
    • Reservierte Wörter: implements, interface, let,
    package, private, protected, public, static, und
    yield
    • Keine Funktionsdefinition in Bedingungen und
    Schleifen

    View full-size slide

  111. Object.*
    • Erweiterbarkeit
    • Object.preventExtensions(obj)
    • Object.isExtensible(obj)

    View full-size slide

  112. Object.*
    • Obj.create(proto, props)
    • Object.keys(obj)
    • Object.getOwnPropertyNames(obj)
    • Object.getOwnPropertyDescriptor(obj, prop)
    • Object.defineProperty(obj, prop, desc)

    View full-size slide

  113. Object.*
    • Object.seal(obj)/Object.isSealed(obj)
    • Keine Änderungen mehr an Eigenschaften
    • Object.freeze(obj)/Object.isFrozen(obj)
    • Keine Schreibzugriffe mehr auf Eigenschaften +
    seal

    View full-size slide

  114. Object.*
    • Object.defineProperty
    • set: magic setter function
    • get: magic getter function
    • value: default value
    • configurable: can be deleted
    • enumerable: can be iterated
    • writable: can be changed

    View full-size slide

  115. Realtime Chat
    • express.js
    • Handlebars Template Engine
    • Socket.IO
    • jQuery
    • Bootstrap 3

    View full-size slide

  116. github.com/thorsten/chat-js

    View full-size slide

  117. package.json
    {
    "name": "chat.js",
    "version": "1.0.0",
    "dependencies": {
    "express": "~3.4.8",
    "express-hbs": "~0.7.9",
    "socket.io": "~0.9.x"
    },
    "repository": {
    "type": "git",
    "url": "git://github.com/thorsten/chat-js.git"
    }
    }

    View full-size slide

  118. $ npm install
    $ bower install
    $ grunt

    View full-size slide

  119. socket.io
    var http = require('http');
    var server = http.createServer(app);
    server.listen(8080);
    var io = require('socket.io').listen(server);
    !
    io.sockets.on('connection', function (socket) {
    !
    socket.on('msg', function(message) {
    console.log(message);
    });
    !
    });

    View full-size slide

  120. script(src="http://localhost:3000/socket.io/
    socket.io.js")
    var socket = io.connect('http://localhost:3000');
    !
    $('#chat').on('submit', function (e) {
    e.preventDefault();
    var value = $('#message').val();
    $('#message').val('');
    $('#message').focus();
    $('#messages').append(value + '
    ');
    !
    socket.emit('msg', value);
    return false;
    });

    View full-size slide

  121. „App Insights“

    View full-size slide

  122. Bootstrap
    • Scaffolding (Grid, Layout, Responsive)
    • Base CSS (Buttons, Forms, Tables)
    • Components (Navigation, Alerts, Pagination)
    • JavaScript (Modal, Tooltip)

    View full-size slide

  123. Bootstrap
    <br/><link rel="stylesheet"<br/>type="text/css"<br/>href="/public/css/bootstrap.min.css"><br/>

    View full-size slide

  124. Bootstrap



    value="Send"
    class="btn btn-primary">


    View full-size slide

  125. Dynamic Stylesheet Language

    View full-size slide

  126. LESS
    • Variablen
    • Nested Rules
    • Mixins

    View full-size slide

  127. LESS: Variablen
    @background: #FFFFE0;
    !
    #messages {
    background-color: @background;
    }

    View full-size slide

  128. LESS: Nested Rules
    #head {
    background-color: @dark;
    height:25px;
    div {
    color: @light;
    background-color: @dark;
    &:hover {
    background-color: @light;
    color: @dark;
    }
    }
    }

    View full-size slide

  129. .rounded-corners (@radius: 10px;) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    }
    !
    #info {
    .rounded-corners(5px);
    width: 250px;
    margin: 10px;
    padding-left: 5px;
    background-color: lightgreen;
    }
    LESS - Mixins

    View full-size slide

  130. Little Helpers

    View full-size slide

  131. Browser DevTools

    View full-size slide

  132. chrome://flags
    Experimental Developer Tools experiments

    View full-size slide

  133. Live editieren und speichern

    View full-size slide

  134. Performance-Messung

    View full-size slide

  135. Performance-Messung
    • Übersicht des Speicherverbrauchs
    • Hilft bei Suche nach Performanceproblemen
    • Layout oder Skripte
    • Ziel: 60 Frames pro Sekunde :-)

    View full-size slide

  136. Memory und DOM Leaks

    View full-size slide

  137. Memory und DOM Leaks
    • JavaScript CPU Profiling
    • Heap Snapshot für
    • JavaScript Objekte
    • DOM Knoten
    • Suche nach potentiellen Memory und DOM Leaks

    View full-size slide

  138. Mobile Testing

    View full-size slide

  139. Mobile Testing
    • User Agent
    • Verschiedene Endgeräte
    • Android
    • iOS
    • Windows Phone
    • Simulation von Touch Events
    • Ändern der Geolocation und des Accelerometers

    View full-size slide

  140. POLYFILLS
    https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-
    browser-Polyfills

    View full-size slide

  141. yepnope({
    test : Modernizr.geolocation,
    yep : 'normal.js',
    nope : ['polyfill.js', 'wrapper.js']
    });

    View full-size slide

  142. Frameworks
    • Bootstrap
    • Ratchet v2
    • Foundation v3
    • Foundation v4
    • Skeleton
    • 960.gs
    • http://responsive.vermilion.com/compare.php

    View full-size slide

  143. Mozilla Developer Network

    View full-size slide

  144. Kontakt
    Thorsten Rinne!
    [email protected]
    !
    Yatego GmbH
    Kobellstr. 15
    80336 München
    Deutschland
    !
    @ThorstenRinne
    !
    https://github.com/thorsten
    Sebastian Springer!
    sebastian.springer@mayflower.de
    !
    Mayflower GmbH
    Mannhardtstr. 6
    80538 München
    Deutschland
    !
    @basti_springer
    !
    https://github.com/sspringer82

    View full-size slide