12 groundbreaking APIs to try

APIs are hugely valuable tools for developers. Big players like Google, Apple, Facebook and Mozilla are increasingly allowing developers to make use of their most innovative IP to plug in fantastic functionality into their projects. Here’s our guide to some of the most innovative APIs around right now. 

We'll start with a few APIs you probably should know about – these come from mega companies such as Facebook and Apple (Google has so many APIs we've created a separate Google APIs list). 

As with all things web, anything being done by a for-profit company leads to the arrival of at least five open-source alternatives. So further down the list you'll find eight more APIs ‘from the street’ – if you are lucky, your browser already has support for them out of the box.

For more plugins to try, take a look at our guides to the best JavaScript APIs and HTML APIs. For web design tools, see our website builder roundup, and if you've got files coming out of your ears, these are our cloud storage picks.

01. Facebook Graph API

Whether we like it or hate it – all roads lead to Facebook. The company has focused its once sprawling API ecosystem into the Graph API. The entity of the social space is perceived as a graph data structure, with which third-party applications can interact using traditional graph theory operations.

While the mathematical part of the problem is usually simple, keep in mind that the Graph API allows for incredibly destructive actions such as posting spam. Due to that, devs working on Graph-API-based programs need to be prepared for quite a bit of verification effort. Facebook requires complex authentication flows, which can become problematic especially when working in a pure JavaScript environment. Nevertheless, the API remains the only valid way to interact with Facebook.

02. Apple Pay on the Web

Payment processors and social networks are especially defined by Metcalfe’s law of network usability – the value of a network increases with the square of its number of users.

In light of this, while Apple Pay may not be quite as flexible a friend as MasterCard or Visa, it does unlock payments with the estimated 253 million people that use the service worldwide.

Should you feel like accepting Apple Pay on your website, implement the various JavaScript-based Apple Pay on the Web API interfaces but do keep in mind that the product remains limited to people owning recent iOS devices. Android and Windows users, obviously, will be left out unless they visit the website with an iPhone – one very important reason why you should not use Apple Pay as the only payment processor in your application. And if you're upping your website capability, make sure your web hosting service is up to scratch.

03. MapKit JS

When Apple decided to ditch Google’s mapping application in favour of its own, pundits had a really good time laughing at the Cupertinians – indeed, the first revision of the product made laughable and extremely funny mistakes. Nevertheless, continued engineering investment has brought the product to a point where it is currently a more than viable mapping solution.

Apple, logically, wants to expand the reach of its product while staying off of competitors’ platforms. Due to that, the decision to take to the web was logical. One interesting aspect of MapKit JS is the extremely generous free allowance – you can run 250,000 views and 25,000 service calls per day through its API for free.

04. Stripe API

An old adage says that open-source developers need to eat too – in lieu of revenue, you’ll find that your landlord does not accept download figures. Fortunately, collecting money from customers is not as difficult as it used to be.

Stripe is a one-size-fits-all company – its SDK provides you with a set of widgets for credit card information input. The Stripe API is not limited to one-time transactions either: if you monetise your service via recurring purchases, a useful extension can collect your money.

While Stripe – obviously – cannot take money from PayPal, the company has an impressive range of partners. You can use both Apple and Google Pay along with the Chinese WeChat and AliExpress payment services. Furthermore, the fee structure of Stripe is simpler than that of its blue competitor – especially if you are worried about chargebacks or refunds. Stripe’s way of handling the problem leads to fewer surprises when the actual bill arrives.

05. Ambient Light Events

PDAs with colour displays introduced developers to problems related to screen brightness – crank it up and the battery will run out; too low and users get eyestrain trying to make out details drowned out by ambient light sources. Fortunately, advancing sensor technology made ambient light sensors affordable and today even cheap feature phones come with fully featured sensors, allowing developers to harness them to drive changes in their apps.

Mozilla’s Ambient Light API lets your website collect information from these sensors. Content can then adapt itself to the situation at hand – for example, an eye- and sleep-friendly night mode could auto-activate in the dark. The API is flexible enough to cover both polling and event-driven scenarios.

However, providing users with a manual override capability is well advised. Some users rising before dawn will help themselves to wake up by reading – forcing them to endure a sleep-inducing colour scheme against their will is a sure-fire way to reduce customer satisfaction.

06. Fullscreen API

While browsers do a good job of using screen real estate, hiding the address bar sometimes helps. In this case, the Fullscreen API is a convenient way to deal with the problem and enabling it requires but a few lines of code.

Once requestFullscreen is invoked, the browser is instructed to display the parent element in full-screen mode. This is especially useful when combined with an interactive tag such as an HTML5 <video> markup element.

