How to Build a Stateful Serverless Cloud Web Application?
This article demonstrates how to build a stateful web application using Nimbella. I will use a Stock Trading application as the running example, and highlight how a developer can build the complete application, consisting of a frontend and a stateful backend. This application mimics the functionality of a transactional application that buys and sells stocks. We won't be dealing with real money or real stock transactions.
As a developer, your primary concern should be the innovation you want to realize into a cloud application. Nimbella is built to allow you to focus on your frontend and backend logic, and with a single command, deploy and run your application reproducibly in the cloud, served from a URL that is dedicated to your work. Simply put, Nimbella's built-in capabilities and security save you time and make all aspects of cloud development easy.
Here's the roadmap for the rest of the article.
- Application Architecture
- The Frontend
- Backend APIs and Stateful Implementation
- Code to Cloud in 60 Seconds with Nimbella
1. Application Architecture
I am going to describe the trading application used for this demonstration in this article. It consists of an application frontend that is delivered to the browser as the user interface (UI). Every unique visitor to the stock trading application is allotted virtual dollars to build their own portfolio. The frontend performs backend operations to execute the desired transactions - which include general account management, buying a stock, selling a stock, and looking at one's virtual portfolio. This is a stateful application which has to remember the site visitor, their transactions, and the portfolio specific to them.
The following diagram illustrates how the UI interacts with the backend APIs, here specifically to buy a stock.
Once a visitor selects which stock they want to buy in the UI, the details are transmitted to the backend. The transaction is recorded in a way that is unique to each visitor using Nimbella's integrated Key-Value (KV) data store.
Already you can see there are several elements of this application one has to think about for the frontend, the backend, and the data store.
- How do you host the frontend?
- How do you run the backend?
- How do you secure the data store?
- Did I mention CORS?
- Will this scale with users?
These are only some of the questions you might ask yourself, and you haven't even started building. At Nimbella, we want you to just build. We take care of all these boring challenges so you don't have to. Your business logic is the frontend UI, the APIs you want to create, and the implementation of those APIs. The rest is on us.
OK then, let's make it easy. You need a frontend. You need to define the APIs and implement them. Let's get started.
2. The Frontend
There are many frameworks out there to build a frontend. The way we built the UI, it is purely static content that can be served from a content delivery network (CDN). Using static assets allows the UI to be delivered quickly and securely from pre-rendered content. This removes the need to run a web server strictly for serving files and is a model for building modern web applications using a Jamstack. There are many frameworks for creating pre-rendered content. They include Gatsby, Hugo, React, and Vue as some examples. With Nimbella, you can use the framework you're already familiar with and accustomed to using. Nimbella's build and deployment system will pick up the static assets from a predefined folder called "web" and deploy them automatically to a CDN.
Above is a screenshot of the frontend we built for Stock Trading using React. Nimbella will automatically configure the cache policy on the CDN during development, and allows you modify the caching duration when you're ready to deploy to production. This is so that while you're developing, you can actually test and preview your project in the cloud, as it will eventually appear and function. Additionally, the frontend is automatically configured to allow API calls to your backend functions, without you having to worry about Cross-Origin Resource Sharing (CORS). Nimbella allocates a dedicated domain name, secured with an SSL certificate, for your project. This is where your frontend application will be served from. All API calls will be relative to this domain name.
3. Backend APIs and Stateful Implementation
The backend implements the account management and stock transactions. Each of the tasks is handled by a specific API and implementation. Let's take a look at what capabilities we need on the backend.
- New Account (see the code): this API allocates a new account id for each unique visitor and initializes their account with virtual dollars so they can build their portfolio. This is a stateful operation that has to update a data store.
- Get Cash Balance (see the code): this API retrieves the account balance for a given user id. It is used to show the available cash in the user account. This too is a stateful operation as the data store is queried to determine the account balance.
- Get Stock Positions (see the code): this API retrieves the stock symbols and quantities held in a given account. This operation also queries the data store.
- Buy Stock (see the code): this API is called by the UI to purchase a stock. The implementation checks if the account balance is sufficient to cover the transaction, then executes the trade. The data store is updated to reflect the new cash balance and stock positions.
- Sell Stock (see the code): this API is called by the UI to sell a stock. The account balance in the data store is credited with the corresponding stock cash value, and the portfolio is adjusted to remove shares sold for the given stock symbol.
- Get Stock Description (see the code): this API retrieves various details about a particular stock to be displayed in the UI. We use an external service provided by IEX Cloud to retrieve a stock's PE ratio, Market Cap, and a description of the Company associated with the stock. This is a stateless API.
- Get Stock History (see the code): this API retrieves the stock price history from IEX Cloud and plots the historical stock price in the UI. This is a stateless API as well.
With this set of APIs, we have the functionality needed to implement the backend. The frontend will call each of these APIs depending on the user interactions from the browser. Each of the APIs is implemented in Node.js, and is a standalone function. This keeps separation of concerns between the APIs and reduces the attack surface of any one function because it handles exactly one operation. The frontend references the APIs relative to the domain name allocated to the project.
What about the datastore? Several of the APIs above are stateful and interact with storage to retrieve account and transaction details. Every Nimbella developer can create stateful functions right out of the box. This is done by deep platform integration so that your functions and storage are co-located in the cloud for fast and secure access. You don't provision infrastructure or a database because we've done it for you. In this example, the implementation uses Nimbella's Key-Value store to record the application state. The data store is automatically backed up, and is only accessible from your functions.
4. Code to Cloud in 60 Seconds with Nimbella
The entire application is organized as a single Nimbella project and available on GitHub. The Nimbella command line tool called
nim will deploy the entire project to a dedicated domain name unique to every Nimbella developer. To get started, visit the Nimbella signup page to create an account and download
The project structure is such that all static assets for the frontend are built and stored in a folder called
web . The functions which implement the APIs are stored in a dedicated package located in the folder
To deploy this project to Nimbella, you run
nim project deploy from your terminal. First, export the IEX Cloud API key to your environment.
You can deploy the project directly from GitHub without cloning the project locally.
nim project deploy github:nimbella/demo-projects/trade
For active development, you can clone the project locally and activate the incremental deployment features which can watch for changes in your project and continuously mirrors you local changes to the cloud.
Every Nimbella project is accessible from a dedicated domain name unique to your account. You can see the final result as an example on our website.
Nimbella is the Cloud made easy. You can build complete and stateful cloud applications using the technologies you know, and deploy to the cloud with no infrastructure for you to worry about, ever. We take care of the boring details of the cloud so you don't have to. That means you can develop your exciting ideas into real world applications quickly, securely, and reliably.
We'd love to hear from you. What can we help you build next?
- How to deploy Node.js functions on Nimbella
- Kick-Start Your Serverless Journey
- AWS re:Invent Serverless Highlights
- Opportunities in the Wake of the AWS Juggernaut
- FaaS Wars: Serverless & Virtual Robot Competition
- #DeveloperIPL Online Hackathon Results & Feedback on Nimbella's Integration for Postman
- How to connect to the 3rd party database such as MySQL at Nimbella (example in Java)
- What can you do with the Nimbella Workbench?
- Deploy your Shopify Storefront to Nimbella
- Not All Serverless Platforms Are Created Equal
- Nimbella + Netlify: Uplevel Your Development Speed
- How we learned to Jamstack, Our Caputron Story.
- Commander for Microsoft Teams - Your Custom Bot that runs on your Command!
- How to Build a Stateful Cloud App on Nimbella vs. AWS
- Starter Kit and Resources to Build a Serverless Cloud Application
- How to Build Serverless Slack Apps and Commands
- How to Set up your Serverless Environment and Get Started in Less than 2 Minutes!
- How to Quickly Deploy Stateful Serverless Apps with Nimbella?
- What is Serverless Computing? 3 reasons to start now
- How to Build a Serverless Slack App in Minutes.
- How to Manage your Netlify Website from Slack?
- How to Build a Serverless Slack Command in minutes
- How to Build a Stateful Serverless Cloud Web Application?
- How to Create an Optical Character Recognition (OCR) Application?
- Development at the Speed of Innovation – Nimbella, the Serverless Cloud
- Software Security Features on Enterprise Serverless Slack Apps Enabled by Nimbella Commander
- Coronathon India’s first demo day has 18 projects to help fight COVID-19
- See the time in different cities on Slack with Nimbella Commander
- Greet your friends in their native language in Slack with Nimbella Commander
- Install Commander on your Mattermost Instance
- How to Fetch your Digital Ocean Billing Info on Slack?
- How to Stay Updated with Coronavirus Statistics on Slack?
- Create BlueJeans meetings on Mattermost using Commander
- How to Fetch your AWS Billing Info on Slack?
- Get your Datadog billing info in Slack with Nimbella Commander
- Serverless Slack Apps and Slash Commands
- How to use Slack Effectively with Nimbella Commander?
- How to Create a multi-user Chatroom Hosted on Serverless Cloud?
- Using Docker actions, running Golang, and other fun things with OpenWhisk
- The duality between serverless functions and APIs
- Serverless HTTP handlers with OpenWhisk
- Serverless functions in your favorite language with OpenWhisk
- Run Swiftly: precompiled Swift actions
- Performance debugging for serverless functions using the Cloud Shell
- Locally debugging OpenWhisk actions
- Composing functions into applications
- A Serverless Composition of Functions
- The Serverless Contract
- The dawn of the Cloud Computer
- Security and Serverless Functions