Tag: State Management

• Introduction
• Setting up the Development Environment with Vue CLI.
• Overview of Virtual Dom Concepts
• Creating a Project
• Building custom controlled components
• Reusing Code with Vue.js Mixins
• Extending Components Using Composition
• Building a Custom Directive
• Creating a Filter
• Applying Transitions (Enter/Leave)
• Creating an Efficient Routing System
• Sharing Data across Components (State Management with Vuex)
• Designing Compound Components
• Implementing Server-side Rendering
• Wrapping External Libraries
• Testing the Application
• Handling Errors with Vue Async Components
• Deploying the Application to Production
• Securing the Application
• Troubleshooting
• Summary and Conclusion

Introduction

• Vue.js vs Angular

Overview of Vue JS

• Declarative rendering
• Component composition
• Hot-reloading
• Time-travel debugging

Setting up a development environment

Creating your first application

Working with Templates

Dividing the application into smaller, self-contained components

Methods and computed properties

Reactive programming

Directives and data rendering

Applying transitions

Routing

Managing state

Creating animations

Refactoring components

Server-side rendering

Supporting libraries and packages.

• Routing
• State management
• Build tooling

Testing your application

Debugging and performance

Embedding Vue.js into existing pages

Deploying your application to production Vue-CLI

Scaling your application

Closing remarks

Introduction

• MobX vs Redux vs Relay

Understanding State Management

• How React handles local state
• How Redux manages state
• How MobX manages state

Getting Started

• Preparing the Development Environment
• Installing and Configuring MobX

Building an Application

• Overview of the component architecture
• Creating a React Application (Components, Element, JSX, etc.)

Working with React Component State

• Initializing and updating state
• Working with forms

Implementing a MobX Data Store

• Setting up the data store
• Passing data to components
• Listing out contents of data store

Managing Changes to Data

• Adding data to store
• Notifying React of the change in data state

Updating the View

• Declaring observable data
• Updating the view

Improving DataFlow

• Modifying state data through actions
• Calling actions (avoiding unsafe data manipulation)

Working with Computed Values

• Perforing calculations on core data

Using Advanced Development Tools and Techniques

• Creating components with ES2017
• Using Babel for ES2017 and JSX
• Using WebPack for React and MobX
• Performing asynchronous actions with MobX

Testing the Application

• Creating unit tests for React components
• Choosing tools and frameworks (Jest, Enzyme, TestUtils, etc.)
• Creating unit tests for MobX stores
• Debugging the Application

Deploying the Application

• Tooling and automation
• Implementing Continuous Integration (CI)

Troubleshooting

Summary and Conclusion

Introduction

• When managing state becomes overwhelming and impossible

Setup and Installation

Overview of NgRx

Creating an NgRx Application

Learning How to Use Ngrx/Store

• Overview of NgRx/Store
• Model, Action, Reducer, and Application State
• Redux pattern
• Reading, Writing and Removing data in NgRx Store

Enhancing Your Scripts with Ngrx/Effects

• Overview of NgRx/Effects
• Generating an Effect file
• Creating an Effect
• Actions Observable

Verifying Differences of Performance by Router-store and Store-devtools

• Setups
• Dispatching Router-store Actions
• Navigation Extras
• Instrumentation on Store-devtools 

Creating Object Type Definitions by Ngrx/Entity

• Overview of NgRx/Entity
• Entity State definition
• Entity Adapter
• Entity Selectors
• Custom IDs and State properties

Facilitating Your Programming with Ngrx/Schematics

• Overview of NgRx/Schematics 
• Scaffolding NgRxapplication with Schematics

Reworking an Existing Application

Debugging the Application

Testing the Application

Deploying the Application

Troubleshooting

Summary and Conclusion