However, as with other APIs, invoking the method and getting permission are a different kettle of fish – if the user does not agree to full-screen mode, most browsers will not let you hide the address bar.

07. Geolocation API

Getting access to a user’s location is paramount if many business processes are to work seamlessly. The Geolocation API lets you access position information provided by a device’s GPS receivers and other sensors, such as Wi-Fi.

Thanks to its importance for ecommerce, almost all browsers support the Geolocation API, enabling you to find out where the user is located via but a few lines of code. However, keep in mind that because the information returned is sensitive, the browser vendors require all kinds of additional security. For example, the browser will invariably display a permission dialog before providing coordinates, which is vital when it comes to ensuring you have a user’s informed consent.

08. HTML Drag and Drop API

The HTML Drag and Drop API does what exactly what it says on the tin: some HTML elements are marked as draggable, while others are marked as droppable. From that point onward, the user can drag and drop various elements to move them around in the browser, duplicate them, create links between them or even drag in files from outside of their browser.

Alongside obvious DOM events it exposes like drag and drop, it also offers dragover, which activates when the cursor is over a valid drop target, and dragend, which fires when a drag operation ends.

Sadly, nothing is without its shortcomings: for this API, the main problem comes when you’re working on mobile devices. While Drag and Drop worked well with the resistive streams of yore, few mobile browsers offer support on capacitive screens. Due to that, developers are well advised to provide an alternate way to access drag and drop induced functionality for mobile.

09. Intersection Observer API

Finding out if an element is visible isn’t easy, yet it is a very important job. Not only is this information interesting for advertisers but the data can also be used to implement various effects such as infinity scrolling or lazy loading.

The newly introduced Interaction Observer API helps address this. It expects the developer to provide two elements – one parent container and one child whose visibility is to be tracked. Developers then set up a threshold that determines how much of the element must be visible before the callback function is invoked.

This process might sound somewhat complex but works really well in practice. Furthermore, its browser support is exceptionally wide.

10. Push API

Pulling is a classic anti-pattern in the process computer space – sadly, web developers had little choice. The Push API provides a way around the problem. It is based on a traditional push system, where data is actively driven from the server side rather than by client-side requests.

In short, not only does this prevent users’ devices having to regularly issue pull requests to check whether new data is waiting for them but it also allows sites and apps to issue push notifications to mobiles and desktops.

Sadly, such features tend to invite abuse by unscrupulous developers. Due to that, almost all vendors tend to use a browser-based dialogue to get the user to agree to receiving notifications. Another important issue developers need to keep in mind involves quotas – most, if not all browsers limit the amount of messages that can be delivered at any given point in time.

11. Web Audio API

In bygone days, keeping a MIDI file playing in the background was a given. Some law firms in Austria went so far as to annoy their visitors with an orchestra’s worth of classical music.

The new Web Audio API, which currently is a W3C candidate, has nothing to do with this traditional source of nuisances. It, instead, provides a modern graph-based audio output API. This means that you set up a chain of filters, data sources and output sinks such as headphones or speakers. Once done, these are then fed with dynamically generated or locally stored content, resulting in a completely custom experience.

In theory, you could also use this API to simply play back MP3 or Ogg Vorbis files – a valid strategy but one that can be more efficiently delivered with the HTML5 <audio> element. The API can, instead, play out its strengths whenever you need to modify the output; the system provides a wide variety of nodes such as ConvolverNode and WaveShaperNode, which are used to add reverb and distortion to sound respectively.

Another area where the API excels is creating experiences that react to the music. If you’re working on a 2D or 3D project, you can feed variables from the Web Audio API into the canvas or WebGL APIs respectively, creating visualisations or games that react to factors like the audio’s frequency or volume.

12. WebVR API

While Microsoft’s introduction of the Kinect sensor was ill-fated, virtual-reality technologies are here to stay. Mozilla’s WebVR API – also supported by Microsoft Edge – lets your web apps and sites break the fourth wall.

Sadly, the API is just part of what’s needed for a complete VR scene. In particular, the API limits itself to providing a set of classes enumerating displays and position sensors connected to your user’s workstation or laptop. Actually getting something on-screen requires the use of additional APIs dedicated to the creation of three-dimensional scenes optimised for virtual reality.

One particularly useful candidate comes from the company behind the WebVR API – Mozilla’s A-Frame-API lets you create virtual reality scenes. Do, however, keep in mind that the development of such scenes is a completely different animal to the development work done on websites – yours truly’s painful experience shows that some developers will have a very hard time adapting their brain to the workflow required for the creation of three-dimensional objects. 

This article was originally published in net, the world's best-selling magazine for web designers and developers. Subscribe here.

Read more:

• The best monitors for programming 2019
• 18 stunning parallax scrolling websites
• 19 cool CSS animation examples to recreate