Front end. Global domination.by Andrii Vandakurov, tech lead

eleks.com

Inventor of the World Wide Web

Had written the three fundamental technologies that remain the foundation of today’s Web:

● HTML: HyperText Markup Language. The markup (formatting) language for the Web.

● URI: Uniform Resource Identifier. A kind of “address” that is unique and used to identify to each resource on the Web. It is also commonly called a URL.

● HTTP: Hypertext Transfer Protocol. Allows for the retrieval of linked resources from across the Web.

Tim Berners-Lee

Internet growth statistic2000

5%

2007

15%

2014

40%

1995

js

1996

css

1990

web

Important events

2016

46%

Browser power

Example

Lets create simple chat where you can communicate with your friends in real time.

WebSocket APIReal time communication

Socket.io

JavaScript library for realtime web applications. Primarily uses the WebSocket protocol with polling as a fallback option, while providing the same interface.

WebRTC API (Real-Time Communications)Peer to peer connection ( RTCPeerConnection API )

WebRTC API (Real-Time Communications)MediaStream API ( aka getUserMedia ) for video chats

Check if user online/offline

navigator.onLine

We can change design based on user online/offline status

if (navigator.onLine) { console.log('online');} else { console.log('offline');}

window.addEventListener("offline", function(e{ console.log("offline"); });

window.addEventListener("online", function(e) { console.log("online"); });

LocalStorage and SessionStorage can use up to 10MB of storage but the number is actually the sum of both.

Web Storage API

● sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores)

● localStorage does the same thing, but persists even when the browser is closed and reopened.

// StorelocalStorage.myVar = JSON.stringify({"data":1}); // Retrieve var res = JSON.parse(localStorage.myVar);

You can use up to 50MB on desktop, 5MB on mobile for free. However, the user can allow the limit to be removed by granting permission.

IndexedDB API

Low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high performance searches of this data.

var dbName = "todo";var dbVersion = 1.0;var todoDB = {};var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;todoDB.indexedDB = {};todoDB.indexedDB.db = null;

if ('webkitIndexedDB' in window) { window.IDBTransaction = window.webkitIDBTransaction; window.IDBKeyRange = window.webkitIDBKeyRange;}

todoDB.indexedDB.open = function() { var request = indexedDB.open(dbName, dbVersion); request.onsuccess = function(e) { ... }}

The Database that Syncs!

It enables applications to store data locally while offline, then synchronize it with CouchDB and compatible servers when the application is back

online, keeping the user's data in sync no matter where they next login.

Page Visibility APILets you know when a webpage is visible or in focus.

Use cases:

● Stop audio/video playback, animation, data fetching if user leave the page ● Notify user that something important happened while he was on other tab.

What about mobile devices ?

Add to home screenWill set icon on your home screen that will run selected site.

Provides an easy way for web content to be presented using the user's entire screen.

Full Screen API

var elem = document.getElementById("myvideo");if (elem.requestFullscreen) { elem.requestFullscreen();} else if (elem.msRequestFullscreen) { elem.msRequestFullscreen();} else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen();} else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen();}

// manifest.json{ "short_name": "Kinlan's Amaze App", "name": "Amazing Application", "icons": [ { "src": "launcher-icon-3x.png", "sizes": "144x144", "type": "image/png" }, { "src": "launcher-icon-4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": "fullscreen", "orientation": "landscape"}

Web App ManifestSimple JSON file that gives you, the developer, the ability to control how your app appears to the user in the areas that they would expect to see apps (for example the mobile home screen), direct what the user can launch and, more importantly, how they can launch it.

// index.html<link rel="manifest" href="/manifest.json">

Adding a Splash screen for installed web apps

Web App Manifest

Show some awesome splash screen while you loading your assets and other stuff.

Push notifications

Service Workers

Service Worker is a script that is run by your browser in the background, separate from a web page, opening the door to features which don't need a web page or user interaction.

Offline mode

Service Workers

The reason this is such an exciting API is that it allows you to support offline experiences, giving developers complete control over what exactly that experience is.

