JS Nation

JSNation 2023

Angular has experienced significant growth and is the second most popular framework after React. The latest release of Angular, called Angular Ivy, went through a major refactoring in 2021. Angular's reactivity model has been improved with the introduction of signals, which enable better integration with RxJS and support advanced reactivity patterns. Angular has made optimizations for performance, including improvements in load speed and lazy loading. The Angular team acknowledges the innovations in other frameworks and highlights the impact of introducing TypeScript in enabling the project's success.

In this talk you'll learn all about the <a href="https://twitter.com/sarah_edo/status/1628065696247857152" target="_blank">renaissance</a> Angular has been going through! First, we'll look into how the framework embraced fine-grained reactivity with signals to boost its runtime performance by orders of magnitude. After that we'll dive into applying a similar fine-grained approach to code loading to make everything load faster. At the end, you'll learn about the tooling you can leverage to land all this in your apps!

Angular Momentum

Minko Gechev

JSNation 2022

Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.

What do you do when you're a framework that's survived and innovated in two JavaScript Framework Waves, and see the new wave cresting in the distance? You innovate. In this talk, we explore the JavaScript Framework landscape, and some of the major competitive features we've seen. We'll explore what Angular is introducing today and where we're headed in the future. <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

The Wind and the Waves: The formation of Framework Waves from the Epicenter

Sarah Drasner

JSNation 2024

Angular and React have similar models of reactivity, with the framework optimizing change detection. Angular introduced signals for optimizing change detection in real-world applications, resulting in improved performance. Deferrable views in Angular allow for lazy loading and significant speed improvements. The island architecture in Angular enables independent component islands without needing hydration. Angular is working on features like partial iteration and zoneless, and aims to support developers in delivering web apps with confidence.

For the past 18 months Angular has been experiencing a lot of momentum that the community has been referring to as the "Angular Renaissance."In this talk we'll see how this manifests in improvements in developer experience, performance, documentation, and a better look!

Angular Renaissance

React Summit US

React Summit US 2023

Welcome to Workshop Monitoring 101 for React Developers. Learn how to create a Sentry project, handle errors, use collaboration tools, set up alerts, and explore distributed tracing. Set up source maps and wizards to get additional information about errors. Add event context and custom tags to identify users triggering events. Configure custom tags in Sentry to aggregate and filter errors. Explore alerts, issue assignments, and integrations with GitHub. Implement distributed tracing to follow the execution of requests and identify performance bottlenecks. Connect the client-side and back-end using Sentry's trace ID and transaction. Use session replay to debug applications and improve user experience.

If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project.  Workshop level: Intermediate

Monitoring 101 for React Developers 

Lazar Nikolov

Sarah Guthals

TestJS Summit

TestJS Summit 2022

This talk explores unit testing in Angular applications, covering topics such as testing front-end applications, specifics of testing Angular, best practices, and educational resources. It discusses the anatomy of a unit test in both Jasmine and Jest, the setup and initial tests in Angular, testing user interaction and event handlers, testing rendered output and change detection, and unit testing parent components with child components. It also highlights best practices like using test doubles, testing components with dependency injection, and considerations for unit testing. Code coverage is emphasized as a metric that doesn't guarantee bug-free code.

Angular offers many things out of the box, including various testing-related functionalities. This presentation will demonstrate how we can build on Angular's solid unit testing fundamentals and apply certain patterns that make testing easier. Topics covered include: test doubles, testing module pattern, harnesses, "recipes" on how to test some common cases, and more!

Unit Testing Angular Applications

Filip Voska

The Workshop introduces AG Grid and covers topics such as setting up row data and column definitions, enabling sorting, configuring grid features and user interaction, accessing the grid API, and adding styling. It also explores custom cell renderers, filters, and enterprise features like charting, grid options, and sidebar functionalities. The Workshop concludes with discussions on advanced grid features, aggregation, customizing the context menu, and accessing and updating data in the grid.

Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid. Contents:- getting started and installing AG Grid- configuring sorting, filtering, pagination- loading data into the grid- the grid API- add your own components to the Grid for rendering and editing- capabilities of the free community edition of AG Grid

