Angular moves fast without breaking things (JS Party #312)
Feb 15, 2024
auto_awesome
"The Dazzle of Zebras" (Angualar team members Jessica Janiuk & Mark "Techson" Thompson) discuss Angular's new deferrable views, the team's approach to handling change and the lessons learned from AngularJS. Topics include the benefits of an offline-first architecture, server-side rendering, misconceptions about Angular, and the framework's longevity. Get ready for a riot of puns and insightful discussions!
The introduction of deferable views in Angular allows for lazy loading and deferred loading of specific parts of a component, optimizing application performance and reducing initial bundle sizes.
The Angular team has made control flow improvements in the framework, revamping structural directives and introducing a new syntax, leading to boosted performance and enhanced developer experience.
The Angular team has focused on improving the developer experience and reducing friction for newcomers by revamping the Angular learning journey, providing comprehensive tutorials and embracing a developer preview approach.
Deep dives
Deferable Views and Opt-in Features
One of the main highlights discussed in this podcast episode is the introduction of deferable views in Angular. This feature allows for lazy loading and deferred loading of specific parts of a component, which provides developers with the power to optimize their applications. It simplifies the process of reducing initial bundle sizes and improves the overall performance. The defer attribute can be used in the component's template to specify which parts should be deferred, and Angular handles the analysis and chunking of these dependencies at compile time. Developers can also take advantage of triggers like on interaction or on hover to control when the deferred views are loaded. Additionally, the Angular team follows an opt-in approach for introducing new features, with a developer preview label indicating that breaking changes may still occur. This method enables faster iteration and feedback while allowing developers to choose when to upgrade to the new features.
Control Flow Improvements and Syntax
The Angular team has made significant control flow improvements in the framework, resulting in a major boost in performance. They have revamped the structural directives to provide better control flow, making it easier to work with for loops, if-then statements, and other control flow structures in Angular templates. This improvement not only enhances performance, but also simplifies development and improves the overall developer experience. In addition, the team has introduced a new syntax, known as the at syntax, which was inspired by Razor syntax. This syntax has been well-received by the community and contributes to a more intuitive and efficient Angular development process.
Angular's Learning Journey and Developer Preview Approach
The Angular team has been proactive in addressing the challenges of learning Angular, aiming to improve the developer experience and reduce friction for newcomers. They have revamped the Angular learning journey, creating a new website (angular.dev) with comprehensive tutorials and examples that developers can interact with in the browser. This Learn by Doing approach allows developers to focus on Angular-specific concepts without getting overwhelmed by configuration or tooling concerns. Additionally, the team has embraced a developer preview approach, allowing them to introduce new APIs and features while reserving the right to make breaking changes until the feature is officially stable. This enables developers to try out new functionalities early on and provide valuable feedback to the Angular team.
Benefits of Offline First Architecture for Developers
The move to an offline first architecture simplifies state management, making it easier for developers to work with. By storing the global state in a local database, such as a SQLite database, developers can keep their logic simple and functional. This approach also reduces the backend compute load and cost, as well as the dependency on the backend. Overall, adopting an offline first architecture provides developers with a simplified and efficient way to manage state.
The Evolution and Future of Angular
Angular has evolved over the years and continues to be a powerful and comprehensive framework. It is designed to meet the needs of enterprise applications and offers a batteries-included approach. Despite previous misconceptions, Angular is not as complicated as some may believe. It now provides a user-friendly tutorial that is beginner-friendly, making it more accessible to all developers. Additionally, Angular has a strong community and continues to innovate, addressing core needs such as performance and reactivity. It remains a versatile platform for building robust web applications.
KBall & Amal dive deep with the “Dazzle of Zebras” (possible future band name), Angular team members Jessica Janiuk & Mark “Techson” Thompson. Along with an absolute riot of puns, they cover topics such as Angular’s new deferrable views feature, how the Angular core team handles change, and lessons learned from the AngularJS-Angular 2 debacle that allow Angular to now move fast without breaking things.
Changelog++ members get a bonus 5 minutes at the end of this episode and zero ads. Join today!
Sponsors:
Vercel – Zero configuration for over 35 frameworks Vercel is the Frontend Cloud makes it easy for any team to deploy their apps. Today, you can get a 14-day free trial of Vercel Pro, or get a customized Enterprise demo from their team. Visit vercel.com/changelogpod to get started.
PowerSync – Don’t build your own sync layer! PowerSync enables an offline-first architecture to make your application real-time and reactive. PowerSync is framework agnostic with open source client SDKs and plugs into your existing database, backend, and application to give you an offline-first/local-first architecture without having to build your own sync layer.
Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs.