HTML5 Applications

Workshop Notes, how to build HTML5 & Single Page Apps

Transcript

1. Building HTML5 and JS Applications
2. Bilal Çınarlı Frontend Architect Software Engineer @Adidas @bcinarli github.com/bcinarli bcinarli.com
3. HTML5 - JS Applications
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
6. What is HTML5?
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.
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.
13. • Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites.
15. • Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.
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.
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.
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.
23. • Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2.
24. JavaScript Design Patterns
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.
27. Module Design Pattern
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
29. Revealing Module Design Pattern
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
31. Prototype Design Pattern
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 }
33. Observer Design Pattern
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); }; } }; };
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!
36. Singleton Design Pattern
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(); } }; })();
38. You Might Not Need jQuery
39. Selecting Elements
40. // with jQuery var $element = $('.my-class'); // without jQuery var $element = document.querySelectorAll('.my-class');
41. Finding Elements
42. // with jQuery $('.my-class').find(child-element); // without jQuery var $element = document.querySelector('.my-class'); $element.querySelectorAll(child-element)
43. Add/Remove Classes
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');
45. Get/Set Content
46. // with jQuery var $element = $('.my-class'); $element.html(); $('<div>').append($element.clone()).html(); // without jQuery var $element = document.querySelector('.my-class'); $element.innerHTML; $element.outerHTML;
47. // with jQuery var $element = $('.my-class'); $element.html(string); // without jQuery var $element = document.querySelector('.my-class'); $element.innerHTML = string;
48. Get/Set Text
49. // with jQuery var $element = $('.my-class'); $element.text(); // without jQuery var $element = document.querySelector('.my-class'); $element.textContent;
50. // with jQuery var $element = $('.my-class'); $element.text(string); // without jQuery var $element = document.querySelector('.my-class'); $element.textContent = string;
51. Event Bindings
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);
53. Rest API with JSON
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.
55. Features
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
57. The advantages of REST for development
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
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" } } ] }
60. Single Responsibility Principle
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.
63. Single Page Application Development
64. JavaScript Packages & Dependencies
65. NodeJs
66. • Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and scalable network applications
67. Packaging
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" }
69. NPM
70. • Node Package Manager • Default package manager in NodeJs
71. Yarn
72. • Yarn package manager • Deterministic Install with lockfiles
73. ES5 & ES6 KeyPoints
75. Variables
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
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 }
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); }
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;
80. Arrow Function
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.
82. // without variables const f = () => { return this; }; // without curly brackets var arguments = 42; var arr = () => arguments; arr(); // 42
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);
84. Object.assign
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
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 }
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();
88. Array Methods: forEach
89. • The forEach() method executes a provided function once for each array element.
90. var a = ['a', 'b', 'c']; a.forEach(function(element) { console.log(element); }); // a // b // c
91. Array Methods: map
92. • The map() method creates a new array with the results of calling a provided function on every element in this array.
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]
94. Array Methods: filter
95. • The filter() method creates a new array with all elements that pass the test implemented by the provided function.
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"]
97. Array Methods: reduce
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.
99. [0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );
100. const pipe = (fns) => (x) => fns.reduce((v, f) => f(v), x) const times2add1 = pipe([times2, add1]) times2add1(5) // => 11
101. Import/Export
102. • The import statement is used to import functions, objects or primitives that have been exported from an external module, another script, etc.
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';
104. • The export statement is used to export functions, objects or primitives from a given file (or module).
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
106. Classes
107. • The class statement is simply a syntactic sugar for prototype inheritance. • No new object-oriented class concept defined
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; }
109. • Prototype functions help to extend class methods • For class methods, no need to use function keyword
110. class Vehicle { constructor (type, wheels) { this.type = type; this.wheels = wheels; } get type(){ return this.type: } }
111. Promises
112. • The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
113. .then() .catch() Promise pending fulfill reject return return pending Promise error handling .then(onRejection) .catch(onRejection) .then(onFulfillment) async actions