Web apis JAX 2015 - Mainz

The web becomes more „native“ Carsten Sandtner (@casarock)

WEBAPIs

Hi My name is

Head of development //mediaman GMBHMozilla Rep

Javascript enthusiast and web developer since 1998.

Carsten Sandtner@casarock

https://flic.kr/p/a5WzoV

Web APIs - JAX 2015 - @casarock

The first browser war...

Microsoft vs. Netscape!

Arms race of featuresEveryone invented new and "better" features!

support other features? Hell, NO!

And this happened...

Standards? Which standards?

"We know what you want!"

W3C - ignored...

And Web Developers?Implemented pretty good browser detection

And Browser vendors?Browser Vendors wanted to be "supported"

... and this happened:

Faking User Agents

Mosaic/0.9 // grandmother of all! Mozilla/2.02 [fr] (WinNT; I) // Netscapes first! Mozilla/4.0 (compatible; MSIE 4.0; Windows 98) // IE4!

Funny? There are more…

Faking User Agents - part 2Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11 // Firefox! Mozilla/5.0 (compatible; Konqueror/Version; OS-or-CPU) KHTML/KHTMLVersion (like Gecko) // Konqueror Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (KHTML, like Gecko) Safari/125.1 // Safari!

And chrome?Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko)

Chrome/0.2.149.29 Safari/525.13

But Opera?Opera/8.0 (Windows NT 5.1; U; en)

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.50 Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95

Safari/537.36 OPR/15.0.1147.153

Faking User Agents - the End

And Spartan?

