Angular

State of Angular Ecosystem | December 2021

Dec 14, 2021

5 min read

This is a recap from the event State of Angular Ecosystem, you can see the full watch on State of Angular Ecosystem | Dic 2021.

This event was hosted by Rob Ocel, Software Architect and Engineering Lead at This Dot.

What's is new on the Angular Ecosystem? What should be expect on the upcoming releases? How Angular ecosystem looks like in the future?

Also, we had this amazing panel:

Minko Gechev, Software engineer at Google, Angular Core team.
Ben Lesh, RxJS core team lead.
Mark Whitfeld, Software engineer at Stackblitz, NGXS corea team lead.
Brandon Roberts, Senior Angular Engineer, Nrwl & NgRx maintainer.
James Daniels, Developer Relations, Firebase.
Jessica Janiuk, Senior Software Engineer, Google.

RxJS updates (Ben Lesh)

Weeks ago was introduced RxJS 7.4, the latest version from the RxJS team, which has many features, but first of all, the bundle size compared between RxJS 6 vs RxJS 7 (if you include everything RxJS exports, included new features!) was cut by almost the half, so if you are thinking to switch between those versions, you should go ahead.

Now, v7 has tons of typings fixes/updates, but now requires TypeScript 4.2+.

Most of the new features included in the new version are:

Top-level exports
Multi-cast simplified
Improved retry ergonomics
Animation Frames
New tap features
AsyncIterable support

That's was most of the most importants features delivered on RxJS 7.4, but there is more such as:

Ajax/fetch improvements
Supporting for aborting promises & more...

Regarding in how many downloads has RxJS, the downloads has increased consideraly since RxJS 6 in 2018. Now we can 30M downloads a week, back then in 2018 they have only 10M per week.

Stackblitz (Mark Whitfeld)

Now Stackbliz has support for Angular v13, this was thanks to the upgrade of Stackblitz v2, which runs over web-containers.

This new upgrade to Stackblitz v2, avoid to have custom-code depending on which framework you are running, making Stackblitz more agnostic from the framework (Angular, React, Vue) you are using. In fact, there is no custom-code to support any of the most used frameworks.

NGXS (Mark Whitfeld)

Now NGXS has support for Angular v13, with this mayor release there are up-to-date with the latest version of Angular. They are working on deliver another big features too.

Angular Core (Minko Gechev, Jessica Janiuk)

Ivy

Ivy now its the default engine to run compilation in Angular, which lead us a huge increase of performance vs versions who runs other engines to compile Angular.

With the implementation of Ivy as default, we can see a:

90% reduction of computational resources.
-50 mins faster build for the biggest app in Google.
Improved debuggability and profiling.
More effective relation between Github issues vs Fixes, thanks to a huge effort from the Team.
New system for RFC process.

What's new in Angular v13?

With the recent release of Angular v13 some new features are delivered, which include:

Removal of IE11 support (no more polyfills file, yaaaay)
Modern angular package format.
- Partially compiled Angular
- Removed UMD bundles
- ES2020 output
Adobe font inlining
Webpack 5 cache
Dinamic validator control
Better a11y

What are we building next?

Some of the upcoming improvements are:

Extended analysis
Simplified factory API
Advanced guides
MDC Web

Standalone components

Maybe some of the biggest updates which are upcoming on the next versions of Angular are Standalone components, who will run without adding to any module. This Standalone component will be bootstrapped directly into the Angular module, and the bundle will be reduced significantly.

NgRx (Brandon Roberts)

The most recent version of NgRx added some new features as:

Angular v13 support
RxJS 7 support
Ivy compiled libraries support
Feature creators
Improved selectors
Contributors page

Nx (Brandon Roberts)

The recent release of Nx, which is v13.2, also now include Angular v13 support. Also NgRx v13, and NestJS 8 support was included in the most recen version. Now, there is a RxJS 7 upgrade option for Nx.

AngularFire (James Daniels)

The official library from Firebase to Angular also release some of the next features:

