In this article, we’ll explore two different architectures for building applications with Angular and MongoDB:
- client-server architecture
- serverless architecture
What is Angular?
We’ll define Angular by looking at it from three different angles (no pun intended).
What apps can I build with Angular?
Angular is platform-agnostic—it’s not limited to the browser. The only requirement is that Angular has to be executed by a JavaScript engine. This flexibility allows us to build different kinds of applications with Angular:
- Dynamic web sites: This is the default behaviour for Angular and arguably, what most people use it for.
- Static web sites: On the server, Angular applications can be compiled to static HTML files. The HTML files are then served to the client and rendered by the browser. This technique, called server-side rendering, improves load performance and SEO (search engine optimization).
- Mobile applications: Third-party frameworks, such as NativeScript and Ionic, allow you to use Angular to build cross-platform mobile applications for Android and iOS.
What language does Angular use?
Angular was built with TypeScript. What’s more, you build Angular applications and libraries with TypeScript.
TypeScript is a superset of JavaScript, adding a type system on top of every feature JavaScript already has. If you’re a JavaScript developer, you’re almost there! Learning TypeScript won’t feel like learning a whole new language. If you’re coming from a statically typed language, there’s a high chance you’ll be more comfortable learning TypeScript rather than learning JavaScript.
Who created Angular?
Angular was built and released by Google. The project is led by a dedicated team at Google and by its community. Angular is free and open source.
What is the difference between Angular and AngularJS?
AngularJS is a web-application framework released in 2010 by Google. Angular is a complete rewrite of AngularJS, done by the same team at Google. AngularJS is sometimes referred to as Angular 1, and Angular as Angular 2+. However, the official names for the two are AngularJS and Angular.
Angular releases follow the semantic versioning standard. According to that standard, significant new features are released only with major versions. That’s why the major releases of Angular are differentiated by the first digit of their version, such as Angular 4, Angular 11, Angular 12, and so on.
The important takeaways are:
- Angular is a completely different framework from AngularJS.
- The changes between Angular’s major versions, for example between Angular 11 and Angular 12, are mainly improvements and new features that build on top of the previous version.
What are the benefits of Angular?
Availability
Angular comes with built-in packages for everything you need to create a modern web application. From forms and animations, through accessibility and internationalization, all the way to testing, Angular has a solution. The built-in packages are maintained by the Angular team at Google which guarantees support and consistency.
Reusability
Angular applications are built using components. Each component represents a part of the screen. Components can have multiple instances. Thus, they can be used in several parts of the application. They can also be packaged into libraries and distributed across different applications, making them highly reusable.
Cross platform
Angular can be used for creating both web applications and native mobile applications.
Does MongoDB support Angular?
In short, yes, you can use MongoDB along with Angular to build modern web and mobile applications.
You can take several different paths to achieve that. In the following sections, we’ll explore two of them: the client-server architecture and the serverless architecture.
Client-server architecture
The traditional client-server software architecture divides the system implementation into a client and a server.
The client allows the user to request, view, and interact with the data. The client can be a web browser, a native mobile application, or even a desktop application.
The server, on the other hand, processes requests from the client, and stores and retrieves data from the database.
The MEAN stack is a JavaScript-based technology stack, implementing the client-server architecture. Let’s explore what role Angular plays in the MEAN stack.
Angular in the MEAN stack
The technologies constructing the MEAN stack are MongoDB, Express, Angular, and Node.js. Angular is used for building the client side of the application. As we saw earlier, that can be a static or a dynamic web site, or even a mobile app.
Node.js and Express are the technologies responsible for implementing the server side of the application. The communication protocol between the client and the server is HTTP.
The data access layer is implemented by the MongoDB NodeJS driver. The server uses the driver to store and retrieve data from the MongoDB database. The database can be hosted on the same physical server or in the cloud, using MongoDB Atlas.
Serverless architecture with Atlas App Services
Serverless architecture is a software design pattern which incorporates third-party cloud platforms to manage server-side code.
Serverless architecture provides an alternative to the traditional client-server model. Instead of implementing and hosting your own server, you upload your server-side logic to a “serverless” platform in the cloud. There’s still a server where your code is hosted, but you’re delegating its management to the serverless platform.
Function-as-a-Service (FaaS) is one category of serverless architecture. With FaaS, you’re deploying functions to the serverless platform and then calling these functions from your client application.
For example, instead of building a Node.js server, you can abstract away the communication with your MongoDB database by placing it in MongoDB Atlas Functions. Then, you can call these from your Angular application.
These functions are the server-side logic in your application architecture. With this approach, you’re saving the time and effort of building and maintaining a server.
Summary
In this article, we explored the client-server architecture and the serverless architecture in the context of application development with Angular and MongoDB.
The traditional client-server approach requires you to administrate your server, from setting it up, to scaling and maintaining it during the whole lifecycle of your software system.
The benefits of going serverless are improved productivity, automated scalability of your server, and lower costs.
If you’re interested in learning more about serverless architecture with Angular and Atlas App Services, check out the Introduction to Atlas App Services for web developers.