Job Referrals
I will start sharing job referrals that I believe are interesting for you. Full disclosure, I will get a bonus if you get hired, which will help me fund writing this newsletter:
Senior Frontend Engineer - ATC
In-Person - New York City, NY•$160K - $200K
Web Front End Engineer - Bilt Rewards
Hybrid - New York City, NY•$150K - $200K
React Native Front End Engineer - Bilt Rewards
Hybrid - New York City, NY•$150K - $200K
Senior Full-Stack Software Engineer - Gynger
Remote
This is a win-win for you and me, and I hope you understand this new section.
Intro
I recently worked on a vanilla JS project and realized I rely on a mindset that modern frameworks “impose” on us.
The UI is a function of the State.
And I like it.
Mindset
This mindset is in all modern frameworks but is especially clear in React, where people refer to “rerenders” when the state changes.
This mindset has two flows:
State triggers UI changes.
UI triggers State changes.
I use this mindset every day. It allows me to write more maintainable code, split complex tasks into smaller ones, find edge cases, etc.
The “(State) => UI” mindset makes me a better frontend engineer.
State Triggers UI Changes
By State, I mean:
Navigation State (URL): path, domain, query params, etc
Local state: React component state, Svelte reactivity of local variables, etc.
Global state: Redux, MobX, Svelte Stores, etc.
Browser state: localStorage, indexDB, …
Network state: cookies, …
Frontend frameworks offer a declarative way to describe the UI. We start with a State and write what we want to render based on that State. Frontend devs don’t think about DOM manipulation anymore.
Given this State, which UI do we want?
UI Triggers State Changes
There are many UI triggers:
User events like mouse clicks.
Forms.
Browser events like DOM loaded.
Component events like mounting or dismounting a component.
Timers.
Web workers.
The mindset is not that when I click a button, a new item appears. The mindset is: “When I click a button, a new post is added in the State.”
The outcome of an event is a new State, not a new UI.
Why I Like This Mindset
Data Is King
I like that it puts the State, not DOM manipulation, at the center of frontend development.
See the Rule #5 from Rob Pike:
“Rule 5. Data dominates. If you've chosen the right data structures and organized things well, the algorithms will almost always be self-evident. Data structures, not algorithms, are central to programming.” Rob Pike.
Therefore, we need to be mindful of the structure of our State. We should ask State-related questions: what’s the initial State of this feature? How does it change? Based on which events? What’s the final State of this flow?
By answering State-related questions, we better understand the user flows and implement the UI in parallel with the functionality.
Separation Of Concerns
The mindset creates two clear concerns: “updating State”, and “updating UI”. Each of these concerns can be split further. The data that comes from the server is not the same as opening and closing a modal. It’s also not the same as a page component or a button.
This mindset offers a high-level category for splitting modules in our frontend architecture.
Split and Parallelize Tasks
This mindset allows us to split and parallelize tasks. Solving problems and approaching a task can sometimes be overwhelming. Splitting the tasks into smaller ones reduces the cognitive load and makes it more approachable.
Find Edge Cases
By setting a type for our State, we quickly identify the edge cases that the UI needs to handle. For example, is the field always an array or starts with `undefined`?
Onboarding In New Frontend Projects
Find the State and follow the traces of where it’s being rendered. It’s kind of a meta-architecture that all modern frontend projects share.
Testability
It makes testing more manageable by splitting the responsibilities. And we all love testing our projects 😉
Better Frontend
I have this mindset with me at all times.
The “(State) => UI” mindset makes me a better frontend engineer.
Do you have a preferred state management tool? Which one is it? How did you learn this pattern? Was it also React or even before?
Thanks to Miquel, Elina, and Bernat for reviewing this article!