Angular

ANGULAR NEWS : State and Future of Angular, Reactive Programming, Angular Material, Component Architecture

Oct 28, 2019

4 min read

We have more exciting updates from the Angular community! Watch Rob Wormald, Ward Bell, Kara Erickson, Paul Gschwendtner and Justin Schwartzenberger discuss the future of Angular, the Angular Community, the Reactive programming story behind Forms, the new UI components in Angular Material and a greater look into the Component Architecture.

Angular and the Community

State and Future of Angular and the Community with Rob Wormald

Rob Wormald, Angular core team member discusses the evolution of Angular.

Adoption from other communities

The adoption of Angular by backend developers using technologies like Java and ASP.NET, has increased over the years. Much of this can be attributed to TypeScript, Angular’s dependency injection, and the rich IDE. Backend developers who are familiar with types and dependency injection feel at home using Angular due to its IDE; complete with syntax highlighting, autocompletion, and other features.

Improved semantic versioning

With Angular 4, stricter semantic versioning has been adopted by the team, providing more stability to the platform. Developers no longer have to worry about their code breaking while upgrading their applications.

A new RFC process?

Creating an RFC process allows developers to propose an idea and request feedback for a new feature. The value present would be the collaboration of the community and core team, who will be coming together to evaluate the feasability of the ideas.

The reacting programming story for Angular

Upcoming reactive programming changes in the framework will allow Angular developers to create complex interactions like drag-n-drops easily, but that’s just the beginning.

{% youtube 0-rp62om91g %}

Future of Angular

The Future of Angular — An Interview with Ward Bell

Ward Bell is a Google Developer Expert for Angular and a Microsoft MVP. He promises us an exciting future for Angular. Ward believes Angular is on the path to (once again) changing the way we write and architect applications.

The new ways of programming and features offered by Angular, including RxJS, are opening up another dimension of possibilities. For instance, Reactive Forms using push-based validation will benefit and change how applications like online bidding work.

Ward’s enthusiasm for new technologies doesn’t stop at RxJS. He comments on how effective TypeScript has been on improving quality of code and making the developer experience easier.

Another big milestone for Angular is developers have started to view Angular as a platform not just for web application, but for other projects such as WebVR and WebGL as well.

Though new concepts like RxJS may be hard to grasp for developers, with time they will begin to understand the doors that Observables open and rethink what they thought possible.

{% youtube gD3VWqDXpR0 %}

Angular Forms with Reactive Programming

Angular Core Team Member Kara Erickson Talks About Improving Forms with Reactive Programming

Kara Erickson is a software engineer on the Angular team at Google. In this interview she talks about improving Angular form validation using RxJS. These planned improvements will make reactive forms more stream-based and provide developers with the ability to use operators in RxJS.

This new approach to forms will enable push-based validation instead of pull-based validation. Real time validation and real time database management will both see significant improvements.

{% youtube cSCya4VGkZ8 %}

Angular Material

Angular Material Core Team Member Paul Gschwendtner on Improvements to the Library

Paul Gschwendtner, a member of the Angular Material Core Team tells us about upcoming releases, new features and improvements to be expected from Angular Material.

Angular Material provides developers with a UI component framework built specifically for Angular. There are many planned improvements for the library in the future. Just recently, the data table and date picker modules were released. The deprecation of the Material Module was also established for performance reasons.

Changes to the package structure of the library are also planned. These changes will better align the library with the Angular core package and allow webpack and other bundlers to be more effective, eliminating deep file searches, and providing performance improvements for tree shaking.

{% youtube vpEanlrFvac %}

Component Architecture

Angular Component Architecture with Justin Schwartzenberger

Justin, speaker and host of AngularAir talks component architecture and the importance of component analysis when looking Angular applications.

When building out components with Angular, issues often arise during implementation. Many developers and designers begin building before attempting to understand the architecture of the overall component.

If you think of an Angular application as a big component tree, then every new component you build is added to this tree. Understanding the tax inherited by each component is crucial. Each component has a payload and execution tax. Therefore, developers should be conscious about the fact that tax grows with every new component. Justin walks through a few different ways to think through one’s component architecture.

{% youtube 1GxAy-upyTY %}

