This post serves as a continuation of the previous article, which focused on the App Modernization scenario. In this installment, we will delve into the process of designing a Cloud native Single-Page Application (SPA) using Angular.

Designing a Cloud native SPA using Angular requires a solid understanding of Cloud native principles, an architectural approach that separates front-end and back-end components, and the utilization of Angular’s powerful features. By following these guidelines and leveraging Cloud native infrastructure, organizations can create highly scalable and resilient SPAs that deliver exceptional user experiences.

Overview

Angular is a popular framework for building web applications, known for its robustness and scalability. By leveraging the power of Angular, developers can create efficient and responsive SPAs that are optimized for the Cloud environment.

Designing a Cloud-native SPA using Angular requires careful consideration of various factors such as

• Angular best practices, microservices architecture.
• Deployment approach, App Service, containerization.
• integration with Cloud-native services, APIM, Azure Functions
• caching mechanisms
• , and monitoring.

By following these best practices, developers can create highly scalable and efficient applications that are optimized for the Cloud environment.

We will delve into details with each topic in separate posts.

In this post, we will cover getting started with Angular code, setting up the development environment, creating a sample application, and deploying to Azure App Service from Visual Studio Code.

TypeScript

Angular is a development platform, built on TypeScript. As a platform, Angular includes:

• A component-based framework for building scalable web applications.
• A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more.
• A suite of developer tools to help you develop, build, test, and update your code.

With Angular, you’re taking advantage of a platform that can scale from single-developer projects to enterprise-level applications. Angular is designed to make updating as straightforward as possible, so take advantage of the latest developments with a minimum of effort. Best of all, the Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators.

https://angular.io/guide/what-is-angular

Angular latest version is:

TypeScript is JavaScript with syntax for types.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

• TypeScript Code is converted into Plain JavaScript Code: TypeScript code can’t be natively interpreted by browsers. So if the code was written in TypeScript, it gets compiled and converted into JavaScript. This process is known as Trans-piled. With the help of JavaScript code, browsers are able to read the code and display it.
• JavaScript is TypeScript: Whatever code is written in JavaScript can be converted to TypeScript by changing the extension from .js to .ts.
• Use TypeScript anywhere: TypeScript can be compiled to run on any browser, device, or operating system. TypeScript is not specific to any single environment.
• TypeScript supports JS libraries: With TypeScript, developers can use already existing JavaScript code, incorporate popular JavaScript libraries, or call the TS Code from native JavaScript code.

Advantages of using TypeScript over JavaScript 

• TypeScript always points out the compilation errors at the time of development (pre-compilation). Because of this getting runtime errors is less likely, whereas JavaScript is an interpreted language.
• TypeScript supports static/strong typing. This means that type correctness can be checked at compile time. This feature is not available in JavaScript.
• TypeScript is nothing but JavaScript and some additional features i.e. ES6 features. It may not be supported in your target browser but the TypeScript compiler can compile the .ts files into ES3, ES4, and ES5 also.

Disadvantages of using TypeScript over JavaScript

• Generally, TypeScript takes time to compile the code.

Application Development

In this section, let’s talk briefly about Application development guidelines for Angular.

These guidelines help developers follow a standardized approach and ensure consistency throughout the development process.

1. Folder Structure:

– Organize your Angular project into logical folders such as components, services, models, and assets.

– Use a feature-based folder structure where each feature has its own folder with related components, services, and modules.

2. Modular Development:

– Break your application into smaller, reusable modules.

– Each module should encapsulate a specific functionality or feature of the application.

– Use lazy loading to improve the initial loading time of the application.

3. Component-based Architecture:

– Use components as the building blocks of your application.

– Keep components small and focused on a single responsibility.

– Use input and output properties to establish communication between parent and child components.

4. Code Organization:

– Follow the Single Responsibility Principle (SRP) to keep your codebase maintainable.

– Separate concerns by keeping the template, styles, and logic separate in the component file.

– Use Angular CLI to generate components, services, and modules, and follow the naming conventions.

5. Data Binding:

– Use one-way data binding for simplicity and performance, unless two-way binding is necessary.

– Avoid using excessive two-way data binding as it may lead to performance issues.

6. Service and Dependency Injection:

– Use services to share data and functionality across components.

– Leverage dependency injection to provide services to components.

– Use providedIn property in services to provide them at the root level or at a specific module.

7. Routing and Navigation:

– Use Angular Router to handle navigation between different views.

– Define routes for each view and use route parameters to pass data between views.

8. Error Handling and Logging:

– Implement proper error handling and logging mechanisms.

– Use Angular’s error handling features like ErrorHandler to catch and log errors.

9. Performance Optimization:

– Use Angular’s Change Detection strategy and OnPush change detection to improve performance.

– Minimize the use of heavy computations in the template.

