$30 off During Our Annual Pro Sale. View Details »

HTML5 Applications

HTML5 Applications

Workshop Notes, how to build HTML5 & Single Page Apps

Bilal Çınarlı

July 01, 2017
Tweet

More Decks by Bilal Çınarlı

Other Decks in Technology

Transcript

  1. Building HTML5 and JS
    Applications

    View Slide

  2. Bilal Çınarlı
    Frontend Architect
    Software Engineer @Adidas
    @bcinarli
    github.com/bcinarli
    bcinarli.com

    View Slide

  3. HTML5 - JS Applications

    View Slide

  4. • What is HTML5 and
    Applications?
    • JavaScript Design Patterns
    • You Might Not Need
    JavaScript
    • Rest APIs and its advantages
    • JavaScript Packages and
    Dependency Management
    Content
    • Gulp, WebPack task
    managers and module
    bundlers
    • Modern JavaScript Coding &
    ES6
    • ReactJS

    View Slide

  5. View Slide

  6. What is HTML5?

    View Slide

  7. View Slide

  8. View Slide

  9. • Giving meaning to structure, semantics are front and center with
    HTML5.
    • A richer set of tags, along with RDFa, microdata, and microformats,
    are enabling a more useful, data driven web for both programs and
    your users.

    View Slide

  10. View Slide

  11. • CSS3 delivers a wide range of stylization and effects, enhancing the
    web app without sacrificing your semantic structure or performance.
    • Additionally Web Open Font Format (WOFF) provides typographic
    flexibility and control far beyond anything the web has offered
    before.

    View Slide

  12. View Slide

  13. • Audio and video are first class citizens in the HTML5 web, living in
    harmony with your apps and sites.

    View Slide

  14. View Slide

  15. • Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure
    to amaze your users with stunning visuals natively rendered in the
    browser.

    View Slide

  16. View Slide

  17. • Web Apps can start faster and work even if there is no internet
    connection.
    • The HTML5 App Cache, as well as the Local Storage, Indexed DB,
    and the File API specifications support storing Web Apps data in
    client.

    View Slide

  18. View Slide

  19. • Beginning with the Geolocation API, Web Applications can present
    rich, device-aware features and experiences.
    • Incredible device access innovations are being developed and
    implemented, from audio/video input access to microphones and
    cameras, to local data such as contacts & events, and even tilt
    orientation.

    View Slide

  20. View Slide

  21. • More efficient connectivity means more real-time chats, faster
    games, and better communication.
    • Web Sockets and Server-Sent Events are pushing data between
    client and server more efficiently than ever before.

    View Slide

  22. View Slide

  23. • Make your Web Apps and dynamic web content faster with a variety
    of techniques and technologies such as Web Workers and
    XMLHttpRequest 2.

    View Slide

  24. JavaScript Design Patterns

    View Slide

  25. View Slide

  26. • a design pattern is a general repeatable solution to a commonly
    occurring problem in software design
    • a design pattern isn't a finished design that can be transformed
    directly into code.
    • a design pattern is a description or template for how to solve a
    problem that can be used in many different situations.

    View Slide

  27. Module Design Pattern

    View Slide

  28. var HTMLChanger = (function() {
    var contents = 'contents';
    var changeHTML = function() {
    var element = document.getElementById('attribute-to-change');
    element.innerHTML = contents;
    }
    return {
    callChangeHTML: function() {
    changeHTML();
    console.log(contents);
    }
    };
    })();
    HTMLChanger.callChangeHTML(); // Outputs: 'contents'
    console.log(HTMLChanger.contents); // undefined

    View Slide

  29. Revealing Module Design Pattern

    View Slide

  30. var Exposer = (function() {
    var privateVariable = 10;
    var privateMethod = function() {
    console.log('Inside a private method!');
    privateVariable++;
    }
    var methodToExpose = function() {
    console.log('This is a method I want to expose!');
    }
    var otherMethodIWantToExpose = function() {
    privateMethod();
    }
    return {
    first: methodToExpose,
    second: otherMethodIWantToExpose
    };
    })();
    Exposer.first(); // Output: This is a method I want to expose!
    Exposer.second(); // Output: Inside a private method!
    Exposer.methodToExpose(); // undefined

    View Slide

  31. Prototype Design Pattern

    View Slide

  32. var TeslaModelS = function() {
    this.numWheels = 4;
    this.manufacturer = 'Tesla';
    this.make = 'Model S';
    }
    TeslaModelS.prototype.go = function() {
    // Rotate wheels
    }
    TeslaModelS.prototype.stop = function() {
    // Apply brake pads
    }

    View Slide

  33. Observer Design Pattern

    View Slide

  34. var Subject = function() {
    this.observers = [];
    return {
    subscribeObserver: function(observer) {
    this.observers.push(observer);
    },
    unsubscribeObserver: function(observer) {
    var index = this.observers.indexOf(observer);
    if(index > -1) {
    this.observers.splice(index, 1);
    }
    },
    notifyObserver: function(observer) {
    var index = this.observers.indexOf(observer);
    if(index > -1) {
    this.observers[index].notify(index);
    }
    },
    notifyAllObservers: function() {
    for(var i = 0; i < this.observers.length; i++){
    this.observers[i].notify(i);
    };
    }
    };
    };

    View Slide

  35. var Observer = function() {
    return {
    notify: function(index) {
    console.log("Observer " + index + " is notified!");
    }
    }
    }
    var subject = new Subject();
    var observer1 = new Observer();
    var observer2 = new Observer();
    var observer3 = new Observer();
    var observer4 = new Observer();
    subject.subscribeObserver(observer1);
    subject.subscribeObserver(observer2);
    subject.subscribeObserver(observer3);
    subject.subscribeObserver(observer4);
    subject.notifyObserver(observer2); // Observer 2 is notified!
    subject.notifyAllObservers();
    // Observer 1 is notified!
    // Observer 2 is notified!
    // Observer 3 is notified!
    // Observer 4 is notified!

    View Slide

  36. Singleton Design Pattern

    View Slide

  37. var printer = (function () {
    var printerInstance;
    function create () {
    function print() {
    // underlying printer mechanics
    }
    function turnOn() {
    // warm up, check for paper
    }
    return {
    print: print,
    turnOn: turnOn
    };
    }
    return {
    getInstance: function() {
    if(!printerInstance) {
    printerInstance = create();
    }
    return printerInstance;
    }
    };
    function Singleton () {
    if(!printerInstance) {
    printerInstance = initialize();
    }
    };
    })();

    View Slide

  38. You Might Not Need jQuery

    View Slide

  39. Selecting Elements

    View Slide

  40. // with jQuery
    var $element = $('.my-class');
    // without jQuery
    var $element = document.querySelectorAll('.my-class');

    View Slide

  41. Finding Elements

    View Slide

  42. // with jQuery
    $('.my-class').find(child-element);
    // without jQuery
    var $element = document.querySelector('.my-class');
    $element.querySelectorAll(child-element)

    View Slide

  43. Add/Remove Classes

    View Slide

  44. // with jQuery
    var $element = $('.my-class');
    $element.addClass('new-class');
    $element.removeClass('old-class');
    // without jQuery
    var $element = document.querySelector('.my-class');
    $element.classList.add('new-class');
    $element.classList.remove('old-class');

    View Slide

  45. Get/Set Content

    View Slide

  46. // with jQuery
    var $element = $('.my-class');
    $element.html();
    $('').append($element.clone()).html();
    // without jQuery
    var $element = document.querySelector('.my-class');
    $element.innerHTML;
    $element.outerHTML;

    View Slide

  47. // with jQuery
    var $element = $('.my-class');
    $element.html(string);
    // without jQuery
    var $element = document.querySelector('.my-class');
    $element.innerHTML = string;

    View Slide

  48. Get/Set Text

    View Slide

  49. // with jQuery
    var $element = $('.my-class');
    $element.text();
    // without jQuery
    var $element = document.querySelector('.my-class');
    $element.textContent;

    View Slide

  50. // with jQuery
    var $element = $('.my-class');
    $element.text(string);
    // without jQuery
    var $element = document.querySelector('.my-class');
    $element.textContent = string;

    View Slide

  51. Event Bindings

    View Slide

  52. // with jQuery
    var $element = $('.my-class');
    $element.on(eventName, eventHandler);
    $element.off(eventName, eventHandler);
    // without jQuery
    var $element = document.querySelector('.my-class');
    $element.addEventListener(eventName, eventHandler);
    $element.removeEventListener(eventName, eventHandler);

    View Slide

  53. Rest API with JSON

    View Slide

  54. • Primary architectural approach for distributed systems.
    • REST stands for Representational State Transfer.
    • It relies on a stateless, client-server, cacheable communications.
    • In most cases it is used with the HTTP protocol.
    • RESTful applications use HTTP requests to POST (create), PUT
    (create and/or update), GET (e.g., make queries), and DELETE data.

    View Slide

  55. Features

    View Slide

  56. • each HTTP contains all the necessary information to run it
    • the client can run the same response for identical requests in the
    future.
    • Objects in REST are always manipulated from the URI.
    • Uniform interface

    View Slide

  57. The advantages of REST for development

    View Slide

  58. • Separation between the client and the server
    • Visibility, reliability and scalability
    • The REST API is always independent of the type of platform or
    languages

    View Slide

  59. {
    "data": [{
    "type": "articles",
    "id": "1",
    "attributes": {
    "title": "JSON API paints my bikeshed!",
    "body": "The shortest article. Ever.",
    "created": "2015-05-22T14:56:29.000Z",
    "updated": "2015-05-22T14:56:28.000Z"
    },
    "relationships": {
    "author": {
    "data": {"id": "42", "type": "people"}
    }
    }
    }],
    "included": [
    {
    "type": "people",
    "id": "42",
    "attributes": {
    "name": "John",
    "age": 80,
    "gender": "male"
    }
    }
    ]
    }

    View Slide

  60. Single Responsibility Principle

    View Slide

  61. View Slide

  62. • Every module or class should have responsibility over a single part
    of the functionality provided by the software.
    • That responsibility should be entirely encapsulated by the class.
    • All its services should be narrowly aligned with that responsibility.

    View Slide

  63. Single Page Application Development

    View Slide

  64. JavaScript Packages & Dependencies

    View Slide

  65. NodeJs

    View Slide

  66. • Node.js is a platform built on Chrome's JavaScript runtime for easily
    building fast and scalable network applications

    View Slide

  67. Packaging

    View Slide

  68. {
    "name": "demo",
    "version": "1.0.0",
    "description": "Demo package.json",
    "main": "index.js",
    "dependencies": {
    "lodash": "latest"
    },
    "devDependencies": {},
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Bilal Cinarli",
    "license": "MIT"
    }

    View Slide

  69. NPM

    View Slide

  70. • Node Package Manager
    • Default package manager in NodeJs

    View Slide

  71. Yarn

    View Slide

  72. • Yarn package manager
    • Deterministic Install with lockfiles

    View Slide

  73. ES5 & ES6 KeyPoints

    View Slide

  74. View Slide

  75. Variables

    View Slide

  76. • let statement declares a block scope local variable, optionally
    initializing it to a value
    • const cannot change through re-assignment, and it can't be
    redeclared

    View Slide

  77. function varTest() {
    var x = 1;
    if (true) {
    var x = 2; // same variable!
    console.log(x); // 2
    }
    console.log(x); // 2
    }
    function letTest() {
    let x = 1;
    if (true) {
    let x = 2; // different variable
    console.log(x); // 2
    }
    console.log(x); // 1
    }

    View Slide

  78. var list = document.getElementById('list');
    for (let i = 1; i <= 5; i++) {
    let item = document.createElement('li');
    item.appendChild(document.createTextNode('Item ' + i));
    item.onclick = function(ev) {
    console.log('Item ' + i + ' is clicked.');
    };
    list.appendChild(item);
    }
    // to achieve the same effect with 'var'
    // you have to create a different context
    // using a closure to preserve the value
    for (var i = 1; i <= 5; i++) {
    var item = document.createElement('li');
    item.appendChild(document.createTextNode('Item ' + i));
    (function(i){
    item.onclick = function(ev) {
    console.log('Item ' + i + ' is clicked.');
    };
    })(i);
    list.appendChild(item);
    }

    View Slide

  79. // define MY_FAV as a constant and give it the value 7
    const MY_FAV = 7;
    // this will throw an error
    MY_FAV = 20;
    // will print 7
    console.log('my favorite number is: ' + MY_FAV);
    // trying to redeclare a constant throws an error
    const MY_FAV = 20;
    // the name MY_FAV is reserved for constant above, so this will
    also fail
    var MY_FAV = 20;
    // this throws an error also
    let MY_FAV = 20;

    View Slide

  80. Arrow Function

    View Slide

  81. • An arrow function expression has a shorter syntax than a function
    expression.
    • Does not bind its own this, arguments, super, or new.target.
    • These function expressions are best suited for non-method
    functions, and they cannot be used as constructors.

    View Slide

  82. // without variables
    const f = () => { return this; };
    // without curly brackets
    var arguments = 42;
    var arr = () => arguments;
    arr(); // 42

    View Slide

  83. // An empty arrow function returns undefined
    let empty = () => {};
    (() => 'foobar')();
    // Returns "foobar"
    // (this is an Immediately Invoked Function Expression
    // see 'IIFE' in glossary)
    var simple = a => a > 15 ? 15 : a;
    simple(16); // 15
    simple(10); // 10
    let max = (a, b) => a > b ? a : b;
    // More concise promise chains
    promise.then(a => {
    // ...
    }).then(b => {
    // ...
    });
    // Parameterless arrow functions that are visually easier to parse
    setTimeout( () => {
    console.log('I happen sooner');
    setTimeout( () => {
    // deeper code
    console.log('I happen later');
    }, 1);
    }, 1);

    View Slide

  84. Object.assign

    View Slide

  85. • The Object.assign() method is used to copy the values of all
    enumerable own properties from one or more source objects to a
    target object.
    • It will return the target object

    View Slide

  86. // copying and object
    var obj = { a: 1 };
    var copy = Object.assign({}, obj);
    console.log(copy); // { a: 1 }
    // merging objects
    var o1 = { a: 1, b: 1, c: 1 };
    var o2 = { b: 2, c: 2 };
    var o3 = { c: 3 };
    var obj = Object.assign({}, o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }

    View Slide

  87. function test() {
    'use strict';
    let a = { b: {c: 4} , d: { e: {f: 1} } };
    let g = Object.assign({}, a);
    let h = JSON.parse(JSON.stringify(a));
    console.log(JSON.stringify(g.d)); // { e: { f: 1 } }
    g.d.e = 32;
    console.log('g.d.e set to 32.'); // g.d.e set to 32.
    console.log(JSON.stringify(g)); // { b: { c: 4 }, d: { e: 32 } }
    console.log(JSON.stringify(a)); // { b: { c: 4 }, d: { e: 32 } }
    console.log(JSON.stringify(h)); // { b: { c: 4 }, d: { e: { f: 1 } } }
    h.d.e = 54;
    console.log('h.d.e set to 54.'); // h.d.e set to 54.
    console.log(JSON.stringify(g)); // { b: { c: 4 }, d: { e: 32 } }
    console.log(JSON.stringify(a)); // { b: { c: 4 }, d: { e: 32 } }
    console.log(JSON.stringify(h)); // { b: { c: 4 }, d: { e: 54 } }
    }
    test();

    View Slide

  88. Array Methods: forEach

    View Slide

  89. • The forEach() method executes a provided function once for each
    array element.

    View Slide

  90. var a = ['a', 'b', 'c'];
    a.forEach(function(element) {
    console.log(element);
    });
    // a
    // b
    // c

    View Slide

  91. Array Methods: map

    View Slide

  92. • The map() method creates a new array with the results of calling a
    provided function on every element in this array.

    View Slide

  93. var numbers = [1, 5, 10, 15];
    var roots = numbers.map(function(x) {
    return x * 2;
    });
    // roots is now [2, 10, 20, 30]
    // numbers is still [1, 5, 10, 15]
    var numbers = [1, 4, 9];
    var roots = numbers.map(Math.sqrt);
    // roots is now [1, 2, 3]
    // numbers is still [1, 4, 9]

    View Slide

  94. Array Methods: filter

    View Slide

  95. • The filter() method creates a new array with all elements that pass
    the test implemented by the provided function.

    View Slide

  96. var words = ["spray", "limit", "elite", "exuberant",
    "destruction", "present"];
    var longWords = words.filter(function(word){
    return word.length > 6;
    });
    // Filtered array longWords is ["exuberant",
    "destruction", "present"]

    View Slide

  97. Array Methods: reduce

    View Slide

  98. • The reduce() method applies a function against an accumulator and
    each element in the array (from left to right) to reduce it to a single
    value.

    View Slide

  99. [0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );

    View Slide

  100. const pipe = (fns) => (x) => fns.reduce((v, f) => f(v),
    x)
    const times2add1 = pipe([times2, add1])
    times2add1(5) // => 11

    View Slide

  101. Import/Export

    View Slide

  102. • The import statement is used to import functions, objects or
    primitives that have been exported from an external module,
    another script, etc.

    View Slide

  103. // Import an entire module's contents. This inserts myModule into the current scope,
    containing all the exported bindings from the module identified by "my-module", often
    "my-module.js".
    import * as myModule from 'my-module';
    // Import a single member of a module. This inserts myMember into the current scope.
    import {myMember} from 'my-module';
    // Import multiple members of a module. This inserts both foo and bar into the current
    scope.
    import {foo, bar} from 'my-module';
    // Import a member with a more convenient alias. This inserts shortName into the current
    scope.
    import {reallyReallyLongModuleMemberName as shortName}
    from 'my-module';
    // Import an entire module for side effects only, without importing any bindings.
    import 'my-module';
    // Import multiple members of a module with convenient aliases.
    import {
    reallyReallyLongModuleMemberName as shortName,
    anotherLongModuleName as short
    } from 'my-module';

    View Slide

  104. • The export statement is used to export functions, objects or
    primitives from a given file (or module).

    View Slide

  105. // Named exports
    // exports a function declared earlier
    export { myFunction };
    // exports a constant
    export const foo = Math.sqrt(2);
    // Default exports (only one per script)
    export default function() {}
    // or 'export default class {}'
    // there is no semi-colon here

    View Slide

  106. Classes

    View Slide

  107. • The class statement is simply a syntactic sugar for prototype
    inheritance.
    • No new object-oriented class concept defined

    View Slide

  108. // Basic class declaration
    class Vehicle {
    constructor (type, wheels) {
    this.type = type;
    this.wheels = wheels;
    }
    }
    // The old way
    function Vehicle (type, wheels) {
    this.type = type;
    this.wheels = wheels;
    }

    View Slide

  109. • Prototype functions help to extend class methods
    • For class methods, no need to use function keyword

    View Slide

  110. class Vehicle {
    constructor (type, wheels) {
    this.type = type;
    this.wheels = wheels;
    }
    get type(){
    return this.type:
    }
    }

    View Slide

  111. Promises

    View Slide

  112. • The Promise object represents the eventual completion (or failure)
    of an asynchronous operation, and its resulting value.

    View Slide

  113. .then()
    .catch()
    Promise
    pending
    fulfill
    reject
    return
    return
    pending
    Promise
    error handling
    .then(onRejection)
    .catch(onRejection)
    .then(onFulfillment)
    async actions

    View Slide