Angular Development

There is a growing demand for interactive web and apps design for a user-friendly experience. The Angularjs framework helps develop user-friendly apps to this demand, retain users and grow business. With expertise in Angular development, we devise web and mobile development solutions with innovative design and features. As a leading AngularJS development company, we specialize in providing cross-platform applications with high speed and performance.

Being one of the best AngularJS development companies in India, we offer a complete range of solutions to build a variety of web and mobile apps with innovative design and features. Our Angular web development experts understand your business and development needs to employ the right solutions to cater the same. Through our well-structured Angular web development services, we help businesses accomplish their business goals and stand out from others.

Our AngularJS Services

  • 1. Dynamic Web Application Development
  • 2. AngularJS App Upgrade and Maintenance
  • 3. Enterprise App Interface and Development
  • 4. Single Page Application using AngularJS
  • 5. Application Migration Services
  • 6. User Interactive Module Development
  • 7. Custom Widgets Development
  • 8. Custom AngularJS Development

Our Existing Clients

We cater to a diverse clientele spanning across various industries.

Why Choose Us as Your AngularJS Development Company

Experienced Developers

Our highly-qualified Angular web development experts specialize in building customized, creative and highly-interactive web and mobile applications. Whether you are a startup or an SME, our experts will get the job done.

Trusted Delivery Methods

We employ the agile methodology to keep you in the loop. Throughout Angular web development and mobile development, we focus on delivering solutions that meet your business goals, timeline, and budget.

Competitive Rates

Whether it is Angular web development or mobile development, we offer the most competitive rates on the market. Our personalized services meet different budget needs of our clients from across the globe.

Transparent Work Approach

Our AngularJS development company ensures complete project visibility right from the time you approach us with your needs. We use email, phone, Skype, Slack and other mediums for regular communication with our clients.

Customer Satisfaction

Our designers, developers, quality analysts, and a project manager – all strive for customer satisfaction. We deliver Angular web development and mobile development solutions that align with our clients’ needs.

Client Testimonials

Our WORK speaks louder than our WORD. Find out how we helped clients overcome challenges and succeed.


Third Rock Techkno's solution forms the heart of the research library and receives great reviews from scholars and experts. Their work integrates complex frameworks and features to offer everything researchers need. They are open-minded and worked smoothly with the academic subject matter.

Dr Daniel T. Michaels


Many thanks for your wonderful for help on this project. They took over the project from a different company that promised the world and couldn’t deliver. Since hiring Tapan, His team have communicated and worked above and beyond to help release the first version of RentalQ. We are now working on Version 2 and can see a long standing relationship in the works. There are no doubts that this is the team for any projects you are working on or starting.


Main Features of Angular Development

Simple & Expressive

Angular is a very popular web framework because of its simple and component-based architecture. It perfect for managing heavy web applications that contain a number of components and complex requirements.

Speed & Performance

Angular executes various web techniques like bundling, compression etc. These techniques decrease the load time of web pages. This improves navigation and enhances UX.

Flexible Development

Angular uses component-based architecture. This allows Angular web development professionals to easily build a fully extensible architecture of the web app. The developed components can be reused easily.

Simplified MVC Pattern

MVC is quite popular as it isolates the application logic from the user interface layer and supports a separation of concerns.

Cross Platform

Angular can be used for any platform from web applications, in Electron for desktop apps and in Ionic for mobile apps.

Significant Experience

Being an experienced AngularJS development company, we have rolled out 50 live websites using AngularJS.

Recent Angular Development Blogs

12 Jan 2022 | 8 Min Read
Top 5 Apps You Can Build With Angular - A Quick Guide for Modern Businesses

