pivorak.javascript.global domination

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

Upload: -

Post on 22-Jan-2018

150 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: Pivorak.javascript.global domination

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

eleks.com

Page 2: Pivorak.javascript.global domination

WebRTC API (Real-Time Communications)

Peer to peer connection ( RTCPeerConnection API )

Page 3: Pivorak.javascript.global domination

WebRTC API (Real-Time Communications)

MediaStream API ( aka getUserMedia ) for video chats

Page 4: Pivorak.javascript.global domination

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

Page 5: Pivorak.javascript.global domination

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

Page 6: Pivorak.javascript.global domination

Adding a Splash screen for installed web apps

Web App Manifest

Show some awesome splash screen while you loading your assets and other stuff.

Page 7: Pivorak.javascript.global domination

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.

Page 8: Pivorak.javascript.global domination

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.

Page 9: Pivorak.javascript.global domination

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.

Page 10: Pivorak.javascript.global domination

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/

Page 11: Pivorak.javascript.global domination

Server Side

Frameworks

Page 12: Pivorak.javascript.global domination

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

Page 13: Pivorak.javascript.global domination

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.

Page 14: Pivorak.javascript.global domination

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!

Page 15: Pivorak.javascript.global domination

[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

Page 16: Pivorak.javascript.global domination

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

Page 17: Pivorak.javascript.global domination

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)