Angular

State of Angular | October 2021

Nov 1, 2021

3 min read

This event was co-hosted by Tracy Lee, CEO of This Dot Labs, and Minko Gechev, Software engineer at Google, Angular Core team.

What's new in the ecosystem? What will be included in the upcoming releases? What should we expect in Angular's future? These topics were discused along with a featured panel:

Igor Minar, Software Engineer at Google
Jessica Janiuk, Senior Software Engineer at Google
Mark Thompson, Developer Advocate at Google
Emma Twersky, Developer Relations Engineer at Google
Zach Arend, Software Engineer at Google
Alex Rickabaugh, Software Engineer at Google

Here are some of the key takeaways:

What is Angular?

At the start, Minko Gechev quickly introduced us to Angular and how he define the State of Angular today.

Ivy

In Angular v9 back in early 2020, the Core Team introduced Ivy as their default compiler and runtime. The benefits of using Ivy include reduced compile times and smaller application bundle sizes.

Improved Angular Debuggability and Profiling

The latest Angular DevTools release allows users to have more insight to their application's performance. You can now see the runtime behavior, explore how often the change station becomes involved, and identify several other performance bottlenecks.

Angular v13 (Coming in Nov '21)

What should we expect on the upcoming Angular release?

Minko introduces us to a couple of new features, which include:

Removal of IE11 support: Using this, we can take advantage of the CSS Variables, Intersection Observers, CSS Grid, and many other features which aren't allowed in IE11.
Modern Angular package format: This will translate in partially compiled Angular, removed UMD bundles, and ES2020 by default (Async/await via transform).

Also, we will enjoy some ng build optimization, which promotes 10% faster builds, and 20-25% faster builds for production builds!

Additional v13 features,
- Adobe font inlining
- Webpack 5 cache
- Dynamic validator control
- Better tools for promoting

Upcoming improvements, according to Minko, includes:

Extended Analysis,
Simplified Factory API
Advanced Guides
MDC Web

Standalone Components

One of the most interesting features in v13 will be Standalone Components, which will help to reduce the cognitive overheads that ngModules provide in certain scenarios.

Conclusion

Angular v13 introduces us to a new easy way to create components, which allow us to avoid ngModules unnecesarialy.

Also, with the removal of IE11 support, we can take full advantage of some features which aren't allowed on that browser, and avoid some polyfill files.

Congratulations, Angular team!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Daian Scuarissi

@asdaian @SDaian

End-to-end type-safety with JSON Schema

End-to-end type-safety with JSON Schema I recently wrote an introduction to JSON Schema post. If you’re unfamiliar with it, check out the post, but TLDR: It’s a schema specification that can be used to define the input and output data for your JSON API. In my post, I highlight many fantastic benefits you can reap from defining schemas for your JSON API. One of the more interesting things you can achieve with your schemas is end-to-end type safety from your backend API to your client application(s). In this post, we will explore how this can be accomplished slightly deeper. Overview The basic idea of what we want to achieve is: * a JSON API server that validates input and output data using JSON Schema * The JSON Schema definitions that our API uses transformed into TypeScript types With those pieces in place, we can achieve type safety on our API server and the consuming client application. The server side is pretty straightforward if you’re using a server like Fastify with already enabled JSON Schema support. This post will focus on the concepts more than the actual implementation details though. Here’s a simple diagram illustrating the high-level concept: We can share the schema and type declaration between the client and server. In that case, we can make a request to an endpoint where we know its type and schema, and assuming the server validates the data against the schema before sending it back to the client, our client can be confident about the type of the response data. Marrying JSON Schema and TypeScript There are a couple of different ways to accomplish this: * Generating types from schema definitions using code generation tools * Creating TypeBox definitions that can infer TypeScript types and be compiled to JSON Schema I recommend considering both and figuring out which would better fit your application and workflows. Like anything else, each has its own set of trade-offs. In my experience, I’ve found TypeBox to be the most compelling if you want to go deep with this pattern. Code generation A couple of different packages are available for generating TS types from JSON Schema definitions. * https://github.com/bcherny/json-schema-to-typescript * https://github.com/vega/ts-json-schema-generator They are CLI tools that you can provide a glob path to where your schema files are located and will generate TS declaration files to a specified output path. You can set up an npm hook or a similar type of script that will generate types for your development environment. TypeBox TypeBox is a JSON Schema type builder. With this approach, instead of json files, we define schemas in code using the TypeBox API. The TypeBox definitions infer to TypeScript types directly, which eliminates the code generation step described above. Here’s a simple example from the documentation of a JSON Schema definition declared with TypeBox: ` This can then be inferred as a TypeScript type: ` Aside from schemas and types, TypeBox can do a lot more to help us on our type-safety journey. We will explore it a bit more in upcoming sections. Sharing schemas between client and server applications Sharing our JSON Schema between our server and client app is the main requirement for end-to-end type-safety. There are a couple of different ways to accomplish this, but the simplest would be to set up our codebase as a monorepo that contains both the server and client app. Some popular options for TypeScript monorepos are: PNPM, Turborepo, and NX. If a monorepo is not an option, you can publish your schema and types as a package that can be installed in both projects. However, this setup would require a lot more maintenance work. Ultimately, as long as you can import your schemas and types from the client and server app, you are in good shape. Server-to-client validation and type-safety For the sake of simplicity, let's focus on data flowing from the server to the client for now. Generally speaking, the concepts also apply in reverse, as long as your JSON API server validates your inputs and outputs. We’ll look at the most basic version of having strongly typed data on the client from a request to our server. Type-safe client requests In our server application, if we validate the /users endpoint with a shared schema - on the client side, when we make the request to the endpoint, we know that the response data is validated using the user schema. As long as we are confident of this fact, we can use the generated type from that schema as the return type on our client fetch call. Here’s some pseudocode: ` Our server endpoint would look something like this: ` You could get creative and build out a map that defines all of your endpoints, their metadata, and schemas, and use the map to define your server endpoints and create an API client. Transforming data over the wire Everything looks stellar, but we can still take our efforts a bit further. To this point, we are still limited to serialized JSON data. If we have a created_at field (number or ISO string) tied to our user, and we want it to be a Date object when we get a hold of it on the client side - additional work and consideration are required. There are some different strategies out there for deserializing JSON data. The great thing about having shared schemas between our client and server is that we can encode our type information in the schema without sending additional metadata from our server to the client. Using format to declare type data In my initial JSON Schema blog post, I touched on the format field of the specification. In our schema, if the actual type of our date is a string in ISO8601 format, we can declare our format to be "date-time". We can use this information on the client to transform the field into a proper Date object. ` Transforming serialized JSON Data This can be a little bit tricky; again, there are many ways to accomplish it. To demonstrate the concept, we’ll use TypeBox to define our schemas as discussed above. TypeBox provides a Transform type that you can use to declare, encode, and decode methods for your schema definition. ` It even provides helpers to statically generate the decoded and encoded types for your schema ` If you declare your decode and encode functions for your schemas, you can then use the TypeBox API to handle decoding the serialized values returned from your JSON API. Here’s what the concept looks like in practice fetching a user from our API: ` Nice. You could use a validation library like Zod to achieve a similar result but here we aren’t actually doing any validation on our client side. That happened on the server. We just know the types based on the schema since both ends share them. On the client, we are just transforming our serialized JSON into what we want it to be in our client application. Summary There are a lot of pieces in play to accomplish end-to-end type safety. With the help of JSON Schema and TypeBox though, it feels like light work for a semi-roll-your-own type of solution. Another great thing about it is that it’s flexible and based on pretty core concepts like a JSON API paired with a TypeScript-based client application. The number of benefits that you can reap from defining JSON Schemas for your APIs is really great. If you’re like me and wanna keep it simple by avoiding GraphQL or other similar tools, this is a great approach....

Apr 17, 2024

6 mins

JSONTypeScript

4 Angular Component Libraries That are Perfect for Beginners

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

Angular

What's New in React 18?

Finally, we have a new version of React. Officially, React 18 is now ready to use! What new features were introduced in this version? Let’s find out in detail. In my opinion, the latest feature that revolutionized the React Ecosystem was React Hooks, introduced in React 16.8 back in 2019. Since then, we have seen many versions being released. But without any major changes, what will happen in React 18? Let’s dig into the details. New Features Concurrent React According to the official website of React, this is the major addition in React 18. With this new feature released, the devs will benefit from being able to prepare multiple versions of your UI at the same time. So, React will delegate to the dev to identify which changes are important to re-render the component. ` ` Automatic Batching With this new exciting feature, React will combine multiple setState() calls into a single re-render to improve performance. Before this, if we had multiple setState() inside of a setTimeout(), React will re-render for every state update which sometimes causes performance issues if we have larger components. You may already be familiar with this. This feature was available in React 17, but now it comes out-of-the-box. ` ` Transitions This new feature lets the dev split the state update into two categories: urgent and low priority. For some actions, like selecting in a dropdown or updating a input, you want the action to respond immediately, so now we had the possibility to distinguish between an urgent update and a non-urgent one. Updates wrapped in startTransition are handled as non-urgent, and will be interrupted if more urgent updates like clicks or keypresses come in. ` New Suspense Features Finally, we will have Suspense in the server. In the apps that are server-rendered, we will have only one Suspense API. Another cool thing is if we use Suspense in the server, we will start progressively streaming HTML. This enables selective hydration in the client. On paper, it looks awesome, but what does that mean? If you are waiting for some data on the server, React can stream HTML for the fallback, and let the user see the rest of the page. When the data is ready, the user will able to see the content HTML. This means that a single slow data source on the server will no longer hold the entire page back. New Hooks When we started this post, we mentioned that a few years ago, Hooks were the latest feature release in React. Now, React 18 will bring new Hooks: - useId : we can use this new hook to create a new identifier in the server and in the client. ` - useTransition: to create a new state update that has lower priority. ` - useDeferredValue: to update some deferred values in a controlled way (perfect for inputs, selects, etc). ` - useSyncExternalStore - useInsertionEffect IE11 not longer supported IE11 is no longer supported since React 18. If your app needs to continue bringing support to IE11, you will need to stay at React 17.x. Conclusion The most recent release from React includes some cool features like Automatic Batching or Concurrent Mode, which should improve the performance of React in the latest release. I'm really excited to see how these new features will perform in a real-life app, but they look more than promising. As we see, React 18 introduced out-of-the-box improvements, and new features that look incredible. It has cleared the way for new possibilities in React.js app development. If you want be aware of the upcoming or most recents changes, you can check out React JS Meetups....

Apr 4, 2022

3 mins

ReactJavaScriptWeb Development

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024

Join us backstage at CityJS Conf for this conversation with Jason Lengsdorf. In this discussion, we explore strategies for reducing stress and anxiety among engineers, ensuring they maintain relevance in the dynamic world of coding. Jason emphasizes the importance of self-assurance and the role of play in fostering continual engagement with evolving technologies. Moreover, we get a sneak peek into Jason's latest venture, "Web Lunch," a platform where he converses with developers who have found harmony between their careers and personal satisfaction. Coding isn't just a job; it's a passion and a lifestyle. Jason highlights the significance of pursuing work that excites and challenges us, echoing the sentiment that coding can be both a career and a hobby. By infusing enjoyment and creativity into our coding endeavors, we can shape our professional trajectories in alignment with our values and interests. This approach not only minimizes regret but also maximizes happiness and fulfillment in our careers. Central to our discussion is the pivotal role of effective leadership in creating a supportive and encouraging work environment. Leaders who prioritize the well-being and happiness of their team members foster a culture of collaboration and empowerment. Through mentorship, guidance, and opportunities for growth, these leaders enable developers to align their personal goals with organizational objectives, leading to increased job satisfaction and professional fulfillment. Adaptability is key to sustained success in software engineering. Jason emphasizes the value of remaining open-minded and continuously learning, even when it means stepping out of our comfort zones. Embracing discomfort is an integral part of personal growth, allowing us to overcome obstacles and unlock our full potential. By nurturing a spirit of curiosity and adaptability, developers can navigate the complexities of their careers with resilience and enthusiasm....

Apr 25, 2024

2 mins

JavaScriptMentorship

State of Angular | October 2021

What is Angular?

Ivy

Improved Angular Debuggability and Profiling

Angular v13 (Coming in Nov '21)

Standalone Components

Conclusion

Daian Scuarissi

You might also like

End-to-end type-safety with JSON Schema

4 Angular Component Libraries That are Perfect for Beginners

What's New in React 18?

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024

You might also like

End-to-end type-safety with JSON Schema

4 Angular Component Libraries That are Perfect for Beginners

What's New in React 18?

How to Make Coding Both Your Hobby and Profession with Jason Lengsdorf @ CityJS Conf 2024