We hope you enjoyed this article. For more information on Angular, be sure to check out http://angular.io.

This article was co-written by Sara Nopsittiporn and Tracy Lee.

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.

QR Code Scanning & Generation

QR Code Scanning & Generation with ZXing and Angular QR codes provide a very valuable way of sharing information with users, and many applications rely on them for various purposes. Common examples of places where QR codes can be useful include but are not limited to theaters, social gatherings and other booking services. Integrating QR codes can seem intimidating, but thankfully they’re not too difficult to handle with Angular and the help of a couple of robust software libraries such as ZXing. What is ZXing? ZXing, also known as “Zebra Crossing” is a software library that allows developers to easily integrate scanning many different types of 1D and 2D barcodes. This library was originally written in Java, however many ports to other languages and platforms exist, including JavaScript. There are a couple of ways to use ZXing. You could either directly use the JavaScript library, which is framework-agnostic, or you could use a framework-specific library. I’m going to demonstrate how to use ZXing to scan QR codes with the Angular version of the library called ngx-scanner specifically, which has a full-fledged scanner component that makes it somewhat easy to integrate. Let’s Scan some QR Codes with Angular! Getting ngx-scanner up and running doesn’t take much setup at all. All you have to do is add an import to ZXingScannerModule inside of the module that you will be scanning QR codes in, and add a component to your template. Below shows a real-world example of how the component would be used. ` You’ll notice a lot of observables being referenced here. I’ll go over them one by one. Let’s start with the devices subject: ` This subject has data sent to it whenever cameras have been identified by the scanning component. We want to keep track of these so that we’re able to select a camera to use. In our case we’ll just select the first camera for simplicity's sake, as you can see happens with the selectedDevice$ observable that we have bound to the [device] attribute on the scanner: ` We utilize shareReplay here so we don’t need to re-scan the devices whenever additional subscribers check what devices are available. enable$ is a simple observable that emits true whenever devices have been detected, and startCamera$ is an observable that toggles between true and false whenever data is pushed to the toggleCamera$ subject. ` The scan function from RxJs is utilized so we have the previous state and can use that to determine in which direction the stored boolean should toggle to. Finally we push successfully scanned codes to scanSuccess$ which we can then subscribe to in the template. All together the final component code should look something like this: ` If we use this component then you should get something that looks like this: Scanning QR codes is awesome, but we can also generate our own QR codes as well! Generating our own QR Codes Unfortunately the ZXing scanner component we’re using is limited to just scanning QR codes, however there is another component library called ngx-kjua that can do this. Like ZXing this component is also based off of another pre-existing library that is framework-agnostic, in this case, kjua. Fortunately kjua is very easy to use. You simply supply it a code and it will render a QR code. ` How the QR code is rendered can change. There is an optional [render] attribute that you can specify that takes a few values. You can input ‘image’, ‘canvas’ or ‘svg’. The default render mode is ‘svg’. It should be noted that ‘svg’ and ‘canvas’ render modes made copying the image more difficult, so use ‘image’ if you want to make that possible. The component code associated with this template is very small. The component using ngx-kjua has a code observable that is updated with a new random code whenever a “Generate” button is pressed. ` I’ve opted to go with the randomstring package in this case. This component could be modified to instead allow for custom codes using a textbox if you want to encode URLs or other useful values that typically go inside of QR codes. The result looks like this: Summary Thanks to projects like ZXing and kjua it is easy to integrate handling of QR codes in Angular applications, be it for scanning them or creating them. I hope this guide has helped you. You can find the full example showcasing generation and scanning of QR codes in our blog-demos repository on GitHub....

Dec 13, 2023

4 mins

Angular

Overview of the New Signal APIs in Angular

