Pivorak.javascript.global domination
1 like262 views
Progressive web apps take advantage of new technologies to provide reliable, fast, and engaging experiences to users. They offer features such as customization through a web app manifest, instant loading with service workers, push notifications, adding apps to a user's home screen, and more. Service workers in particular allow developers to support offline experiences by giving them control over what offline content is available.
![// 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">](https://image.slidesharecdn.com/pivorak-160525211642/85/Pivorak-javascript-global-domination-5-320.jpg)
![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!](https://image.slidesharecdn.com/pivorak-160525211642/85/Pivorak-javascript-global-domination-14-320.jpg)
![[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](https://image.slidesharecdn.com/pivorak-160525211642/85/Pivorak-javascript-global-domination-15-320.jpg)
![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](https://image.slidesharecdn.com/pivorak-160525211642/85/Pivorak-javascript-global-domination-16-320.jpg)
Pivorak.javascript.global domination
- 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/
- 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)