React Berlin meetup Oct '22

I spoke about my experience writing a chess transcriber in React.

Coding a fairly complex UI in React led to some realizations around component architecture & state management. Components should be divided by functionality and often central stores (like Redux) are unnecessary even for deep UI trees.

More about this can be read at the blog post:
https://paramjit.org/blog/22-09-17-implementing-a-chess-transcriber-in-react/

Transcript

1. Implementing a chess transcriber in React Paramjit Singh @busywhistling Lessons on component architecture & when to use external state management React Berlin Meetup
2. Paramjit Singh https://paramjit.org • Been programming since age 10 • Math background, with a BSc in math/CS • Been working with React for a while • Socials on website, feel free to connect! @busywhistling
3. Idea: Coding a chess transcriber in React Standard Algebraic Notation: a way of recording a chess game in writing • Moving pawn from its initial position e2 to e4, recorded as e4 • Name piece when you have ambiguity — moving knight to f3, recorded as Nf3 • And so on We want an app to go back and forth between written notation and game board
4. The old way Demo time
5. Are we thinking in React?
6. On a quest to improve app architecture • Make components based on features, not based on UI semantics Natural consequence of trying to minimize passing around of props / state Good testing involves testing the (input/output of) components, not how they are implemented. Implementation might change, but it’s the functionality which is important. — Jest. Now think of UI as the visual implementation of functionality. • Do we need to use Redux? ◦ External state management (Flux or not) is great for decoupling actions from the components. We don’t need this in our app. ◦ Truly necessary only when one needs the actions (state changes) themselves (whether for bug reports, persistent storage or syncing UI across network).
7. The new way Demo time
8. Exercise time :) RANDOM GROUP FACEBUCH BERLIN facebuch
9. <Thanks /> Talk slides up on website (https://paramjit.org)! Looking for new opportunities, please let me know. 👋