Trends frontend. Javascript APIs for mobile devices

Presentation: http://sergey.makoveev.info/2013/01/frontend.js-apis-mobile.presentation/ .
Examples: http://goo.gl/5jv4i .
Sources: http://goo.gl/YYj0R .

Currently, it is impossible not to notice the general trend towards the migration of services and applications to the web, which is supported by the emergence of many online services that ~~claim to be called~~ uniquely called web applications. As a result, standalone applications are losing their popularity, the functionality of which does not provide for communication with mass web services. Such an application has to either be modified by adding functionality to integrate with the outside world, or migrate to the web.

Different ways of developing applications and services are interesting. Vivid examples are Adobe with its Adobe Creative Cloud , Microsoft with its SkyDrive and Microsoft Office Web App - here popular applications have migrated to the web. Another way of development is the development of services, when web services, gaining popularity, “overgrow” with applications - GMail, Youtube.

Thus, the application (service), which aims to "be high-quality, convenient and popular", currently contains in its structure:

client applications for popular OS (iOS, Android, Windows, Linux, ...);
extensions for popular browsers;
bookmarklets for popular browsers;
web client;
common backend in which, along with the main functionality, own api and means of integration with external services are implemented.

It is obvious that:
')

the development and support of such an application requires the efforts of a well-coordinated team of developers, including specialists with experience in developing applications for appropriate platforms, who at the same time have experience and knowledge in related areas (this is at least knowledge of the architecture of web applications and technologies used to implement them);
“overhead costs” increase to maintain the infrastructure of the development process itself (for each component of this structure, writing the entire spectrum of tests is required - unit, functional, load; maintaining a separate bug tracker, etc. ...);
the introduction of a new functional into the service (which support should be simultaneously and uniformly implemented in all its structural parts) is made many times more complicated;
Such a structure is initially located to the appearance of errors due to the mismatch of the interaction of its components, caused primarily by the diversity of client applications and the diversity of their versions on users' devices.

There is no doubt that the complexity (and, as a consequence, the cost) of supporting and developing such an application will be incomparably more compared to the “pure-web-application”. The structure of such an application looks much more concise:

web interface;
client applications for popular OS, extensions and bookmarklets for popular browsers are a trivial "shell" into which the web interface is packed;
common backend, + api, + means of integration with external services.

With such a service structure, almost all the disadvantages listed above are excluded, due to the fact that the implementation of all parts of the structure uses monomorphic technologies (js, css, html), and therefore the monomorphic infrastructure of the development process itself and the development team.

Here a natural question arises - why is this practice not used everywhere?
The answer is simple: until recently, web interfaces could not compete with interfaces implemented using native tools of each of the platforms.

JavaScript APIs

Back in July 2009, under the World Wide Web Consortium (W3C), the Device APIs Working Group (GAP ) was created, the goal of which is to create a client-side API for web applications to interact with device services (camera, calendar, contacts,. ..). Here you can see the current direction of the development group. Some of them are already implemented in browsers.

Warning : test cases are written for Firefox mobile beta .

Battery Status API

Displays information about the state of the batteries of the 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 vibration of the device.

 //  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 to receive device orientation change events, information about the current screen orientation state.
Implemented with browser prefix.

 // screen.orientation -     console.log("orientation: " + screen.mozOrientation); // screen.onorientationchange -      screen.addEventListener( "mozorientationchange", function() { console.log("orientation: " + screen.mozOrientation); } );

Example :
Screen Orientation API example .

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

Device Orientation API

Intended to receive device orientation change events.

 // 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 :
Device Orientation API example ,
Opera / compass .

Sources :
W3C / deviceorientation ,
MDN / Orientation and motion data ,
Opera / Orientation API .

Device Motion API

Intended to receive accelerometer sensor events about device movement.

 // 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 :
Device Motion API example .

Sources :
W3C / devicemotion ,
MDN / Orientation and motion data ,
MDN / devicemotion ,
Opera / Orientation API .

Ambient Light Events

Intended to receive events of the device's illumination sensor.

 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

Device proximity sensor events.

 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 / Device Proximity ,
Doug Turner / User Proximity .

Page Visibility API

Allows you to determine whether the page is displayed on the device 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 in the field of frontend technologies (css, js, html), you can see the general trend of innovative developments, the ultimate goal of which is the emergence of web interfaces as a de facto standard as application interfaces.
Already, you can use the new API with Modernizr .

Sources

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

Source: https://habr.com/ru/post/166413/

All Articles