Andrew Hall


Future of Web Apps – Session 3 – Try this at home – Flurin Egger

This was live blogged. There will be mistakes

What are browser Apis? They are ways to talk to browsers and extend them to build software or use them for our needs

Today we will talk about 7 Apis. But first of all why?

We are moving forward. The old legacy browsers we used to support are (slowly) falling away. We don’t need to make our sites work on all browsers in the same way as long as our users can still use our software. We can use progressive enhancement or fallbacks/polyfills

Apis are not the goal. Flurin wants to make the web great and Apis can help us with this.

1) web animations

Web animations are things you can animate! We used to do this with JavaScript but this had bad performance. Today with css animation and transitions, it’s better performance but it’s hard to sequence and control.
Element.animate() has some support but check if you want to use it. We can do various animations here, movements, duration, iterations etc. We can also pass in multiple animations in one call.
A call to element.animate returns a player object and we can then call various methods on this, such as cancel. The object also has events like onfinish.

2) the beacon API

The beacon API is used to send back analytics data to the server. But why not just use Ajax? It’s because we can’t sent Ajax requests on window.unload.
However, this API is a fire and forget API. Support isn’t great

3) promises.

A promise is an eventual result of an asynchronous operation. Promises are useful. When doing asynchronous calls, we aren’t necessarily sure what order the data comes back in. Also callbacks can make code be spaghetti code. You can use various methods in promises to aid this.
However, promises and not for everything. A promise can only be dealt with once and is not to be used for repetitive things. Support works in most place – just not IE yet.

4) web audio

The web audio API makes your PC into a dj station. You can listen to and generate sound as well as doing visualisations. Also in a game, if something happens on the right side of your screen you can make the sound come out of the right speaker.
The web audio API defines nodes:

Source: like microphone
Intermediate: process the sound
Destination: file or speaker.

This has good support but again not in IE

5) CSS feature queries

This is like modernizr. You don’t need to load a library to now detect of features are supported.
You can use this from js and CSS.
Falls back gracefully if not supported. You can easily detect if features are supported using css like statements.

6) web notifications

These are like push notifications for the web. If you are building a chat application for example, you can let the user know when they have received a message. You need to have the tab open but not necessarily in focus.
You need to ask the user for permissions for this and as a developer we need to check if we have permission.
We can display text and images on the notification. Adding tags lets us update existing notifications. Support is okish on desktop

7) screen orientation API

This is different to the device orientation API. It just tells you if you are in landscape or portrait mode and use it to lock the orientation.
There are 4 possible return values depending on which orientation of your device

Support is ok again (not Safari)

You can use most of these Apis today as enhancements to the user or via polyfills where possible.
We should experiment with these features so that browser vendors know which features we want to use

IE platform status

There are so many more Apis than these 7 so go and try some!

Leave a comment or tweet me