Get started with AG Grid Angular Data Grid

Stephen Cooper

JSNation Live

JSNation Live 2020

Today's Talk is about using Angular, Web Audio API, and ToneJS to create custom sounds and instruments in a web application. The speaker demonstrates how to create an audio context, connect sources, and add filters to modify the sounds. They explore different elements in the ToneJS library, such as synthesizers, parts, noise, and audio tracks, to enhance the user experience. The Talk also showcases instruments that play cat and dog samples according to the pitch. Overall, it highlights the possibilities of using these technologies to create unique and interactive audio experiences in web applications.

We are very used to generating visual results with code but are still often surprised to hear that we can create music in the same way. Oh, you didn’t know that? You are not alone. Even though the idea of music programming is older than all of us this concept is still pretty unfamiliar among many developers. Not for long! Let's shed some light on music coding in our daily bases web applications using Angular. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

What Does The Angular Say? 🦊

Laura Silvanavičiūtė

This Talk provides an overview of Angular and its development stack, including the Component Development Kit (CDK) and UI components. It discusses the balance between static and dynamic systems and the benefits of using TypeScript. The Talk also highlights the evolution of Angular, version 10 updates, and the deployment of Angular Universal applications. It mentions the ease of updating Angular and the incorporation of web components. The future of frameworks, external contributions, and monorepo setups are also discussed.

In this presentation, we’ll look at the current state of Angular and its tooling infrastructure. We’ll discuss what features enabled the latest version of our rendering engine Ivy and how you can take advantage of them today. Along the way, we’ll look at the work we did to ensure small bundle size and fast execution! In the second part of the talk, we’ll focus on the tooling that Angular provides to help you deliver apps quickly and efficiently. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The State of Angular

JSNation Live 2021

The Workshop covered various topics such as setting up the development environment, troubleshooting and debugging, using Angular and Kendo UI, customizing styles, and working with SCSS variables. The speaker emphasized the importance of clean code and provided tips for improving application performance. They also discussed the use of the skeleton component for loading indicators and the bottom navigation component for navigation. Overall, the Workshop provided practical insights into software development and engineering.

A workshop for UI and Angular beginners alike. Let's pull down the Tour of Heroes app (written John Papa and found throughout the Angular docs) and give it a UI upgrade! All you will need is a laptop and your favorite data set (mine, of course, will be ponies.) <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Getting Comfortable with Angular and UI

Alyssa Nicoll

Microfrontends with module federation allow teams to develop and deploy separate parts of a system, simplifying integration into a common shell. Webpack 5 Module Federation solves the issue of loading separately compiled source code for microfrontends. Version mismatches in module federation can be handled using strategies and semantic versioning. Angular can be combined with module federation using a custom builder. Microfrontends can share data and libraries, and web components can be used to wrap and render components from different versions or frameworks. Module federation allows for version negotiation and runtime loading of microfrontends. React.js can be integrated with module federation, and web components can be used to share libraries across different applications. The bootstrap method and web components wrapper simplify the process of bootstrapping Angular applications and loading web components on demand.

Ever more companies are choosing Micro-Frontends. However, they are anything but easy to implement. Fortunately, Module Federation introduced with webpack 5 has initiated a crucial change of direction. In this interactive workshop, you will learn from Manfred Steyer -- Angular GDE and Trusted Collaborator in the Angular team -- how to plan and implement Micro-Frontend architectures with Angular and the brand new webpack Module Federation. We talk about sharing libraries and advanced concepts like dealing with version mismatches, dynamic Module Federation, and integration into monorepos. After the individual exercises, you will have a case study you can use as a template for your projects. This workshop helps you evaluate the individual options for your projects. Prerequisites:You should have some experience with Angular. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#angular