JSFoo 2019

JSFoo 2019

On component architecture, front-end engineering and Developer Experience (DX)

Tickets

Loading…

Yashika Garg

@yashikagarg13

Improving State: Case Studies

Submitted May 11, 2019

Given an SPA, where you have multiple lists, dialogs, headers, detail pages, each reusing data from different components, redux has been the most popular tool for state management. But our problem doesn’t just resolve on choosing the state management tool, it gives birth to another problem of how we can organise this state so that when our application expands with our user’s needs, as a developer, we should be able to cater that in minimum time and almost no bad code or hacks. Estimating the features could be beyond our reach but creating an expandable state structure that can evolve with needs without being a clutter is in our hands. In this talk, we will discuss three different state structuring strategies I have implied in my recent project to achieve my goal: Structuring based on components, Considering the source of data - UI and API calls as a base for assembling state and Deriving state from interactions with data.

Outline

  • Introduction (5 mins)
  • Its not about the tools for state management but what comes next
  • A bad state structure can make a day’s work into a week’s one.
  • Exploring 3 paradigms of state structuring (10 mins)
  • Component specific state
  • State based on source of data - UI or API call
  • Interactions with data
  • Conclusion & Questions (5 mins)
  • Visualise the data interactions

Requirements

Experience with SPAs and working on global state
Knowledge of any specific state management tool is NOT required

Speaker bio

I am a developer/consultant working with Javascript over 8 years and currently working as Frontend Developer/Architect (React) at SiteDocs.
I have done my B.Tech from Maharshi Dayanand University.

Slides

https://speakerdeck.com/yashikagarg13/improving-state-case-studies

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hybrid access (members only)

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more