– Use trackBy function in ngFor loops to track changes efficiently.

10. Testing and Debugging:

– Write unit tests for your components, services, and other Angular entities.

– Use Angular’s testing utilities like TestBed, ComponentFixture, and Jasmine for testing.

– Debug your application using Chrome DevTools and Angular’s built-in debugging features.

By following these application development guidelines for Angular, you can ensure that your application is maintainable, scalable, and follows the best practices recommended by the Angular community.

Angular Best practices

Getting started with Angular: Angular – Introduction to the Angular docs

Set up your environment: Angular – Setting up the local environment and workspace

Take a look at Agular’s best practices for development

• Angular Code Standards
• Code control Flow              
• Code Guideline

Application structure

https://angular.io/guide/file-structure

You develop applications in the context of an Angular workspace. A workspace contains the files for one or more projects.

A project is a set of files that comprise a standalone application or a shareable library.

The Angular CLI ng new command creates a workspace.

ng new <my-project>

ng new <my-project>

When you run this command, the CLI installs the necessary Angular npm packages and other dependencies in a new workspace, with a root-level application named my-project. The workspace root folder contains various support and configuration files, and a README file with generated descriptive text that you can customize

By default, ng new creates an initial skeleton application at the root level of the workspace, along with its end-to-end tests. The skeleton is for a simple Welcome application that is ready to run and easy to modify. The root-level application has the same name as the workspace, and the source files reside in the src/ subfolder of the workspace.

This default behavior is suitable for a typical “multi-repo” development style where each application resides in its own workspace. Beginners and intermediate users are encouraged to use ng new to create a separate workspace for each application.

Angular also supports workspaces with multiple projects. This type of development environment is suitable for advanced users who are developing shareable libraries, and for enterprises that use a “monorepo” development style, with a single repository and global configuration for all Angular projects.

https://angular.io/guide/file-structure#multiple-projects

A multi-project workspace is suitable for an enterprise that uses a single repository and global configuration for all Angular projects (the “monorepo” model). A multi-project workspace also supports library development.

Setting up for a multi-project workspace

If you intend to have multiple projects in a workspace, you can skip the initial application generation when you create the workspace, and give the workspace a unique name. The following command creates a workspace with all of the workspace-wide configuration files, but no root-level application.

Workspace Config Files

Application Project Files

Inside Src/ App Folder

Based on your requirements, you should plan to create multiple modules for Angular Project.

These applications with modules, should facilitate loading dependencies on demand (Lazy Loading). 

Each Module is responsible for its respective Components, Templates, and services.

The application has also shared components and services that are being used by both modules.

Some common dependencies can be defined as common services that help other services to complete the flow of control.

Some Independent components may not be associated with any module ex “login” and “onboarding” etc.

We have below building block of the application.

• Modules: – Module 1 and Module 2
• Components: – Respective to modules
• Templates: – Respective to components
• Services: –   Respective to modules
• Models: – Respective to templates
• Shared: – Shared components and shared services
• Common: – Common services and dependencies
• Assets: – Application assets

Modules

Module is responsible for loading its components, templates, and dependencies.

Your two modules “Module1” and “Module2” which are being loaded on demand using routing. 

Module1 modules will load its components (ex: – My appointment) based on request and it will register all dependencies.

Components

Component is responsible for loading the associated template and calling respective module services.

For example, the Module Component will call Module Service only.

After getting the model from services it will send the model to Templates.

If any some short logic is required, we write here.

Also, we do major coding for component hooks.

Templates

The template is associated with components, and it contains HTML and presentation logic.

After getting the model from the component, it binds the model property to HTML controls and performs UI validation.

Services

Services are being used as injector; we inject services according to requirements.

For example, Coach Service is injected in all coach components, same for Member.

These Services (Coach and Member) have model binding logic and other logic and also these services are called Common services.

Models

Models are associated with HTML templates.

Models have properties according to HTML controls.

Some Models are nested models according to API response but both properties are decoupled so we do mapping a service level.

Shared

We have some common UI, so we have created shared components and those components has shared service that help those component bind logic.

Common

Common is a kind of logical layer across applications.

This layer has common services and common functionalities. 

Common services are being called by Coach, Member, and Shared Services. Example Common API service.

 Assets

Assets contain application assets, and these assets are shared across applications.

CSS files, Image files, font files, JS files, and .pdf files.  

Code control Flow

Application load first app module and app component which are default for Angular application.

Majorly app modules load routing table and routing files.

Once any Request comes routing check request should go to Module1 or Module2.

The component is loaded according to the request and component load associated template.

Example: – “My Request” goes to Module1 and loads its component. “My Request Component” component call “Module1 service” service and “Model1 service” calls  “common API service”.

Common API service CRM API and send back data to Model1 service.

Model1 service loads data in memory and binds that data to the model.

