Slide 1

Slide 1 text

Implementing a chess transcriber in React Paramjit Singh @busywhistling Lessons on component architecture & when to use external state management React Berlin Meetup

Slide 2

Slide 2 text

Paramjit Singh ● 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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

The old way Demo time

Slide 5

Slide 5 text

Are we thinking in React?

Slide 6

Slide 6 text

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).

Slide 7

Slide 7 text

The new way Demo time

Slide 8

Slide 8 text

Exercise time :) RANDOM GROUP FACEBUCH BERLIN facebuch

Slide 9

Slide 9 text

Talk slides up on website (! Looking for new opportunities, please let me know. 👋