A framework backed by Google, adored by developers, and used by leading corporations across the world. That’s Angular for you! Word on the street, Angular has become hugely popular, and rightly so. Well, if you have had any doubts about Angular mobile and web app development, this blog is all to set clear it out. We have prepared a list of the top 5 apps you can build with Angular frameworks and have also further categorized them into industry-based applications that you can build with Angular. We will also cover the best examples of applications built using Angular to inspire and awaken ideas and show you exactly why Angular is the real champion. Ready to ace Angular website development [] ? Let’s begin! What is Angular? Whether or not you’re familiar with Angular, we can help you navigate through it. An open-source framework is known for its accelerated development process, enhanced scalability, and its ability to power feature-rich, responsive web apps, Angular [] is a leading front-end framework that has quickly gone on to gain immense popularity and adulation. With a defined architecture and ready-to-use libraries Angular provides endless opportunities to create exceptional web apps. To be precise, here we are talking about Angular 2+ or Angular, which was released in 2016 after its predecessor AngularJS underwent massive changes. Angular 2 allows for modern web application development, speeds up the compilation process, and improves component testing. Angular v.9 the latest version was released in February 2020. The Journey of AngularHere are some interesting facts about Angular: 58,000+ stars on Github [] 4,105,780+ Angular websites [] Two main competitors: React.js [] and Vue.js [] Wondering which leading framework will serve your project’s needs the best? Check out our comparison between Angular vs. React vs. Vue [] to find out the same. Until then let’s get back to dissecting Angular’s strengths. > Read More: What Makes AngularJS the Best Framework for Single Page Web App? [] Why Angular? There are certain strong features that make the Angular Frameworks worth investing in. Here are the 5 most important benefits of Angular from the business perspective. Top 5 Angular Features Apps You Can Build With Angular This leading framework can be a vital tool for developing captivating & dynamic apps considering the many benefits Angular mobile app development brings across varied domains. Let’s take a look at a few types of apps that can be built using Angular: 1. Single Page Applications (SPA) SPAs & Angular? A combination offering the best of both worlds. Ask any developer about their choice for building SPAs and they’ll suggest going with Angular in the blink of an eye. Single Page Applications [] built with the Angular frameworks allow for quick load time thanks to Angular’s routing and data management features. The result? A totally immersive user experience with no lag and a single page where all information appears dynamically. SPAs when built with Angular offers fantastic UI support and an unmatched user interface thereby promising top performance each time. 2. Enterprise Web Apps Ever wondered what makes Angular the first choice for large corporations and enterprises? Angular mobile and web apps have high-end, sophisticated, and secure software that is a big requirement for institutions and enterprises that operate on a higher level. Take the example of Gmail, YouTube, or Microsoft, they all trust Angular for it is scalability and its ability to match their need for high security. Other features that really seal the deal for Angular when it comes to building enterprise web apps include its MVC architecture and code reusability. 3. Angular Mobile Apps Thinking of building mobile apps? Angular is the right way to go. Angular mobile app development gets facilitated in lesser time thanks to the front-end code reutilization between mobile and web. Angular frameworks are commonly used for cross-platform web application development. You can also combine Angular with NativeScript to develop classy, high-end mobile apps. Whereas combining Angular with Ionic is another great option to develop hybrid apps with a near-native-like experience while sharing the majority of code between iOS and Android. 4. Progressive Web Applications (PWA) Progressive Web Apps brought about a wave of fresh air and became instrumental in defining the modern era of mobile web apps. PWAs provide your web application an app-like experience on mobile-browser. Developers need to be mindful of the application’s adaptability to the user’s mobile screen and ensure they load quickly, offer offline support, and provide a mobile application-like look and feel. Building PWAs with Angular opens the door to advanced features such as responsive design, mobile-like functionality, and an offline experience seen never before. Needless to say, PWAs require additional effort for which you should hire Angular developers [] who are the most adept and experienced when it comes to abiding by the PWA rules and checking if the application functions appropriately. 5. Server-side Rendered (SSR) Apps Web applications are either rendered in the browser or on the server. Angular is known to enhance and boost the performance of apps with server-side rendering thus making SSR development a lot easier. From improving the page load speed to offering a spectacular user experience on mobile, Angular is the preferred choice for many developers. But how does it become possible? Since the server is responsible for preparing or pre-populating custom user data it plays a major role in reducing the site’s loading time. As Angular improves the page load speed for SSR apps, it also becomes beneficial in increasing the site’s visibility in the search engine results page (SERP) thereby promoting your business and connecting you to the right audience. 6. Interfaces with Compelling Animation Why do some apps become more popular than others? What differentiates a successful web app from others? Immersive, engaging, intuitive, and stunning UI animations are a few things that steal the deal and make your web apps irresistible to your users. This is especially true for Edutech and learning platforms that need animations to engage and delight their students. In that case, Angular should be your go-to option since it offers exceptional user interfaces that are sure to capture the user's attention and make them loyal users of your app. > Read More: 7 Reasons Why Angular is The Future of Enterprise-Scale Web Applications [] Industry-Based Angular Mobile and Web Applications Be it the food industry, eCommerce sector, travel, social, or finance platforms, Angular is your #1 choice for developing apps across various domains and industries. Its high performance and robust features, ready-to-use components, and extensive libraries allow it to cater to all organizations whether small or large. 1. Travel Apps Source: Airbnb []Travel apps like Airbnb [] often witness a surge in traffic from users especially in peak seasons like holidays. To make a travel app, a framework should possess an impeccable interface and have enough capacity to handle high loads during peak surges. Angular perfectly hits this brief. 2. Social Apps Source: Linkedin []A real-life example of a social app powered by Angular is Linkedin. Fast, responsive, dynamic, and loved by all. Angular is the recipe to create highly successful social apps people use on a daily basis. 3. E-commerce Apps Source: Swiggy []If you want to build apps that are successful, you also need to understand what your customers actually want. Ecommerce apps with instant delivery are all the rage and getting even bigger day by day. Angular is an amazing framework that lets you create a visually appealing e-commerce app that's both popular and user-friendly. 4. Video Streaming Apps Source: Netflix []Let’s take Netflix & YouTube for examples that are actually built on Angular. There’s no doubt about the fact that Angular sure knows the secret to power video streaming apps with the needed functionality and UI support those that are immensely fast loading, offer superior user experience and developer flexibility. 5. Weather Apps Source: [] Weather apps with Angular have a ton of significant features that hit it right out of the park. is an example of the same. Some noteworthy Angular-powered features include integration with multiple maps, real-time broadcasting, and HD videos from aerials. > Read More: 8 Essential Tips for Hiring Angular Developers [] Popular Examples of Apps Built with Angular App Built With Angular 1. Gmail Source: Gmail []What’s to note? Gmail is a Single Page Application built with Angular. It also supports Hangouts messaging thanks to Angular’s out-of-the-box module. 2.Forbes Source: Forbes []What’s to note? Angular’s reusable codebase allows Forbes to perform well on any device, OS, or browser. Angular helps it support lots of information and cross-platform usage. 3. Upwork Source: Upwork []What’s to note?Upwork is known to use Angular JS 1.5.9 that offers the website seamless navigation, high web-page performance, and a single-page experience for active users. 4. Paypal Source: PayPal []What’s to note? Angular contributes to PayPal’s functioning through state-of-the-art security measures, seamless checkout, and tons of opportunities for integrations. 5. Deutsche Bank Source: Deutsche Bank []What’s to note? The front page of its developer portal uses AngularJS 1.7.8. that offers easy usability, security, and opportunities to integrate transactional systems into their web software. 6. Freelancer Source: Freelancer [] What’s to note? Freelancer uses Angular 5.1.0 for the frontend framework that offers it a highly responsive website. Angular also supports information storing and payment integrations. > Read More: Why You Should Upgrade AngularJS to Angular For Your Web Apps [] Wrapping Up So how does the sound of building an Angular mobile and web app of your own feel? Angular is undoubtedly a champion framework when it comes to developing apps for your business. The cherry on the cake is its ultimate backing by Google and a thriving community of developers to bank on. Angular is intrinsic in reducing development costs, improving the structure, and scaling your project easily. Even though there are many JavaScript frameworks out there, Angular is one to consider and the proof is its usage by many major brands. Looking for an angular development company [] to help you build your next business app? Here at Third Rock Techkno, we hold the power of working with leading technologies and crafting customized solutions for our clients from varied industries. Let us help you create stunning Angular mobile apps for your business. Build World-Class Software at Competitive Rates We prioritize value over cost. Our industry experts both in the US and in India ensure your unique software needs are met while also maximizing the ROI. Get free cost estimation for your project [] MORE ON ANGULAR Why Use Angular For Web Development in 2022: Top Features & Benefits [] Top Reasons Why Your Angular App Is Slow [] 8 Best Angular UI Frameworks For Web Development [] Why Progressive Web Apps have taken the app development industry by storm? [] React vs Angular For Web Development: How To Make The Right Choice []