Overview of the New Signal APIs in Angular 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. They are already in developer preview, so we can play around with them. Let's dig into it, starting with signal-based inputs and the new matching outputs API. Signal Based Inputs Discussions about signal-based inputs have been taking place in the Angular community for some time now, and they are finally here. Until now, you used the @Input() decorator to define inputs. This is what you'd have to write in your component to declare an optional and a required input: ` With the new signal-based inputs, you can write much less boilerplate code. Here is how you can define the same inputs using the new syntax: ` It's not only less boilerplate, but because the values are signals, you can also use them directly in computed signals and effects. That, effectively, means you get to avoid computing combined values in ngOnChanges or using setters for your inputs to be able to compute derived values. In addition, input signals are read-only. The New Output I intentionally avoid calling them signal-based outputs because they are not. They still work the same way as the old outputs. The Angular team has just introduced a new output API that is more consistent with the latest inputs API and allows you to write less boilerplate, similar to the new input API. Here is how you would define an output until now: ` Here is how you can define the same output using the new syntax: ` The thing I like about the new output API is that sometimes it happens to me that I forget to instantiate the EventEmitter because I do this instead: ` You won't forget to instantiate the output with the new syntax because the output function does it for you. Signal Queries I am sure most readers know the @ViewChild, @ViewChildren, @ContentChild, and @ContentChildren decorators very well and have experienced the pain of triggering the infamous ExpressionChangedAfterItHasBeenCheckedError or having the values unavailable when needed. Here is a refresher on how you would use these decorators until now: ` With the new signal queries, similar to the new input API, the values are signals, and you can use them directly in computed signals and effects. You can define the same queries using the new syntax: ` Jeremy Elbourn mentioned that the new signal queries have better type inference and are more consistent with the new input and output APIs. He also showcased a brand new feature not available with the old queries. You can now define a query as required, and the Angular compiler will throw an error if the query has no result, guaranteeing that the value won't be undefined. Here is how you can define a required query: ` Model Inputs Jeremy and Minko announced the last new feature is the model inputs. The name is vague, but the feature is cool—it simplifies the definition of two-way bindings. Until now, to achieve two-way binding, you would have to define an input and an output following a given naming convention. @Input and @Output had to be defined with the same name (followed by "Change" in the case of the output). Then, you could use the template's [()] syntax. ` ` That way, you could keep the value in sync between the parent and the child component. With the new model inputs, you can define a two-way binding with a single line of code. Here is how you can define the same two-way binding using the new syntax: ` The html template stays the same: ` The model function returns a writable signal that can be updated directly. The value will be propagated back to any two-way bindings. Conclusion The new signal-based APIs are a great addition to Angular. They allow you to write less boilerplate code and make your components more reactive. The new APIs are already in developer preview, so you can start playing around with them today. I look forward to seeing how the community will adopt these new features and what other exciting things the Angular team has in store for us, such as zoneless apps by default....

Apr 3, 2024

3 mins

AngularJavaScript

Transforming Auth in an AI World with Rod Boothby

In today's digital landscape, the need for secure identity verification has become paramount. With the increasing risks of personal data exposure and the rise of sophisticated cyber threats aided by Artificial Intelligence, it is crucial to adopt robust verification processes to protect individuals and organizations alike. In a recent discussion with Rod Boothby, CEO of ID Partner Systems, the significance of trusted institutions for identity verification was emphasized, particularly the efficiency of bank-based ID verification over traditional methods. One of the key takeaways from the conversation was the importance of continuous authentication. As technology advances, so do the methods employed by cybercriminals. Deepfake technology, for instance, poses a significant threat to identity verification systems. To combat this, tighter security measures and continuous authentication are essential. By constantly verifying and validating user identities, organizations can stay one step ahead of potential fraudsters. Rod Boothby also highlighted the need for a developer-focused approach to identity verification. By providing developers with the tools and resources they need, companies like ID Partner Systems aim to streamline the verification process and enhance security. This approach not only ensures a more efficient experience for users but also allows for the integration of behavioral biometrics, which can further strengthen the verification process. Download this episode here....

Apr 22, 2024

1 min

Engineering Leadership

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

ANGULAR NEWS : State and Future of Angular, Reactive Programming, Angular Material, Component Architecture

Angular and the Community

Future of Angular

Angular Forms with Reactive Programming

Angular Material

Component Architecture

You might also like

QR Code Scanning & Generation

Overview of the New Signal APIs in Angular

Transforming Auth in an AI World with Rod Boothby

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal

You might also like

QR Code Scanning & Generation

Overview of the New Signal APIs in Angular

Transforming Auth in an AI World with Rod Boothby

Transforming Platform Engineering Through Chargeback Programs with Shuchi Mittal