I have been working with VueJS for a while, but I also have some ReactJS experience. I was curious to see how the framework and ecosystem advanced in the couple years I hadn’t touched it so I decided to read some docs. I got excited and also created Anki cards for it to sediment my knowledge, but that’s a topic for another post (let me know if you are interested in knowing more how I do it). In this post, I intend to show you the main points I learned of each item, mixing it with some thoughts from previous experiences, and what the demo app (Solid Parakeet) does (which is not much really).

Before I delve into the details, here is a summary of the topics for this post:

React

I haven’t saved the dates, but I used React for about a year total during 2018-2019. We had a nice full-stack app with dotnet core in the backend written in C# and a TypeScript React app for the front-end. As part of the compilation process for the backend, types were generated for the front-end so we’d know if something broke in our interface quickly.

I enjoyed my first project wholeheartedly, but I do have my regrets about it. Two in particular:

  1. component data-flow, and
  2. using Redux to store everything.

Component Data-Flow is something I messed up so big in some parts that when a colleague got a task related to it, he couldn’t understand it. He spent a few days, we had some conversations, but in the end he couldn’t do it in reasonable time. I don’t consider it his failure, but mine. It was the first time I realized that programming is not just making things work, but making them understandable. Part of the problem was due to using Redux to store everything, even minor details of some components and part of it was just… due to sheer mess due to the lack of planning and self-review.

Anyway, I eventually learned how to do the above better with the years, albeit far from perfection. Most of it was while learning SwiftUI on my spare-time, but I also kept it in mind while re-reading React and Redux docs. Regarding the docs, some learnings related to that:

  • Redux docs do mention you shouldn’t save all your state in the store (not sure if it was there when I used it the first time, but I haven’t read a substantial amount of the documentation at the time anyway)
  • React created a useReducer hook that allows you to use a main Redux concept without the extra library

Redux

As part of my VueJS job, I had used Vuex and Pinia. Pinia is the recommended store solution for Vue currently and I consider it to be a store without ceremonies: define your store and just call it easily with an import anywhere. You don’t have a central file to keep all your stores registered, Pinia just handles it like magic, which frees you to organize your code as you like and not care about such details. Changing data in the store is also unceremonious:

const store = useMyStore()
store.myCount += 2

In Vuex and Redux, we have intermediary abstractions and changing the store state directly is not recommended and in the case of Vuex you may lose reactivity if you do it. In the case of Redux, I am not sure what happens… haven’t really tried.

In the end, I enjoyed reading the docs and seeing how Redux explains the abstractions, but having tasted Pinia I wonder if all that is needed. I think both approaches have their advantages, but I am not sure what would make me switch to the more ceremonious one.

Material UI

I never used Material UI professionally, but at work I did use Vuetify which is a Material library for Vue. MUI has called my attention because some friends mentioned it and I also wanted to know how other Material Design libraries are. In the end: it blew my mind.

MUI is a polished library with lots of great documentation, full of examples and mentioning even things like accessibility that sometimes libraries may forget about. They do document even some examples of how to customize components, what has been a pain point of Vuetify for me. There are so many components we receive custom mock ups for and sometimes we can’t rely on Vuetify even though it already does 80% of the work and we just want to finish with the 20% of the design.

I realized I need to learn more about other libraries, in particular for Vue if I keep using it. Anyway, currently MUI is my favorite UI library and it even influences how I think about component design now.

Dexie

I found out about Dexie a couple months ago while looking for IndexedDB libraries. We were already using another one at work, but the initial page made me so curious about it I had it bookmarked for a later date… and then I just used it. I haven’t used much of it, as part of my goal was using Redux and I ended up relying more on Redux for things that Dexie could do as well.

Dexie offers a simple enough API and has reactive APIs that one can use with React, Vue and more. I would definitely suggest it if I have a new project or module that requires IndexedDB.

Solid Parakeet

Conclusion

Thank you for reading! Let me know your thoughts about any point mentioned or related.