Firebase v9 support, entirely tree-shakable support, RxJS 7 & Angular v13 support.
Firebase v8 compatibility.
Internally uses AngularFire, increased agility and less duplication.
Partial compilation, Ivy support.
Powerful new schematics

In the upcoming releases for AngularFire, the team is working to improve the next items:

Documentation drive
ng deploy capabilities
More schematics on the way...
Better bundling/rehydration
Prebuilt UI components

Conclusion

Angular v13 bring to us so many new features, therefore the Ecosystem of Angular is updating to support this new release.

Some of the most libraries used with Angular are pushing forward and taking the framework from Google to the next level.

Also the Angular team, is listening to the community and making the upcoming releases more beginner-friendly such as `Standalone components. As Angular dev, we celebrate the removal of IE11 support without that, we can take advantages of most CSS features who are not supported in that browser.

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

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

AI (Probably) Won’t Ruin Your Engineering Career with Ben Lesh, Adam Rackis, & Tracy Lee

In this episode of the Modern Web Podcast, hosts Tracy Lee, Ben Lesh, and Adam Rackis kick things off by discussing the progress of observables landing in the browser and the potential impact it could have on the use of RXJS. As developers, we're always on the lookout for new tools and technologies that can make our lives easier, and observables in the browser certainly have the potential to do just that. They talk about whether or not you should listen to your “customers” or have a strong vision that you want to push forward, like Ryan Carniato and his approach with Solid and Signals. The three also talk about AI tools, such as GPT and Co-Pilot, and how they are shaping the future of coding and ideation. Finally, Ben, Adam, and Tracy briefly touch on the potential impact of automation on job roles and the outsourcing of tech jobs. While automation can streamline certain tasks, it's important to remember that human creativity and problem-solving skills are irreplaceable. Download this episode here!...

Feb 16, 2024

1 min

ReactRxJSArtificial Intelligence

Understanding Next.js Data Fetching for Beginners

When I started to learn Next.Js, I felt a little bit lost with some abbreviations they use to make the data fetching. All of them look pretty simmilar, but they have different meanings. If you feel the same, you are not alone. Let's discover what CSR, SSR, SSG, and ISR means, and how we can use them. It is quite confusing because I, as an Angular developer, only knew one strategy to fetch the data:HttpClient. But for example, if you are more familiar with React, you probably use a different strategy: useEffect. So, let's get started. Vercel's Next.js framework has four different data fetching options despite being known as a server-side render framework: - CSR - Client-Side Rendering is a common data fetching method using useEffect. It will fetch the data from the API every single page request on the client-side (after the page is rendered, then the function will run). - SSR - Server-Side Rendering will run a special function to fetch data from the API with every page request on the server-side (before the page is loaded, that special function will run first, creating a delay, then after that, it will serve the page). - SSG - Static Site Generation will run a special function to fetch data once when that page builds. - ISR – Incremental Static Regeneration offers a new method. Shortly put, it is a combination of SSG, and SSR, where it served statically, but at a certain time and certain condition, that page will rebuild and fetch the data from the API again. Don't worry if you don't understand any of the concepts. I will explain a little bit further shortly. CSR (Client-Side Rendering) This is a basic example of how you can use Client-Side Rendering. I'm using the well known useEffect method from React. ` You can see how it works on Stackblitz. We can highlight 2 things here: - The useEffect method to make the retrieve of the name every time the page loads. - A loading indicator, this is used to wait for the fetching data, because the data is fetched after the page is rendered. SSR (Server-Side Rendering) Just to keep in mind, when you are using Server-Side rendering, and using the method getServerSideProps(), Next.js will pre-render this page on each request using the data returned by getServerSideProps. ` You can see how it works: Stackblitz We had 3 highlights here: - Method getServerSideProps(), is a function indicating that a page is using Server-Side Rendering. - We had a delay before render, and NO loading indicator. The data is fetched before the page is rendered, so that's why we can see a little delay. - Data is fetched on every request, that's why every time we reload the page, is showing a different dad joke. SSG (Static Site Generator) If we take a look at the code below, we will see that it is pretty similar to the SSR code, but the difference here is the getStaticProps method. This method will only fetch when the app is building. ` The highlights here are: - getStaticProps is a method indicating that the page is using Static Site Generation. - Data will be fetched only when you run yarn build. The API will be hit only when the app is building. - Data will NOT change because there is no further fetch. You can see how it works: Stackblitz ISR (Incremental Static Regeneration) This strategy works pretty simmilar like SSG, but here we need to add a revalidate prop to our main getStaticProps function. ` There are a few keys to highlight here: - When you set the revalidate prop to certain amount of time (in our example we set it to 20), reloading doesn't trigger changes. The page will remain in a cooldown state. - Is the page rebuilt every 20 seconds then? No. When the cooldown state is off, if no one visits the page, it will not rebuild even after the 20s pass. But the first person who enters the page when the cooldown state is off will trigger a rebuild. However, that person will not see those changes. But the changes will be applied to the next full reload. You can see how it works: Stackblitz Conclusion Understand how these abbreviations work, and how we can use it in a Next.js app will help us develop more robust solutions, and use Next.js' full potential. I know these terms can sound overwhelming and difficult to understand, but with a little bit of practicing, we can see in action in a few steps. In future blog posts, we will see the best approach to identify and choose between them....

May 9, 2022

4 mins

NextJSJavaScriptReact

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal

Shuchi Mittal, the Head of Cloud enablement at Honeywell, discusses how she as a leader in platform engineering has been able to transform internal platform engineering teams at other organizations by providing teams with value-added services, and how they effectively managed costs. She talks about how to treat these teams as customers, and delivering services that meet the customer needs, but also charging them for their usage. By providing policy-compliant infrastructure and unique services tailored to their requirements, platform engineering teams can showcase their commitment to supporting the success of other teams within an organization. This approach not only fosters trust but also positions platform engineering as a strategic partner rather than just a service provider. By going beyond the basic infrastructure provisioning, the platform engineering team can offer services that help development and product teams streamline their processes and improve efficiency. Shuchi shares her work at Fiserv where she implemented a chargeback system to track usage and costs effectively, incentivizing better development practices. This not only helped in managing costs but also encouraged teams to optimize their resource utilization, leading to improved overall efficiency and more easily scalable systems. Her platform engineering team recognized the importance of effectively managing financial aspects to secure upfront investment for product development. By implementing a billing system based on gigabyte hours, they aligned costs with usage, enabling teams to have a clear understanding of their resource consumption. This approach not only provided transparency but also incentivized teams to adopt cost-effective practices. By strategically managing financial aspects, the platform engineering team gained the trust of stakeholders and secured the necessary resources to drive innovation and deliver value to the organization. Shuchi’s journey of platform engineering serves as a valuable example of how a team can transition from being a basic service provider to becoming an innovation partner within an organization. By building trust, offering value-added services, and strategically managing financial aspects, the platform engineering team successfully elevated their role and became a strategic enabler of innovation. Download this episode here....

Apr 16, 2024

2 mins

Engineering LeadershipSoftware Engineering

State of Angular Ecosystem | December 2021

RxJS updates (Ben Lesh)

Stackblitz (Mark Whitfeld)

NGXS (Mark Whitfeld)

Angular Core (Minko Gechev, Jessica Janiuk)

Ivy

What's new in Angular v13?

What are we building next?

Standalone components

NgRx (Brandon Roberts)

Nx (Brandon Roberts)

AngularFire (James Daniels)

Conclusion

Daian Scuarissi

You might also like

4 Angular Component Libraries That are Perfect for Beginners

AI (Probably) Won’t Ruin Your Engineering Career with Ben Lesh, Adam Rackis, & Tracy Lee

Understanding Next.js Data Fetching for Beginners

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal

You might also like

4 Angular Component Libraries That are Perfect for Beginners

AI (Probably) Won’t Ruin Your Engineering Career with Ben Lesh, Adam Rackis, & Tracy Lee

Understanding Next.js Data Fetching for Beginners

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal