RXJS Best (& Bad) Practices for Angular Developers
8 likes1,154 views
RXJS / NGRX tips, best and bad practices for Angular Developers. How to read them: - red background: it's a bad practice or you can do better :) - pink background: this is a tip or best practice
1 of 68
Downloaded 44 times
Ad
Recommended
Laravel ppt
Laravel pptMayank Panchal - Laravel is a popular PHP MVC framework that provides tools like Eloquent ORM, Blade templating, routing, and Artisan CLI to help developers build applications faster.
- Key Laravel features include Eloquent for database access, Blade templating engine, routing system, middleware, and Artisan CLI commands for common tasks like migrations and seeding.
- The document discusses Laravel's file structure, installing via Composer, and provides best practices for coding with Laravel like avoiding large queries and using middleware, validation, and CSRF protection.
RxJS & Angular Reactive Forms @ Codemotion 2019
RxJS & Angular Reactive Forms @ Codemotion 2019Fabio Biondi The document discusses reactive forms in Angular, comparing them to template-driven forms. Reactive forms are built around Observable streams, handle dynamic value changes, and offer benefits like immutability, testability, and scalability compared to template-driven forms. It provides an overview of key concepts like FormControl, FormGroup, and FormBuilder and examples of how to implement basic and nested reactive forms, add validators, update forms dynamically, and handle form submission and arrays.
RxJS Operators - Real World Use Cases (FULL VERSION)
RxJS Operators - Real World Use Cases (FULL VERSION)Tracy Lee This document provides an overview and explanation of various RxJS operators for working with Observables, including:
- The map, filter, and scan operators for transforming streams of data. Map applies a function to each value, filter filters values, and scan applies a reducer function over time.
- Flattening operators like switchMap, concatMap, mergeMap, and exhaustMap for mapping Observables to other Observables.
- Error handling operators like catchError, retry, and retryWhen for catching and handling errors.
- Additional explanation of use cases and common mistakes for each operator discussed. The document is intended to explain these essential operators for real world reactive programming use.
Thymeleaf and Spring Controllers.ppt
Thymeleaf and Spring Controllers.pptPatiento Del Mar Thymeleaf is a view engine that allows working with variables, forms, and conditional statements in views. Spring controllers are annotated with @Controller and actions are mapped to routes. Controllers have access to the HTTP request and session, and can pass data to views or redirect with parameters.
Top 10 RxJs Operators in Angular 
Top 10 RxJs Operators in Angular Jalpesh Vadgama This slides describes about Top 10 Rxjs Operators in Angular which can be quite useful in our day to day life
Oops in java
Oops in javabaabtra.com - No. 1 supplier of quality freshers This document provides an overview of object-oriented programming (OOP) concepts in Java. It defines OOP as a style of programming that focuses on using objects to design and build applications. It describes what objects are, how they model real-world things, and how they use variables to store state and methods to define behavior. It then defines key OOP concepts like classes, objects, abstraction, encapsulation, polymorphism, method overriding, inheritance, and interfaces. For each concept, it provides a definition and example in Java code. The document is intended to help the reader learn more about these fundamental OOP concepts in Java.
JavaFX Overview
JavaFX OverviewJosé Maria Silveira Neto This document provides an overview of JavaFX, including:
- What JavaFX is and its main components like the JavaFX Framework and JavaFX Script language
- Demos of shapes, animations, and other graphics capabilities in JavaFX
- An overview of the JavaFX architecture and scene graph project for building user interfaces
- Resources for learning more about and getting started with JavaFX development
Java script
Java scriptreddivarihareesh Now a days JavaScript is very essential features of the web designing .This is the very simple JavaScript design to learn something.
Jsf presentation
Jsf presentationAshish Gupta Java Server Faces (JSF) is a component-based MVC framework for building user interfaces in Java web applications. JSF provides UI components that can be used in JSP or Facelets views. It follows a request response lifecycle where the controller handles gathering input, validating, updating models, and rendering responses. Popular JSF components include inputs, outputs, selects, forms, and commands. Facelets is the default view technology in JSF 2 and provides templating capabilities. Key differences between JSF and JSF 2 include replacing JSP with Facelets and adding Ajax and annotation support. Spring MVC has the highest demand and documentation quality while Struts 2 has the lowest learning curve and JSF is in
Angular & RXJS: examples and use cases
Angular & RXJS: examples and use casesFabio Biondi The document discusses using RxJS in Angular applications. It provides examples of using RxJS operators like interval, map, async pipe, filter, switchMap, exhaustMap, tap, scan, and reduce. Common use cases include handling events, making HTTP requests, managing application state, and manipulating data. RxJS can be used in components, directives, services, routing, forms, and more throughout an Angular application.
Java 8 streams
Java 8 streamsManav Prasad The document outlines Java 8's Stream API. It discusses stream building blocks like default methods, functional interfaces, lambda expressions, and method references. It describes characteristics of streams like laziness and parallelization. It covers creating streams from collections, common functional interfaces, and the anatomy of a stream pipeline including intermediate and terminal operations. It provides examples of common stream API methods like forEach, map, filter, findFirst, toArray, collect, and reduce.
JS Event Loop
JS Event LoopSaai Vignesh P This is an interactive PowerPoint presentation I made for my seminar at my workplace. It talks and illustrates how the JavaScript engine works when executing code. It also contains a step-by-step animation which demonstrates the usage of the JavaScript event loop.
Feel free to use and refer content. Copyrights reserved.
Brief History of JavaScript
Brief History of JavaScriptRifad Ainun Nazieb JavaScript was created in 1995 by Brendan Eich to add interactivity to web pages. It was originally called LiveScript but was renamed JavaScript. Microsoft later adopted JavaScript causing implementation differences between browsers that frustrated developers. JavaScript was standardized as ECMAScript to unify implementations. Over time, JavaScript has expanded beyond browsers with Node.js allowing it to be used server-side and TypeScript adding optional static typing.
laravel.pptx
laravel.pptxasif290119 Laravel is a popular PHP web framework created by Taylor Otwell in 2011. It follows the MVC pattern and simplifies development with modular structure, elegant syntax, and built-in features like routing, middleware, Blade templating, Eloquent ORM, and Artisan CLI. Laravel has a large community and is easy to learn and use due to its simplicity, modularity, and extensive built-in functionality that helps developers build cleaner code more efficiently.
Rxjs ppt
Rxjs pptChristoffer Noring RxJs - demystified provides an overview of reactive programming and RxJs. The key points covered are:
- Reactive programming focuses on propagating changes without explicitly specifying how propagation happens.
- Observables are at the heart of RxJs and emit values in a push-based manner. Operators allow transforming, filtering, and combining observables.
- Common operators include map, filter, reduce, buffer, and switchMap. Over 120 operators exist for tasks like error handling, multicasting, and conditional logic.
- Marble diagrams visually demonstrate how operators transform observable streams.
- Creating observables from events, promises, arrays and iterables allows wrapping different data sources in a uniform API
Reactjs
ReactjsMallikarjuna G D The document provides an overview of React including its introduction, prerequisites, installation, fundamentals, components, life cycle, routing, hooks, Redux, projects, testing, comparison to Angular, and tips for React developers. It discusses key React concepts such as JSX, props, state, events, DOM, and virtual DOM.
Introduction to laravel framework
Introduction to laravel frameworkAhmad Fatoni Basic discussion about Laravel framework for beginners. It'a about routing, model, view, controller, eloquent, migration on Laravel Framework
Laravel Tutorial PPT
Laravel Tutorial PPTPiyush Aggarwal This document provides an overview of the Laravel PHP framework, including instructions for installation, directory structure, MVC concepts, and a sample "task list" application to demonstrate basic Laravel features. The summary covers creating a Laravel project, defining a database migration and Eloquent model, adding routes and views with Blade templating, performing validation and CRUD operations, and more.
Svelte JS introduction
Svelte JS introductionMikhail Kuznetcov Svelte is a frontend framework that focuses on compiler-centered reactivity rather than a virtual DOM for better performance and smaller bundle sizes. It allows writing components in a simpler reactive way using declarative templates, properties and events. The talk covered Svelte basics like project setup, components, events and lifecycle methods. It demonstrated Svelte's speed advantages and discussed the ecosystem of libraries and community support including Typescript. Advanced topics covered included Single Page Application routing with Sapper and NativeScript for mobile.
Java script
Java scriptAbhishek Kesharwani JavaScript was designed to add interactivity to HTML pages. It is a scripting language that is usually embedded directly into HTML pages and allows for dynamic text, event handling, reading/writing HTML elements, and validating form data. JavaScript supports both client-side and server-side scripting and was originally developed by Netscape under the name LiveScript before being renamed. It provides programming capabilities to HTML authors and allows for dynamic content, user interaction, and validation without server requests.
Using Dagger in a Clean Architecture project
Using Dagger in a Clean Architecture projectFabio Collini Clean Architecture and app modularization are often used together to achieve a better code structure and a faster build time. But how can we use Dagger in an app structured in that way? Can we use subcomponents (with or without Dagger Android) or are component dependencies enough?
In this talk we’ll see how to leverage Dagger to organize the dependencies in a multi-module project with particular attention to testing and decoupling. The examples will be both in a standard layered architecture and in a Clean Architecture where the Dependency Inversion increases the overall structure but can complicate the Dagger code.
Introduction of Html/css/js
Introduction of Html/css/jsKnoldus Inc. HTML is a markup language used to define the structure and layout of web pages. CSS is used to style and lay out HTML elements, and JavaScript can be used to program behaviors and interactions in web pages. jQuery is a JavaScript library that simplifies HTML document traversal and manipulation, as well as event handling, animations, and Ajax interactions for rapid web development.
Spring Framework - Spring Security
Spring Framework - Spring SecurityDzmitry Naskou Spring Security is a powerful and highly customizable authentication and authorization framework for Spring-based applications. It provides authentication via mechanisms like username/password, LDAP, and SSO. Authorization can be implemented through voting-based access control or expression-based access control at the web (URL) level and method level. It includes filters, providers, and services to handle authentication, authorization, logout, and remember-me functionality. Configuration can be done through XML or Java configuration with support for common annotations.
Lecture 2_ Intro to laravel.pptx
Lecture 2_ Intro to laravel.pptxSaziaRahman The document provides information about a PHP framework lecture on Laravel. It includes the course code, department, lecturer, semester, and lecture outline. The lecture covers an introduction to Laravel, installing and running the framework, the directory structure, routing basics, the view engine Blade, and creating views. Key points about Laravel are that it makes tasks like authentication and caching easy and offers a powerful tool called Artisan to perform repetitive tasks. Composer is used to manage Laravel dependencies.
Working Effectively With Legacy Code
Working Effectively With Legacy CodeExcella Working Effectively with Legacy Code was presented at the 2012 DC Agile Engineering Conference on 12/7/2012 by Excella Managing Consultant Roberto Hernandez-Pou (@hernandezrobert).
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Edureka! This document outlines an AngularJS certification training agenda that covers directives. It defines directives as classes that extend HTML and transform the DOM. There are three types of directives: components, structural directives, and attribute directives. Built-in directives like NgFor and NgIf are covered, which add and remove elements. The document demonstrates how to create a custom attribute directive by using the @Directive decorator and accessing native DOM elements.
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptGarrett Welson The document provides an introduction to asynchronous JavaScript. It discusses callbacks and their disadvantages like callback hell. Promises are introduced as a better way to handle asynchronous code by making it easier to write and chain asynchronous operations. Async/await is described as syntactic sugar that allows asynchronous code to be written more readably in a synchronous style using await and try/catch. Key aspects like the event loop, microtask queue, and Promise methods like all and race are explained. Overall the document aims to help understand what makes asynchronous code different and newer methods like promises and async/await that improve handling asynchronous operations in JavaScript.
PHP - Introduction to Object Oriented Programming with PHP
PHP - Introduction to Object Oriented Programming with PHPVibrant Technologies & Computers This ppt gives information about:
1. OOPs Theory
2. Defining a Class
3. Creating an Object
4. The $this Attribute
5. Creating Constructors
6. Creating Destructors
Rxjs In Action Covers Rxjs 5 1st Edition Paul P Daniels Luis Atencio
Rxjs In Action Covers Rxjs 5 1st Edition Paul P Daniels Luis Atenciolyeannhoung Rxjs In Action Covers Rxjs 5 1st Edition Paul P Daniels Luis Atencio
Rxjs In Action Covers Rxjs 5 1st Edition Paul P Daniels Luis Atencio
Rxjs In Action Covers Rxjs 5 1st Edition Paul P Daniels Luis Atencio
Reactive programming on Android
Reactive programming on AndroidTomáš Kypta Lecture on Reactive programming on Android, mDevCamp 2016.
A practical guide to using RxJava on Android. Tips for improving your app architecture with reactive programming. What are the advantages and disadvantages of using RxJava over standard architecture? And how to connect with other popular Android libraries?
More Related Content
What's hot (20)
Jsf presentation
Jsf presentationAshish Gupta Java Server Faces (JSF) is a component-based MVC framework for building user interfaces in Java web applications. JSF provides UI components that can be used in JSP or Facelets views. It follows a request response lifecycle where the controller handles gathering input, validating, updating models, and rendering responses. Popular JSF components include inputs, outputs, selects, forms, and commands. Facelets is the default view technology in JSF 2 and provides templating capabilities. Key differences between JSF and JSF 2 include replacing JSP with Facelets and adding Ajax and annotation support. Spring MVC has the highest demand and documentation quality while Struts 2 has the lowest learning curve and JSF is in
Angular & RXJS: examples and use cases
Angular & RXJS: examples and use casesFabio Biondi The document discusses using RxJS in Angular applications. It provides examples of using RxJS operators like interval, map, async pipe, filter, switchMap, exhaustMap, tap, scan, and reduce. Common use cases include handling events, making HTTP requests, managing application state, and manipulating data. RxJS can be used in components, directives, services, routing, forms, and more throughout an Angular application.
Java 8 streams
Java 8 streamsManav Prasad The document outlines Java 8's Stream API. It discusses stream building blocks like default methods, functional interfaces, lambda expressions, and method references. It describes characteristics of streams like laziness and parallelization. It covers creating streams from collections, common functional interfaces, and the anatomy of a stream pipeline including intermediate and terminal operations. It provides examples of common stream API methods like forEach, map, filter, findFirst, toArray, collect, and reduce.
JS Event Loop
JS Event LoopSaai Vignesh P This is an interactive PowerPoint presentation I made for my seminar at my workplace. It talks and illustrates how the JavaScript engine works when executing code. It also contains a step-by-step animation which demonstrates the usage of the JavaScript event loop.
Feel free to use and refer content. Copyrights reserved.
Brief History of JavaScript
Brief History of JavaScriptRifad Ainun Nazieb JavaScript was created in 1995 by Brendan Eich to add interactivity to web pages. It was originally called LiveScript but was renamed JavaScript. Microsoft later adopted JavaScript causing implementation differences between browsers that frustrated developers. JavaScript was standardized as ECMAScript to unify implementations. Over time, JavaScript has expanded beyond browsers with Node.js allowing it to be used server-side and TypeScript adding optional static typing.
laravel.pptx
laravel.pptxasif290119 Laravel is a popular PHP web framework created by Taylor Otwell in 2011. It follows the MVC pattern and simplifies development with modular structure, elegant syntax, and built-in features like routing, middleware, Blade templating, Eloquent ORM, and Artisan CLI. Laravel has a large community and is easy to learn and use due to its simplicity, modularity, and extensive built-in functionality that helps developers build cleaner code more efficiently.
Rxjs ppt
Rxjs pptChristoffer Noring RxJs - demystified provides an overview of reactive programming and RxJs. The key points covered are:
- Reactive programming focuses on propagating changes without explicitly specifying how propagation happens.
- Observables are at the heart of RxJs and emit values in a push-based manner. Operators allow transforming, filtering, and combining observables.
- Common operators include map, filter, reduce, buffer, and switchMap. Over 120 operators exist for tasks like error handling, multicasting, and conditional logic.
- Marble diagrams visually demonstrate how operators transform observable streams.
- Creating observables from events, promises, arrays and iterables allows wrapping different data sources in a uniform API
Reactjs
ReactjsMallikarjuna G D The document provides an overview of React including its introduction, prerequisites, installation, fundamentals, components, life cycle, routing, hooks, Redux, projects, testing, comparison to Angular, and tips for React developers. It discusses key React concepts such as JSX, props, state, events, DOM, and virtual DOM.
Introduction to laravel framework
Introduction to laravel frameworkAhmad Fatoni Basic discussion about Laravel framework for beginners. It'a about routing, model, view, controller, eloquent, migration on Laravel Framework
Laravel Tutorial PPT
Laravel Tutorial PPTPiyush Aggarwal This document provides an overview of the Laravel PHP framework, including instructions for installation, directory structure, MVC concepts, and a sample "task list" application to demonstrate basic Laravel features. The summary covers creating a Laravel project, defining a database migration and Eloquent model, adding routes and views with Blade templating, performing validation and CRUD operations, and more.
Svelte JS introduction
Svelte JS introductionMikhail Kuznetcov Svelte is a frontend framework that focuses on compiler-centered reactivity rather than a virtual DOM for better performance and smaller bundle sizes. It allows writing components in a simpler reactive way using declarative templates, properties and events. The talk covered Svelte basics like project setup, components, events and lifecycle methods. It demonstrated Svelte's speed advantages and discussed the ecosystem of libraries and community support including Typescript. Advanced topics covered included Single Page Application routing with Sapper and NativeScript for mobile.
Java script
Java scriptAbhishek Kesharwani JavaScript was designed to add interactivity to HTML pages. It is a scripting language that is usually embedded directly into HTML pages and allows for dynamic text, event handling, reading/writing HTML elements, and validating form data. JavaScript supports both client-side and server-side scripting and was originally developed by Netscape under the name LiveScript before being renamed. It provides programming capabilities to HTML authors and allows for dynamic content, user interaction, and validation without server requests.
Using Dagger in a Clean Architecture project
Using Dagger in a Clean Architecture projectFabio Collini Clean Architecture and app modularization are often used together to achieve a better code structure and a faster build time. But how can we use Dagger in an app structured in that way? Can we use subcomponents (with or without Dagger Android) or are component dependencies enough?
In this talk we’ll see how to leverage Dagger to organize the dependencies in a multi-module project with particular attention to testing and decoupling. The examples will be both in a standard layered architecture and in a Clean Architecture where the Dependency Inversion increases the overall structure but can complicate the Dagger code.
Introduction of Html/css/js
Introduction of Html/css/jsKnoldus Inc. HTML is a markup language used to define the structure and layout of web pages. CSS is used to style and lay out HTML elements, and JavaScript can be used to program behaviors and interactions in web pages. jQuery is a JavaScript library that simplifies HTML document traversal and manipulation, as well as event handling, animations, and Ajax interactions for rapid web development.
Spring Framework - Spring Security
Spring Framework - Spring SecurityDzmitry Naskou Spring Security is a powerful and highly customizable authentication and authorization framework for Spring-based applications. It provides authentication via mechanisms like username/password, LDAP, and SSO. Authorization can be implemented through voting-based access control or expression-based access control at the web (URL) level and method level. It includes filters, providers, and services to handle authentication, authorization, logout, and remember-me functionality. Configuration can be done through XML or Java configuration with support for common annotations.
Lecture 2_ Intro to laravel.pptx
Lecture 2_ Intro to laravel.pptxSaziaRahman The document provides information about a PHP framework lecture on Laravel. It includes the course code, department, lecturer, semester, and lecture outline. The lecture covers an introduction to Laravel, installing and running the framework, the directory structure, routing basics, the view engine Blade, and creating views. Key points about Laravel are that it makes tasks like authentication and caching easy and offers a powerful tool called Artisan to perform repetitive tasks. Composer is used to manage Laravel dependencies.
Working Effectively With Legacy Code
Working Effectively With Legacy CodeExcella Working Effectively with Legacy Code was presented at the 2012 DC Agile Engineering Conference on 12/7/2012 by Excella Managing Consultant Roberto Hernandez-Pou (@hernandezrobert).
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Edureka! This document outlines an AngularJS certification training agenda that covers directives. It defines directives as classes that extend HTML and transform the DOM. There are three types of directives: components, structural directives, and attribute directives. Built-in directives like NgFor and NgIf are covered, which add and remove elements. The document demonstrates how to create a custom attribute directive by using the @Directive decorator and accessing native DOM elements.
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptGarrett Welson The document provides an introduction to asynchronous JavaScript. It discusses callbacks and their disadvantages like callback hell. Promises are introduced as a better way to handle asynchronous code by making it easier to write and chain asynchronous operations. Async/await is described as syntactic sugar that allows asynchronous code to be written more readably in a synchronous style using await and try/catch. Key aspects like the event loop, microtask queue, and Promise methods like all and race are explained. Overall the document aims to help understand what makes asynchronous code different and newer methods like promises and async/await that improve handling asynchronous operations in JavaScript.
PHP - Introduction to Object Oriented Programming with PHP
PHP - Introduction to Object Oriented Programming with PHPVibrant Technologies & Computers This ppt gives information about:
1. OOPs Theory
2. Defining a Class
3. Creating an Object
4. The $this Attribute
5. Creating Constructors
6. Creating Destructors
Similar to RXJS Best (& Bad) Practices for Angular Developers (9)
Rxjs In Action Covers Rxjs 5 1st Edition Paul P Daniels Luis Atencio
Rxjs In Action Covers Rxjs 5 1st Edition Paul P Daniels Luis Atenciolyeannhoung Rxjs In Action Covers Rxjs 5 1st Edition Paul P Daniels Luis Atencio
Rxjs In Action Covers Rxjs 5 1st Edition Paul P Daniels Luis Atencio
Rxjs In Action Covers Rxjs 5 1st Edition Paul P Daniels Luis Atencio
Reactive programming on Android
Reactive programming on AndroidTomáš Kypta Lecture on Reactive programming on Android, mDevCamp 2016.
A practical guide to using RxJava on Android. Tips for improving your app architecture with reactive programming. What are the advantages and disadvantages of using RxJava over standard architecture? And how to connect with other popular Android libraries?
Reactive programming with rx java
Reactive programming with rx javaCongTrung Vnit This document provides an overview of reactive programming with RxJava. It begins with introductions to reactive programming and RxJava. It then discusses operators like map, filter, and flatMap that allow transforming and combining observable streams. It covers topics like error handling, threading with schedulers, subscriptions, and backpressure. The document includes examples of how to use various RxJava operators and concepts like transforming streams, handling errors, and improving performance with techniques like throttling.
Under the hood of RxJS (Dimitris Livas) - GreeceJS #27
Under the hood of RxJS (Dimitris Livas) - GreeceJS #27GreeceJS Reactive Functional Programming made simple. You may have or may have not used RxJs and experimented or developed apps with Subjects, Observables and transformation of observables through piping RxJs operators. In this 30 minute presentation we will make things simple. We will go through examples of what they are and how they are made, as well as what problems they solve. We will also see how to build our own RxJs operators that implement synchronous and asynchronous data flow patterns.
RxJS - NNG Technical Seminar
RxJS - NNG Technical SeminarHoa Nguyen (Rin) RxJS is a library for reactive programming that allows handling asynchronous events and data streams. It uses Observables to push collections of multiple values to Observers. Operators can transform streams through functions. Subjects can multicast streams and Schedulers can control concurrency and threading. Best practices include using Observables, Operators, and Subjects to build robust asynchronous and event-driven applications.
Rxjs vienna
Rxjs viennaChristoffer Noring This document provides an introduction to RxJS, a library for reactive programming using Observables. It discusses some of the key concepts in RxJS including Observables, operators, and recipes. Observables can be created from events, promises, arrays and other sources. Operators allow chaining transformations on Observables like map, filter, switchMap. RxJS is useful for complex asynchronous flows and is easier to test than promises using marble testing. Overall, RxJS enables rich composition of asynchronous code and cancellation of Observables.
Enterprise State Management with NGRX/platform
Enterprise State Management with NGRX/platformIlia Idakiev Angular. State Management Problems. Redux. Understanding what is RxJS by comparing it to promises. Creating a simple app using ngrx/store and ngrx/effects. State Management Practices @ hillgrand.com.
Angular Advanced Workshop (+ Challenges)
Angular Advanced Workshop (+ Challenges)Georgios Kaleadis The whole workshop is open source: https://github.com/georgiee/angular-workshop-skipbo
---
Angular Advanced Workshop we gave for KaiserX (Allianz, Dec 2018) to teach advanced topics of Angular in a playful way.
The workshop covered six chapters:
Modules, Components, Routing, RxJS, Testing & Animations.
Each Chapter included a challenge, a markdown document describing step by step what to do while giving challenging tasks to solve. The challenges include git branches to catch up if someone gets lost.
We even covered advanced topics like the event loop (micro/macro tasks), zone.js, onPush, ChangeDetection & switchMap vs mergeMap. I'm so happy that I could share this knowledge and people understood it.
By following my workshop, all 15 developers created a fully working Skip-Bo game within three days. There are animations, advanced unit tests, a implemented AI called Oscar to play for the CPU opponents and so much more!
And the best part
We made everything open source. The whole workshop can be found on github: https://github.com/georgiee/angular-workshop-skipbo
Here the final result:
https://skipbo-angular-workshop.netlify.com
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppKaty Slemon Learn about Angular best practices to improve the performance of your existing Angular application. Tried and tested clean code checklist for your Angular app.
Ad
More from Fabio Biondi (16)
Redux Toolkit - Quick Intro - 2022
Redux Toolkit - Quick Intro - 2022Fabio Biondi The document discusses Redux Toolkit, a framework for building Redux applications. It introduces key Redux concepts like actions, reducers, and middleware. It explains how Redux Toolkit simplifies Redux setup with utilities like thunk and Immer.js. It demonstrates Redux Toolkit APIs like configureStore, createAction, createReducer, and createSlice that generate action creators and reducer logic to update state in response to actions.
React - Component Based Approach
React - Component Based ApproachFabio Biondi The document discusses component-based approaches in React and TypeScript. It explains how to pass props between components, with some components being stateful and others being stateless. Components are described as the building blocks of single-page applications, handling discrete parts of the view with separation of concerns.
Introduction to E2E in Cypress
Introduction to E2E in CypressFabio Biondi This document discusses Cypress, an open-source JavaScript testing framework for front-end web applications. It highlights key Cypress features like time travel debugging, real-time reloads, and automatic waiting. It provides an overview of how to install Cypress, write tests using an arrange-act-assert structure, query elements, make assertions, and interact with elements. Examples of testing a login flow and cart panel are also presented. The document promotes Cypress and encourages attending live coding sessions to learn more about component testing.
Create your React 18 / TS bundle using esbuild
Create your React 18 / TS bundle using esbuildFabio Biondi #esbuild is a fast javascript bundler that is 10-100x faster than webpack, rollup or parcel and it is used by tools like #ViteJS.
It supports features such as:
• ES6 and CommonJS modules
• Tree shaking of ES6 modules
• An API for JavaScript and Go
• TypeScript and JSX syntax
• Source maps
• Minification
• Plugins
• and more....
So I share a quick (and simplified) summary to create a bundle for a #React 18 / #TypeScript project.
Create Web Components using Google Lit
Create Web Components using Google LitFabio Biondi This document discusses how to create reusable web components using the Lit framework from Google. It provides steps for writing a web component using Lit, publishing the component to NPM, and then using the custom component in different frameworks like vanilla JavaScript, Angular, and React. Key features of the example "my-panel" component are described, including making it toggleable via a click event on the title bar.
Redux Toolkit & RTK Query in TypeScript: tips&tricks
Redux Toolkit & RTK Query in TypeScript: tips&tricksFabio Biondi This document discusses advanced tips and tricks for using Redux Toolkit. It covers topics like type safe actions and reducers, slice utilities, middleware like thunk and saga, entity management, custom middleware, and RTK Query for asynchronous data fetching including polling, prefetching, and pagination. The document is from a website that provides training on Redux Toolkit.
React Typescript for beginners: Translator app with Microsoft cognitive services
React Typescript for beginners: Translator app with Microsoft cognitive servicesFabio Biondi During this talk, Eduard and I developed a simple application for the translation and sentiment analysis of a text in React, Typescript and through the use of Azure's cognitive services.
Introduction for Master Class "Amazing Reactive Forms"
Introduction for Master Class "Amazing Reactive Forms"Fabio Biondi This document advertises an Angular training course on reactive forms by Fabio Biondi. It provides an overview of the course topics which include template-driven vs reactive forms, building complex forms with FormGroup and FormControl, creating custom form controls and validators, nested and dynamic forms, and advanced APIs. The course is divided into 5 parts that progress from fundamentals to advanced implementation of reactive forms in Angular. A 50% discount coupon is provided for the course.
Data architectures in Angular & NGRX Introduction
Data architectures in Angular & NGRX IntroductionFabio Biondi The document discusses using NGRX for state management in Angular applications. It introduces NGRX as being based on Redux and providing functionality like immutable state, type safety, and testability. It outlines the basic Redux flow of actions, reducers, and state and how NGRX implements this in Angular. It then covers topics like project structure, dev tools, installing NGRX, creating the application store, and using selectors, effects, and reducers. It also briefly discusses whether Redux is overkill for most apps and alternatives to NGRX.
Angular Day 2018 (italy) - Keynote - The Amazing World of Angular 6
Angular Day 2018 (italy) - Keynote - The Amazing World of Angular 6Fabio Biondi This document discusses AngularDay2018, an event focused on Angular and related technologies. It promotes opportunities for Italian developers, including jobs, collaborations, training, and more. It highlights many features of Angular like TypeScript, components, dependency injection, forms, routing, internationalization, and performance. It also discusses tools like Angular CLI, libraries, Angular Universal for server-side rendering, and long term support.
Introduction to Redux (for Angular and React devs)
Introduction to Redux (for Angular and React devs)Fabio Biondi This document provides an introduction and overview of Redux. It discusses how Redux can help organize React, Angular, and other JavaScript applications into stateless components with a single source of truth for state management. The key concepts of Redux include the store, actions, and reducers. The store holds the entire application state tree. Actions describe state changes and are sent to reducers to update the state. Reducers are pure functions that update the state immutably in response to actions. Together the store, actions, and reducers provide a predictable state management pattern for building scalable applications.
Angular Best Practices @ Firenze 19 feb 2018
Angular Best Practices @ Firenze 19 feb 2018Fabio Biondi This document summarizes Fabio Biondi's background and areas of expertise. It indicates that he is an experienced freelance developer with skills in Angular, React, Redux, RxJS and other technologies. He runs community groups and offers training courses on these topics. The document also lists upcoming events and courses on Angular best practices, data architectures, and mastering Angular.
React: JSX and Top Level API
React: JSX and Top Level APIFabio Biondi This document discusses developing client, server, and mobile applications with React. It introduces React Top-Level API vs JSX and how to create reusable Widget components in React that can render different content types specified by a string property. Widgets are demonstrated as cards with optional close and option buttons that can trigger callback handlers. The content is split across multiple nested components for reusability and extensibility. Similar capabilities in Angular are discussed using directives.
Intro evento: evolvere un applicazione Angular con Rxjs e Redux
Intro evento: evolvere un applicazione Angular con Rxjs e ReduxFabio Biondi Angular fornisce gli strumenti fondamentali per sviluppare un’intera Single Page Application.
Tuttavia, le attività che il front-end deve svolgere sono sempre più complesse e le interfacce utente (UI), di conseguenza, stanno diventando sempre più sofisticate: gestione di un data-flow molto articolato, componenti che devono rimanere in sync tra di loro, integrazione unit test, time travel debugging sono solo alcune delle problematiche ricorrenti che uno sviluppatore front-end deve affrontare quotidianamente.
Redux, libreria nata per requisiti complessi in contesti quali Facebook, nasce con l’obiettivo di separare nettamente gli aspetti architetturali dalla user interface, semplificando la gestione dello stato applicativo e rendendo il codice molto più manutenibile, testabile e scalabile.
RxJS, una libreria per la gestione di eventi asincroni basata sul paradigma della programmazione reattiva, è una dipendenza del framework Angular e utilizzata in un’infinità di contesti: manipolazione del dato, gestione di form reattivi, interazioni utente.
L’obiettivo di questo evento è quello di descrivere alcuni dei pattern e delle librerie attualmente più diffuse e richieste nel panorama internazionale per la creazione di architetture front-end.
La giornata è totalmente focalizzata sull’ultima release di Angular ma la maggior parte dei concetti esposti saranno applicabili anche in #react o in un qualunque altro contesto in cui si utilizzi #javascript.
---------
3 SESSIONI / 3 SPEAKER:
1) Architetture in Angular e Redux
Fabio Biondi / JS Developer & Trainer
2) Be more productive with Redux devtools
Jiayi Hu / Front-end developer & Consultant
3) Introduzione a RxJS
Maksim Sinik / Full Stack Developer
Durata: 3 ore
---------
GADGETS
Durante l'evento assegneremo 3 licenze per un anno di sottoscrizione ai prodotti JetBrain tramite una semplice estrazione tra i partecipanti. Nei prossimi eventi ci saranno moltissime novità. WE LOVE GADGETS! :)
---------
PARTNERS:
- INattivo: La Fabbrica di innovazione e sviluppo tecnologico dei servizi core per le aziende.
- CoderBlock: Recruitment Marketplace
- JetBrain: Developer Tools
---------
FACEBOOK COMMUNITIES:
- Angular Developer Italiani
- React Developer Italiani
- Javascript Developer Italiani
Single Page Applications in Angular (italiano)
Single Page Applications in Angular (italiano)Fabio Biondi L'evoluzione che lo sviluppo front-end ha avuto in questi anni, con particolare attenzione all’ecosistema che ruota attorno all’ultima versione di questo framework.
Angular 2 - Core Concepts
Angular 2 - Core ConceptsFabio Biondi A quick overview about Angular 2 Components, DI, Lifecycle and Change Detection.
Interactive slides: http://slides.fabiobiondi.com/angular2-core-concepts
Plunkr: http://plnkr.co/edit/vllrTYuOo6VJE7vMPEfQ?p=preview
Ad
Recently uploaded (20)
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExJustin Reock Ready to measure and improve developer productivity in your organization?
Join Justin Reock, Deputy CTO at DX, for an interactive session where you'll learn actionable strategies to measure and increase engineering performance.
Leave this session equipped with a comprehensive understanding of developer productivity and a roadmap to create a high-performing engineering team in your company.
Securiport - A Border Security Company
Securiport - A Border Security CompanySecuriport Securiport is a border security systems provider with a progressive team approach to its task. The company acknowledges the importance of specialized skills in creating the latest in innovative security tech. The company has offices throughout the world to serve clients, and its employees speak more than twenty languages at the Washington D.C. headquarters alone.
Supercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMsFrancesco Corti In today's AI development landscape, developers face significant challenges when building applications that leverage powerful large language models (LLMs) through SaaS platforms like ChatGPT, Gemini, and others. While these services offer impressive capabilities, they come with substantial costs that can quickly escalate especially during the development lifecycle. Additionally, the inherent latency of web-based APIs creates frustrating bottlenecks during the critical testing and iteration phases of development, slowing down innovation and frustrating developers.
This talk will introduce the transformative approach of integrating local LLMs directly into their development environments. By bringing these models closer to where the code lives, developers can dramatically accelerate development lifecycles while maintaining complete control over model selection and configuration. This methodology effectively reduces costs to zero by eliminating dependency on pay-per-use SaaS services, while opening new possibilities for comprehensive integration testing, rapid prototyping, and specialized use cases.
New Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDBScyllaDB How ScyllaDB’s latest capabilities can reduce your infrastructure costs
ScyllaDB has been obsessed with price-performance from day 1. Our core database is architected with low-level engineering optimizations that squeeze every ounce of power from the underlying infrastructure. And we just completed a multi-year effort to introduce a set of new capabilities for additional savings.
Join this webinar to learn about these new capabilities: the underlying challenges we wanted to address, the workloads that will benefit most from each, and how to get started. We’ll cover ways to:
- Avoid overprovisioning with “just-in-time” scaling
- Safely operate at up to ~90% storage utilization
- Cut network costs with new compression strategies and file-based streaming
We’ll also highlight a “hidden gem” capability that lets you safely balance multiple workloads in a single cluster. To conclude, we will share the efficiency-focused capabilities on our short-term and long-term roadmaps.
European Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility TestingJulia Undeutsch Emma Dawson will guide you through two important topics in this session.
Firstly, she will prepare you for the European Accessibility Act (EAA), which comes into effect on 28 June 2025, and show you how development teams can prepare for it.
In the second part of the webinar, Emma Dawson will explore with you various integrated testing methods and tools that will help you improve accessibility during the development cycle, such as Linters, Storybook, Playwright, just to name a few.
Focus: European Accessibility Act, Integrated Testing tools and methods (e.g. Linters, Storybook, Playwright)
Target audience: Everyone, Developers, Testers
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionTakahiro Harada Neural representations have shown the potential to accelerate ray casting in a conventional ray-tracing-based rendering pipeline. We introduce a novel approach called Locally-Subdivided Neural Intersection Function (LSNIF) that replaces bottom-level BVHs used as traditional geometric representations with a neural network. Our method introduces a sparse hash grid encoding scheme incorporating geometry voxelization, a scene-agnostic training data collection, and a tailored loss function. It enables the network to output not only visibility but also hit-point information and material indices. LSNIF can be trained offline for a single object, allowing us to use LSNIF as a replacement for its corresponding BVH. With these designs, the network can handle hit-point queries from any arbitrary viewpoint, supporting all types of rays in the rendering pipeline. We demonstrate that LSNIF can render a variety of scenes, including real-world scenes designed for other path tracers, while achieving a memory footprint reduction of up to 106.2x compared to a compressed BVH.
https://arxiv.org/abs/2504.21627
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul Jeremy Millul is a talented software developer based in NYC, known for leading impactful projects such as a Community Engagement Platform and a Hiking Trail Finder. Using React, MongoDB, and geolocation tools, Jeremy delivers intuitive applications that foster engagement and usability. A graduate of NYU’s Computer Science program, he brings creativity and technical expertise to every project, ensuring seamless user experiences and meaningful results in software development.
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)
Nix(OS) for Python Developers - PyCon 25 (Bologna, Italia)Peter Bittner How do you onboard new colleagues in 2025? How long does it take? Would you love a standardized setup under version control that everyone can customize for themselves? A stable desktop setup, reinstalled in just minutes. It can be done.
This talk was given in Italian, 29 May 2025, at PyCon 25, Bologna, Italy. All slides are provided in English.
Original slides at https://slides.com/bittner/pycon25-nixos-for-python-developers
Dev Dives: System-to-system integration with UiPath API Workflows
Dev Dives: System-to-system integration with UiPath API WorkflowsUiPathCommunity Join the next Dev Dives webinar on May 29 for a first contact with UiPath API Workflows, a powerful tool purpose-fit for API integration and data manipulation!
This session will guide you through the technical aspects of automating communication between applications, systems and data sources using API workflows.
📕 We'll delve into:
- How this feature delivers API integration as a first-party concept of the UiPath Platform.
- How to design, implement, and debug API workflows to integrate with your existing systems seamlessly and securely.
- How to optimize your API integrations with runtime built for speed and scalability.
This session is ideal for developers looking to solve API integration use cases with the power of the UiPath Platform.
👨🏫 Speakers:
Gunter De Souter, Sr. Director, Product Manager @UiPath
Ramsay Grove, Product Manager @UiPath
This session streamed live on May 29, 2025, 16:00 CET.
Check out all our upcoming UiPath Dev Dives sessions:
👉 https://community.uipath.com/dev-dives-automation-developer-2025/
Grannie’s Journey to Using Healthcare AI Experiences
Grannie’s Journey to Using Healthcare AI ExperiencesLauren Parr AI offers transformative potential to enhance our long-time persona Grannie’s life, from healthcare to social connection. This session explores how UX designers can address unmet needs through AI-driven solutions, ensuring intuitive interfaces that improve safety, well-being, and meaningful interactions without overwhelming users.
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto CertificateVICTOR MAESTRE RAMIREZ Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Create Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent BuilderDianaGray10 Join us for an exciting virtual event where you'll learn how to create your first AI Agent using UiPath Agent Builder. This session will cover everything you need to know about what an agent is and how easy it is to create one using the powerful AI-driven UiPath platform. You'll also discover the steps to successfully publish your AI agent. This is a wonderful opportunity for beginners and enthusiasts to gain hands-on insights and kickstart their journey in AI-powered automation.
Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...pranavbodhak Cyber security
Microsoft Build 2025 takeaways in one presentation
Microsoft Build 2025 takeaways in one presentationDigitalmara Microsoft Build 2025 introduced significant updates. Everything revolves around AI. DigitalMara analyzed these announcements:
• AI enhancements for Windows 11
By embedding AI capabilities directly into the OS, Microsoft is lowering the barrier for users to benefit from intelligent automation without requiring third-party tools. It's a practical step toward improving user experience, such as streamlining workflows and enhancing productivity. However, attention should be paid to data privacy, user control, and transparency of AI behavior. The implementation policy should be clear and ethical.
• GitHub Copilot coding agent
The introduction of coding agents is a meaningful step in everyday AI assistance. However, it still brings challenges. Some people compare agents with junior developers. They noted that while the agent can handle certain tasks, it often requires supervision and can introduce new issues. This innovation holds both potential and limitations. Balancing automation with human oversight is crucial to ensure quality and reliability.
• Introduction of Natural Language Web
NLWeb is a significant step toward a more natural and intuitive web experience. It can help users access content more easily and reduce reliance on traditional navigation. The open-source foundation provides developers with the flexibility to implement AI-driven interactions without rebuilding their existing platforms. NLWeb is a promising level of web interaction that complements, rather than replaces, well-designed UI.
• Introduction of Model Context Protocol
MCP provides a standardized method for connecting AI models with diverse tools and data sources. This approach simplifies the development of AI-driven applications, enhancing efficiency and scalability. Its open-source nature encourages broader adoption and collaboration within the developer community. Nevertheless, MCP can face challenges in compatibility across vendors and security in context sharing. Clear guidelines are crucial.
• Windows Subsystem for Linux is open-sourced
It's a positive step toward greater transparency and collaboration in the developer ecosystem. The community can now contribute to its evolution, helping identify issues and expand functionality faster. However, open-source software in a core system also introduces concerns around security, code quality management, and long-term maintenance. Microsoft’s continued involvement will be key to ensuring WSL remains stable and secure.
• Azure AI Foundry platform hosts Grok 3 AI models
Adding new models is a valuable expansion of AI development resources available at Azure. This provides developers with more flexibility in choosing language models that suit a range of application sizes and needs. Hosting on Azure makes access and integration easier when using Microsoft infrastructure.
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....Jasper Oosterveld Sensitivity labels, powered by Microsoft Purview Information Protection, serve as the foundation for classifying and protecting your sensitive data within Microsoft 365. Their importance extends beyond classification and play a crucial role in enforcing governance policies across your Microsoft 365 environment. Join me, a Data Security Consultant and Microsoft MVP, as I share practical tips and tricks to get the full potential of sensitivity labels. I discuss sensitive information types, automatic labeling, and seamless integration with Data Loss Prevention, Teams Premium, and Microsoft 365 Copilot.
AI Trends - Mary Meeker
AI Trends - Mary MeekerRazin Mustafiz Source: https://www.bondcap.com/reports/tai
SDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhereAdtran Adtran’s SDG 9000 Series brings high-performance, cloud-managed Wi-Fi 7 to homes, businesses and public spaces. Built on a unified SmartOS platform, the portfolio includes outdoor access points, ceiling-mount APs and a 10G PoE router. Intellifi and Mosaic One simplify deployment, deliver AI-driven insights and unlock powerful new revenue streams for service providers.
STKI Israel Market Study 2025 final v1 version
STKI Israel Market Study 2025 final v1 versionDr. Jimmy Schwarzkopf nnual (33 years) study of the Israeli Enterprise / public IT market. Covering sections on Israeli Economy, IT trends 2026-28, several surveys (AI, CDOs, OCIO, CTO, staffing cyber, operations and infra) plus rankings of 760 vendors on 160 markets (market sizes and trends) and comparison of products according to support and market penetration.
Fortinet Certified Associate in Cybersecurity
Fortinet Certified Associate in CybersecurityVICTOR MAESTRE RAMIREZ Fortinet Certified Associate in Cybersecurity
Introducing the OSA 3200 SP and OSA 3250 ePRC
Introducing the OSA 3200 SP and OSA 3250 ePRCAdtran Adtran's latest Oscilloquartz solutions make optical pumping cesium timing more accessible than ever. Discover how the new OSA 3200 SP and OSA 3250 ePRC deliver superior stability, simplified deployment and lower total cost of ownership. Built on a shared platform and engineered for scalable, future-ready networks, these models are ideal for telecom, defense, metrology and more.
RXJS Best (& Bad) Practices for Angular Developers
- 3. fabiobiondi.io Google Developer Expert Microsoft MVP JS Training Community Founder
- 5. THERE ARE 3 “BAD PRACTICES” HERE
- 6. use “$” in observable’s names 1
- 11. fabiobiondi.io
- 12. fabiobiondi.io Another way to unsubscribe 3b
- 13. fabiobiondi.io
- 15. fabiobiondi.io
- 18. fabiobiondi.io
- 19. fabiobiondi.io Don’t pass streams to components
- 21. fabiobiondi.io
- 22. fabiobiondi.io SUBSCRIBE in SUBSCRIBE? NO THANKS 🤷
- 25. fabiobiondi.io
- 28. fabiobiondi.io
- 31. fabiobiondi.io
- 36. fabiobiondi.io
- 37. fabiobiondi.io LIMIT LOGIC IN OBSERVERs
- 39. fabiobiondi.io
- 43. fabiobiondi.io
- 44. fabiobiondi.io Create a flow of streams (Angular HTTPInterceptor example)
- 45. HTTPInterceptor
- 48. fabiobiondi.io RxJS is everywhere (in Angular) in directives, forms, router guards/events/props, interceptors, @Output EventEmitters, …
- 54. fabiobiondi.io NGRX Effects actions observable dispatch new actions
- 57. NGRX: dispatch multiple actions
- 58. fabiobiondi.io
- 59. fabiobiondi.io Redux Observable for React actions observable
- 60. fabiobiondi.io Don’t use tap :) it’s just for logs 😱
- 63. fabiobiondi.io YOU SHOULD KNOW FOLLOWING CONCEPTS: Cold vs Hot Observables Unicast vs Multicast Outer vs Inner observables Pure Functions & Immutability Think Async Learn how to work with multiple streams
- 64. fabiobiondi.io FUNDAMENTALS OPERATORS YOU SHOULD KNOW creation: transformation: filtering: combination: multicast: & Subjects of, from, fromEvent, interval, … buffer, toArray, groupBy, reduce, map, … switchMap, concatMap, exhaustMap, mergeMap filter, take, first, skip, last, distinct, ***Until, ***While, … zip, withLatestFrom, merge, combineLatest, forkJoin, … publish, refCount, share, multicast Subject, BehaviorSubject, ReplaySubject, AsyncSubjecs