How Angular 17 Transformed Our Web Application at Halodoc

In our ever-evolving digital landscape, staying ahead of the curve is paramount, with seamless user experiences and top-notch performance being non-negotiable. With Angular 17, the latest iteration of this robust front-end framework, Halodoc always ready to elevate its web application to new heights of innovation and efficiency. Leveraging this cutting-edge technology, we are delivering a healthcare experience that is not only seamless and intuitive but also blazingly fast and responsive. Whether you're a seasoned Angular developer or just getting started with web development, this blog will equip you with the insights and resources needed to navigate the upgrade process with confidence and precision.

Introduction:

Angular is a popular open-source web application framework maintained by Google. It's used for building dynamic and responsive single-page web applications (SPAs) and is written in TypeScript. Angular provides a comprehensive suite of tools and libraries for simplifying the development process, including powerful features like two-way data binding, dependency injection, and a component-based architecture. It's known for its scalability, robustness, and extensive ecosystem of libraries and tools, making it a preferred choice for building modern web applications.

Why Angular 17 upgradation is necessary:

As newer versions are released, it is a good practise to stay updated with the latest version. Although this is not mandatory but it is recommended to do so for the following reasons:

Performance Improvements:

Enhanced Rendering Performance: Angular 17 introduces performance optimizations that can lead to faster rendering and more efficient change detection to improving the overall user experience.
Smaller Bundle Sizes: Optimizations in the Angular compiler and the use of modern JavaScript features that help to reduce the size of the generated JavaScript bundles, leading to faster load times.

Improved Developer Experience:

Better Tooling and CLI Improvements: It comes with updates to the Angular CLI, providing better build times, improved error messages, and enhanced development tools, which can significantly improve the development workflow.
TypeScript Support: It ensures compatibility with the latest TypeScript features, enabling developers to write more robust and maintainable code.

Long-Term Support (LTS) for Angular 17:

Angular 17 entered its Long-Term Support (LTS) phase in May 2024 and will continue to be supported until May 2025. During this period, the Angular team prioritizes critical fixes and security patches, ensuring a stable foundation for Angular 17 applications. This means we will receive essential updates to address vulnerabilities and maintain application functionality.
The key advantage of LTS is peace of mind regarding security and stability. It's particularly important if we are using an older, unsupported Angular version (prior to 16) or nearing the end of LTS for your current version (like Angular 16 ending in November 2024). Migrating to Angular 17 offers a longer support window and a more secure codebase.

New Features and Enhancements:

Component-Level Code Splitting: It supports more granular code splitting, allowing for lazy loading of components. This can greatly enhance the performance of large applications like Halodoc by loading only the necessary code when needed.

Example:

Standalone Components: Standalone components in Angular 17 are components that do not need to be declared in an NgModule. Instead, they are self-contained and can be used directly in other components or modules. This approach simplifies the structure of Angular applications by reducing the need for NgModules, making the codebase cleaner and easier to maintain. Benefits of standalone components are mention below:

Improved Development Speed and Efficiency: When adding a new feature, developers can create standalone components without modifying existing NgModules. This reduces the time and effort needed to integrate new components, leading to faster development cycles. Developers can focus on building features rather than managing module dependencies, resulting in quicker iterations and deployments.
Reusability and Modularity: Standalone components encapsulate specific functionalities within a single unit. This makes them highly reusable across different parts of your application or even in entirely separate projects. Imagine building a product card component that displays information and handles user interactions. This component can be reused throughout your e-commerce website and potentially even in a different project showcasing a portfolio.

Example:

Built-in Control Flow: This is a new feature that enables developers to write control flow statements directly in their HTML templates. This makes code cleaner and easier to manage, as it eliminates the need for directives like ngIf, ngFor, and ngSwitch.

Built-in control flow statements are processed by the Angular compiler during the build phase. The compiler can translate these statements into efficient JavaScript instructions, potentially leading to smaller bundle sizes. This translates to faster loading times for our application. It is directly available and ready to use in templates without additional imports. Types of Built-in control flow are mention below:

Conditional Rendering with @if and @else:
It is similar to *ngIf, the @if directive allows you to conditionally render content based on a boolean expression. The @else directive provides an alternative template to display if the condition is false.
Looping with @for:
The @for directive takes the place of *ngFor and iterates over an array of items. You can access each item using the of keyword and define a trackBy function for efficient change detection.
Multi-way Branching with @switch:
The @switch directive replaces *ngSwitch and handles multiple conditions. You can define cases for different values and display corresponding

Example:

Signal-Based Reactivity: It offer a simpler and more intuitive way to manage data flow and updates compared to traditional RxJS observables. It allow developers to define reactive data sources that automatically update the UI when their values change. They provide three main functionalities:

Writable Signals:
This signals allow you to modify their values through dedicated setter functions.
Computed Signals:
This signals derive their value based on other signals. They automatically update whenever their dependencies change.
Effects:
Effects are functions that execute in response to changes in signal values. This allows you to perform side effects like logging or dispatching actions.

Example:

In the above example, the count signal is used to manage the state of the counter. The UI automatically updates whenever the count signal changes, providing a more straightforward approach to state management.

Improved Hydration for SSR: It leverages the server-rendered DOM structure directly and selectively hydrates only the necessary components. This minimizes DOM manipulation and avoids unnecessary re-rendering, leading to a smoother user experience. Faster hydration translates to quicker content rendering on the client-side, enhancing perceived performance and Core Web Vitals (CWV) metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP). Before & after Angular 17 server side rendering advantages:

Non-Destructive Hydration: Prior to Angular 17, SSR involved replacing the server-rendered HTML with the client-side version during hydration. This could cause visual flickering, especially with complex layouts.
Angular 17 introduces non-destructive hydration, which intelligently merges the server-rendered content with the client-side representation. This eliminates the flickering issue, resulting in a more seamless transition for users.
Improved Initial Load Times:The new hydration process in Angular 17 is optimized for speed. The browser can start rendering the pre-rendered HTML from the server immediately, while JavaScript execution for interactivity happens in the background. This leads to a faster perceived load time for users.
Enhanced SEO: Search engines primarily rely on the initial HTML content to understand your page. With SSR, this content is readily available, improving your application's SEO potential. Non-destructive hydration ensures that the search engines see the same content as users, further benefiting your SEO.
Better Core Web Vitals Scores:Core Web Vitals (CWV) are metrics that measure a web page's loading performance, responsiveness, and visual stability. Faster initial load times achieved through improved hydration contribute positively to FCP (First Contentful Paint) and LCP (Largest Contentful Paint) scores, which are crucial CWV metrics.

Deferrable Views: It offer a powerful mechanism to optimize initial load times and enhance perceived performance. It also known as @defer blocks, allow you to delay the rendering of specific components within your templates until they are actually needed. This is particularly useful for content that might not be immediately visible to the user or components that are loaded conditionally. We have implemented the deferrable in our application in below manner:

Wrap the Component:
Enclose the component you want to defer within a @defer block in your template.
Define Triggers:
Specify when the deferred content should be loaded. Angular 17 offers various triggers:

on interaction: Triggers loading when the user interacts with a specific element (click, hover, etc.).
on viewport: Triggers loading when the element becomes visible in the viewport as the user scrolls.
on timer: Triggers loading after a specified delay.
on immediate: Starts loading immediately without waiting for any event.

Example:

In the above example, the app-product-reviews component will only be loaded when the user clicks the "Show Details" button (interaction trigger). This keeps the initial page load faster while still providing access to reviews when needed.

What we improved with Angular 17 at Halodoc:

Halodoc's adoption of deferrable views in Angular 17 aimed to significantly enhance their application's performance, particularly on critical pages with high user traffic. This approach focused on strategically delaying the loading of non-essential components until they were truly needed by the user, leading to several key improvements:

