NEWT: Front-end Technology Selection

Hello!

Hello! My name is Rodrigo Ramirez; I'm a Full-stack developer, entrepreneur, and Argentinian. I have been living in Tokyo, Japan, since 2014.

I'm working at ReiwaTravel, and together with an amazing team, we are building NEWT（ニュート） a smart overseas travel booking app where we offer tour packages that combine hotels, flights, and activities.

This article will explain what we are building and our Front-end stack.

If you want to know more about me:
https://note.com/reiwatravel/n/n392a916c400a

What are we building

In our initial phase, we focused mainly on developing our mobile apps, and one of the strategies to increase the development speed was to use a WebView on some of the screens of our app.

Now that our app's design and functionalities are stable, to increase the awareness of our brand and tours, we are starting to develop our website to support almost the same functionalities as our app.

For more information about our app and the WebView integration, please refer to the article written by our iOS engineer:

https://note.com/ippo_012/n/n9bd1982fb684

Our Stack

About the selection criteria for our frontend stack, please refer to the "Choosing the right technology stack" section on the following article published by me:
https://zenn.dev/xpromx/articles/9f3d6b459b176d#choosing-the-right-technology-stack

Next.JS + React + TypeScript

The decision to use React+Typescript was based mainly on our current staff knowledge. Together with React, we decided to use Next.JS, the most popular React Framework.

A new framework called Remix wasn't considered this time, but it could be an option in the future.

GraphQL + React-Query

We use GraphQL for our public API; GraphQL allows us to fetch only the necessary data for each of our pages/components. Combined with TypeScript & graphql-code-generator we get type-safe for free increasing our DX.

Instead of using apollo-client for fetching our data, we decided to go with a combination of react-query + graphql-request

For a more deep comparison between Apollo Client vs. React-Query, please check the React-Query official website:

https://react-query.tanstack.com/comparison#_top

Ref:

• React-Query: https://react-query.tanstack.com/
• GraphQL-Request: https://github.com/prisma-labs/graphql-request
• GraphQL-Code Generator + GraphQL-Request Plugin: https://www.graphql-code-generator.com/plugins/typescript-graphql-request

Styling

I will quickly explain our selection process to decide our styling option.

Candidates:

• CSS Modules (Sass?)
• Tailwind CSS
• CSS Modules + Tailwind CSS
• Styled-Components
• Chakra-UI
• Vanilla-Extract

Selection Criteria:

• Maintainability
• Development Speed
• Readability (Code Review)
• Future proof
• Bundle size = SEO

We tried all the options to confirm the Developer Experience and possible bottle-necks on the following GitHub repository:
https://github.com/xpromx/react-component-styles

Quick Summary

	CSS Modules	Tailwind CSS	CSS Module + TW	Styled-Components	Chakra-UI	Vanilla-Extract
Maintainability	✅	🔥	🔥	⚠️	⚠️	🔥
Development Speed	🔥	🔥+1	🔥	✅	⚠️	✅
Readability	🔥	⚠️	⚠️	⚠️	⚠️	✅
Future proof	🔥+1	🔥	🔥	⚠️	⚠️	⚠️
Bundle size = SEO	✅	🔥	✅	⚠️	⚠️	✅
Good for design system	⚠️	🔥	🔥	⚠️	⚠️	🔥

• 🔥 Perfect
• ✅ Very Good
• ⚠️  Good
• ❌ Not Good

We reduced our list to these 3 options:

TailwindCSS
A utility-first CSS framework
https://tailwindcss.com/

• ✅ Big community, development speed, Common writing style
• ❌ Readability

Vanilla-Extract CSS
Zero-runtime Stylesheets in TypeScript. (like CSS modules but with TypeScript)

https://vanilla-extract.style/

• ✅ Easy to use, type-safe
• ❌ New library = Not big community or projects using it

CSS Modules:

Default supported by Next.JS

• ✅ Safer option, it’s just CSS, Work by default in Next.JS
• ❌ We need to define internal rules, flexibility = maintenance & readability problems

Conclusion

We decided to go with CSS Modules because it’s safer; although it will require us to think about rules to keep all styles consistent, the DX is good and feels natural to use it.

A new CSS in JS library called stylex, used by Meta (Facebook), is coming next year, and it looks very promising; we are looking forward to trying it. ref: https://youtu.be/ur-sGzUWId4

Our Team

We are a remote-first company; all the tools we selected from the beginning allowed us to work with high productivity even remotely.

We have a culture to document everything we talk about and our decisions. It allows our teams to catch up quickly with what is happening around our product.

For the product team, we hold morning meetings to have a common space where everyone can share and ask the other team members.

Even if we are a remote-first company, we are trying to see each other at least once a week to increase the teamwork, and during that day, we hold meetings to think about how to improve our development process.

We are hiring!

We just started working on our website, and we have big plans for it.
If you are a talented front-end developers who don't just want to code but also would like to work with an amazing team to discuss how to build the best user experience, I think you will love working with us.

Let's talk and see how well we fit each other!

Feel free to contact us from the recruitment page:

https://herp.careers/v1/reiwatravel/0JnHN8g9NMoF

https://www.reiwatravel.co.jp/recruit