Our team of Angular architects include many of the industry’s most influential developers and Google Developer Experts. We work closely with the Angular team to support Angular adoption and growth. This helps decision making as we can lead architectural decisions with insights into what’s coming in the future of the framework.
Our approach to development considers our client’s present and future needs as they relate not only to functionality and performance, but longevity and scalability. We strive to ensure our clients get the most out of their investments for years to come.
When scaling enterprise applications, creating boundary contexts is essential to help modularly develop applications and improve features quickly.
We take one of two approaches: monorepos or microfrontends, with a recommendation for monorepos. Our team will work with stakeholders to understand what solution best fits the organization’s needs and create a solution that will last.
We have extensive experience with managing state in Angular applications. Our team typically recommends using NgRx or Apollo Client depending on whether REST or GraphQL are used for APIs. These libraries are extensively used and battle tested in production environments and promoted by the Angular team.
State management is critical to large applications that share knowledge across multiple submodules. These tools allow us to create stores that application modules can communicate through to share knowledge about global objects important to key user flows and experiences.
When migrating systems, we can either take an incremental adoption strategy or an all-at-once approach.
Pending on the existing solution, we opt for an incremental adoption approach. We do this by targeting well-encapsulated modules and migrating them independently to provide value back to the business quickly. This allows new features and business requirements to be added to the existing system in parallel with the migration and users to test any new UI enhancements in an isolated manner to test for adoption.
However, in some cases where an incremental adoption is not the best approach, we may recommend an all-at-once migration if the business can support this timeline.
Many of our clients have web applications and a need for a native desktop or mobile solution. With Angular, we utilize technologies like Ionic and Cordova to develop mobile solutions and Electron to develop desktop solutions.
These solutions allow applications to be maintained in the same source code while making the applications available via the native alternative.
An alternative solution we may recommend depending on the requirements may be a Progress Web Application (PWA). PWAs are supported by Angular out of the box and allow for a native look for an application on mobile devices without the cost of developing a native solution.
Our clients are building for the future. Explore This Dot Labs' portfolio, and see how we have helped them achieve their diverse technical goals.
Get your team the help they need through our in person and remote training options. We offer a variety of training options adapted to your team's specific needs with our subject matter experts.
Make your apps accessible!
Explore advanced concepts that can improve performance.
Learn to test different aspects of your Angular application.
Make your most complex Angular apps accessible!
Our clients are building for the future. Explore This Dot Labs' portfolio, and see how we have helped them achieve their diverse technical goals.
topics covered in this case study:
Ahead of Google I/O in May 2023, the Angular Core Team reached out to This Dot Labs to help them deliver a demo application, showcasing a highly interactive ML integrated application built using Angular with TensorFlow.js in time for the conference.
topics covered in this case study:
A multinational pharmaceutical corporation that engages in pharmaceutical research and marketing partnered with This Dot Labs to develop and finalize an existing custom software platform and build two new applications.
topics covered in this case study:
This Dot Labs was hired to revive, stabilize, and modernize an abandoned suite of Cypress tests, with the goal of getting 25 individual tests running in their pipeline in under 20 minutes with a consistent pass rate near 100%.
topics covered in this case study:
The team at This Dot helped develop and finalize an existing custom software platform for its client.
Google's Minko Gechev and Jeremy Elbourn announced many exciting things at NG Conf 2024. Among them is the addition of several new signal-based APIs....
Apr 3, 2024
3 mins
With all the new changes to Angular and RxJS, using HttpClient can get confusing and you can get lost in outdated tutorials. This blog post guides you through the process of creating a service that exposes http calls and using it in a component....
Mar 27, 2024
4 mins
For beginners starting with Angular, the journey can feel daunting, especially when it comes to setting up projects from scratch. However, there is a range of outstanding Angular component libraries that alleviate this initial hurdle: ready-made toolkits, empowering newcomers to start building Angular applications without the complexities of bootstrapping their projects. Let’s take a look! Angular Material Angular Material is a UI component library by Google for Angular applications. It provides a variety of pre-built components following the Material Design guidelines, offering customization options, responsive design, and accessibility features. It's seamlessly integrated with Angular and offers extensive documentation and community support. NG-ZORRO NG-ZORRO is an Angular UI component library based on Ant Design by Alibaba. It offers a variety of customizable components for building modern web applications. With seamless Angular integration, responsive design, and accessibility features, NG-ZORRO simplifies development while following Ant Design principles. NG Bootstrap NG Bootstrap is a library for Angular developers to easily incorporate Bootstrap components into their applications without relying on jQuery. It offers Angular-specific directives and components, ensuring compatibility and performance within Angular projects while maintaining Bootstrap's responsive design and customization options. Clarity Design System Clarity is an open-source design system by VMware that offers a set of Angular components for building enterprise-scale applications. It provides components specifically tailored for data-centric applications, dashboards, and complex user interfaces. Clarity Design System emphasizes clarity, consistency, and usability in its components. The beginner’s journey can be both exhilarating and challenging. However, with the advent of powerful component libraries like Angular Material, NG-ZORRO, NG Bootstrap, and the Clarity Design System, the path becomes significantly smoother. These libraries offer pre-built components and design systems that eliminate the need to bootstrap projects from scratch. As beginners embark on their Angular journey, these libraries provide a sturdy foundation, allowing them to dive into development with confidence. By harnessing the capabilities of these libraries, beginners can not only expedite their learning curve but also craft exceptional Angular applications with ease and efficiency....
Mar 14, 2024
2 mins
QR codes provide a very valuable way of sharing information with users, and many applications rely on them for various purposes....
Dec 13, 2023
4 mins
Dive into the Angular Renaissance with Angular 17, emphasizing standalone components, enhanced control flow syntax, and a new lazy-loading paradigm. Discover server-side rendering improvements, hydration stability, and support for view transitions....
Nov 20, 2023
6 mins
NgRx is a great tool that allows you to manage state and side effects in Angular applications in a Redux-like manner. It streamlines state changes with its unidirectional data flow, and offers a structured approach to handling data and side effects. Numerous posts on our blog detail its strengths and affiliated techniques. Some Angular developers even argue that incorporating NgRx is imperative once an app expands beyond two features. While NgRx can undoubtedly enhance an Angular application or library by simplifying debugging, translating business logic into code, and improving the architecture, it does present a steep learning curve. Despite the provocative title, there is some truth to the statement: your app or library may indeed not need NgRx. Surprisingly, I successfully developed a suite of enterprise Angular libraries over five years without involving NgRx. In that project, we decided to opt out of using a state management library like NgRx because of its steep learning curve. Developers with varying levels of Angular expertise were involved, and the goal was to simplify their experience. My bold assertion is that, with careful consideration of architectural patterns, it is entirely possible to develop a robust app or library using only Angular, without any third-party libraries. Employing select design patterns and leveraging Angular's built-in tools can yield a highly maintainable app, even without a dedicated state management library. Having shared my somewhat audacious opinion, let me now support it by outlining a few patterns that facilitate the development of a maintainable, stateful Angular application or library without NgRx. Services and the Singleton Pattern Services provided in root or a module yield a shared instance across the entire app or module, effectively rendering them singletons. This characteristic makes them ideal for managing and sharing state across components without requiring a dedicated state management tool like NgRx. Particularly, for small to medium-sized applications, a "state service" can be a straightforward and effective alternative to a comprehensive state management solution when implemented correctly. To accurately implement state in a singleton service, consider the following: - Restrict state data to private properties and expose them only through public methods or observables to prevent external mutations. Such a pattern safeguards the integrity of your state by averting unauthorized modifications. - Utilize BehaviorSubjects or signals to enable components to respond to state changes. Both BehaviorSubject and SettableSignal retain the current value and emit it to new subscribers immediately. Components can then subscribe to these to receive the current value and any subsequent updates. - Expose public methods in your service that manage state modifications to centralize the logic for updating the state and incorporate validation, logging, or other necessary side effects. - When modifying state, always return a new instance of the data rather than altering the original data. This ensures that references are broken and components that rely on change detection can accurately detect changes. Good Component Architecture Distinguish your UI components into stateful (containers) and stateless (presentational) components. Stateful components manage data and logic, while stateless components merely receive data via inputs and emit events without maintaining an internal state. Do not get dragged into the rabbit hole of anti-patterns such as input drilling or event bubbling while trying to make as many components presentational as possible. Instead, use a Data Service Layer to provide a clean abstraction over backend API calls and handle error management, data transformation, caching, and even state management where it makes sense. Although injecting a service into a component technically categorizes it as a "smart" component, segregating the data access logic into a separate service layer ultimately enhances modularity, maintainability, scalability, and testability. Immutability A best practice is to always treat your state as immutable. Instead of modifying an object or an array directly, you should create a new copy with the changes. Adhering to immutability ensures predictability and can help in tracking changes. Applying the ChangeDetectionStrategy.OnPush strategy to components whenever possible is also a good idea as it not only optimizes performance since Angular only evaluates the component for changes when its inputs change or when a bound event is triggered, but it also enforces immutability. Change detection is only activated when a different object instance is passed to the input. Leveraging Angular Router Angular's router is a powerful tool for managing application state. It enables navigation between different parts of an application, allowing parameters to be passed along, effectively using the URL as a single source of truth for your application state, which makes the application more predictable, bookmarkable, and capable of maintaining state across reloads. Moreover, components can subscribe to URL changes and react accordingly. You can also employ router resolvers to fetch data before navigating to a route, ensuring that the necessary state is loaded before the route is activated. However, think carefully about what state you store in the URL; it should ideally only contain the state essential for navigating to a specific view of your application. More ephemeral states, like UI state, should be managed in components or services. Conclusion Angular provides lots of built-in tools and features you can effectively leverage to develop robust, maintainable applications without third-party state management libraries like NgRx. While NgRx is undoubtedly a valuable tool for managing state and side effects in large, complex applications, it may not be necessary for all projects. By employing thoughtful design patterns, such as the Singleton Pattern, adhering to principles of immutability, and leveraging Angular's built-in tools like the Router and Services, you can build a highly maintainable and stateful Angular application or library....
Sep 1, 2023
4 mins
