Breakpoint - Issue 3
Hey folks,
Hope you are doing well. Recently I’ve spent a couple of days reading XState docs to see what it is and how it helps. Besides the steep learning curve and many new jargons, we need to understand, it’s really great at visualizing how your application is supposed to behave. We will see how it goes and whether we will adopt this.
Frontend Shares
React Labs: What We’ve Been Working On - March 2023 (8 mins)
React team has been busy. Working with Vercel, now Next has experimental support for React Server Component in its new App Router. This treats RSC as a first-class citizen with deep integration with Next router.
A new React Optimizing Compiler, or what was announced as React Forget, is being developed. This should automatically help developers to build performant apps out of the box and not wonder why things react certain ways or whether we should apply optimization techniques. This has been put to use within Meta and we will see it open-sourced once it’s proven itself.
Speeding up the JavaScript ecosystem - eslint by Marvin Hagemeister (12 mins)
Marvin has written 4 different posts about improving the overall JavaScript performance in your applications. A lot of libraries turn to Rust as it provides much better performance. While that might be the solution, we can also work on optimizing the existing tools we have before they decide to do the same thing. In this post, Marvin dives into how AST parsers work and how it would ultimately affect performance. He also reminds us that be sure to check how the code is transpiled. Sometimes your source code can be very performant but the production code inserts a lot of unnecessary polyfills.
Speeding up the JavaScript ecosystem - npm scripts by Marvin Hagemeister (10 mins)
This is part 4 of the Speeding up the JavaScript ecosystem series. The takeaways I have are:
- Small optimizations can quickly add up
- Striking a balance between code readability and performance
- Make good enough assumptions and code for what you need
Using TypeScript without compilation by Pascal Schilp (4 mins)
Svelte recently updated their doc saying they would start switching from TypeScript to JavaScript. Many people may think such move is unpopular while others embrace TypeScript for its type-checking. The team is going to use JavaScript with JSDocs which brings type-checking to JavaScript while avoiding the need to compile your code. It makes debugging easier for the end user since you should be able to find the source code easily and read it.
Find whatever tool and workflow works for you and your team.
I’ve been reading about XState and trying to spike whether I could and if I should use it in the current project. XState is an implementation of the finite state machine and it does make your application more deterministic and predictable. However, it is also very complicated and a lot of concepts to learn before we can get productive. In the coming week, I might have more thoughts on this after actually integrating XState in the upcoming sprints.
Interview Question
Make a tic tac toe game. The following are the acceptance criteria:
- Basic UI such as a simple table-like grid
- User can mouse click on the cell and the game would put circle or cross in the cell
- Keep track which user wins
- Add buttons that can restart the game
- Bonus: User can input how many rows / columns they want