Introduction
I stumbled upon 7GUIS tasks while reading XState Tutorials. This motivated me to challenge those 7 tasks with jotai.
It turned out that this would be a good resource to learn jotai. They are from basic tasks to advanced tasked, and you will see how they are implemented, occasionally magically.
It’s recommended to try it yourself first. If you succeed to implement it, then you can compare. Even if you fail, you can read and learn.
Task 1: Counter
The task is to build a frame containing a label or read-only textfield T and a button B. …
This is pretty easy. Good to try for the first time.
Check the codesandbox link in the following tweet.
While I was learning xstate tutorials, I found the 7GUIs tasks very interesting. So, I will try the same with jotai https://t.co/xpbgHr1XM0.
— Daishi Kato (@dai_shi) August 30, 2021
Task 1: Counterhttps://t.co/U9ye25rxA8
Usually I define atoms and components in one file, but for this one, atoms.ts is a separate file. pic.twitter.com/k8nlw4YBZl
Task 2: Temperature Converter
The task is to build a frame containing two textfields TC and TF representing the temperature in Celsius and Fahrenheit, respectively. …
This is a bit confusing (at least for me), because converting tempertures seems a best fit for derived atoms. We need to handle non numeric input and thus it’s rather straightforward.
Check the codesandbox link in the following tweet.
Task 2: Temperature Converterhttps://t.co/7lvlG9tPsP
— Daishi Kato (@dai_shi) August 30, 2021
We need to keep stale value for non-numeric value. The implementation is fairly close to that with xstate.https://t.co/xpbgHr1XM0 👻 https://t.co/B9DslJzC2G pic.twitter.com/F2lG0yA483
Task 3: Flight Booker
The task is to build a frame containing a combobox C with the two options “one-way flight” and “return flight”, two textfields T1 and T2 representing the start and return date, respectively, and a button B for submitting the selected flight. …
I thought this is faily easy except for parsing a string for a date. You would need to keep both string and date for comparison.
Check the codesandbox link in the following tweet.
7GUIs challenge for jotai https://t.co/xpbgHr1XM0 👻
— Daishi Kato (@dai_shi) August 30, 2021
Task 3: Flight Bookerhttps://t.co/89RSj7nEwS
This was a bit tricky with jotai. `null` implies invalid and flight option directly disables return date. There might be room for improvement. xstate may fit better. https://t.co/B9DslJzC2G pic.twitter.com/sY3RVjP2W3
Task 4: Timer
The task is to build a frame containing a gauge G for the elapsed time e, a label which shows the elapsed time as a numerical value, a slider S by which the duration d of the timer can be adjusted while the timer is running and a reset button R. …
Getting hard. We need to take care of timing. I’m not 100% sure if my implementation is readable enough.
Check the codesandbox link in the following tweet.
7GUIs challenge https://t.co/w9yhyIeVHp for jotai https://t.co/xpbgHqKmUs.
— Daishi Kato (@dai_shi) August 31, 2021
Task 4: Timerhttps://t.co/vjLtFtiRuO
I tried it without using useEffect, so it might look complicated/advanced. If someone is interested, please try and we can compare differences. pic.twitter.com/aJC8CWaezl
Task 5: CRUD
The task is to build a frame containing the following elements: a textfield Tprefix, a pair of textfields Tname and Tsurname, a listbox L, buttons BC, BU and BD and the three labels as seen in the screenshot. …
This would be a good challenge to handle a list and filter it. My implementation uses a technique called atoms-in-atom, but you could implement without it.
Check the codesandbox link in the following tweet.
7GUIs challenge https://t.co/w9yhyIwwyX for jotai https://t.co/xpbgHr1XM0.
— Daishi Kato (@dai_shi) September 1, 2021
Task 5: CRUDhttps://t.co/nHXkonPJMf
Is there a better select component? I'm really bad at styling. Don't look at the code around styling. 🙈 pic.twitter.com/gh5EOkxogE
Task 6: Circle Drawer
The task is to build a frame containing an undo and redo button as well as a canvas area underneath. Left-clicking inside an empty area inside the canvas will create an unfilled circle with a fixed diameter whose center is the left-clicked point. …
This is a fun task. In Web, we can use SVG, so drawing part is trivial. On the other hand, movable dialog is hard. I did it in a naive way. There should be some better ways. Using canvas instead of SVG and using browser window using postMessage would be advanced challenges.
Check the codesandbox link in the following tweet.
7GUIs challenge https://t.co/w9yhyIwwyX for jotai https://t.co/xpbgHr1XM0.
— Daishi Kato (@dai_shi) September 2, 2021
Task 6: Circle Drawerhttps://t.co/cAcTf2iLSN
I used SVG to draw circles. I didn't know about draggable modal dialog libraries, so it's homegrown. pic.twitter.com/wrSi4UVZMw
Task 7: Cells
The task is to create a simple but usable spreadsheet application. The spreadsheet should be scrollable. The rows should be numbered from 0 to 99 and the columns from A to Z. Double-clicking a cell C lets the user change C’s formula. After having finished editing the formula is parsed and evaluated and its updated value is shown in C. …
I wanted to try this task from the start.
I thought this would be very interesting with jotai,
which already has dependency tracking.
The result is it is very interesting.
The code is surprisingly small.
Note that I cheated formula evaluation with eval.
Check the codesandbox link in the following tweet.
Finally all done! 🥳
— Daishi Kato (@dai_shi) September 3, 2021
7GUIs challenge https://t.co/w9yhyIwwyX for jotai https://t.co/xpbgHr1XM0.
Task 7: Cellshttps://t.co/u7bRzOIV80
Wow, this is so easy with jotai. Certainly, more refinements are necessary for real use cases, but it shows the power of derived atoms. pic.twitter.com/kaJP0n2VaA
Summary
How was it? Would you like to challenge yourself? Even if it’s too hard, I suppose reading the implementation will help you to learn. I am so impressed that these 7 tasks are well designed.
Enjoy coding.