React is a JavaScript library that uses components to build user interfaces. Components manage interactive state and re-render when their state changes. State management can be complex, with common problems including updating state in unmounted components, showing old data, lack of error handling, and not canceling asynchronous operations. Proper state management requires understanding component lifecycles, sharing state, asynchronous flows, and best practices from the React community.
The slides for my talk bout state management at #DevoxxMA 2022.
It talks about state crimes and state police: the bad patterns we've done managing state and how to easily deal with them.
State management in react applications (Statecharts)Tomáš Drenčák
This document discusses state management in React applications and introduces statecharts as an alternative approach. It covers the limitations of approaches like Flux and Redux, such as global action handling registries and initialization/cleanup issues. Statecharts provide hierarchical and parallel states that can help solve these problems. The document demonstrates how statecharts can be used to structure stores, handle actions polymorphically, and implement common patterns like pages and lists in a more organized way.
This webinar by Orkhan Gasimov (Senior Solution Architect, Consultant, GlobalLogic) was delivered at Java Community Webinar #3 on October 16, 2020.
During webinar we had simplified overview of classical and modern architecture patterns and concepts that are used for development of distributed applications during the last decade.
More details and presentation: https://www.globallogic.com/ua/about/events/java-community-webinar-3/
State machines are an approach to workflow design that allows a lot more flexibility, a lot more readability, and a lot less chaos to almost any process model. In a very real sense, almost all workflows would benefit from being redesigned as state machines, but certain use cases fit this design model particularly well. This session will explain what state machines are, why to use them, how to create them in Visual Studio and other products, and how to redesign a number of workflow models as state machines instead.
Patterns of Distributed Application DesignOrkhan Gasimov
This document discusses patterns and principles for distributed application design. It covers basic concepts like client-server and multitier architectures. It discusses scaling issues like load balancing and sharing of resources. It then describes evolving to a more service-oriented approach with independently deployable services behind an API gateway and using service discovery. It covers patterns for communication, data consistency using eventual consistency with event sourcing and CQRS, and ensuring high availability. The key aspects are to think about security, high availability, communication patterns, and leveraging data-oriented microservices with eventual consistency between command and query models.
React is a JavaScript library for building user interfaces and applications. It uses components rather than templates, implements a one-way data flow downwards and re-renders components on data changes rather than mutating them directly. The virtual DOM in React allows for simple and fast re-rendering. Key aspects of React include components, one-way data flow, re-rendering without mutation, the virtual DOM, JSX syntax and React Native for building mobile apps. Flux is an architecture pattern used for state management in React, implementing unidirectional data flow through actions, a dispatcher, stores and views.
This document discusses using Angular with a functional programming style and the ngrx/store library for state management. It explains how ngrx/store implements a single immutable state store with actions and reducers. Components dispatch actions that are handled by reducers to update the state. State changes are observable throughout the app. Effects isolate side effects like HTTP calls from components. The ngrx/dev-tools enable time travel debugging of state changes.
The slides for my talk bout state management at #DevoxxMA 2022.
It talks about state crimes and state police: the bad patterns we've done managing state and how to easily deal with them.
State management in react applications (Statecharts)Tomáš Drenčák
This document discusses state management in React applications and introduces statecharts as an alternative approach. It covers the limitations of approaches like Flux and Redux, such as global action handling registries and initialization/cleanup issues. Statecharts provide hierarchical and parallel states that can help solve these problems. The document demonstrates how statecharts can be used to structure stores, handle actions polymorphically, and implement common patterns like pages and lists in a more organized way.
This webinar by Orkhan Gasimov (Senior Solution Architect, Consultant, GlobalLogic) was delivered at Java Community Webinar #3 on October 16, 2020.
During webinar we had simplified overview of classical and modern architecture patterns and concepts that are used for development of distributed applications during the last decade.
More details and presentation: https://www.globallogic.com/ua/about/events/java-community-webinar-3/
State machines are an approach to workflow design that allows a lot more flexibility, a lot more readability, and a lot less chaos to almost any process model. In a very real sense, almost all workflows would benefit from being redesigned as state machines, but certain use cases fit this design model particularly well. This session will explain what state machines are, why to use them, how to create them in Visual Studio and other products, and how to redesign a number of workflow models as state machines instead.
Patterns of Distributed Application DesignOrkhan Gasimov
This document discusses patterns and principles for distributed application design. It covers basic concepts like client-server and multitier architectures. It discusses scaling issues like load balancing and sharing of resources. It then describes evolving to a more service-oriented approach with independently deployable services behind an API gateway and using service discovery. It covers patterns for communication, data consistency using eventual consistency with event sourcing and CQRS, and ensuring high availability. The key aspects are to think about security, high availability, communication patterns, and leveraging data-oriented microservices with eventual consistency between command and query models.
React is a JavaScript library for building user interfaces and applications. It uses components rather than templates, implements a one-way data flow downwards and re-renders components on data changes rather than mutating them directly. The virtual DOM in React allows for simple and fast re-rendering. Key aspects of React include components, one-way data flow, re-rendering without mutation, the virtual DOM, JSX syntax and React Native for building mobile apps. Flux is an architecture pattern used for state management in React, implementing unidirectional data flow through actions, a dispatcher, stores and views.
This document discusses using Angular with a functional programming style and the ngrx/store library for state management. It explains how ngrx/store implements a single immutable state store with actions and reducers. Components dispatch actions that are handled by reducers to update the state. State changes are observable throughout the app. Effects isolate side effects like HTTP calls from components. The ngrx/dev-tools enable time travel debugging of state changes.
The document summarizes key concepts from a React frontend bootcamp session including performance optimization hooks like useMemo and useCallback, state management in React using local and global approaches, and integrating Redux for global state management. Specifically, it discusses:
1) The useMemo and useCallback hooks can optimize performance by memoizing values and functions to prevent unnecessary re-renders.
2) Local state management uses useState within a component while global approaches like Context API and Redux share state across components.
3) Redux follows a pattern with a central store holding application state, actions describing state changes, and reducer functions defining update logic.
This document summarizes techniques for robust UI development with ClojureScript including:
- ClojureScript enables first-class immutability and persistent data structures which helps manage increasingly complex state in single-page apps.
- The reagent library separates state (stored in atoms) and views (functions of state) allowing hot code reloading to change views without losing state.
- The re-frame library takes this further with a single state container (the database) and separating events, event handlers, effects, and subscriptions to control mutation and side effects predictably.
- Clojure.spec can specify and validate the application state at runtime to catch errors and provide helpful messages.
Brighttalk high scale low touch and other bedtime stories - finalAndrew White
Mr. White has 15 years of experience designing and managing systems monitoring and event management software. He previously led monitoring teams at a Fortune 100 company and consulted for various large organizations. He now works as a cloud and smarter infrastructure specialist at IBM.
1. The document discusses moving from an imperative to a functional architecture using React Native, Clojurescript, and Re-frame.
2. Re-frame uses a single store for data modeling like Redux, provides events to handle data changes, and subscriptions for efficient querying.
3. Events are dispatched asynchronously and put in a queue to be processed, with each event handler getting a fresh data structure and producing distinct effects.
Training Slides: 102 - Basics - Tungsten Replicator - How We Move Your DataContinuent
The document discusses the basics of Tungsten Replicator and how it moves data. It describes the replicator states as START, OFFLINE, GOING-ONLINE, ONLINE, and GOING-OFFLINE. It also explains the replicator roles of master, slave, thl-server, and thl-client. Finally, it outlines the replicator stages of extraction, filtering, and application between a primary and replica, including the stages of binlog-to-q, q-to-thl, remote-to-thl, thl-to-q, and q-to-dbms.
Slides from my (incomplete) ReactJS presentation at Code Impact in Jacksonville, Florida, 9/13/2014. Will update these after my next presentation that will include more on the Flux architectural pattern
The document discusses cloud-based modeling solutions from IncQuery Labs that enable tool integration. It describes challenges with large-scale collaboration and automation across multiple teams and tools. The IncQuery Model Checking Tool Suite uses a custom query language to perform validation checks and transformations across models stored in a repository. Case studies demonstrate tool integration workflows at companies like Airbus. Live demos of the solutions are also provided.
The document discusses refactoring Angular applications to use components instead of controllers and templates. It recommends building applications as trees of reusable components, with each component containing related HTML, JavaScript, and CSS. Dumb components focus on visualization, while smart components handle data fetching and state management. The document then introduces Flux architecture and Redux for managing state in a predictable, centralized way using immutable data and reducer functions. Components interact by dispatching actions that update the single source of truth Redux store.
Unit 4- State Machine in mobile programmingLeahRachael
This document provides an overview of state machines and their use in applications. A state machine defines the process flow of an application at runtime by converting it into a series of states. It reads a series of inputs and switches to different states accordingly. Examples are provided of state machines for fetching data from an API and for a washer/dryer machine. Key components of a state machine include states, events/inputs, and transitions between states. States represent the status of the machine, events are the inputs that trigger transitions, and transitions move the machine from one state to another. Finite state machines have a finite number of states and can only be in one state at a time. Moore and Mealy machines are two types that differ in
This document discusses using React and Redux to build an app for managing conferences. It describes building a conference scheduling app with React components to define the UI and Redux to manage shared state. Redux uses a central store with actions and reducers to update the state, which is then mapped to props and passed to React components. Key aspects covered include creating React components, action creators, reducers, connecting React to Redux with the connect function, and rendering the app with a Provider component wrapping the connected components.
In this talk, Rsqrd AI welcomes Kevin Powell, Director of Zestimates & AI Platform at Zillow! Kevin speaks about the technology and complexity behind the Zestimate and its impact at Zillow.
**These slides are from a talk given at Rsqrd AI. Learn more at rsqrdai.org**
The document provides an overview of a presentation on effective use of Akka actors. It begins with definitions of actors and their purpose in solving concurrency and resilience problems. It then covers two use cases - maintaining a cache of customer entitlement data and aggregating account balance information from multiple services. For the latter use case, it discusses using the Cameo pattern to handle requests asynchronously without blocking the receiving actor. The presentation code is provided on GitHub for reference.
Introduction to React, Flux, and Isomorphic AppsFederico Torre
A quick introduction to Facebook's react.js framework. This deck covers react components, flux architecture, and how to build an isomorphic application.
This session will be about maintaning the store on client side with redux, And will have more details about state management addressing single source of truth concept
The document discusses using actors to handle asynchronous requests that require aggregating responses from multiple services. It proposes using a "cameo actor" to encapsulate the request context and define the behavior for handling partial or complete responses. The cameo actor would send the initial requests, set a timeout, and send the final response before shutting down once the work is complete. This approach avoids issues with capturing the correct sender reference and state management compared to using anonymous actors or futures directly.
Fault Tolerance in Distributed EnvironmentOrkhan Gasimov
The document discusses various techniques for achieving fault tolerance in distributed systems, including service coordination, handling high load, RPC mechanics, circuit breakers, N-modular redundancy, recovery blocks, actors and error kernels, and instance healers. It describes common issues that can occur like network failures and overloaded services, and explains solutions such as service discovery, load balancing, timeouts, and dynamically scaling services horizontally.
Redux is a state management library for JavaScript apps that uses a single state tree shared by all components. It consists of a store containing the app's state, reducers that update the state in response to actions, and actions that are dispatched to the store to trigger state changes. Components connect to the store to read data and dispatch actions, keeping state changes centralized and predictable.
Transactional Streaming: If you can compute it, you can probably stream it.jhugg
This document discusses transactional stream processing and operational state. It argues that integrating state management and stream processing within the same transactional system avoids issues caused by independent failures of separate systems and reduces the need for "glue code". It provides examples of how transactional stream processing can enable features like correlation, deduplication, and aggregation in a reliable way. Key aspects that are important for operational workloads like counting, accounting, and statistics are ensuring idempotence and implementing operations atomically within transactions.
How information systems are built or acquired puts information, which is what they should be about, in a secondary place. Our language adapted accordingly, and we no longer talk about information systems but applications. Applications evolved in a way to break data into diverse fragments, tightly coupled with applications and expensive to integrate. The result is technical debt, which is re-paid by taking even bigger "loans", resulting in an ever-increasing technical debt. Software engineering and procurement practices work in sync with market forces to maintain this trend. This talk demonstrates how natural this situation is. The question is: can something be done to reverse the trend?
The document summarizes key concepts from a React frontend bootcamp session including performance optimization hooks like useMemo and useCallback, state management in React using local and global approaches, and integrating Redux for global state management. Specifically, it discusses:
1) The useMemo and useCallback hooks can optimize performance by memoizing values and functions to prevent unnecessary re-renders.
2) Local state management uses useState within a component while global approaches like Context API and Redux share state across components.
3) Redux follows a pattern with a central store holding application state, actions describing state changes, and reducer functions defining update logic.
This document summarizes techniques for robust UI development with ClojureScript including:
- ClojureScript enables first-class immutability and persistent data structures which helps manage increasingly complex state in single-page apps.
- The reagent library separates state (stored in atoms) and views (functions of state) allowing hot code reloading to change views without losing state.
- The re-frame library takes this further with a single state container (the database) and separating events, event handlers, effects, and subscriptions to control mutation and side effects predictably.
- Clojure.spec can specify and validate the application state at runtime to catch errors and provide helpful messages.
Brighttalk high scale low touch and other bedtime stories - finalAndrew White
Mr. White has 15 years of experience designing and managing systems monitoring and event management software. He previously led monitoring teams at a Fortune 100 company and consulted for various large organizations. He now works as a cloud and smarter infrastructure specialist at IBM.
1. The document discusses moving from an imperative to a functional architecture using React Native, Clojurescript, and Re-frame.
2. Re-frame uses a single store for data modeling like Redux, provides events to handle data changes, and subscriptions for efficient querying.
3. Events are dispatched asynchronously and put in a queue to be processed, with each event handler getting a fresh data structure and producing distinct effects.
Training Slides: 102 - Basics - Tungsten Replicator - How We Move Your DataContinuent
The document discusses the basics of Tungsten Replicator and how it moves data. It describes the replicator states as START, OFFLINE, GOING-ONLINE, ONLINE, and GOING-OFFLINE. It also explains the replicator roles of master, slave, thl-server, and thl-client. Finally, it outlines the replicator stages of extraction, filtering, and application between a primary and replica, including the stages of binlog-to-q, q-to-thl, remote-to-thl, thl-to-q, and q-to-dbms.
Slides from my (incomplete) ReactJS presentation at Code Impact in Jacksonville, Florida, 9/13/2014. Will update these after my next presentation that will include more on the Flux architectural pattern
The document discusses cloud-based modeling solutions from IncQuery Labs that enable tool integration. It describes challenges with large-scale collaboration and automation across multiple teams and tools. The IncQuery Model Checking Tool Suite uses a custom query language to perform validation checks and transformations across models stored in a repository. Case studies demonstrate tool integration workflows at companies like Airbus. Live demos of the solutions are also provided.
The document discusses refactoring Angular applications to use components instead of controllers and templates. It recommends building applications as trees of reusable components, with each component containing related HTML, JavaScript, and CSS. Dumb components focus on visualization, while smart components handle data fetching and state management. The document then introduces Flux architecture and Redux for managing state in a predictable, centralized way using immutable data and reducer functions. Components interact by dispatching actions that update the single source of truth Redux store.
Unit 4- State Machine in mobile programmingLeahRachael
This document provides an overview of state machines and their use in applications. A state machine defines the process flow of an application at runtime by converting it into a series of states. It reads a series of inputs and switches to different states accordingly. Examples are provided of state machines for fetching data from an API and for a washer/dryer machine. Key components of a state machine include states, events/inputs, and transitions between states. States represent the status of the machine, events are the inputs that trigger transitions, and transitions move the machine from one state to another. Finite state machines have a finite number of states and can only be in one state at a time. Moore and Mealy machines are two types that differ in
This document discusses using React and Redux to build an app for managing conferences. It describes building a conference scheduling app with React components to define the UI and Redux to manage shared state. Redux uses a central store with actions and reducers to update the state, which is then mapped to props and passed to React components. Key aspects covered include creating React components, action creators, reducers, connecting React to Redux with the connect function, and rendering the app with a Provider component wrapping the connected components.
In this talk, Rsqrd AI welcomes Kevin Powell, Director of Zestimates & AI Platform at Zillow! Kevin speaks about the technology and complexity behind the Zestimate and its impact at Zillow.
**These slides are from a talk given at Rsqrd AI. Learn more at rsqrdai.org**
The document provides an overview of a presentation on effective use of Akka actors. It begins with definitions of actors and their purpose in solving concurrency and resilience problems. It then covers two use cases - maintaining a cache of customer entitlement data and aggregating account balance information from multiple services. For the latter use case, it discusses using the Cameo pattern to handle requests asynchronously without blocking the receiving actor. The presentation code is provided on GitHub for reference.
Introduction to React, Flux, and Isomorphic AppsFederico Torre
A quick introduction to Facebook's react.js framework. This deck covers react components, flux architecture, and how to build an isomorphic application.
This session will be about maintaning the store on client side with redux, And will have more details about state management addressing single source of truth concept
The document discusses using actors to handle asynchronous requests that require aggregating responses from multiple services. It proposes using a "cameo actor" to encapsulate the request context and define the behavior for handling partial or complete responses. The cameo actor would send the initial requests, set a timeout, and send the final response before shutting down once the work is complete. This approach avoids issues with capturing the correct sender reference and state management compared to using anonymous actors or futures directly.
Fault Tolerance in Distributed EnvironmentOrkhan Gasimov
The document discusses various techniques for achieving fault tolerance in distributed systems, including service coordination, handling high load, RPC mechanics, circuit breakers, N-modular redundancy, recovery blocks, actors and error kernels, and instance healers. It describes common issues that can occur like network failures and overloaded services, and explains solutions such as service discovery, load balancing, timeouts, and dynamically scaling services horizontally.
Redux is a state management library for JavaScript apps that uses a single state tree shared by all components. It consists of a store containing the app's state, reducers that update the state in response to actions, and actions that are dispatched to the store to trigger state changes. Components connect to the store to read data and dispatch actions, keeping state changes centralized and predictable.
Transactional Streaming: If you can compute it, you can probably stream it.jhugg
This document discusses transactional stream processing and operational state. It argues that integrating state management and stream processing within the same transactional system avoids issues caused by independent failures of separate systems and reduces the need for "glue code". It provides examples of how transactional stream processing can enable features like correlation, deduplication, and aggregation in a reliable way. Key aspects that are important for operational workloads like counting, accounting, and statistics are ensuring idempotence and implementing operations atomically within transactions.
Similar to Revisiting x State x Management__blablaconf.pptx (20)
How information systems are built or acquired puts information, which is what they should be about, in a secondary place. Our language adapted accordingly, and we no longer talk about information systems but applications. Applications evolved in a way to break data into diverse fragments, tightly coupled with applications and expensive to integrate. The result is technical debt, which is re-paid by taking even bigger "loans", resulting in an ever-increasing technical debt. Software engineering and procurement practices work in sync with market forces to maintain this trend. This talk demonstrates how natural this situation is. The question is: can something be done to reverse the trend?
In the realm of cybersecurity, offensive security practices act as a critical shield. By simulating real-world attacks in a controlled environment, these techniques expose vulnerabilities before malicious actors can exploit them. This proactive approach allows manufacturers to identify and fix weaknesses, significantly enhancing system security.
This presentation delves into the development of a system designed to mimic Galileo's Open Service signal using software-defined radio (SDR) technology. We'll begin with a foundational overview of both Global Navigation Satellite Systems (GNSS) and the intricacies of digital signal processing.
The presentation culminates in a live demonstration. We'll showcase the manipulation of Galileo's Open Service pilot signal, simulating an attack on various software and hardware systems. This practical demonstration serves to highlight the potential consequences of unaddressed vulnerabilities, emphasizing the importance of offensive security practices in safeguarding critical infrastructure.
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsDianaGray10
Join us to learn how UiPath Apps can directly and easily interact with prebuilt connectors via Integration Service--including Salesforce, ServiceNow, Open GenAI, and more.
The best part is you can achieve this without building a custom workflow! Say goodbye to the hassle of using separate automations to call APIs. By seamlessly integrating within App Studio, you can now easily streamline your workflow, while gaining direct access to our Connector Catalog of popular applications.
We’ll discuss and demo the benefits of UiPath Apps and connectors including:
Creating a compelling user experience for any software, without the limitations of APIs.
Accelerating the app creation process, saving time and effort
Enjoying high-performance CRUD (create, read, update, delete) operations, for
seamless data management.
Speakers:
Russell Alfeche, Technology Leader, RPA at qBotic and UiPath MVP
Charlie Greenberg, host
Monitoring and Managing Anomaly Detection on OpenShift.pdfTosin Akinosho
Monitoring and Managing Anomaly Detection on OpenShift
Overview
Dive into the world of anomaly detection on edge devices with our comprehensive hands-on tutorial. This SlideShare presentation will guide you through the entire process, from data collection and model training to edge deployment and real-time monitoring. Perfect for those looking to implement robust anomaly detection systems on resource-constrained IoT/edge devices.
Key Topics Covered
1. Introduction to Anomaly Detection
- Understand the fundamentals of anomaly detection and its importance in identifying unusual behavior or failures in systems.
2. Understanding Edge (IoT)
- Learn about edge computing and IoT, and how they enable real-time data processing and decision-making at the source.
3. What is ArgoCD?
- Discover ArgoCD, a declarative, GitOps continuous delivery tool for Kubernetes, and its role in deploying applications on edge devices.
4. Deployment Using ArgoCD for Edge Devices
- Step-by-step guide on deploying anomaly detection models on edge devices using ArgoCD.
5. Introduction to Apache Kafka and S3
- Explore Apache Kafka for real-time data streaming and Amazon S3 for scalable storage solutions.
6. Viewing Kafka Messages in the Data Lake
- Learn how to view and analyze Kafka messages stored in a data lake for better insights.
7. What is Prometheus?
- Get to know Prometheus, an open-source monitoring and alerting toolkit, and its application in monitoring edge devices.
8. Monitoring Application Metrics with Prometheus
- Detailed instructions on setting up Prometheus to monitor the performance and health of your anomaly detection system.
9. What is Camel K?
- Introduction to Camel K, a lightweight integration framework built on Apache Camel, designed for Kubernetes.
10. Configuring Camel K Integrations for Data Pipelines
- Learn how to configure Camel K for seamless data pipeline integrations in your anomaly detection workflow.
11. What is a Jupyter Notebook?
- Overview of Jupyter Notebooks, an open-source web application for creating and sharing documents with live code, equations, visualizations, and narrative text.
12. Jupyter Notebooks with Code Examples
- Hands-on examples and code snippets in Jupyter Notebooks to help you implement and test anomaly detection models.
For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2024/06/temporal-event-neural-networks-a-more-efficient-alternative-to-the-transformer-a-presentation-from-brainchip/
Chris Jones, Director of Product Management at BrainChip , presents the “Temporal Event Neural Networks: A More Efficient Alternative to the Transformer” tutorial at the May 2024 Embedded Vision Summit.
The expansion of AI services necessitates enhanced computational capabilities on edge devices. Temporal Event Neural Networks (TENNs), developed by BrainChip, represent a novel and highly efficient state-space network. TENNs demonstrate exceptional proficiency in handling multi-dimensional streaming data, facilitating advancements in object detection, action recognition, speech enhancement and language model/sequence generation. Through the utilization of polynomial-based continuous convolutions, TENNs streamline models, expedite training processes and significantly diminish memory requirements, achieving notable reductions of up to 50x in parameters and 5,000x in energy consumption compared to prevailing methodologies like transformers.
Integration with BrainChip’s Akida neuromorphic hardware IP further enhances TENNs’ capabilities, enabling the realization of highly capable, portable and passively cooled edge devices. This presentation delves into the technical innovations underlying TENNs, presents real-world benchmarks, and elucidates how this cutting-edge approach is positioned to revolutionize edge AI across diverse applications.
"Choosing proper type of scaling", Olena SyrotaFwdays
Imagine an IoT processing system that is already quite mature and production-ready and for which client coverage is growing and scaling and performance aspects are life and death questions. The system has Redis, MongoDB, and stream processing based on ksqldb. In this talk, firstly, we will analyze scaling approaches and then select the proper ones for our system.
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyScyllaDB
Freshworks creates AI-boosted business software that helps employees work more efficiently and effectively. Managing data across multiple RDBMS and NoSQL databases was already a challenge at their current scale. To prepare for 10X growth, they knew it was time to rethink their database strategy. Learn how they architected a solution that would simplify scaling while keeping costs under control.
Your One-Stop Shop for Python Success: Top 10 US Python Development Providersakankshawande
Simplify your search for a reliable Python development partner! This list presents the top 10 trusted US providers offering comprehensive Python development services, ensuring your project's success from conception to completion.
Digital Marketing Trends in 2024 | Guide for Staying AheadWask
https://www.wask.co/ebooks/digital-marketing-trends-in-2024
Feeling lost in the digital marketing whirlwind of 2024? Technology is changing, consumer habits are evolving, and staying ahead of the curve feels like a never-ending pursuit. This e-book is your compass. Dive into actionable insights to handle the complexities of modern marketing. From hyper-personalization to the power of user-generated content, learn how to build long-term relationships with your audience and unlock the secrets to success in the ever-shifting digital landscape.
Ivanti’s Patch Tuesday breakdown goes beyond patching your applications and brings you the intelligence and guidance needed to prioritize where to focus your attention first. Catch early analysis on our Ivanti blog, then join industry expert Chris Goettl for the Patch Tuesday Webinar Event. There we’ll do a deep dive into each of the bulletins and give guidance on the risks associated with the newly-identified vulnerabilities.
For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2024/06/how-axelera-ai-uses-digital-compute-in-memory-to-deliver-fast-and-energy-efficient-computer-vision-a-presentation-from-axelera-ai/
Bram Verhoef, Head of Machine Learning at Axelera AI, presents the “How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-efficient Computer Vision” tutorial at the May 2024 Embedded Vision Summit.
As artificial intelligence inference transitions from cloud environments to edge locations, computer vision applications achieve heightened responsiveness, reliability and privacy. This migration, however, introduces the challenge of operating within the stringent confines of resource constraints typical at the edge, including small form factors, low energy budgets and diminished memory and computational capacities. Axelera AI addresses these challenges through an innovative approach of performing digital computations within memory itself. This technique facilitates the realization of high-performance, energy-efficient and cost-effective computer vision capabilities at the thin and thick edge, extending the frontier of what is achievable with current technologies.
In this presentation, Verhoef unveils his company’s pioneering chip technology and demonstrates its capacity to deliver exceptional frames-per-second performance across a range of standard computer vision networks typical of applications in security, surveillance and the industrial sector. This shows that advanced computer vision can be accessible and efficient, even at the very edge of our technological ecosystem.
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfChart Kalyan
A Mix Chart displays historical data of numbers in a graphical or tabular form. The Kalyan Rajdhani Mix Chart specifically shows the results of a sequence of numbers over different periods.
HCL Notes and Domino License Cost Reduction in the World of DLAUpanagenda
Webinar Recording: https://www.panagenda.com/webinars/hcl-notes-and-domino-license-cost-reduction-in-the-world-of-dlau/
The introduction of DLAU and the CCB & CCX licensing model caused quite a stir in the HCL community. As a Notes and Domino customer, you may have faced challenges with unexpected user counts and license costs. You probably have questions on how this new licensing approach works and how to benefit from it. Most importantly, you likely have budget constraints and want to save money where possible. Don’t worry, we can help with all of this!
We’ll show you how to fix common misconfigurations that cause higher-than-expected user counts, and how to identify accounts which you can deactivate to save money. There are also frequent patterns that can cause unnecessary cost, like using a person document instead of a mail-in for shared mailboxes. We’ll provide examples and solutions for those as well. And naturally we’ll explain the new licensing model.
Join HCL Ambassador Marc Thomas in this webinar with a special guest appearance from Franz Walder. It will give you the tools and know-how to stay on top of what is going on with Domino licensing. You will be able lower your cost through an optimized configuration and keep it low going forward.
These topics will be covered
- Reducing license cost by finding and fixing misconfigurations and superfluous accounts
- How do CCB and CCX licenses really work?
- Understanding the DLAU tool and how to best utilize it
- Tips for common problem areas, like team mailboxes, functional/test users, etc
- Practical examples and best practices to implement right away
Dandelion Hashtable: beyond billion requests per second on a commodity serverAntonios Katsarakis
This slide deck presents DLHT, a concurrent in-memory hashtable. Despite efforts to optimize hashtables, that go as far as sacrificing core functionality, state-of-the-art designs still incur multiple memory accesses per request and block request processing in three cases. First, most hashtables block while waiting for data to be retrieved from memory. Second, open-addressing designs, which represent the current state-of-the-art, either cannot free index slots on deletes or must block all requests to do so. Third, index resizes block every request until all objects are copied to the new index. Defying folklore wisdom, DLHT forgoes open-addressing and adopts a fully-featured and memory-aware closed-addressing design based on bounded cache-line-chaining. This design offers lock-free index operations and deletes that free slots instantly, (2) completes most requests with a single memory access, (3) utilizes software prefetching to hide memory latencies, and (4) employs a novel non-blocking and parallel resizing. In a commodity server and a memory-resident workload, DLHT surpasses 1.6B requests per second and provides 3.5x (12x) the throughput of the state-of-the-art closed-addressing (open-addressing) resizable hashtable on Gets (Deletes).
4. React
A JavaScript library
A UI runtime that run components
A set of packages and renderers of different hosts
environments
5. whoami
Mohamed EL AYADI
Senior software engineer with a decade of experience
Java & JavaScript ecosystems
@incepter
@incepterr
6. Plan
What x Is x State ?
State crimes x And x State police
State x Management x Aspects
Conclusion x And x Takeaways
7. What x Is x State ?
• It is the internal memory of a react component
• State setter is the only trigger of the update phase in react
• OK, may be useSyncExternalStore also, but not trivial
• Some states need to be shared in a tree
• Shared by prop drilling or wired via context Api.
• Asynchronous states update state later.
8. State crimes x And x State police
• Cannot update state of unmounted component
• Showing results of earlier request
• No cancellations
• No pending states
• Poor error handling
• Useless useEffects
• Flashing old state
• No sharing
• The list doesn’t end here…
9. State crimes x And x State police
• Cannot update state of unmounted component
10. State crimes x And x State police
• Cannot update state of unmounted component
11. State crimes x And x State police
• Cannot update state of unmounted component
12. State crimes x And x State police
• Problems with this code
• The loading state isn’t a Boolean
• Three pieces of states working and updated together
• Boolean semaphore lock rather than Counting lock!
• Doesn’t abort the previous call
13. State crimes x And x State police
• Cannot update state of unmounted component
14. State crimes x And x State police
• Cannot update state of unmounted component
15. State crimes x And x State police
• Cannot update state of unmounted component
16. State crimes x And x State police
• Showing results of earlier request
17. State crimes x And x State police
• Showing results of earlier request
18. State crimes x And x State police
• No cancellations
• AbortController
24. State crimes x And x State police
• No pending states
• Exact status
• The data relative to the status
• The date at which this piece of state was constructed
• The props that led to that state outcome, may be used for optimistic UI.
26. State crimes x And x State police
• Useless effects
• Could be done in event handlers
• Only to reset state from props
• Effects are only for synchronization and subscription
27. State crimes x And x State police
• Useless effects
• Could be done in event handlers
• Only to reset state from props
• Effects are only for synchronization and subscription
28. State crimes x And x State police
• Flashing old state
• Previous state shows for few Millis and then we start a pending state (if lucky
enough!)
29. State crimes x And x State police
• Manipulating refs and using state to re-render
• The list doesn’t end here…
30. State crimes x And x State police
• Linters provide great help to follow the rules of hooks
• Rules of hooks
• Exhaustive deps
• …
• Blog posts and tutorials try their maximum to share good practices
• Dan’s overreacted blog
• Kent’s blogs and learning material
• Community libraries makes our life easier
• UI libraries
• State managers
• XState
• State managers leverage the complexity but create bad habits.
• React Strict Mode
31. State x Management x Aspects
• Sharing
• Subscriptions
• Asynchronous flows
• Cancellations
• Forks
• Effects: debounce, throttle, delay…
• Caching (with/without persistence)
• React/root independent
36. • Cancellations
• Generators support
• Async/await support via isAborted
• Abort callbacks registration and invalidation
State x Management x Aspects
39. • Caching (with/without persistence)
• Invalidate and refetch when timed-out
• Only invalidate when requested and state
State x Management x Aspects
43. Conclusion x And x Takeaways
• State is the only trigger of updates in react (re-renders). Ok, useSES!
• State setter must be secured from old and stale closures, not only unmount.
• If React.useCallback could just invalidate the previous callback when deps
change!
• Status is mandatory when dealing with asynchronous states
• useEffect should not be abused and events should perform more work
• State managers offers great help dealing with state
• Community resources are a gem that should be considered more
• We are all state criminals
React defines itself as a javascript library for building user interfaces.
But expert people tend often to call it A ui runtime that runs components or elements of different tags: like function component, class component, memo and simple memo, suspense, suspense list, … and so on.
all the components we write are either class components or functions components, but I think class components became only for error boundaries, which is debatable.
If we take a close look at the react codebase we'll notice that its composed of several packages like react, reconciler, scheduler, react-dom, and so many more… these packages are responsible for the whole logic behind the mechanics of react that allow us to run components inside its work loop and delegate communication with the host environment to the renderer.
All of these aspects deserve talks on their own, so may be next time as today is only for state management.
I am mohamed el ayadi, a senior software engineer at xhub. I have a decade of experience around java and javascript ecosystems. You can find me on twitter via incepterr
So today, I ll speak about state, revisit major aspects of it and do a retrospection about all the crimes we've and continue to do with state, then talk briefly about state police.
Then, we'll discuss the state management aspects and the challenges to manage state in a scalable and effective way, then finish by a conclusion and some takeaways
React as we said, run components of different tags, these components do not render one time but render thousands of times during runtime, state is the memory they preserve and manipulate during their life.
More technically, it is a piece of memory associated to your component until it unmounts and get garbage collected.
Altogether with a function that tells react that the value of the state changed, we call it :the updater, or state setter.
So, Why is state the most important thing in react ?
Because your app will remain static until you call a state setter, or in other terms: State setter is the only trigger of the update phase in react.
This means, you can't have a dynamic react application without calling a state setter.
React has three state setters: the dispatch function from useReducer, setState from useState, and this.setState for class components.
Ok, may be useSES also allows scheduling updates on components, but not trivial to be used and will be highly challenging.
State is created in the component scope, so only accessible to that component. If you want to share it, you will have to drill it down via props or wire it via context.
States often needs to be shared in multiple directions in the app and multiple execution contexts, the common way to do so is to declare it at the nearest common parent of all the pieces that need that state.
Some states change later in time after some work is done, we call them asynchronous states because they emit changes to the component over time through the state setter. And these are the most dangerous ones, and we’ll discover how in a few
So as we said, we must use state to have a dynamic application with logic and behavior, but state usage is often abused and lead to unexpected things, I collected many bad and anti patterns and called them State crimes. We'll be discovering this list today:
The first crime on the list is this warning, the one you will find the most in applications:
Cannot update state of unmounted component
Who did already come across this warning ?
It says "can…..", which means, you sent your state setter somewhere as a callback, then you unmounted without saying that your state setter should do nothing anymore, because you are not here anymore!
Well! What I just said proves that this warning is more general and not only related to unmount but react only warns about it in this case! I think that even dependencies change should emit a warning like this! But I understand that’s it’s hard or impossible to be tracked correctly.
This warning generally comes from patterns like this
where you perform some work, then asynchronously update the state later
or where we subscribe to something that emits updates without unsubscribing!
This pattern is all over our applications, in fact, imagine that you have a button that calls a performSearch function, that set the loading indicator to true, search by the given values, then set data or error, and finally alter the loading indicator.
This code should only live in demos and not go to production in enterprise application, because here are some of the flaws that it suffers from:
The loading isn't a boolean!
Declares three pieces of state that works together!
The boolean loading should use a counting semaphore lock and not booleans
Doesn't abort the previous call or care about it
And other issues
This warning also comes from effects like this one
where you execute an async flow when a dep changes then set the state later
now what will happen if your component unmounts or deps change and the order of execution isn't the same as the order of resolve ? You will likely have wrong shown results in the screen.
Effects that subscribe without unsubscribe to external things also are affected by this issue
So I just subscribe, without telling that: hey, I don't need this anymore
As a general solution, Im proposing this:
where you perform a double cleanup: from the subscription if provided, or else, even if the unsubscribe fn isn't working or buggy or forgotten, my cleanup would mark a closure variable that it is stale and should no longer affect my current state by scheduling stale updates
Now, let's go back to our search example, and add a small ingredient that you may find in real life: the more you add filters, the more likely your request is to respond fast, because may be you are adding a join that would just skip over millions of lines.
So let's make our search behave the same: the longer our search term, the faster our response will be.
This code now suffers huge problems:
The first request that responds will mark the loading indicator as false, so even if others are still occurring in the background, there will be no loading indicator anymore
The second huge flaw is that later search will resolve before the former, sor the results on the screen are totally wrong
There are two easy solutions to this involving closures and capturing variables, and also abort callbacks registration.
I wrote about this problem specifically in a blog post that I encourage you to read if not already to fully grasp this issue and learn easy solutions to it.
Talking of the devil, the next crime is that we don't set cancellations in our asynchronous flows
meaning if we send two requests that downloads a file of 5mb each time
we never cancel the previous and we still download all that unnecessary data.
Fetch requests either with the fetch api or axios are now cancellable via abort signal, but sometimes it is hard to achieve if not using the right tools, for example, it is so complex to setup with redux and redux saga.
The ideal scenario would be being able to register abort callbacks via an onabort api, which the AbortSignal started already to support.
But again, not everything in our beloved language supports cancellations, for example the raw promise chain or the async/await syntax doesn't allow you to stop its execution.
If you async await function starts, it cannot be interrupted unless after every await you check if an isAborted() function says yes or no.
But, using generators may allow this, since, with a generator runner, you can decide not to step in the previous yield:
For example, here a small generator runner I wrote back then that allows this.
The next crime on the list is no pending states.
Who can relate to this ? When you go rampage clicking on a button and receiving no feedback of what's going on, you don't know whether the request is sent or not
As a simple solution, just set the following shape for all asynchronous states you have:
Let's see what you ll need: the status, being an enum of the supported values
The data that goes with that status
The timestamp at which the state was created
And the props that led to that state outcome, if you want to perform some optimistic UI or enhanced UX/UI stuff.
Poor error handling, when you receive a generic error message for every bad thing that happens, and your users need now to call the admin to investigate what's happening, and may be call someone from the devteam to read the logs for them and try to know what happened.
So always setup a mechanism that allows you to show the precise exact error definition to the user, and if possible, the error ID that would help the production teams find the error easily
useEffect is probably the most hated hook right now as many people advice to quit using it for many reasons
But one thing we all agree on, is that useEffect was abused.
Quoting these usages from the beta docs where it shows a pattern that was widely used but suffers some errors: For example, this timer get reset everytime I change the increment by which I want to increment it!
But In general I should not be resetting it, if I go into a continuous changing of the increment, the counter will never change its value 0.
To fix this, react are introducing a new hook called useEvent
The next crime on the list is when you use a state and you don't reset it at the end when deps change or component unmounts and this state is widely shared
Look at this code, and tell me what will happen if we don't have a cleanup function that disconnects from the chat, there is a typo in the disconnect function, so it isn't working anyways.
If you don't cleanup previous subscriptions or save yourself from them, every incoming message from all previously visited channels, will be shown in the current conversation.
Enough crimes, or may be the last one, the one I should take Guinness record on it may be!
It is declaring a ref and mutating it, and reding from it during render, and adding a state variable that only rerenders when you want
Enough crimes.
The big challenge about these crimes is being able to identify them and help your teammates deal with them with ease.
Linters also provide a good help, for example eslint react plugin offers plenty of customizable rules that you may consider, rules of hooks and exhaustive deps are a must though.
Blog posts and community efforts are way noticeable and helped us all level up and use better state.
I recommend dan abramov's blog overreacted.io, it contains some really good reading material about react in general, and I am sure you will never look at react the same after you go though it.
Kent c dodds material is also some good stuff that you may consider dedicating yourself to, you will learn basics of react, really basics, with testing and good habits.
The libraries out there offer a great help dealing with all the complexity and repetitive stuff that you find yourself doing all the time, like the ui libraries that hide a lot of states internally with there transitions and give you component ready to use and you only supply the props
xState and state managers also provide a great help and leverage the whole complexity, but they create in general bad habits, bad habits of not knowing sufficiently the tools you are using that we start just doing crimes anywhere.
The react strict modes also does everything twice in development mode so it enforces you to write components that are pure functions around state and props.
But good luck with that with strict effects with react 18 or later, especially if you ll have to migrate some codebase. Because even effects are fired with their cleanups twice.
Now that we are more aware of the things that we really need to manipulate state, let's talk about state management and its aspects, like sharing, subscriptions, async flows, cancellations etc
The first aspect is that I should be able to share my state across my whole app, or at least at a some scopes
It doesn't matter the level at which I am, but I should be able to read and write to some state. That's how a state manager should offer me state.
Subscriptions is being able to be notified by every change that occurs at any point of time, unless I decide to stop via an unsubscribe that the subscribe should return.
Subscriptions is being able to be notified by every change that occurs at any point of time, unless I decide to stop via an unsubscribe that the subscribe should return.
The best level of state sharing is to be able to share that piece of memory of the state, the reference of the object it points to, inter-react-rroot, inter-javascript framework, or even with vanilla javascript!
The following screenshot with the best css in the world is using a subscription from two different react roots and from vanilla javascript to the same piece of state:
I was playing the other day and came up with this, where the state is not bound to react, but to javascript.
Even react now encourages having your state away of react, and it even provided a second trigger of the update phase for that: useSyncExternalStore, that uses a subscribe function to your state. This is how state should be treated.
Asynchronous flows, so that's the big deal, because your SPA or application will be often interacting with your api server and displaying the results.
So you should be able to use the javascript language API to address asynchrounousy, like Promise, async/await syntax, and pushes to you the status so you can do better ui and better user experience.
Cancellations, So we are now aware of the importance of cleanups and cancellations in general, our state managers should allow us to do them.
If your library is only supporting fetch via AbortController and signal APIs, then may be you should ask for an onAbort function that will let you work with any asynchronous flow.
Forks are a feature that is underrated all the time, in fact, it allows you to use the same behavior as something, while having new subscribers and piece of state in memory.
Our state managers should allow us to perform effects on our runs: we may want to throttle them, debounce them, delay them and many more options, ideally they should also offer a way to completely skip the pending state if the requests resolves fast.
Caching is a really good aspect, but it should not be abused because the cache problems are hard to spot
And hard to debug and maintain.
Although, it means nothing that I should perform a request to the server at every user click on the search button, I mean, like if he goes rampage on clicking it! It would be a waste if you through all of them at your server.
Like I mentioned before, our state managers should be react independent and allow us to manipulate state from anywhere, even from another app and react to updates.
This is not trivial, but if you deeply think about it, it really simple, a piece in memory, a subscribe function and a getState, setState and run functions and you are done! You can manipulate that state from anywhere!
So I gathered these aspects and searched through the popular state managers or state manipulators to see how it s going.
Empty redux is nothing and can’t do much, but with the right middlewares it becomes interesting.
Recoil was interesting in its early days, but I think it is not something that will have so much success.
React query on the other hand has a lot of interesting features, But can be way better.
And here is my little stuff that I ve been working on lately
A state manager that defies all the others and supports features like never seen before in the react land.
But it is still in early phases since I am the only one working on it and I lack time.
But in few words, It is a low level and multi paradigm state management solution for javascript.It started with react but now it is heading towards working in all environments where javascript is, with interleaved capabilities, which means I can subscribe and manipulate my state whenever I am in the v8 engine, from react, angular, vanilla or whatever
Ouf, that's been a lot of information, hope you enjoyed it and you learned a thing or two.
So if we want to recapitulate what I've said:
Hello everyone and welcome to my talk
So today we are gonna talk about react and state, we’ll go through a long retrospection about state
Before we start, I would like to know how many of you already used react ? ok may be more than 2 years ? 4 years ?