Trends frontend. Javascript APIs for mobile devices

Presentation: http://goo.gl/2CkWb .
Examples: http://goo.gl/5jv4i .
Sources: http://goo.gl/YYj0R .

Currently, one can not ignore the general trend of migration services and applications on the web, which is supported by the appearance of a set of online services that claim to be called explicitly include web applications. As a result, are losing popularity standalone-application, which does not provide a functional connection with the massive web services. Such an application must either evolve by adding a functional integration with the outside world, or to migrate to the web.

Interesting for the development of different applications and services. Obvious examples are Adobe with its Adobe Creative Cloud , Microsoft with its SkyDrive and Microsoft Office Web App - The popular applications migrated to the Web. Another way of development - development services where web services by typing Popular photos, "acquire" applications - GMail, Youtube.

Thus, an application (service), which is intended to be "high quality, convenient and popular," now contains in its structure:

• client application for the popular OS (iOS, Android, Windows, Linux, ...);
• extensions for popular browsers;
• bookmarklets for popular browsers;
• Web Client
• common backend, which, along with the basic functionality, implemented its own api and integration with external services.

It is clear that:

• for the development and support of this application requires coordinated efforts of the development team, which includes professionals with experience developing applications for the appropriate platform, both with expertise in related fields (this is at least the knowledge of architecture of web applications and the technologies used to implement them);
• increased "overhead" to maintain the infrastructure of the development process (for each component of the structure is necessary to create the full range of tests - unit, functional, performance, maintenance of a separate bug tracker, etc. ...);
• becomes increasingly complicated the introduction of new features to the service (which should be supported simultaneously and uniformly implemented in all its structural parts);
• this structure was originally located in errors in consequence of the interaction of its component mismatch caused primarily variety of client applications and a variety of versions of the user's device.

Indisputable that the complexity (and therefore, cost) and support the development of such applications will be incomparably more in comparison with «pure-web-application». The structure of the application looks much more concise:

• Web iterfeys;
• client application for the popular OS, extensions and bookmarklets for popular browsers are trivial "shell" in which the "packed" web interface;
• common backend, + api, + integration with external services.

With this structure, the service excludes almost all the disadvantages listed above, due to the fact that the implementation of all parts of the structure are used monomorphic technology (js, css, html), and, therefore, monomorphic infrastructure of the development process and the development team.

This raises the obvious question - why this practice is not used everywhere?
The answer is simple: until recently, Web interfaces could not compete with the interface implemented by the native of each platform.

JavaScript APIs

Back in July 2009 as part of World Wide Web Consortium (W3C) was created " Device APIs Working Group (GAP) ", whose aim is to create a client-side API for interacting with the web application service devices (camera, calendar, contacts,. ...) Here you can see the current direction of development of the group. Some of them have already been implemented in browsers.

Warning: test cases are written for Firefox Mobile beta .

Battery Status API

To display information about the state of the batteries client machine.
Implemented with browser-prefix.

//объект, содержащий информацию о батареях var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; //battery.level - уровень заряда батарей (значение в диапазоне 0...1) var onlevelchange = function(e) { console.warn("Battery level change: ", battery.level); }; //levelchange - событие изменения уровня заряда battery.addEventListener("levelchange", onlevelchange); //battery.charging - статус заряда (true - заряжается, false - не заряжается) var onchargingchange = function() { console.warn("Battery charge change: ", battery.charging); }; //chargingchange - событие изменения статуса заряда battery.addEventListener("chargingchange", onchargingchange); //battery.chargingTime - оставшееся время до полного заряда var onchargingtimechange = function() { console.warn("Battery charge time change: ", battery.chargingTime); }; //chargingchange - событие изменения времени до полного заряда battery.addEventListener("chargingtimechange", onchargingtimechange); //battery.dischargingTime - оставшееся время до полного разряда var ondischargingtimechange = function() { console.warn("Battery discharging time change: ", battery.dischargingTime); }; //dischargingtimechange - событие изменения времени до полного разряда battery.addEventListener("dischargingtimechange", ondischargingtimechange); 

Example:
David Walsh / Battery Status API / Example .

Sources:
W3C Battery Status API ,
MDN / window.navigator.battery ,
David Walsh / Battery Status API .

Vibration API

Designed to control the vibrator unit.

 //вибросигнал длительностью 1 сек navigator.vibrate(1000); //последовательность: вибросигнал 0.5 сек, пауза 1 сек, вибросигнал 0.3 сек navigator.vibrate([500, 1000, 300]); //последовательность множества сигналов navigator.vibrate( ('111111111111111111'+ '111111111111111111').split('') .map(function(){ return 300; }) ); //остановить вибросигнал navigator.vibrate(0); //вибросигнал длительностью 10 сек navigator.vibrate(10000); //остановить вибросигнал navigator.vibrate([]); 

Examples:
Vibration API example ,
David Walsh / Vibration API / Example .

Sources:
W3C Vibration API ,
MDN / window.navigator.vibrate ,
David Walsh / Vibration API

Screen Orientation API

Designed for events change the orientation of the device screen, information about the current state orientation.
Implemented with browser-prefix.

 // screen.orientation - текущее значение ориентации экрана console.log("orientation: " + screen.mozOrientation); // screen.onorientationchange - событие изменения ориентации экрана устройства screen.addEventListener( "mozorientationchange", function() { console.log("orientation: " + screen.mozOrientation); } ); 