After having data to model and model sent back to the component, the component will send data to template.

Coding Guideline

1. Every component should come through the routing table.
2. Every route should be secure except for independent components. 
3. Code should have modularity and reuse code.
4. Common UI will have a common/shared common component, avoiding duplicate HTML.
5. Each component should call the respective service, exp: MyRequest component will call Module1 service.
6. UI will have its own model and that model will be mapped on service.
7. The component will have only life cycle-related (hooks) logic.
8. Common service should not be called by component directly.
9. Every API response will have a model to better understand and respond to transform repose to the model.
10. Avoid conditional logic at HTML level.
11. Avoid declaring unnecessary variables or objects.
12. Place utility codes in a common place like date format or number format related.

 Angular Best Practices:

Built with TypeScript by Google developers, Angular is an open-source JavaScript framework designed for building front-end applications.

Angular 2+ is a successor to Angular.js, rewritten from scratch using TypeScript instead of JavaScript, which helped avoid many issues related to JavaScript and ensured following best practices and integrations with IDEs thanks to static typing and the class-based oriented object features of TypeScript.

Angular is not just a framework but an entire platform packed with features that make front-end web and mobile development more manageable. Also, thanks to projects by the community, you can build native apps for mobile (Ionic and NativeScript) and desktop (Electron) devices.

Angular is like other modern JavaScript libraries, such as React and Vue.js, and uses many shared concepts. While React is more popular among web developers worldwide, Angular is suitable for enterprise apps.

The Angular team has adopted best practices from the beginning by using TypeScript for Angular development, ensuring type safety, better error handling, and integrations with IDEs.

Angular 12 has enabled the strict mode by default, ensuring you follow strict rules that help you build error-free and solid apps. In this article, we have seen some of the best practices that you can follow to build scalable and easily maintainable apps.

Set up Angular development environment

Follow the post to set up your development environment. <LINK>

Download application from https://angular.io/tutorial/first-app/first-app-lesson-01

Open code from Visual Studio Code and Run below commands:

npm install

ng serve -o

Deploy Angular to Azure App Service

There are multiple ways to achieve this. We can use the Local code and deploy to App Service or Push Code to Git and deploy to App Server.

Later, you can create DevOps pipeline for automated build and deployment.

Local Git deployment to Azure App Service

As a first step, we will deploy our code from the options below and then configure the DevOps pipeline.

Deploy from local Git repo – Azure App Service | Microsoft Learn

• Developed an Angular 6 web application in Visual Studio Code.
• Ran the web app on Node 10.6.0.
• Built the web app using the Angular CLI.
• Created an Azure App Service plan and web app using the Azure portal.
• Modified Web App settings in the Azure portal.
• Used the Azure App Service extension in Visual Studio Code to deploy the web app.

Install Azure App Service Extension in VSC

Once Installed, click on Sign into Azure.

It will redirect for login and post-login; you will see the below screen.

Create App Service in Azure Portal

Create App Service in Azure Portal:

Install and Configure GIT

GIT Must be installed:

Git – Downloading Package (git-scm.com)

Configure Local Git:

You have 2 options.

Select the Web App in VSC, Right click, and select the Deployment Source

Login to Azure Portal and select the Deployment Center:

https://angular-poc2.scm.azurewebsites.net:443/angular-poc2.git

Deploying the App

Build the web application before deploying with the ng build command.

This command will create the below directory containing a transpiled, minified, ready-to-deploy version of your application.

Select the app.

OR

run the below command.

url is copied from Azure App Service Deployment:  Git Clone Uri:

https://angular-poc2.scm.azurewebsites.net:443/angular-poc2.git

git remote add azure <url>

Validate the deployment:

Login to Azure Portal and validate the deployment.

Setting up DevOps pipeline for Angular

Refer below how to set up your CI/CD pipeline for Angular Apps and get the application deployed to Azure App Service.

It’s covered in this Blog: Setting up DevOps pipeline for Angular – Rajeev Singh | Coder, Blogger, YouTuber (singhrajeev.com)

Conclusion

In conclusion, this post has provided an overview of designing cloud-native applications using Angular. We discussed Angular best practices, set up the development environment, and deployed the application on Azure App Service. By following the steps outlined in this post, you will have a solid foundation for getting started with Angular and deploying your code to the cloud.

Stay tuned for upcoming posts on this topic. We will dive deeper into advanced Angular concepts, explore cloud-native features, and share tips and tricks for optimizing your applications.

Watch this space for more exciting content!

References

https://angular.io/guide/styleguide

Tutorial: Deploy an Angular app on Azure Static Web Apps | Microsoft Learn

Deploying an Angular application with Azure Pipelines | by Henrique Siebert Domareski | Medium

Deploy files to App Service – Azure App Service | Microsoft Learn