JSFoo 2019

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

Improving State: Case Studies

Submitted by Yashika Garg (@yashikagarg13) on May 11, 2019

Section: Crisp talk (20 mins) Technical level: Intermediate Session type: Lecture Status: Waitlisted

Abstract

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.

Links

Slides

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

Preview video

https://photos.app.goo.gl/NNjXuqHxUraEszYN8

Comments

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

{{ gettext('You need to be a participant to comment.') }}

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

{{ errorMsg }}