Mozilla/5.0 (Windows NT 6.4; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36 Edge/12.0

At the endEverything is a Mozilla...

and Internet Explorer won the first browser war

Development stopped for 5 years!

"Optimized for IE 6!"

Standards? IE was the standard!

The second browser war...

The rise of the others

The othersOther browser vendors raisedThey keep standards in mind and develop

them together

Standards, everywhere standards!There is not only one "tool" for the internet

New Feature: Implemented a STANDARD!

Competition?Still exisits, but:

Performance!Security!

Release cycles!

Unique characteristic?Add ons, technical features, developer tools etc..

Developers are being targeted.

“Make the Internet a better place”

The web Wins!

The "mobile" Web

The "real" mobile Web

Everything changes...Web developers want ...

... access to hardware features

... access Calendar, Addressbook

We got it!

But: Lessons learned from the past

Standards!

New technologies need new APIsVendors are working together

Service Workers (Google&Mozilla)

Web Components (Google&Mozilla)

WebGL etc.

“The web is everywhere”

“The web in your hands”

Mobiles need new APIsiPhone 2007: No SDK, just HTML5!

A smartphone without a browser? Unbelieveable!

Smartphones pushed HTML5

HTML5 based OS

HTML5 OS needs new APIsFirefox OS is open source and with standards in mind

Mozilla introduced new APIs for mobile devices

Consistent use of APIs

APIs submitted to W3CAdopted by other mobile browsers ...

... and desktop browsers

more features, more fun!

Web APIs

tell me more

Definition

“WebAPI is a term used to refer to a suite of device compatibility and access APIs that allow Web apps and content to access device hardware (such as battery status or the device vibration hardware), as well as access to data stored on the device (such as the calendar or contacts list).

By adding these APIs, we hope to expand what the Web can do today and only proprietary platforms were able to do in the past.”

DisclaimerSome WebAPIs are not (yet) a standard

I've marked them with a *

CategoriesWeb APIs could be categorized

Communication

Datamanagement

Hardware access

"other"

CommunicationNetwork Information API

Bluetooth*, Mobile Connection API*,Network Stats API*, TCP Socket API*, Telephony*, WebSMS*,

Datamanagement IndexedDB, Contacts API

FileHandle API*, Device Storage API*,

Hardware accessLight events, Battery status, Geolocation, Pointer Lock,

Proximity, Device orientation, Screen orientation, Vibration API

WebFM API*, Camera API*, Power Management API*

"Other"Alarm API, Push API, Web Notifications, Service Worker

Apps API*, Web Activities*, WebPayment API*, Browser API*, Permissions API*, Time/Clock API*

Examples?

Web APIs - JAX

Network Connection

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; var type = connection.type;

function updateConnectionStatus() { console.log("Connection type is change from " + type + " to " + connection.type); type = connection.type; }

connection.addEventListener('typechange', updateConnectionStatus);

Information about the system's connection

12+ 2.2+

BBC NewsNetwork Information API

Warns when cellular connection detected and video should be played

Firefox MarketplaceNetwork Information API

Paying via carrier billing - Cellular detected

Firefox MarketplaceNetwork Information API

When WIFI is detected

Confirmation code via SMS

Notification// At first, let's check if we have permission for notification // If not, let's ask for it if (Notification && Notification.permission !== "granted") { Notification.requestPermission(function (status) { if (Notification.permission !== status) { Notification.permission = status; }

if (Notification && Notification.permission === "granted") { var n = new Notification("Hi!"); }

22+ 25+ 6+

Google KEEPNotifications

HEISE.DENotifications

Light Events

window.ondevicelight = function(event) { // Read out the lux value console.log(event.value); };

Get current ambient light intensity

Battery Status (old)

var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery, info = { charging: battery.charging, chargingTime: parseInt(battery.chargingTime / 60, 10), dischargingTime: parseInt(battery.dischargingTime / 60, 10), level: Math.round(battery.level * 100) };

function updateBatteryStatus() { batterylevel.innerHTML = battery.level * 100 + " %"; batterystatus.innerHTML = battery.charging ? "" : "not"; }

battery.addEventListener("chargingchange", updateBatteryStatus); battery.addEventListener("levelchange", updateBatteryStatus);

Information about the system's battery charge level and lets you be notified by events that are sent when the battery level changes

Battery Status (NEW) function updateBatteryStatus(battery) {

// do stuff }

navigator.getBattery().then(function(battery) { // Update the battery status initially when the promise resolves ... updateBatteryStatus(battery);

// .. and for any subsequent updates. battery.onchargingchange = function () { updateBatteryStatus(battery); };

battery.onlevelchange = function () { updateBatteryStatus(battery); };

battery.ondischargingtimechange = function () { updateBatteryStatus(battery); }; });

38+ 25+

39+ 25+

Detecting device orientation

window.addEventListener("deviceorientation", handleOrientation, true);

function handleOrientation(event) { var alpha = event.alpha; // Z-Axis var beta = event.beta; // Y-Axis var gamma = event.gamma; // X-Axis

// Do stuff with the new orientation data }

Detection orientation and motion events

7+ 6+ 11+

6+ 3+ 4.2+

Detecting device orientation

window.addEventListener("devicemotion", handleMotion, true);

function handleMotion(event) { var x = event.accelerationIncludingGravity.x; var y = event.accelerationIncludingGravity.y; var z = event.accelerationIncludingGravity.z; var r = event.rotationRate; }

Information about the speed of changes for the device's position and orientation.

6+ 11+

6+ 4.2+

Vibration API

var pattern = [200, 100, 200, 200, 100], goodVibration = navigator.vibrate(pattern);

Rumble in your pocket!

Screen orientation

screen.addEventListener("orientationchange", function () { console.log("The orientation of the screen is: " + screen.orientation); });

Listening orientation change

screen.lockOrientation('landscape');

Preventing orientation change

38+ 11+ 25+

Page visibilityThe Page Visibility API lets you know when a webpage is visible or

in focus

if (document.hidden) { // stop video etc. } document.addEventListener("visibilitychange", handleVisibilityChange, false);

function handleVisibilityChange() { if (document.hidden) { // stop something. e.g. stop a video, audio etc... } else { // do something else ;) play video, audio... you got it? } }

33+ 10+ 12.10+18+ 7+

12.10+10+ 7+ 4.4+18+

BetaWeb APIs - JAX 2015 - @casarock

Service Workers

navigator.serviceWorker.register('/myworker.js').then(function(reg) { console.log('Registered', reg); }, function(err) { console.log('Error', err); });

ServiceWorker is a background worker. It is complex. This is a simplified explanation!

Service Workers cont.

console.log("started"); self.addEventListener('install', function(event) { console.log("installed"); });

self.addEventListener('activate', function(event) { console.log("activated"); });

self.addEventListener('fetch', function(event) { console.log("fetch"); event.respondWith(new Response("My response!!")); });

myworker.js

Service Workers caching

importScripts('serviceworker-cache-polyfill.js');

self.addEventListener('install', function(event) { event.waitUntil( caches.open('name-my-cache-v1').then(function(cache) { return cache.addAll([ '/', '/styles/all.css', '/imgs/myimg.png', '/scripts/awesome.js' ]); }) ) });

self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); });

cache some stuff.

Google IO 2015Service Worker

OKSome live examples...

Ambient lightAmbient Light Demo

NotificationsNotifications Demo

BatteryBattery API Demo

And of course: Have FUN!Fun, fun, fun

https://www.youtube.com/watch?v=kqvBvIV8mCE

Web APIs - JAX 2015 -

Service Worker

Conclusion

Standards are cool!WebAPIs allow us to build cooler web apps

WebAPIs are not a "mobile"-thingy!The "Web" becomes (more) "native"

Thank you!@casarock

hallo@appsbu.deSlides & Examples: casarock.github.io

Carsten Sandtner

Web apis JAX 2015 - Mainz

Technology

Transcript of Web apis JAX 2015 - Mainz

2010 mainz

Analyse / Auswertung Forum ll€¦ · 13.02.2009 · 1 Rheinland-Pfalz Landeshauptstadt Mainz Forum lll am 14. Januar 2009 in Mainz „Deutschhausplatz und Regierungsviertel Mainz“

Cassandra & Jax

Jax keynote

Lecture 7 Web Services JAX-WS & JAX-RS

Mainz - Wire Balustrades

Building SOA Applications with JAX-WS, JAX-RS, JAXB, and Ajax

Building SOA Applications with JAX-WS, JAX-RS, · PDF fileBuilding SOA Applications with JAX-WS, JAX-RS, JAXB, and Ajax Mark Hansen Founder & President, AgileIT mark@agileitinc.com

Digital Media Revolution January 2009. 2 Johannes Gensfleisch zur Laden zum Gutenberg Bornc. 1398 Mainz, Electorate of Mainz DiedFebruary 3, 1468 Mainz,

Hauptbahnhof Mainz, Mainz Main Railway-Station, Mainz, Germany

JAX- Java APIs for XML by J. Pearce. Some XML Standards Basic –SAX (sequential access parser) –DOM (random access parser) –XSL (XSLT, XPATH) –DTD Schema.

Loading [MathJax]/jax/output/CommonHTML/jax

Jax drinks

April 20 – 24, 2009 Mainz, Germany. 1 Overview JAX 2009 Since its inception in 2001 JAX was becoming the largest event in Europe for Enterprise Java-Technologies.

V Forge Contents · Jax - ahahah Female Sung Jax - All Jax - ahahah2 Jax - ahhhhh Jax - ahhhhh2 Jax - ahhhhh3 Jax - ahhhhh4 Jax - ehaye Jax - haaaaha Jax - hey Jax - hey2 Jax - heyyyyy

Mainz Paper (Revised)

Homework #2 Web Service Programming ID2208misha/ID2208/2015/homework/HW2... · 2015. 2. 2. · Homework #2- JAX-WS (from Oracle JWSDP documents). APIs available to the developer in

JAX Chemical Company · JAX COPPER PLATING JAX Chemical Company. ... OSHA HAZARD COMMUNICATION ... JAX COPPER PLATING JAX Chemical Company. ...

JAX-WS e JAX-RS

RESTEasy JAX-RS...RESTEasy JAX-RS iv 15. @DefaultValue ..... 61