02 Apr 2021 | 12 Min Read
Limitations and Benefits of Using Angular in Your Project

Because the success of an application largely depends on its tech stack, it’s vital to understand the ins and outs of each framework you decide to use for your project. I have worked as a CTO for over a decade and notably, Angular happens to be my most preferred technology for web development. In this blog, I take you through the limitations and benefits of using Angular in a project so you can decide whether it’s a good fit for you or not. Table of Content * What is Angular, exactly? [] * AngularJS vs Angular [] * The journey of Angular so far [] * What kind of web app development problems does Angular solve? [] * What are some of the best apps built with Angular? [] * Pros of Angular Development [] * Cons of Angular Development [] * When To Use Angular For Your Project [] * Limitations and Benefits of Using Angular in Your Project - The Bottom Line [] What is Angular, exactly? Angular [] is a front-end framework that operates on JavaScript. It is a commonly preferred framework for building web applications. While you may have read a lot about the Angular vs React debate [] , it’s vital to understand that, unlike React, Angular is not a library. It is in fact a much broader technology that consists of libraries and other supporting tools for quick web application development. Before we move forward, I’d like to clarify that by the word Angular, I am referring to Angular 2+ versions. Here’s a quick overview of Angular history and why we are talking about Angular 2+ today. AngularJS vs Angular Google released the first-ever version, AngularJS [], in 2010 under the MIT license []. The framework received mixed reviews during the initial years. Some web developers loved how it made the process of web app development so easy! On the other hand, some developers found AngularJS to be a very complicated tool that made their jobs even harder. So over the following 5 years, the Angular team worked towards making the framework a good fit for the evolving web development landscape. In the process, they had to rewrite AngularJS completely in order to enhance it with advanced features. As a result, Angular 2 was released in 2016, and in no time, it garnered great popularity amongst the development community. > As of March 2021, Angular has released 9 versions at a steady gap of six months. Angular v2, v4, v5, v6, v7, v8 are no longer under support. However, each version is given Long Term Support for an extended period of time. The Angular team does this to ensure every Angular app owner has sufficient time to migrate to the latest version without encountering many breaking changes. The journey of Angular so far Before you ask why Angular is so popular, I want to talk about its journey a bit. Angular has seen some great and some not-so-good times so far. For example, the Stack Overflow Survey in 2017 [] revealed Angular to be the most wanted (front-end) web framework by web developers. However, in 2018, it slipped to the fourth position [] while React topped the list of most wanted web frameworks. In 2019, a relatively new entrant, Vue, also surpassed Angular [] in the list and 2020 saw a similar trend []. Despite a slight fall in its popularity as a top web framework, Angular still remains one of the most used tools worldwide. That’s because it does a tremendous job at simplifying the process of web app development, especially for large apps. Angular vs React vs Vue: Which Framework To Use In 2021? Read More [] What kind of web app development problems does Angular solve? If I had to summarize this section in one sentence, it would be this: > Angular was developed to make writing code with JavaScript faster and thus, building the front-end of a web application easier. Let’s talk about the benefits of using Angular from a very basic perspective. If you are a JavaScript developer, you know that writing code with this language can get really, really tedious. For every component of a web application, you need to copy-paste the existing code and then add more code. It goes on and on until you have the entire JavaScript stack ready for your web app. Google wanted to resolve this daunting task with something that can serve as a basic ready-made scaffolding for a web application. And so, they built AngularJS (and then, Angular) - a comprehensive tool that eases the most common front-end tasks like condensing sidebars, aligning margins and text blocks, etc. Angular provides you with a set of tools and libraries that can kickstart your project within seconds. Moreover, you also have a bunch of ready-to-use code available for building common UI elements and the overall front-end of a web application. What are some of the best apps built with Angular? To put things in perspective, I feel it’s best to glance through some of the prominent Angular apps once. So here’s a list of 5 popular apps built with Angular: Forbes (Angular 5) For a content-intensive web app like Forbes [], Angular was an obvious choice for two reasons. First, they wanted the homepage to be a single-page app in itself. Second, the updates on the front end are very frequent. Angular, with its advanced tools, makes for the best front-end framework for a single-page web app like Forbes that needs constant content updates. Xbox (Angular 4) Again, for a gaming company like Xbox [], the web app needed to be extremely dynamic and responsive in nature. Web apps for any brand in the gaming industry are expected to present heavy visual content with absolute smoothness. Angular does a great job of helping the web app deliver just what is needed from it! Delta (Angular 6) Delta Airlines [] is one of the most popular airlines across the world. In the United States alone, the website is ranked third [] in attracting travel-related traffic on the internet. Not just that, the web app is mainly used to search for flight dates, fares, etc. Naturally, it needed a heavy framework that can handle such heavy traffic while also facilitating dynamic search results within a second. And the benefits of using Angular are exactly the ones needed here. That is why Angular was the first choice for Delta Airlines to specially build the home page of their website. LUIS by Microsoft (Angular 6) Language Understanding Information System [] is a cloud-based API service developed by Microsoft. The sophisticated AI used in LUIS makes it an exceptional tool for building text or voice-based chatbots. Because this is an API meant to be used for building/scaling applications, the web app had to be developed with chunks of code that could be reused or replaced per the user’s needs. Angular’s component-based architecture and modularity made it an ideal framework for the LUIS website. Google Web Apps Well, the tech giant didn’t build such a vast framework just as a gesture of kindness towards the developer community. They obviously built it to modernize their own web applications. All the amazing utility web applications like Google Docs, Gmail, and community-based web apps like Product Experts [], Think With Google [] are powered by Angular. Pros of Angular Development Let’s talk about the real deal here. I have already shared that Angular is a great choice for web apps like Forbes and Gmail. But why is that so? What is it about the framework that makes it so special? I have compiled the top 5 benefits of using Angular here. Please note that there are also other magnificent features of Angular, you can read them here [] . Code reusability with component-based architecture Unlike AngularJS, the Angular framework enables you to divide the UI elements of your web app into separate components. Each component is encapsulated with its own functionality and hence, is independent. How is this helpful in the long run? When you want to scale your web app or want to build a web app with similar components, you can reuse the chunks of code that went into building the components. > Clearly, Angular reduces the development time with its self-sufficient components. On top of that, Angular’s component-based architecture also makes unit testing quite easy. Because you can decouple one component from another easily, different testers can work on assuring the quality of different parts of the app. Cleaner code with TypeScript While some developers find TypeScript in Angular as a drawback, I strongly advocate for its efficiency. In fact, TypeScript is one of the biggest advantages of using Angular. TypeScript [] is the superset of JavaScript. That means, when you do use it for writing code, it will still be compiled to JavaScript during the run time. The major reason why most programmers love TypeScript is its static nature. > Unlike JavaScript, you can actually identify errors or bugs while you are still writing the code with TypeScript. Thus, it minimizes the need for rework on the code after testing and saves those precious development hours for you. Vast ecosystem facilitating easy third party integrations An important consideration while choosing a framework is whether there are other supporting tools and add-ons in the industry that can enhance the framework’s functionality. This is to ensure you have a variety of options to speed up your development process or to adorn the app with useful features. Because Angular has been around for over a decade now, it has a rich ecosystem of useful packages, add-ons, plug-ins, and much more. Check the Angular Resources [] page to have a look at the exhaustive list of IDEs, data libraries, UI components, and other tooling options for faster Angular app development. The more options for third-party integrations you have, the easier it is to build complex apps with a web framework. 8 Best Angular UI Frameworks For Web Development Read More [] Maintainable code with hierarchical dependency injection One of the most controversial features of Angular is its hierarchical Dependency Injection [](DI). I say controversial because as much as web developers love this feature, they also find it extremely time-consuming to build the DI in their Angular web application. DI is basically a design technique to empower the classes in the app architecture with external dependencies. That means each class can serve its full functionality without creating the objects themselves. The reason why having DI in a framework helps is that it lets the developer organize classes independent of each other. The cherry on the cake in the case of Angular is that the classes are organized in a strict hierarchy. So whoever takes a look at the code can understand at once how the components are related to one another. Because you have a clear idea of how changes in one class will impact the others, maintaining and updating your application code will be a more organized affair. Faster performance with lazy loading Angular gives you a component-based architecture and a hierarchical dependency injection. These are common benefits of using Angular for building a web app. But most importantly, Angular gives you the convenience to organize different chunks of your app code into modules. A module in your Angular app [] can be anything. It could contain classes, components, directives, or even other sub-modules. The direct advantage of this modularity in Angular [] is that you can easily manage different parts of the application when you scale it. However, the best thing about this modularity is that it makes way for lazy loading. That is, your Angular app can very well understand the user request and loads only that part of the app first that the user requested to view. The result? Instant loading of the requested page plus faster loading of other pages because they keep loading in the background while the user engages with the first web page. Cons of Angular Development Of course, Angular is not all good and no bad. Along with the benefits of using Angular, you should also know the limitations that come with it. SEO limitations Angular is meant to be used for building highly functional Single Page Apps (SPA) [] . Although you can work your way around and use it for a multi-page app too, it’s not recommended in most cases. Now the problem with single-page apps is that you have to render them on the client-side. As a result, web crawlers aren’t able to access the complete content (and its updates) on these web pages. This leads to a poor SEO performance of the Angular apps. So if you are building an Angular app, you have to make extra efforts to make it accessible to web crawlers of search engines. For example, using Angular Universe [] to render the app on the server-side is a common solution. Technical debt Because Angular is a comprehensive front-end framework in itself, it comes with tons of pre-built tools and features. This means when you integrate your app with Angular, it can harm the app’s performance by burdening it with huge chunks of technical debt. That is why Angular is not a suitable choice for all kinds of applications. When To Use Angular For Your Project So what is Angular mainly used for? Check out the best use cases for Angular below: Use Angular to build Progressive Web Apps (PWA) When Google first introduced the term Progressive Web Apps [] in 2015, the idea took the entire software industry by storm. Big players like Twitter and Alibaba [] were quick to switch to this all-encompassing form of a website and reaped huge benefits. So Google decided to roll out all the versions of Angular (post-2015) with in-built support for building a PWA. Angular is a wonderful tool to build dynamic PWAs for businesses across all industries. Use Angular to build Enterprise Web Apps Big companies or institutions need large-scale software to maintain their databases and provide comprehensive functionalities. Angular is best for enterprise web apps [] because of the unique benefits of using Angular. It makes the app scalable, maintainable and has solid security protocols. 7 Reasons Why Angular is The Future of Enterprise-Scale Web Applications Read More [] Use Angular to build dynamic web apps Web apps like those of Forbes, Xbox, YouTubeTV thrive on their dynamic content. Their visitors engage with the websites based on how quickly they can see the updates in response to their requests. Angular’s capabilities to build highly compelling dynamic SPAs and its dependency injection make it a go-to choice for dynamic web apps. Use Angular when you want to build both web and mobile apps with ease Interestingly, you can also combine Angular with NativeScript and create both web apps and mobile apps by reusing major chunks of the code. Or, you can use Ionic [] instead of NativeScript and build hybrid mobile apps with a native look and feel. We are a team of expert developers, testers and business consultants who strive to deliver nothing but the best. Planning to build a completely secure and efficient Angular app? 'Hire Angular Developers [] '. Limitations and Benefits of Using Angular in Your Project - The Bottom Line Just like any other development tool, there are both pros and cons of Angular too. The key, however, is to understand the limitations vs benefits of using Angular in a project type. We know that Angular has tremendous scope for code reusability, its dependency injection makes maintaining apps easier. Moreover, it has a vast ecosystem so you can always count on community support for faster app development with Angular. So if you are building a project which needs these features, don’t hesitate to go for Angular. Similarly, because Angular is not very great with web crawlers and search engines, don’t use it for websites that thrive on their SEO performance. Also, to ensure you are not overburdening your app, always go for smaller frameworks for building simple web apps or apps that have static content. If you are still not sure whether your software project requires Angular, get in touch with our consultants [] and they can help you pick the right tech stack for your project. Looking For Expert Guidance on Your Dream Project? Our diverse team of industry leading veterans can help you build the most viable solution. Schedule a free consultation call [] -------------------------------------------------------------------------------- Krunal Shah Krunal Shah is the CTO and Co-founder at Third Rock Techkno. With an extensive experienced gained over a decade, Krunal helps his clients build software solutions that stand out in the industry and are lighter on the pocket. | Let's connect! []

