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

eleks.com

WebRTC API (Real-Time Communications)

Peer to peer connection ( RTCPeerConnection API )

WebRTC API (Real-Time Communications)

MediaStream API ( aka getUserMedia ) for video chats

Progressive web apps

Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They're reliable, fast, and engaging.

● Customisation ( web app manifest ) ● Instant Loading ( service workers ) ● Push notifications ● Add to home screen ● Secure ● Responsive

// 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.

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.

GraphQLIs a query language created by Facebook in 2012 which provides a common interface between the client and the server for data fetching and manipulations.

// Response { "user" : { "id": 3500401, "name": "Jing Chen", "isViewerFriend": true, "profilePicture": { "uri": "http://someurl.cdn/pic.jpg", "width": 50, "height": 50 } }}

// Request { user(id: 3500401) : { id, name, isViewerFriend, profilePicture(size: 50){ uri, width, height } }}

Playground: http://graphql.nodaljs.com/

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!

[IOT] Artoo

Next generation ruby robotics framework with support for 15 different platforms

require 'artoo'// Then hook it up to your robot (in this case, a Sphero) connection :sphero, adaptor: :sphero, port: '4560'device :sphero, driver: :sphero

// And tell it what to do!work do every(3.seconds) do puts "Rolling..." sphero.roll 60, rand(360) endend

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

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

● Robots for Ruby devs (artoo)