This document discusses using Redux to manage state in Angular 2 applications. It begins by describing the challenges of managing state in complex single-page applications. It then introduces Redux and key concepts like actions, reducers, and immutable data. It provides an example of setting up a Redux store with root reducer and reducer composition in an Angular 2 app. It also covers container and presentation components, accessing state with selectors, and using action services to dispatch actions. Overall, the document serves as a tutorial for integrating Redux with Angular 2 for unidirectional data flow and predictable state management.
This document discusses using Redux with Angular to create a reactive architecture. It introduces common problems with the Angular state management approach and how Redux solves these. Key aspects covered include the Flux pattern, an overview of Redux, using reducers to modify state immutably, connecting Angular to Redux state with ngRedux, dispatching actions, and building smart and dumb components. Examples are provided of a todo list app implemented with Redux and a preview of a TrendyBrunch app state and components.
This document discusses using Redux to manage state in Angular 2 applications. It begins by describing some issues with complex SPAs, such as everything being connected and changes breaking other parts. It then discusses component-based UIs, unidirectional data flow, and stateless architectures as good solutions. It introduces Redux and key concepts like single stores, state reducers, and immutable data. It explains how Angular 2 and Redux can be combined using NgRedux to select data from the store and dispatch actions. Components are separated into "dumb" views and "smart" containers that connect to the store. The document provides examples of reducers, selectors, actions, and asynchronous logic to manage state in an
Slides for the 2016 Redux & Angular workshop. Redux is a popular library for state management. This workshop is about understanding how to use Redux and how to integrate it wit Angular 2
В презентации описаны лучшие практики использования библиотеки React в связке с Redux. Быстрое разворачивание SPA без настройки Webpack и Babel с помощью утилиты Create React App, Smart and Dumb, Stateful and Stateless Components, управление рендером с помощью shouldComponentUpdate, Redux модули, мемоизация и middlewares.
More useful info on our:
- website: https://clickky.biz
- blog: https://clickky.biz/blog
Sign up!
Redux - idealne dopełnienie Reacta. Prezentacja przedstawiona na warsztatach z podstaw technologii Redux w ramach DreamLab Academy.
W razie pytań zapraszamy do kontaktu academy@dreamlab.pl
The presentation has been part of DreamLab Academy workshop on Redux. For more details get in touch - academy@dreamlab.pl
For years i wanted a robust solution to organize code:
Eliminate messy code
Organize structure
Set strict rules for apps
Write simple tests that cover exactly what i need
Write Less, Think Less - Do More
I just wanted a simple hands-on philosophy in my code.
Then came NgRx/store.
This is an intro to ngrx/store and its echo-system with a usecase of Echoes Player (ng2) open source player developed with angular 2 and ngrx/store.
Redux is an architectural pattern inspired by concepts from stateless web architecture patterns and functional programing paradigms. It introduces a unidirectional data-flow and a predictable state container that scales. It's a popular mind-blowing alternative to the popular MVC pattern, and solves a lot of issues in an elegant and clean way.
While Redux is view agnostic and can be used with any view library, we will build our presentation layer with Angular2.
Quick start with React | DreamLab Academy #2DreamLab
Szybki start z React. Prezentacja przedstawiona na warsztatach z podstaw technologii React w ramach DreamLab Academy.
W razie pytań zapraszamy do kontaktu academy@dreamlab.pl
This document discusses using Redux with Angular to create a reactive architecture. It introduces common problems with the Angular state management approach and how Redux solves these. Key aspects covered include the Flux pattern, an overview of Redux, using reducers to modify state immutably, connecting Angular to Redux state with ngRedux, dispatching actions, and building smart and dumb components. Examples are provided of a todo list app implemented with Redux and a preview of a TrendyBrunch app state and components.
This document discusses using Redux to manage state in Angular 2 applications. It begins by describing some issues with complex SPAs, such as everything being connected and changes breaking other parts. It then discusses component-based UIs, unidirectional data flow, and stateless architectures as good solutions. It introduces Redux and key concepts like single stores, state reducers, and immutable data. It explains how Angular 2 and Redux can be combined using NgRedux to select data from the store and dispatch actions. Components are separated into "dumb" views and "smart" containers that connect to the store. The document provides examples of reducers, selectors, actions, and asynchronous logic to manage state in an
Slides for the 2016 Redux & Angular workshop. Redux is a popular library for state management. This workshop is about understanding how to use Redux and how to integrate it wit Angular 2
В презентации описаны лучшие практики использования библиотеки React в связке с Redux. Быстрое разворачивание SPA без настройки Webpack и Babel с помощью утилиты Create React App, Smart and Dumb, Stateful and Stateless Components, управление рендером с помощью shouldComponentUpdate, Redux модули, мемоизация и middlewares.
More useful info on our:
- website: https://clickky.biz
- blog: https://clickky.biz/blog
Sign up!
Redux - idealne dopełnienie Reacta. Prezentacja przedstawiona na warsztatach z podstaw technologii Redux w ramach DreamLab Academy.
W razie pytań zapraszamy do kontaktu academy@dreamlab.pl
The presentation has been part of DreamLab Academy workshop on Redux. For more details get in touch - academy@dreamlab.pl
For years i wanted a robust solution to organize code:
Eliminate messy code
Organize structure
Set strict rules for apps
Write simple tests that cover exactly what i need
Write Less, Think Less - Do More
I just wanted a simple hands-on philosophy in my code.
Then came NgRx/store.
This is an intro to ngrx/store and its echo-system with a usecase of Echoes Player (ng2) open source player developed with angular 2 and ngrx/store.
Redux is an architectural pattern inspired by concepts from stateless web architecture patterns and functional programing paradigms. It introduces a unidirectional data-flow and a predictable state container that scales. It's a popular mind-blowing alternative to the popular MVC pattern, and solves a lot of issues in an elegant and clean way.
While Redux is view agnostic and can be used with any view library, we will build our presentation layer with Angular2.
Quick start with React | DreamLab Academy #2DreamLab
Szybki start z React. Prezentacja przedstawiona na warsztatach z podstaw technologii React w ramach DreamLab Academy.
W razie pytań zapraszamy do kontaktu academy@dreamlab.pl
This document provides an introduction and overview of React and Redux. It discusses key concepts like components, props, state, lifecycle methods, JSX, and the virtual DOM in React. It also covers Flux architecture and how Redux implements a unidirectional data flow with actions, reducers, and a single store. Additional topics include connecting React to the Redux state, immutable updates with Object.assign(), and testing React and Redux applications. Useful resources for learning more are provided at the end.
The slides from my Redux patterns talk at JSheroes conference April 2018. You can find the code here:
https://github.com/thinking-in-redux/redux-patterns-workshop
In this talk I'm discussing messaging design patterns for event driven programming in Redux
This document provides an introduction and overview of React and Redux. It begins with an introduction to key React concepts like components, props, state, and the virtual DOM. It then covers Redux, including actions, reducers, stores, and using Redux with React. Other topics include React Native, server-side rendering, routing with React Router, testing, and resources for learning more. The document aims to give the high-level essential information about React and Redux.
This document provides an introduction to React for developers. It explains that React is a JavaScript library for building user interfaces developed by Facebook. It then covers key React concepts like components, props, state, rendering, and the virtual DOM. It also discusses tools and patterns for architecting React apps like Flux, Redux, routing, internationalization, and async logic. Finally, it recommends designing state carefully, using standards like Flux Standard Action, avoiding side effects in reducers, and leveraging tools like React DevTools.
How Angular2 Can Improve Your AngularJS Apps Today!Nir Kaufman
Are you ready to migrate your Angular1 project to Angular2? through this slides you will discover some tips that can make your current application better and ready for future migration. A link for reference project can be found inside.
This document outlines a workshop on using Redux for state management in React applications. It introduces Redux, its core principles of single source of truth, state is read-only, and changes are made with pure functions. It demonstrates setting up a sample application with Redux, including actions, reducers, the store, middleware, and connecting React components. The document guides integrating Redux for user login/logout, loading movies data, playing movies, and filtering movies.
Let's Redux! by Joseph Chiang
Published April 15, 2016 in Technology
For people who use React but haven’t tried Redux.
- Why - Common issues while people use React
- Redux Basic Concept
- Redux is a state management library that can be used in Angular applications through implementations like @ngrx/store
- @ngrx/store allows Angular components to subscribe to pieces of state from the Redux store and dispatch actions, following the core Redux principles of actions, reducers, and state updates
- Setting up @ngrx/store in an Angular application only requires importing the StoreModule and providing the root reducer, making state management simple and explicit through observables
This document provides an introduction to React Hooks. It compares class-based components to function components using Hooks, showing how Hooks allow components to use state and other React features without writing classes. Specifically, it demonstrates how useState handles local state, useEffect replaces lifecycle methods, useContext provides access to context, and useMemo improves performance. Overall, Hooks allow function components to behave similarly to classes but with more flexibility.
React is a JavaScript library for building user interfaces that uses a virtual DOM for efficient updates. Redux is used to handle the state of React applications in a predictable way using stores, actions, and reducers. Together, React and Redux form a powerful combination where React components interact with the Redux store via containers to update the UI based on state changes.
Intro course presentation for React with Redux. It is including how to make AJAX Request with React, use Middleware, Router, and Reselect.
Github repo - https://github.com/stanimirtt/react-redux-course-2017
React is a fantastic Javascript rendering framework with a steep learning curve. One of the reasons is understanding state. We explore unidirectional flow, props, state Immutability and Redux.
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
NGRX provides tools for implementing Redux patterns in Angular applications. The key components are:
- The Store holds the single source of truth application state as plain JavaScript objects and uses reducers to immutable update state in response to actions.
- Actions describe state changes and are dispatched to the Store which passes them to reducers. Reducers pure functions that return new state.
- Selectors allow slices of state to be accessed.
- Additional libraries provide debugging with devtools, routing integration, side effect handling, and entity management functionality. Files can be organized by domain or feature module.
This document provides an overview of React and Redux concepts including:
- React basics like components, props, state, and lifecycle methods
- Flux architecture and how data flows through actions, dispatcher, and stores
- Redux as an alternative to Flux that uses a single store updated by reducers in response to actions
- Additional React topics like JSX, propTypes, and using React with ES6 classes are also covered.
This document provides an overview of key concepts related to React including:
- Virtual DOM and how it provides high performance through DOM diffing
- Unidirectional data flow in React from actions to stores
- Components and their use of props and state
- JSX syntax for writing React components
- Redux architecture including actions, reducers, and stores for managing state
- React-Redux for connecting React components to Redux stores
The document provides an overview of state management in Angular using NgRx. It discusses setting up the store and reducers, accessing state in components, using selectors, handling asynchronous operations with effects, improving data persistence with NX, and connecting related data models. The key steps covered include creating interfaces and initial state, setting up the reducer, importing modules, dispatching actions, using entity adapters for collections, and composing selectors.
This document provides an overview and introduction to Redux. It discusses key Redux concepts like the single store, state, actions, and reducers. It also covers tools and libraries that work with Redux like middleware, thunks, and immutable data structures. Implementation examples are provided, including a mini counter app and using Redux with React components. Asynchronous actions and API integration with middleware are explained.
This document provides an overview of using CodePush and Ionic 2 to enable hot updates across the development lifecycle for mobile apps. It covers setting up CodePush and configuring an Ionic 2 app to use CodePush. The document demonstrates how to check for updates, sync to different deployment stages, and track detailed sync and download progress. It also shows how to deploy updates to CodePush and promote them between stages like staging and production.
This document provides instructions for building a to-do list app with Ionic 2. It begins by explaining how to install Ionic and other necessary tools. It then outlines the basic template and components needed for a to-do list, including an empty state, add button, create form, and native storage. The document concludes by explaining how to display todo items, add options, emulate on devices, and includes additional resources.
This document provides an introduction and overview of React and Redux. It discusses key concepts like components, props, state, lifecycle methods, JSX, and the virtual DOM in React. It also covers Flux architecture and how Redux implements a unidirectional data flow with actions, reducers, and a single store. Additional topics include connecting React to the Redux state, immutable updates with Object.assign(), and testing React and Redux applications. Useful resources for learning more are provided at the end.
The slides from my Redux patterns talk at JSheroes conference April 2018. You can find the code here:
https://github.com/thinking-in-redux/redux-patterns-workshop
In this talk I'm discussing messaging design patterns for event driven programming in Redux
This document provides an introduction and overview of React and Redux. It begins with an introduction to key React concepts like components, props, state, and the virtual DOM. It then covers Redux, including actions, reducers, stores, and using Redux with React. Other topics include React Native, server-side rendering, routing with React Router, testing, and resources for learning more. The document aims to give the high-level essential information about React and Redux.
This document provides an introduction to React for developers. It explains that React is a JavaScript library for building user interfaces developed by Facebook. It then covers key React concepts like components, props, state, rendering, and the virtual DOM. It also discusses tools and patterns for architecting React apps like Flux, Redux, routing, internationalization, and async logic. Finally, it recommends designing state carefully, using standards like Flux Standard Action, avoiding side effects in reducers, and leveraging tools like React DevTools.
How Angular2 Can Improve Your AngularJS Apps Today!Nir Kaufman
Are you ready to migrate your Angular1 project to Angular2? through this slides you will discover some tips that can make your current application better and ready for future migration. A link for reference project can be found inside.
This document outlines a workshop on using Redux for state management in React applications. It introduces Redux, its core principles of single source of truth, state is read-only, and changes are made with pure functions. It demonstrates setting up a sample application with Redux, including actions, reducers, the store, middleware, and connecting React components. The document guides integrating Redux for user login/logout, loading movies data, playing movies, and filtering movies.
Let's Redux! by Joseph Chiang
Published April 15, 2016 in Technology
For people who use React but haven’t tried Redux.
- Why - Common issues while people use React
- Redux Basic Concept
- Redux is a state management library that can be used in Angular applications through implementations like @ngrx/store
- @ngrx/store allows Angular components to subscribe to pieces of state from the Redux store and dispatch actions, following the core Redux principles of actions, reducers, and state updates
- Setting up @ngrx/store in an Angular application only requires importing the StoreModule and providing the root reducer, making state management simple and explicit through observables
This document provides an introduction to React Hooks. It compares class-based components to function components using Hooks, showing how Hooks allow components to use state and other React features without writing classes. Specifically, it demonstrates how useState handles local state, useEffect replaces lifecycle methods, useContext provides access to context, and useMemo improves performance. Overall, Hooks allow function components to behave similarly to classes but with more flexibility.
React is a JavaScript library for building user interfaces that uses a virtual DOM for efficient updates. Redux is used to handle the state of React applications in a predictable way using stores, actions, and reducers. Together, React and Redux form a powerful combination where React components interact with the Redux store via containers to update the UI based on state changes.
Intro course presentation for React with Redux. It is including how to make AJAX Request with React, use Middleware, Router, and Reselect.
Github repo - https://github.com/stanimirtt/react-redux-course-2017
React is a fantastic Javascript rendering framework with a steep learning curve. One of the reasons is understanding state. We explore unidirectional flow, props, state Immutability and Redux.
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
NGRX provides tools for implementing Redux patterns in Angular applications. The key components are:
- The Store holds the single source of truth application state as plain JavaScript objects and uses reducers to immutable update state in response to actions.
- Actions describe state changes and are dispatched to the Store which passes them to reducers. Reducers pure functions that return new state.
- Selectors allow slices of state to be accessed.
- Additional libraries provide debugging with devtools, routing integration, side effect handling, and entity management functionality. Files can be organized by domain or feature module.
This document provides an overview of React and Redux concepts including:
- React basics like components, props, state, and lifecycle methods
- Flux architecture and how data flows through actions, dispatcher, and stores
- Redux as an alternative to Flux that uses a single store updated by reducers in response to actions
- Additional React topics like JSX, propTypes, and using React with ES6 classes are also covered.
This document provides an overview of key concepts related to React including:
- Virtual DOM and how it provides high performance through DOM diffing
- Unidirectional data flow in React from actions to stores
- Components and their use of props and state
- JSX syntax for writing React components
- Redux architecture including actions, reducers, and stores for managing state
- React-Redux for connecting React components to Redux stores
The document provides an overview of state management in Angular using NgRx. It discusses setting up the store and reducers, accessing state in components, using selectors, handling asynchronous operations with effects, improving data persistence with NX, and connecting related data models. The key steps covered include creating interfaces and initial state, setting up the reducer, importing modules, dispatching actions, using entity adapters for collections, and composing selectors.
This document provides an overview and introduction to Redux. It discusses key Redux concepts like the single store, state, actions, and reducers. It also covers tools and libraries that work with Redux like middleware, thunks, and immutable data structures. Implementation examples are provided, including a mini counter app and using Redux with React components. Asynchronous actions and API integration with middleware are explained.
This document provides an overview of using CodePush and Ionic 2 to enable hot updates across the development lifecycle for mobile apps. It covers setting up CodePush and configuring an Ionic 2 app to use CodePush. The document demonstrates how to check for updates, sync to different deployment stages, and track detailed sync and download progress. It also shows how to deploy updates to CodePush and promote them between stages like staging and production.
This document provides instructions for building a to-do list app with Ionic 2. It begins by explaining how to install Ionic and other necessary tools. It then outlines the basic template and components needed for a to-do list, including an empty state, add button, create form, and native storage. The document concludes by explaining how to display todo items, add options, emulate on devices, and includes additional resources.
This document provides an overview of Ionic and mobile app development using Ionic. It discusses Ionic's popularity and funding, its architecture which is built on Angular and integrates with Cordova, and its key components. The presentation includes demos of Ionic components and takes questions from the audience.
Beyond the web: Mobile apps using Drupal & Ionic 2 - Drupal Dev Days Seville ...La Drupalera
This workshop was one of the musts on Drupal Dev Days 2017. Nacho González -Frontend developer- and Alejandro Gómez built an hybrid application on a live session by using Ionic 2 and a Drupal API with the aim to offer better user experiences. Live technology!
What is the difference between Angular 1 and Angular 2.
Content:
Where Angular 1.x is going?
Angular 2 - motivations and themes
Open-source culture in Angular team
Slides del taller de Angular 2 realizado en el Campus Madrid de Google el 26 de Septiembre de 2016. Actualizado con la versión final de Angular 2.
Grabación del taller: https://www.youtube.com/watch?v=YVVjXpquzBE
Repositorio de código: https://github.com/codeurjc/ng2-campusmadrid
Learn all the essentials of building Angular 2 applications right here.
https://www.udemy.com/angular-2-training/?couponCode=UANGULAR2
This is a beginner level course aimed at those new to Angular 2 and Typescript. No previous knowledge of either is required before starting this course.
This course combines slides, projects and quizzes in a clear, concise and engaging way to guide you through the core concepts of Angular 2 and Typescript.
You will gain a solid foundation for building real-world applications following best practices and the Angular 2 style guide. This includes how to build components, create shared services, navigate between views, manage data, and managing user and system events.
The document discusses Ionic 2, an SDK for developing hybrid mobile apps using web technologies. Ionic 2 aims to simplify app development and improve navigation capabilities. It leverages new web standards like ES6 and TypeScript to provide robust tooling and an easy setup process so developers can focus on building their apps. Ionic 2 pushes the limits of what's possible with the web and ensures the future remains bright for web technologies.
TypeScript is a typed superset of JavaScript developed by Microsoft that can be used for both client and server-side development. It provides optional static typing, classes, and interfaces to JavaScript and is transpiled to JavaScript. Some key features of TypeScript include support for basic types like boolean, number, string, enums, generics, and decorators. It also supports features like classes, modules, and arrow functions. TypeScript code can be compiled to standard JavaScript so it works across all JavaScript environments.
The document provides an overview of Ionic 2, a framework for building hybrid mobile apps with web technologies. It introduces the speaker and their background in full stack development. Key points about Ionic 2 are that it is a rewrite built on Angular 2 and TypeScript that provides more native-like experiences for iOS and Android. It leverages components and directives to access device features via Cordova and offers navigation stack-based routing. Examples of features like navigation, styling and native plugins are demonstrated.
Ionic 2 como ferramenta para desenvolvimento móvelGustavo Costa
O documento descreve o framework Ionic para desenvolvimento de aplicativos híbridos usando HTML, CSS e JavaScript. O Ionic une as plataformas Angular e Apache Cordova para permitir que desenvolvedores criem aplicativos móveis com tecnologias da web. O Ionic é popular devido à produtividade, reaproveitamento de código e custos mais baixos para desenvolvimento de aplicativos.
Building Universal Applications with Angular 2Minko Gechev
Angular is one of the most popular frameworks for the development of Single-Page Applications (SPA). Recently Google announced its second major version, which brings some brand new ideas and improvements. For instance, Angular 2 is written in TypeScript, has much faster change detection and allows development of universal (isomorphic) applications.
In this talk we're going to introduce the motivation behind the new design decisions and the improvements in Angular 2. We'll take a look at the building blocks the framework provides for the development of professional single-page applications.
How to Make Awesome SlideShares: Tips & TricksSlideShare
Turbocharge your online presence with SlideShare. We provide the best tips and tricks for succeeding on SlideShare. Get ideas for what to upload, tips for designing your deck and more.
SlideShare is a global platform for sharing presentations, infographics, videos and documents. It has over 18 million pieces of professional content uploaded by experts like Eric Schmidt and Guy Kawasaki. The document provides tips for setting up an account on SlideShare, uploading content, optimizing it for searchability, and sharing it on social media to build an audience and reputation as a subject matter expert.
Building React Applications with Redux
with Yuri Takhteyev
OVERVIEW
Since React is just a “view framework”, it leaves you with lots of options for how to architect the deeper parts of your stack. The best way to handle those deeper layers is by using Redux – a state container that allows you to write much of your application in the form of pure functions. Using Redux helps you write applications that are much easier to test and understand and to achieve more thorough separation between your views and your business logic. Redux also unlocks the possibility of using amazing tools.
OBJECTIVE
Introduce the audience to Redux, a state container that can be used together with React to achieve sanity deeper down in your stack.
TARGET AUDIENCE
Developers familiar with core React and looking for a better way to architect their applications.
ASSUMED AUDIENCE KNOWLEDGE
Core React knowledge is assumed. Familiarity with basic Flux concepts would help, but I’ll review those quickly.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Why pure functions make your code easier to maintain.
How unidirectional data flows help you sleep better at night.
How Redux helps you manage state better via reducers.
How to use Redux together with React.
How to test Redux applications.
This document provides an overview of Redux, an architecture for managing state in JavaScript applications. It discusses the main components of Redux including actions, reducers, and middleware. Actions are described as pure functions that return data but do not dispatch changes. Reducers are pure functions that take the previous state and an action to return a new immutable state. Middleware allows for asynchronous logic and logging. The document also discusses React bindings and an example of refactoring an application to use Redux.
The document provides an overview of how to write a simplified version of Redux from scratch to gain a deeper understanding of its core principles and functionality. It explains key Redux concepts like single state tree, immutable state updates via pure reducer functions, actions to describe state changes, and the store interface. The document then walks through implementing a basic Redux-like store with methods for getState(), dispatch(), and subscribe(). It also covers combining multiple reducers into a single root reducer and managing different state slices independently. Overall, the document aims to help learn Redux fundamentals in a hands-on way through recreating the basic functionality.
React JS is a JavaScript library for building user interfaces. It uses a virtual DOM to efficiently update the real DOM and render user interfaces from components. Components are reusable pieces of UI that accept input data via properties but maintain private state data. The lifecycle of a component involves initialization, updating due to state/prop changes, and unmounting. React uses a single-directional data flow and the concept of components makes code modular and reusable.
Reactive state management with Jetpack ComponentsGabor Varadi
This talk explains what problems exist in the context of Android application development, how Jetpack components such as SavedStateHandle help handle that, and how we can combine observable values to expose our state, to be observed only when it is needed.
Lean React - Patterns for High Performance [ploneconf2017]Devon Bernard
Modern web tools are enabling developers to build web apps in no-wifi and low-fi environments. This talk is about performance and how frontend engineers can create a better user experience while using less resources.
Talk presented on Oct 20, 2017 at PloneConf2017.
Topics:
Airplane mode for web apps:
Mobile and native apps get lots of praise for offline mode. But why aren’t we seeing more web-apps using this. Two reasons: persistent data and code storage. We can now provide offline apps with Web Workers and IndexedDB that also improve the smoothness and robustness of our web apps in high bandwidth environments.
Redux:
Persisting state, store middleware, store subscriptions, normalizing data, normalizr, pure reducers, redux dev tools
Components:
Data heavy pages, component blocks, component skeletons, component lifecycle, shouldComponentUpdate, virtual dom, chrome render tools, method binding
Actions:
ActionTypes, action chaining, promises, store.getState()
General:
env files, route wrappers, offline first, web workers, indexeddb, eslint, airbnb style guide
During the past six months here at Wimdu, we have been working on making our front end pure, by incrementally introducing Redux, ImmutableJS, and higher-order components, all under the restrictions of a Rails application and constant requests for new features. I will share the techniques, tools, and processes we have been using along with pitfalls to avoid.
This speech was presented at Berlin React meetup on 30 May 2016 (http://www.meetup.com/React-Berlin/events/231265387/)
This document provides an introduction to React and React Native. It begins with an overview of ReactJS, including its motivation as a library for building user interfaces and key concepts like components, the virtual DOM, JSX, immutability, and one-way data flow. It then covers React Native, explaining how it uses native components to render interfaces for mobile rather than HTML/CSS. The document concludes with exercises for creating basic React and React Native apps.
The document summarizes Realm, an open source database that allows developers to build mobile apps that work offline. Realm is widely adopted, with over 100k developers building apps on it and 40k of the world's most popular apps using Realm with over 2 billion installs. Realm databases are lightweight, embedded on the client, use an object-oriented data model, and support live objects that update automatically without polling. The document also provides details on Realm objects, queries, notifications, and the developers' vision for future enhancements.
The document discusses strategies for migrating a legacy PHP application to Symfony 2. It covers rewriting vs migrating, code organization, routing, database migration, authentication/sessions, and templating considerations. Key points include setting up two front controllers, using events to handle legacy requests, importing database metadata, generating entities, and registering session bags to share authentication data between the applications during the migration. Rewriting carries risks of underestimating work, while migrating allows a gradual transition and fading out of old code over time.
Memory management in Swift is fairly abstracted away from you as a developer and it’s easy to build iOS apps without an understanding of it… until something goes wrong. This can result in unexpected behavior, unclear error messages, lost data and crashes. Even a basic understanding of memory management can go a long way, making it easy to prevent these issues in the first place, understand what when wrong when they do occur and know how to fix them.
Getting Reactive with CycleJS and XStream TechExeter
by Steve Lee, OpenDirective.
Reactive Programming (RP) with streams has gained much interest over last year or so, especially now Angular 2 has adopted the original RxJS JavaScript library. RP embraces the many complex async event streams found in modern rich client's including SPAs and also works well in backends. However it often requires a little light brain rewiring to get to grips with the declarative and functional style. Though once learnt, you might not want to return to imperative coding styles again.
We'll take a gentle first look at RP through the lens of André Staltz's excellent CycleJS with Xstream libraries along with the snabdom virtual DOM.
From the FreshTech 2017 conference by TechExeter
www.techexeter.uk
SenchaCon 2016: Handling Undo-Redo in Sencha Applications - Nickolay PlatonovSencha
Undo and redo is a very common but not trivial feature, requested in most types of modern web applications. An application may define complex data processing rules involving data from different stores, which is tricky to handle when undoing an operation. With the Robo tool, we'll show you how to accurately revert data to any previous state with a simple undo() call.
This document provides an overview of CBStreams, a ColdFusion module that implements Java Streams functionality for processing data in a functional programming style. It discusses key concepts like lazy evaluation, intermediate operations that transform streams, and terminal operations that produce final results. Examples are given for building streams from various data sources, applying filters, maps, reductions and more. Lambda expressions and closures play an important role in functional-style stream processing.
When developing applications we have a hard time managing application state, and that is okay because managing application state is hard. We will try to make it easier using Redux.
Redux is predictable state management container for JavaScript applications that helps us manage our state while also making our state mutations predictable.
Through the presentation and code, I will show you how I solved my state problem with Redux in React application.
Do you want to easily wrap your head around Redux? Make sure to check out this presentation, since here we try to explain the framework in a very understandable way.
Using React, Redux and Saga with Lottoland APIsMihail Gaberov
This document provides an agenda and overview of key concepts for ReactJS, Redux, Redux Saga, and RESTful APIs. It discusses React components and state management, Redux actions, reducers and stores, Redux Saga for managing asynchronous logic, and using the Lottoland REST API for retrieving lottery data. Code examples are provided to demonstrate React components, Redux reducers and sagas, and making API requests to retrieve login tokens and drawings.
Similar to Evan Schultz - Angular Summit - 2016 (20)
2. A Typical Complex SPA
• Lots of parts.
• Everything is connected to everything else.
• Changing anything breaks something somewhere.
• Managing state becomes a challenge.
3. How State Really Becomes Painful
Component Model
Model
Model
Model
Component
Component
Component
4. Best Solutions Known as of Now
• Component-based UI.
• Unidirectional data-flow.
• A “stateless” approach deeper in the stack.
6. Why Stateless is Good
• A lot of us were raised on OOP. Objects are stateful.
• The effect of calling a method depends on the arguments and
the object’s state.
• Very painful to test.
• Very hard to understand.
• Aims to mimic the real world.
• But why replicate the unnecessary complexity?
7. Alternative: Pure Functions
• The output of a pure function depends only on inputs.
• Pure functions have no side-effects.
• Pure functions have no state.
• Much easier to understand.
• Much easier to test.
8. Unidirectional Data Flow with Flux
Component
Store
API, etc.
Component
Dispatcher
Action(s)Action
Creator
13. Redux Key Concepts
• Application State is a single object in a single store.
• Only way to change state is by emitting an Action.
• Actions describe what happened.
• State is transformed by reducers that handle actions.
14. Reducer Functions
• Basic reduce():
function sum (value, state) {
return state + value;
}
[1,2,3,4,5].reduce(sum, 0);
• Running through the items:
1: 0 => 1
2: 1 => 3
3: 3 => 6
4: 6 => 10
5: 10 => 15
15. Action Reducers in Redux
• Take an action and a state, return a new state.
• Your app’s state is a reduction over the actions.
• Each reducer operates on a subset of the global state.
• Simple reducers are combined into complex ones.
16. An Example
export const cats = (state: ICats = INITIAL_STATE, action) => {
switch (action.type) {
case CAT_DELETED:
return state.filter(n => n.id !== action.payload.id);
case CAT_CREATED:
return [...state, action.payload];
case CAT_UPDATED:
return state.map(n => {
return n.id !== action.payload.id ? n :
Object.assign({}, n, action.payload); });
default:
return state;
}
};
18. Why Is This a Good Idea?
• Reducers are pure functions – easy to understand, easy to test.
• Reducers are synchronous.
• Data logic is 100% separated from view logic.
• You can still have modularity by combining reducers.
• New opportunities for tools.
19. Actions
• Information you send from your application to your store.
• The only source of change to your state.
• Represent what was done
• Simply JSON Objects with a ‘type’ property
21. Action Creators
• Functions that return actions.
• Can handle business logic
• Can handle API Calls and Async behaviour.
• Takes parameters and creates an Action
• Components should …
• Know what data to pass in.
• Not care about the structure of the payload.
23. Putting it together …
• Action Creators are the request to do something.
• Actions are the result of what happened.
• Reducers transform to represent what happened.
24. How Do We Avoid Mutating State?
• Reducers are supposed to not change the old state. But how do
we keep them honest?
• Immutable data structures store data without introducing
“state”.
• Object.freeze() - shallow.
• “Seamless Immutable”: frozen all the way down.
• But what happens when you want to modify your data?
25. Derived Immutables
• You can’t change immutable objects. But you need to.
• So, you derive new ones. I.e., make a new immutable that is
different in a specified way, without altering the original.
• “Immutable.JS” is one library to use.
var newData = data.setIn(
['foo', 'bar', 'baz'],
42
);
26. Derived Immutables
• These are key building blocks for stateless architecture.
• ES6 Spread Syntax return [...state, action.payload];
• Object.assign return Object.assign({}, n, action.payload);
27. Change Detection
• Angular 2 has OnPush change detection.
• Only fires when reference to an Input changes.
• Do not need to do property by property checking.
• If used properly, can improve the performance of your
application.
33. Root Reducer
• Redux has a Global Application State.
• Root Reducer combines reducers into your Application State.
• Slices of state are handled by a reducer.
• Each Reducer can focus on a small area of concern.
38. Reducer Composition
export const rootReducer =
combineReducers<IAppState>
({
cats,
catEdit,
codeTables,
filters,
catsLoading
});
• Keep reducers small and
simple.
• Focus on one area.
• Compose as needed.
• Responsible for Data
Management.
39. Combine Reducers
export const rootReducer =
combineReducers<IAppState>({
});
cats,
catEdit,
codeTables,
filters,
catsLoading
Manages adding and removal of cats
40. Combine Reducers
export const rootReducer =
combineReducers<IAppState>({
});
cats,
catEdit,
codeTables,
filters,
catsLoading
Manages the currently edited cat
55. • Also referred to as Smart or Stateful Components
• Knows about State and how to access it
• Responsible for …
• Getting the data from the state
• Passing down data
• Dispatching actions
Component Types - Container
57. <md-grid-tile *ngFor="let cat of filteredCats$ | async">
<!--
* Cat Detail Card gets cats from the container.
* and emits events up for the container to handle.
-->
<app-cat-detail-card
[cat]="cat"
(displayEdit)="displayCat($event);"
(deleteCat)="deleteCat($event)">
</app-cat-detail-card>
</md-grid-tile>
Container Component
58. <div class="sm-col sm-col-4”>
<b>All Cats</b>
<!-- Short List is dumb -->
<app-cat-short-list
[cats]="cats$"
[breeds]="catBreeds$">
</app-cat-short-list>
</div>
<div class="sm-col sm-col-4”>
<b>Filtered Cats</b>
<!-- Short List doesn't care where the cats came from,
just that it has them -->
<app-cat-short-list
[cats]="filteredCats$"
[breeds]="catBreeds$">
</app-cat-short-list>
</div>
Container Component
59. • Also referred to as Dumb or Stateless Components
• Receives data from containers
• Emits events up to parent
• Do not rely on external state that is not provided
• Do not modify external state
Presentation Component
60. Presentation Component
• Receives data from container or smart component.
@Input() cat: ICat;
• Emits events up to the parent
@Output() deleteCat: EventEmitter<ICat> = new EventEmitter();
• Responsible for …
• Rendering data.
• Emitting events.
64. Accessing State
• Can access underlying Redux methods.
• getState - snapshot of current state.
• subscribe - callback for every state change.
• Can use ngRedux `select` slices of state as an Observable.
• @select() cats$: Observable<ICat[]>;
• this.cats$ = ngRedux.select(state=>cats);
66. ActionServices
• Injectable Angular 2 Classes.
• Access to Angular DI.
• Dispatch from the service.
• Class methods are similar to Action Creators.
67. ActionServices
• Actions still pass through middleware.
• Call dispatch from the service.
• Action is still a JSON object that gets passed into your reducers
69. Asyncronous Actions
• Call an action creator to initiate a request.
• Action creator emits an action to inform everyone that a
request was made.
• Action creator emits an action to inform everyone that a
request was completed. (Or when it fails.)
• Push details of making a request into a module.
72. Observable State
@select() cats$: Observable<ICat[]>;
Remember this?
Its an RxJs Observable
map filtermergeMap
debounceTime groupBycombineLatest
…. and more
combine with other streams
73. Can use | async
<app-cat-edit-form
[cat]="catEdit$ | async"
[catBreeds]="catBreeds$ | async"
[catAges]="catAges$ | async"
[catGenders]="catGenders$ | async"
*ngIf="isEditing$ | async"
(submitCat)="submitCat($event)">
</app-cat-edit-form>
export class AppComponent implements OnInit {
@select(['catEdit', 'currentCat']) catEdit$: Observable<any>;
@select(['codeTables', 'genders']) catGenders$;
}
Async pipe can handle subscriptions and dispose for you
75. Transform State
• Functions passed into select are called every state change
• Transformations should happen only
when the state you care about has changed
76. Transform State
let greeter = p => `Hello ${p.firstName} ${p.lastName}`
export class AppComponent implements OnInit {
@select(state=>greeter(state.people)) greetings$: Observable<string[]>;
greetings: string[]
}
greeter gets executed every state change!
77. Transform State
let greeter = p => `Hello ${p.firstName} ${p.lastName}`
export class AppComponent implements OnInit {
@select() people$: Observable<IPerson[]>;
greetings$: Observable<string[]>
ngOnInit() {
this.greetings$ = this.people$
.map(greeter)
}
}
greeter gets executed only if people$ changes
79. Reducer: “How does my state change over time”?
: “How do other modules make sense of
my state?”
- @dan_abramov
“
Selectors
80. • Containers can be smart, but not too smart.
• Risk tightly coupling components to the shape of your state.
• Can make refactoring difficult.
Selectors
81. Selectors - Selecting State
export class Comp2 {
@select([‘path','to','expenses'])
expenses$:Observable<IExpenses[]>
}
• Changes in state can lead to updating multiple locations.
• Brittle, error prone.
• Makes refactoring risky.
export class Comp1 {
@select([‘path','to','expenses'])
expenses$:Observable<IExpenses[]>
}
82. Selectors - Selecting State
import { expenses } from './store';
export class Comp1 {
@select(expenses) expenses$:any
}
import { expenses } from './store';
export class Comp2 {
@select(expenses) expenses$:any
}
• Create a shared selector.
// colocated with the reducer
export const expenses = ['new','expense','path']
• Import and use.
83. Selectors - Transforming State
• Shape of state may not meet view needs.
• Can transform state.
• Can be used to derive data from existing state.
• Want to keep code DRY.
• Minimize logic in components.
95. • Focus on business / data logic.
• No longer concerned with coordinating async streams.
• Can begin to behave synchronously again.
Action Creators
96. • Focus on Async behaviour.
• Handling side effects.
• Take Actions in.
• Emit Actions out.
Epics