30 Nov 2020 | 4 Min Read
Top Reasons Why Your Angular App Is Slow

Introduction Angular is, by default, a fast and performant framework. While it leaves ample space for improvement by opting out some of its magic, we almost never have to do anything special to write extremely performant code for the average app. With that said, some difficulties will eventually arise when we are writing either performance-critical apps, apps with large and complex content, or apps updated extremely frequently. There are loads of resources and popular advice out there about improving performance with Angular apps. While most of it is totally good and valid advice, what I have personally found while mitigating performance issues is not often talked about. In this article, I want to show some of the most important reasons why Angular apps become slow at scale. What we will see is that it doesn’t really matter the framework used — these tips will be valid for any framework. App is rendering too often Let’s start with this quite common issue: your application re-renders components unnecessarily, making your application slower than it could be. This is both easy to solve and easy to cause. We can solve this by doing * Use OnPush Change Detection Strategy Setting the default change detection to OnPush is an almost mandatory step if your application is suffering from slow performance, or if you want to prevent from it happening in the future. By setting your components to update only “on push”, you prevent re-rendering components that don’t need to be checked. * Use Async Pipe The async [] pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async [] pipe marks the component to be checked for changes. When the component gets destroyed, the async [] pipe unsubscribes automatically to avoid potential memory leaks. * Use filter and distinctUntilChanged RxJS operators Preventing observable from emitting is a good way to prevent your component from re-rendering. For example, you may use operators such as filter and distinctUntilChanged to skip re-renderings altogether. High-Frequency Updates This is a use-case where Angular doesn’t excel at, and it is probably due to Zone.js, which is also the reason behind Angular’s magical change detection. Zone.js will monkey-patch all events and will schedule a change detection when any of these happened. That means that if your application is streaming events at a fast rate (Web-socket, or even DOM events), for each event received, Zone will trigger a change detection. There’s definitely room for improvements in similar cases. Of course, we can't remove Zone from our Angular app to solve this issue. Here are a few steps we can take instead: * Detach the affected components, then update surgically when your subscriptions get notified * Use ngZone.runOutsideAngular(callback) to run the callback outside of Angular’s change detection * last resort: exclude the event from being monkey-patched by Zone Your app is rendering too much No matter how fast your framework is, if you are rendering thousands of complex components in one go, the browser is eventually going to show some amount of lag. Maybe this isn’t very noticeable in powerful machine, slower machines will definitely get trouble. Might be chance that every user doesn't have powerful machine. It’s extremely important to make sure that components rendered many items (eg. within lists) are optimised in a particular way. We can solve this by doing * Virtual Scrolling Only render what the user can see. While this has accessibility/usability implications to be aware of, it is one of the best methods to improve perceived performance and avoid getting the page frozen for an unreasonable amount of time. It’s pretty easy to implement: the Angular CDK provides a utility for []this! * Async Rendering The concept is like suppose you have large amount of items to be displayed then start rendering a limited number of items (ex, 50 out of 500), then schedule a subsequent rendering with the next 50 items until all items are rendered. * Lazy Rendering Not everything has to be rendered right away, sometimes we can simply render a component when the user needs to interact with it. In this case we can use Angular lazy loading [] concept. * Lazy Listeners Subscribing and listening to too many events may be quite expensive. Avoiding subscribing to too many events can be done in different ways: - If you have a large list of items with DOM handlers, make sure you only subscribe to the items that are visible (virtual scrolling help with this) - Sometimes you may want to only create one single global event from within a Service, rather than subscribing to the event in each Directive/Component Some code… is just slow If you’ve done your research and figured out that your app doesn’t render that much and doesn’t render that often, then your code may just simply be quite slow. This is probably due to some heavy scripting and not DOM-related. We can solve this by doing * Use WebWorkers [] . The Angular CLI [] also provides a command to generate a WebWorker in a snap. When is this a suitable route? Simple — when your code has nothing to do with rendering and takes a while to execute. * Use WebAssembly [], for example using AssemblyScript []. Read this case study from Figma [] for more information. If above solutions doesn't resolve your use case then you can do following things to can improve your runtime performance. * Use a Custom Iterable Differ [] * Turn everything into for-loops, scrap filter, reduce and map. Use break and continue to reduce the number of iterations. Takeaways * Opt-out of the framework’s magic: make sure you use ChangeDetection.OnPush and TrackBy for arrays * Render less often by surgically triggering change detection on your components. Run outside Zone when needed. * Try to render less using a variety of techniques such as virtual scrolling and lazy rendering * Don’t listen to everything: subscribe to only the items that are visible, and subscribe to only one global event listener Summary These are the reasons and it's solution about Angular Application Performance.

Get in Touch

Is your mind buzzing with ideas?
Let us know about them!

Contact Us