"The Dazzle of Zebras", Angular team members Jessica Janiuk & Mark Thompson, discuss topics such as deferrable views, handling change, & lessons learned from Angular's evolution. They explore control flow syntax, server-side rendering, quick changes based on user feedback, and misconceptions about Angular's complexity. The conversation also takes a lighthearted turn with discussions of starting a band and appreciating each other's creativity.
Deferable views in Angular enable lazy loading of specific parts of a component, improving performance and reducing the initial bundle size.
Angular has made significant improvements in control flow with the introduction of simpler syntax and easier declaration of triggers, resulting in better performance and a smoother development experience.
The Angular team prioritizes evidence-driven development, continuously improving the developer experience, and embraces a developer preview concept to enhance the stability and usability of Angular.
Deep dives
Deferable views: A powerful feature for lazy loading and optimizing Angular apps
Deferable views in Angular allow developers to lazy load and defer the loading of specific parts of a component at the template level. This feature provides a lot of power to optimize applications by reducing the initial bundle size and improving performance. Unlike previous approaches, which required custom complexity, deferable views simplify the process and provide a better developer experience. The analysis for dependency structure is done at compile time, ensuring efficient loading and avoiding duplicate loading of utility functions or other dependencies. Deferable views can be used in both server-side rendering and client rendering, making it a versatile feature for Angular developers.
Control flow improvements and the adoption of new syntax in Angular
Angular has made significant improvements in control flow, resulting in performance gains and a better developer experience. The introduction of at syntax, inspired by razor syntax, has replaced complex structural directives and made control flow more intuitive. The new syntax allows for easy declaration of triggers, such as on interaction or on viewport, and handles placeholders and error handling. These improvements have been well received by the community and contribute to a faster and more efficient development process in Angular.
The Angular team's focus on evidence-driven development and developer experience
The Angular team prioritizes evidence-driven development, listening to feedback, and continuously improving the developer experience. They have revamped their learning journey and educational resources, leveraging techniques like Code School's learn-by-doing approach. The team also embraces a developer preview concept, releasing new features that may still undergo breaking changes until the preview label is removed. This allows for faster iteration, experimentation, and learnings to enhance the stability and usability of Angular.
Offline-first architecture simplifies state management for developers
An offline-first architecture simplifies state management for developers by storing global state in a local database, such as SQLite. This approach eliminates the complexity of working with external state management libraries or frameworks and allows the app logic to focus on reflecting the content of the database in the UI. Additionally, developers can shift data manipulation and logic to the front end, reducing backend compute load and costs, and reducing dependency on the backend API.
Angular's transition to server-side rendering and the complexity pendulum
Angular's evolution highlights the pendulum swing of complexity in web development. Initially, there was a shift toward single-page applications and away from server-side rendering. However, Angular recognized the need for server-side rendering and introduced Angular Universal from the community to address this limitation. Over time, Angular improved its server-side rendering approach with static site generation, server-side rendering, and hydration, providing better performance and user experiences. Angular acknowledges the need to balance innovation with the learning journey, focusing on improving the reactivity and simplifying the architectural complexities to support both enterprise users and newcomers to the framework.
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.