Andriy Vandakurov's slides about "Frontend. Global domination" - Lightning Talk made for #pivorakers doring 12th #pivorak Lviv Ruby MeetUp.

1. Front end.
Global domination.
by Andrii Vandakurov, tech lead
eleks.com

2. WebRTC API (Real-Time Communications)
Peer to peer connection ( RTCPeerConnection API )

3. WebRTC API (Real-Time Communications)
MediaStream API ( aka getUserMedia ) for video chats

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

5. // 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 Manifest
Simple 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">

6. Adding a Splash screen for
installed web apps
Web App Manifest
Show some awesome splash screen while
you loading your assets and other stuff.

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

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

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

10. GraphQL
Is 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/

11. Server Side
Frameworks

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

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

14. 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!

15. [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)
end
end

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

17. 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)