Before service worker there was one other API that would give users an offline experience on the web called App Cache. The major issue with App Cache is the number of gotcha's that exist as well as the design working particularly well for single page web apps, but not for multi-page sites. Service workers have been designed to avoid these common pain points.

Providing insight into the device's battery level and status

Battery API

// Get the battery!var battery = navigator.battery

|| navigator.webkitBattery || navigator.mozBattery;

// A few useful battery propertiesconsole.warn("Battery charging: ", battery.charging); // trueconsole.warn("Battery level: ", battery.level); // 0.58console.warn("Battery discharging time: ", battery.dischargingTime);

// Add a few event listenersbattery.addEventListener("chargingchange", function(e) { console.warn("Battery charge change: ", battery.charging);}, false);

This API is clearly targeted toward mobile devices. The Vibration API would be good for alerts within mobile web applications, and would be especially awesome when used in games or media-heavy applications.

Vibration API

var supportsVibrate = "vibrate" in navigator;

// Vibrate once for one secondnavigator.vibrate(1000);

// Vibrate multiple times for multiple durations// Vibrate for three seconds, wait two seconds, then vibrate for one secondnavigator.vibrate([3000, 2000, 1000]);

Makes it easy to add speech recognition to your web pages.

Web Speech API

var recognition = new webkitSpeechRecognition(); recognition.continuous = true; recognition.interimResults = true;

recognition.onstart = function() { ... } recognition.onresult = function(event) { ... } recognition.onerror = function(event) { ... } recognition.onend = function() { ... }

Feature that gives users a fluid and precise scrolling experience for touch and input devices.

[Styles] Scroll snap points

The clip-path CSS property prevents a portion of an element from getting displayed by defining a clipping region to be displayed

[Styles] Css Clip Path

CSS Shapes allow web designers to wrap content around custom paths, like circles, ellipses and polygons, thus breaking free from the constraints of the rectangle.

[Styles] Css Shape

[Styles] Css Shape

Multiply, screen, overlay, and soft light, to name a few can turn boring opaque layers into beautiful pieces of stained glass.

[Styles] Css Blend Mode

[Styles] Css Blend Mode

CSS3 allows you to format your elements using 3D transformations.

[Styles] Css 3D

Creating 3D worlds with HTML and CSS

[Styles] Css 3D

Custom Elements

Shadow DOMThis specification describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM.

Web components libraries:

PolymerX-Tag

Server Side

Frameworks

With Electron, creating a desktop application for your company or idea is easy. Initially developed for GitHub's Atom editor, Electron has since been used to create applications by companies like Microsoft, Facebook, Slack, and Docker.

Desktop apps

TV apps

Web apps built for webOS TV are very similar to standard web applications. Like the standard web applications, you can create web apps for webOS TV using standards based web technologies like HTML, CSS, and JavaScript. Anyone with experience in building web applications can easily start developing web apps for webOS TV.

Is the network of physical objects—devices, vehicles, buildings and other items—embedded with electronics, software, sensors, and network connectivity that enables these objects to collect and exchange data.

[IOT] Internet of Things

Connect to real world!

// Arduino var five = require("johnny-five"), board, motor, led;

board = new five.Board();board.on("ready", function() { motor = new five.Motor({ pin: 5}); board.repl.inject({ motor: motor });

motor.on("start", function() { board.wait(2000, function() { motor.stop(); });

});

motor.on("stop", function() { console.log("stop", Date.now());

});

motor.start();});

[IOT] Johnny-FiveIs the JavaScript Robotics & IoT Platform.

var Cylon = require("cylon");Cylon.robot({ connections: { arduino: { adaptor: "firmata", port: "/dev/ttyACM0" } },

devices: { motor: { driver: "motor", pin: 3 } },

work: function (my) { var speed = 0, increment = 5;

every((0.05).seconds(), function () { speed += increment; my.motor.speed(speed);

if ((speed === 0) || (speed === 255)) { increment = -increment; } }); }}).start();

[IOT] Cylon JS

JavaScript Robotics, Next generation robotics framework with support for 43 different platforms Get Started

QA ?

Links:● History of the Web ● socket.io ● Desktop apps ● webrtc API ● pouchdb ● css blend mode ● TV ● WebComponents