This course is designed to help you master the skills of designing and building cloud-native applications.
Observe first hand the end-to-end process of building a sample cloud-native application using React, Go, MongoDB, and Docker. By taking this course you'll not only get to see firsthand the skills required to create a robust, enterprise-grade, cloud-native application, but you'll also be able to apply them yourself as all code and deployment assets are available for you to perform your own deployment:
Source Code:
https://github.com/cloudacademy/voteapp-frontend-react
https://github.com/cloudacademy/voteapp-api-go
Full Install Script:
https://github.com/cloudacademy/language-vote-app
Learning Objectives
What you'll learn:
- Understand the basic principles of building cloud-native applications
- Understand the benefits of using React for frontend web development
- Understand the benefits of using Go for backend API development
- Understand the benefits of using MongoDB as a database system
- And finally, you’ll learn how to package and run microservices as lightweight containers using Docker
Demonstration
This training course provides you with several hands-on demonstrations where you will observe first hand how to
- Build a React-based web frontend
- Build a Go-based API
- Deploy and configure a MongoDB database
- Deploy the full end-to-end application to Docker running locally
Prerequisites
- A basic understanding of web-based software development
- Previous exposure to containers and containerization - in particular, docker
Intended Audience
- Anyone interested in learning how to architect cloud-native applications
- Anyone interested in using modern development tools such as React, Go, MongoDB and Docker
- Anyone interested in containerization
- DevOps Practitioners
Okay, welcome back. In this lecture, I'm going to provide you with a quick, high-level review of the architecture used to create this application. In doing so, you will understand the messaging and networking requirements to make this application functional, and also, as used in the setup in this course and the next course when we deploy it into Kubernetes.
From an end user point of view, the application provides a web frontend, which allows the end user to vote for their favorite programming language. As the application initially launches, an AJAX call is made to the API to request the particulars for each displayed programming language. In this case, three AJAX calls are made. After the page has completed loading, the end user can then click on any one of the +1 voting buttons to vote for their preferred language. This again results in an AJAX call that is directed at the API.
The API, as we now know, has been developed in Go and simply reads and writes to a back-end MongoDB database. The high-level architectural view, as shown here, documents the composition of the application. The application consists of the following three components, packaged as containers.
- The front-end: a React-based web application, which provides a voting interface.
- The API: a REST-based API developed in Go - this provides typical Create, Read, Update and Delete API endpoints. The front-end web application generates AJAX calls which are then sent and serviced by this API.
- The database: a MongoDB database. The API connects to the database and performs the required read/writes.
In the next course, we'll set up MongoDB within Kubernetes as a replica set for redundancy purposes.
The following sequence diagram shows the messaging as used within the application when the application first loads. Key points of this diagram are:
- The browser loads the main application, HTML, JavaScript and CSS files.
- Each programming language component makes an individual AJAX call to the /languages/{name} API endpoint to retrieve the details about the programming language keyed on the programming language name.
- The API, in turn, connects to the back-end MongoDB database and performs a db.collection.find, filtered on the programming language name to return the document that contains all the details about the programming language.
- A response containing the programming language then flows back all the way to the browser.
- The browser renders the final full application view.
The following sequence diagram shows the messaging as used within the application when an end user clicks on the +1 voting button for a particular programming language. Key points of this diagram are:
- Clicking the Vote button for any one of the three programming languages will result in an AJAX call being made from within the Vote component to the API endpoint languages/{name}/vote.
- The API, in turn, connects to the back-end MongoDB database and performs a db.collection.updateOne, filtered on the programming language name and increments the Vote field on the respective document.
- An update success code is returned in the response and is passed all the way back to the originating AJAX call.
- The browser renders and increments the respective Votes div within the Vote component.
Okay, that completes this lecture on a brief but important high-level architectural review of the entire cloud-native application.
Go ahead and close this lecture and we'll see you shortly in the next one where we'll review the React-based front-end code base, exploring the key components.
Jeremy is a Content Lead Architect and DevOps SME here at Cloud Academy where he specializes in developing DevOps technical training documentation.
He has a strong background in software engineering, and has been coding with various languages, frameworks, and systems for the past 25+ years. In recent times, Jeremy has been focused on DevOps, Cloud (AWS, Azure, GCP), Security, Kubernetes, and Machine Learning.
Jeremy holds professional certifications for AWS, Azure, GCP, Terraform, Kubernetes (CKA, CKAD, CKS).