View
105
Download
2
Category
Preview:
Citation preview
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/
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)
Recommended