5 Handy ‘Serverless’ APIs for Web Development
Why spend time building things that you can buy or rent?
For those who have never heard of the term “BaaS” before, it stands for “Backend as a Service” and refers to third-party API services that can be integrated into your applications to build out specific functionality quickly.
For example, imagine how much work it’d take your team to build a single sign-on service for your product along with an admin interface for provisioning and managing user permissions. Sound like a pain? Well good news, there are plenty of services that you can drop-in to achieve this without writing a single line of server code.
In fact, these days there are a number of successful companies who have been able to produce compelling products with barely any of their own server-side code.
In this article, we’ll introduce five API service providers that address common features and take a look at how they work.
1) Auth0 for Authentication
Imagine owning several server-rendered web apps, single page apps, APIs, and mobile apps that all need to authenticate and authorize a shared set of users?
Auth0 makes this easier with its authentication platform. Auth0 can be integrated a number of ways including hosted login pages and fully-integrated forms built using its software development kits (SDKs).
For example, the hosted login page can be launched with a tiny amount of JavaScript code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'load'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> webAuth <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">auth0<span class="token punctuation">.</span>WebAuth</span><span class="token punctuation">(</span><span class="token punctuation">{</span> domain<span class="token punctuation">:</span> <span class="token string">'YOUR_AUTH0_DOMAIN'</span><span class="token punctuation">,</span> clientID<span class="token punctuation">:</span> <span class="token string">'YOUR_CLIENT_ID'</span><span class="token punctuation">,</span> redirectUri<span class="token punctuation">:</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href<span class="token punctuation">,</span> audience<span class="token punctuation">:</span> <span class="token string">'https://YOUR_AUTH0_DOMAIN/userinfo'</span><span class="token punctuation">,</span> responseType<span class="token punctuation">:</span> <span class="token string">'token id_token'</span><span class="token punctuation">,</span> scope<span class="token punctuation">:</span> <span class="token string">'openid'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> loginBtn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'btn-login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> loginBtn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> webAuth<span class="token punctuation">.</span><span class="token function">authorize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Auth0 also provides an admin interface for managing users and permissions.
Auth0 even offers nice extras like multi-factor authentication and breached password detection.
2) ButterCMS for Blogs and Content Management
So you’ve built a website using your favorite tech stack (eg. Node.js, Rails, React), now you need to add a client-friendly blog and content management system your application — something as simple to use as WordPress.
Building a blog and CMS backend are probably the least exciting things you want to be working on. Luckily, ButterCMS makes this easy.
ButterCMS provides APIs and SDKs for integrating dynamic content into an application, along with a client-friendly admin interface for content editing and publishing.
For example, fetching your blog posts or page content as JSON can be done with this simple code using the ButterCMS JavaScript client:
|
1 2 3 4 5 6 7 |
butter<span class="token punctuation">.</span>post<span class="token punctuation">.</span><span class="token function">list</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> butter<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">retrieve</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"homepage"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
ButterCMS’s admin interface is simple and intuitive so you don’t need to worry about your content editors bugging you about how to do things. (Disclosure: The author is a developer for ButterCMS).
3) FormKeep for Forms
You’ve built a simple static website, but now you need to add a custom designed contact form that can integrate with your CRM and send an auto-response email. Building a custom server application to handle the form’s POST requests sounds like a painful chore, right? FormKeep exists to save you from that trouble.
You use FormKeep by simply pointing your forms to their endpoint:
|
1 2 3 4 5 |
<span class="token tag"><span class="token punctuation"><</span>form <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://formkeep.com/f/df42a5f6bd1a<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>POST<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>input <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>input <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>input <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>form<span class="token punctuation">></span></span> |
FormKeep lets you setup custom response emails and integrations with practically any CRM or backend using Zapier.
4) Moltin for E-commerce
If you’re looking to build an e-commerce website or app, take a look at Moltin, which offers a wide set of API’s that support everything from inventory, shopping carts, checkout, and payments. Moltin is incredibly useful for offering cross-platform shopping experiences, or if you want to build unique web experiences using your preferred tech stack.
Moltin’s API is extensive, but to get an idea of what it looks like, here’s an example request that adds a product to a user’s shopping cart:
|
1 2 3 4 |
curl -X POST https://api.moltin.com/v2/carts/supercart/items \ -H "Authorization: Bearer XXXX" \ -H "Content-Type: application/json" \ -d '{"data":{"type":"cart_item","id":"9bbf14aa-15ae-42f4-8eed-d860a7c8046f","quantity":1}}' |
5) SendBird for messaging and chat
How many times have you built messaging or chat functionality into an application? If your answer is more than once, chances are you know you’d prefer someone else take care of it the next time around.
SendBird offers SDKs that cover the whole package from front-end user interface to backend API’s, so you don’t have to worry about meticulously building chat interfaces or scaling the backend to millions of concurrent users.
For example, posting a message from a user in JavaScript is as simple as three lines of code:
|
1 2 3 4 5 |
channel<span class="token punctuation">.</span><span class="token function">sendUserMessage</span><span class="token punctuation">(</span>message<span class="token punctuation">,</span> data<span class="token punctuation">,</span> customType<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>response<span class="token punctuation">,</span> error<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
SendBird supports various implementations including one-on-one messaging, group chat, and open channels. It also offers nice advanced features such as read receipts, spam flood protection, and moderation tools.
Wrap Up
We love hearing about new backend service providers, so let us know in the comments or submit them to our curated list on GitHub.
Feature image via Pixabay.
