ReactFoo Delhi

On React, performance and front-end engineering

Tickets

Scalable Redux for large web applications

Submitted by Shivam Kantival (@shivamkantival) on Wednesday, 14 August 2019

Duration: 20 mins crisp talk

View proposal in schedule

Abstract

Redux solves many data handling problem which were hard to think before. But as your application grows, it is hard to manage store at scale. This talk is about our experience of how we solved these problems in our current organization.

We achieved these benefits with our proposed solution:
- Managing store for growing set of developers and teams.
- Abstracting your Redux store
- Keeping it DRY
- Propagating common changes/patterns
- Ease of shipping complexing features at scale

KeyTakeaways:
- Challenges in Redux with large scale apps
- How we solved it
- Maintaining large scale apps with growing teams

Outline

For any modern stack that revolves around React/Vue/Elm or likewise libraries, we usually go ahead and use Redux for state management. It works well, it’s just aesthetics may always be improved. What we try to cover here is how to build your store architecture around Redux so that for every part of the state you need to define, you don’t have to create a reducer from scratch. Instead how about just providing the config and something else do the magic for you ;)

At Mindtickle we use a common Redux store across multiple applications. It has done good at easing our lives, and that we think is worth sharing with the community.

  • Manage your complex sync/async flows just by passing a simple config.
  • Handling scoped states becomes a breeze, as it is just another config. Have same method of handling scoped state also enables us to standardise read and manipulation operations over the same.
  • Standardization of flow management by creating common reducer pattern for teams
  • For every new person joining the team, he/she needs to understand just the reducer generator logic once. No more going to each reducer file and understanding the same.
  • Keeping your app performant with such patterns.

We got to a state to get reducers created by just providing corresponding config. This enables us to write just one reducer generator throughout the application. For every reducer needed in the application, developer just needs to provide a config and the rest is automatically taken care of. How this helps with above issues-

  • For every part of state doing the same thing, logic need not be repeated in reducers for corresponding states.

  • Handling scoped states becomes a breeze, as it is just another config. Have the same method of handling scoped state also enables us to standardise read and manipulation operations over the same.

Requirements

Basic understanding of Redux.

Speaker bio

Just a curious spacial object who’s been exposed to JavaScript for 2 years. Currently working full-time with Mindtickle (Pune).

Links

Slides

https://docs.google.com/presentation/d/1NJdRrCSgBwXHNqwZGylghQkW3tWG56Oo9ZfhNy9mWA8/edit?usp=sharing

Comments

  • Zainab Bawa (@zainabbawa) Reviewer 20 days ago

    Thank you for an excellent rehearsal today, Shivam. Here is a summary of the feedback from today’s rehearsal:

    1. In an async system, you have defined a set of actions that can be used. If it is a ToDo application, is there an action that can mark things as completed? Maybe have an example with similar architecture which participants can follow. Have a concrete example at the start so that participants can relate to the talk at the very beginning.
    2. Add a resources slide at the end of the presentation with links to the documentation, GitHub repo and any other resources that participants refer to after your talk.
    3. Keep just an array in the code when you move from presentation to code. Add screenshots of the code or recorded video of the code in your talk.
    4. When you initially did the code walkthrough and highlighted parts of the code to set the context, show specific screenshots of the code rather than moving the cursor on the screen. Moving cursor on the screen is distracting.
    5. Try to avoid using slang and keep the flow of the talk smooth.

    All the best for your talk at ReactFoo Delhi.

  • Raghavendra Satish Peri (@artofvision) 6 days ago

    Hello,
    At hasgeek events we are trying to make our events accessible for people with disabilities. To achieve our goal is to first get the content of presentations accessible. Here is some guidance to make the presentations accessible. Please use these fonts & size so that even able body people can see the content in the auditorium during presentation.

    Fonts and Font Size
    Because they are the easiest to read, only use Sans Serif fonts, such as Arial and Verdana. Since a PowerPoint presentation will most likely be projected onto a large screen consider how far the audience will be from the screen and choose a font size accordingly. The minimum font size for a PowerPoint presentation should be 24 points.

    For more accessibility info on making presentations accessible use the following link
    https://www.framingham.edu/Assets/uploads/about-fsu/accessibility/_documents/7-steps-accessible-ppt.pdf

Login with Twitter or Google to leave a comment