Embed Size (px)
Citation preview
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