Example:
Orientation screen API example .

Sources:
W3C/Screen Orientation API ,
MDN / orientationchange Event .

Device Orientation API

Designed for events change the orientation of the device.

 // window.ondeviceorientation - событие изменения ориентации устройства // e.alpha, e.beta, e.gamma - текущее значение ориентации экрана // по осям x, y, z соответственно window.addEventListener( "deviceorientation", function(e){ console.log(e.alpha, e.beta, e.gamma); } ); 

Examples:
Orientation device API example ,
Opera / compass .

Sources:
W3C/deviceorientation ,
MDN / Orientation and Motion Data Explained ,
Opera / Orientation API .

Device Motion API

Designed for events, accelerometer sensor for moving the unit.

 // window.ondevicemotion - событие перемещения устройства // ускорение по осям x, y, z соответственно: // e.acceleration.x, e.acceleration.y, e.acceleration.z // значение ускорения по осям x, y, z (с учетом гравитации) соответственно: // e.accelerationIncludingGravity.x, e.accelerationIncludingGravity.y, e.accelerationIncludingGravity.z // значение угловой скорости вращения по осям z, x, y (в градусах) соответственно: // e.rotationRate.alpha, e.rotationRate.beta, e.rotationRate.gamma window.addEventListener( "devicemotion", function(e){ console.dir(e.acceleration); console.dir(e.accelerationIncludingGravity); console.dir(e.rotationRate); }; ); 

Example:
Motion device API example .

Sources:
W3C/devicemotion ,
MDN / Orientation and Motion Data Explained ,
MDN / devicemotion ,
Opera / Orientation API .

Ambient Light Events

Designed for events light sensor device.

 window.addEventListener( "devicelight", //e.value - значение освещенности в люксах function(e){ console.log(e.value); } ); window.addEventListener( 'lightlevel', // e.value = ("normal"|"dim"|"bright") function(e) { console.log('lightlevel: ' + e.value); } ); 

Examples:
Ambient Light API example ,
Doug Turner / Ambient Light Events / Example .

Sources:
W3C Ambient Light Events ,
MDN / DeviceLightEvent ,
Doug Turner / Ambient Light Events .

Proximity Events

Events proximity sensor device.

 window.addEventListener( "deviceproximity", function(e){console.log( e.value, // текущая дистанция до датчика в сантиметрах (!) e.min, // минимальное значение, которое может определить датчик (==0) e.max // максимальное значение, которое может определить датчик )} ); window.addEventListener( "userproximity", function(e){console.log( e.near //true - близко, false - далеко )} ); 

Examples:
Proximity Events example ,
Doug Turner / Device Proximity / Exapmle .

Sources:
W3C Proximity Events ,
MDN / DeviceProximityEvent ,
MDN / UserProximityEvent ,
Doug Turner / Proximity Device ,
Doug Turner / User Proximity .

Page Visibility API

Allows you to determine whether the page is displayed on the screen.
Implemented with browser-prefix.

 // Поля, содержащие состояние отображаемости страницы: // document.hidden = (true|false) // document.visibilityState = ("hidden"|"visible"|"prerender"|"unloaded") console.log( document.mozHidden, document.mozVisibilityState ); // Событие смены состояния отображаемости страницы: // document.onvisibilitychange = function(e){ ... } document.addEventListener( 'mozvisibilitychange', function(){console.log( document.mozHidden, document.mozVisibilityState );} ); 

Examples:
Page Visibility API example ,
David Walsh / Page Visibility API / Example ,
Mozilla / Page Visibility API / Example .

Sources:
W3C Page Visibility ,
David Walsh / Page Visibility API ,
Chrome / Page Visibility API ,
MDN / Page Visibility API .

Fullscreen API

Provides opportunities to work with full-screen mode.
Implemented with browser-prefix.

 // доступность полноэкранного режима: // document.fullScreenEnabled = (true|false) console.log('fullScreenEnabled :', document.mozFullScreenEnabled ); // вывод DOM-ноды в полноэкранном режиме: // el.requestFullScreen(); document.mozRequestFullScreen(); // элемент, выведенный в полноэкранном режиме: // document.fullscreenElement console.log('fullscreenElement:', document.mozFullscreenElement); // выход из полноэкранного режима: // document.cancelFullScreen(); document.mozCancelFullScreen(); 

Examples:
Fullscreen API / Example ,
MDN / Fullscreen API / Example ,
David Walsh / Fullscreen API / Example .

Sources:
W3C Fullscreen ,
MDN / Using Fullscreen mode ,
David Walsh / Fullscreen API .

Total

Summarizing the development of Web standards for front-end technologies (css, js, html), you can see a general trend of innovation, the ultimate goal is to become a web interface as a de facto standard as the application interfaces.
We can already use the new API with Modernizr .

Sources

• MDN / Mozilla Event Reference ;
• MDN / DOM ;
• MDN / Mozilla Event Reference ;
• Opera / Web Specifications ;
• HTML 5 Demos and Examples ;
• David Walsh ;
• Doug Turner ;
• hacks.mozilla.org ;
• Veb-standarty/Stati;
• W3C Device APIs Working Group ;
• W3C Device APIs Working Group / Mercurial ;
• Modernizr .

Presentation: http://goo.gl/2CkWb .
Examples: http://goo.gl/5jv4i .
Sources: http://goo.gl/YYj0R .