Reduced Initial Bundle Size: Deferrable views allowed Halodoc to prioritize the loading of critical content first. By marking non-essential components (like secondary tabs, sidebars, or content below the fold) for deferral, they effectively minimized the initial JavaScript bundle size. This resulted in a faster initial download, especially for users on slower internet connections.
Faster Load Times: With a smaller initial bundle, the time it took for Halodoc's web pages to load on the user's screen was considerably reduced. Users wouldn't have to wait for the entire application to download before they could start interacting with the core functionality and content. This led to a quicker and more responsive user experience.
Enhanced User Experience: Deferrable views enabled Halodoc to deliver a more streamlined and engaging experience for their users. By loading content only when it became necessary through user interaction or viewport scrolling, users were not bombarded with a large amount of information upfront. This fostered a more focused and user-centric experience, reducing the potential for information overload.

Performance Improvement:

To accurately assess the impacts of deferral, it's vital to conduct a thorough analysis of the bundle size before and after the adjustment. This can be easily achieved by examining the current bundle size, conveniently located in the network section. As evidenced, the current page exhibits a bundle size of 126KB.

Before Deferrable View

The magneto-latest-articles component has been separated from the main article component bundle, resulting in a distinct bundle size. As users scroll down, the new bundle is loaded specifically for that section. This approach is advantageous, particularly when users may not reach the bottom of the content. Consequently, the main article component bundle size is optimized, reducing it from 126KB to 101KB, while the new bundle for the latest article component is 27.8KB.

After Deferrable View

At Halodoc, upgrading to Angular 17 has brought significant improvements across various aspects of our application. The performance has seen a notable boost, with page load times reduced by 23% on average and bundle sizes decreased by 19%, leading to faster download times and a 20% improvement in First Contentful Paint (FCP). Additionally, server response times have been optimized by 16%, resulting in quicker user interactions. Our development efficiency has also benefited, with build times reduced by 25% and code refactoring becoming more efficient, requiring 50% less boilerplate code. The user experience has been enhanced, with user interaction speed up by 17% and full compliance with WCAG 2.1 accessibility standards.

Conclusion

Angular 17 brings a wealth of new features and enhancements that make it easier and more efficient to build modern web applications. From enhanced component inputs and standalone components to signal-based reactivity and improved SSR hydration, these releases provide tools and capabilities that streamline development and improve performance.

Additionally, the performance optimizations, better error handling with strict templates and enhanced accessibility features ensure that applications not only perform better but also cater to a wider audience. By leveraging these powerful new features and enhancements, developers can streamline their workflows, improve code quality, and deliver superior user experiences. Embracing Angular 17 is a strategic move that keeps your applications at the cutting edge of web technology.

References

Join Us

Scalability, reliability, and maintainability are the three pillars that govern what we build at Halodoc Tech. We are actively looking for engineers at all levels and if solving hard problems with challenging requirements is your forte, please reach out to us with your resumé at careers.india@halodoc.com

About Halodoc

Halodoc is the number 1 all around Healthcare application in Indonesia. Our mission is to simplify and bring quality healthcare across Indonesia, from Sabang to Merauke. We connect 20,000+ doctors with patients in need through our Tele-consultation service. We partner with 3500+ pharmacies in 100+ cities to bring medicine to your doorstep. We've also partnered with Indonesia's largest lab provider to provide lab home services, and to top it off we have recently launched a premium appointment service that partners with 500+ hospitals that allow patients to book a doctor appointment inside our application. We are extremely fortunate to be trusted by our investors, such as the Bill & Melinda Gates Foundation, Singtel, UOB Ventures, Allianz, GoJek, Astra, Temasek, and many more. We recently closed our Series D round and in total have raised around USD$100+ million for our mission. Our team works tirelessly to make sure that we create the best healthcare solution personalised for all of our patient's needs, and are continuously on a path to simplify healthcare for Indonesia..