• 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
• 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.
• 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.
• 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.
• 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.
• 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.
• 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.
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
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!
// with jQuery $('.my-class').find(child-element); // without jQuery var $element = document.querySelector('.my-class'); $element.querySelectorAll(child-element)
// 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');
// with jQuery var $element = $('.my-class'); $element.html(); $('').append($element.clone()).html(); // without jQuery var $element = document.querySelector('.my-class'); $element.innerHTML; $element.outerHTML;
// with jQuery var $element = $('.my-class'); $element.html(string); // without jQuery var $element = document.querySelector('.my-class'); $element.innerHTML = string;
// with jQuery var $element = $('.my-class'); $element.text(); // without jQuery var $element = document.querySelector('.my-class'); $element.textContent;
// with jQuery var $element = $('.my-class'); $element.text(string); // without jQuery var $element = document.querySelector('.my-class'); $element.textContent = string;
• 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.
• 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
• Separation between the client and the server • Visibility, reliability and scalability • The REST API is always independent of the type of platform or languages
• 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.
• 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
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 }
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); }
// 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;
• 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.
• 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
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]
// 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';
// 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
bcinarli
oracle4engineer
tkhresk
tkikuchi1002
cybozuinsideout
bengo4com
revcomm_inc
lemiorhan
coconala_engineer
comucal
yoshidashingo
akiroom
bun913
kneath
smashingmag
cassininazir
keathley
chriscoyier
bermonpainter
colly
malarkey
addyosmani
phodgson
jcasabona