Hello there! I’m back, so let’s pick it up where we left off.
After looking at the steps that helped me structure the project, the story continues with another interesting question that sets the foundation for any new project.
What will the tech stack be?
At first, I wanted to go directly to the component’s library and look at other vital parts of what we can consider a stack… but I never considered how it is composed.
So, I put my experience into practice and categorized the stack into the following list, plus some more questions:
- Main Libraries: Would I use Angular, React, Vue, Svelte, Web Components, or else? I included TypeScript without hesitation because it was the main reason I started the project.
- Unit Tests: I know they can be a bummer, but how can you say your code does what you say it does without tests? They also help you see scenarios you didn't know when you coded and improve your functionality.
- UI and Styles: Which projects have good-looking components? Do they need a dependency like JQuery to work at its fullest? How about its licenses?
- Component Visualization: A tool like Storybook provides a sandbox for any interested person, but is there more like it?
- Package Manager: Npm is our primary source for libraries and tools, but can I publish elsewhere besides its alternatives? which I had in mind.
- Module Bundler: Understanding how bundlers work can be overwhelming in 2023, so it needed its own unique category.
- Code Styling and Revision: You might think your code is perfect and error-free, but even the best of us need someone to point out when mistakes are about to happen even before we commit them.
After knowing what to search for, I started investigating and picking possible configurations that would ease my future work:
- React and Typescript as the main libraries. React has been my primary tool since 2016, and this project will provide a more in-depth experience.
- Storybook as a visualizer because I’d learned to use it previously. Also, I watched some examples of how it could be extended for better documentation while the person was experiencing it.
- On the unit testing side, Jest and React Testing Library because I’d learned them before but never extended their use; a similar case to the one mentioned before.
- The code styling combo that worked like a charm in my previous projects:
- ESLint to review Javascript and Typescript files for basic errors; even tiny, these could happen.
- Prettier to adjust my codebase to a familiar style standard
- Lint-staged and Husky to maintain tools usage as git flow gateways
- For example, if a TS file had not used imports, it was marked as a fail and stopped a commit; or if the UT suite ran with errors before pushing, stop the process until you can run it correctly.
- Just as a comment, this logic was thought to be implemented in CD/CI pipelines for a long-term solution.
- Regarding the package manager, I checked other registries like Github’s npm, which I considered a good option, but I preferred to work on the original npm site and focus my work there.
- At this point, things were more difficult ‘cause I knew only a handful of options besides Bootstrap. My first main option was Semantic UI, but at that point, I was using JQuery as a dependency with its internal JS logic, so I kept looking for more alternatives until I found Bulma. This simple-to-install and well-documented set of CSS components had no JS dependencies, making them perfect for expanding their usage in a React version.
- Finally, I looked for several builders, such as Webpack, Vite, Parcer, and Rollup, and for analysis like this fireship video and other articles.
After the reviews, I went to Rollup because:
- It’s popular and has an excellent plugin ecosystem.
- VIte’s engine is based on Rollup.
- It’s easier to configure than Webpack; bad experiences when working with Angular.
If you are interested in how I expanded on these questions, considered possible alternatives, and chose the answers mentioned, it’s all registered in Ticket #2.
Now, all the pieces are together, and I’ve the necessary information to make them work as one. In the following article, I’ll explain how it happened.
See you in the next episode. Nice tools; now mix them.
Top comments (0)