<h1 id="hello!">
<a class="header-anchor-link" href="#hello!" aria-hidden="true"></a> Hello!</h1>
<p>Hello! My name is <a href="https://xpromx.me/" target="_blank" rel="nofollow noopener noreferrer">Rodrigo Ramirez</a>; I'm a Full-stack developer, entrepreneur, and Argentinian. I have been living in Tokyo, Japan, since 2014.</p>
<p>I'm working at <a href="https://www.reiwatravel.co.jp/" target="_blank" rel="nofollow noopener noreferrer">ReiwaTravel</a>, and together with an amazing team, we are building <a href="https://newt.net/app" target="_blank" rel="nofollow noopener noreferrer">NEWT（ニュート）</a> a smart overseas travel booking app where we offer tour packages that combine hotels, flights, and activities.</p>
<p>This article will explain what we are building and  our Front-end stack.</p>
<p>If you want to know more about me:<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__df783c6c326cc" src="https://embed.zenn.studio/card#zenn-embedded__df783c6c326cc" data-content="https%3A%2F%2Fnote.com%2Freiwatravel%2Fn%2Fn392a916c400a" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://note.com/reiwatravel/n/n392a916c400a" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://note.com/reiwatravel/n/n392a916c400a</a></p>
<h1 id="what-are-we-building">
<a class="header-anchor-link" href="#what-are-we-building" aria-hidden="true"></a> What are we building</h1>
<p>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.</p>
<p>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.</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/5d3544acbcac-20211220.png" alt loading="lazy" class="md-img"></p>
<p>For more information about our app and the WebView integration, please refer to the article written by our iOS engineer:</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d6bd5218ea0c3" src="https://embed.zenn.studio/card#zenn-embedded__d6bd5218ea0c3" data-content="https%3A%2F%2Fnote.com%2Fippo_012%2Fn%2Fn9bd1982fb684" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://note.com/ippo_012/n/n9bd1982fb684" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://note.com/ippo_012/n/n9bd1982fb684</a></p>
<h1 id="our-stack">
<a class="header-anchor-link" href="#our-stack" aria-hidden="true"></a> Our Stack</h1>
<p>About the selection criteria for our frontend stack, please refer to the "<strong>Choosing the right technology stack</strong>" section on the following article published by me:<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3dd058682a659" src="https://embed.zenn.studio/card#zenn-embedded__3dd058682a659" data-content="https%3A%2F%2Fzenn.dev%2Fxpromx%2Farticles%2F9f3d6b459b176d%23choosing-the-right-technology-stack" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/xpromx/articles/9f3d6b459b176d#choosing-the-right-technology-stack" style="display:none" target="_blank">https://zenn.dev/xpromx/articles/9f3d6b459b176d#choosing-the-right-technology-stack</a></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/88c16bf8da93-20211220.png" alt loading="lazy" class="md-img"></p>
<h2 id="next.js-%2B-react-%2B-typescript">
<a class="header-anchor-link" href="#next.js-%2B-react-%2B-typescript" aria-hidden="true"></a> Next.JS + React + TypeScript</h2>
<p>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.</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>A new framework called <a href="https://remix.run/" target="_blank" rel="nofollow noopener noreferrer">Remix</a> wasn't considered this time, but it could be an option in the future.</p>
</div></aside>
<h2 id="graphql-%2B-react-query">
<a class="header-anchor-link" href="#graphql-%2B-react-query" aria-hidden="true"></a> GraphQL + React-Query</h2>
<p>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 &amp; <code>graphql-code-generator</code> we get type-safe for free increasing our DX.</p>
<p>Instead of using <code>apollo-client</code> for fetching our data, we decided to go with a combination of <code>react-query</code> + <code>graphql-request</code></p>
<p>For a more deep comparison between Apollo Client vs. React-Query, please check the React-Query official website:</p>
<p><a href="https://react-query.tanstack.com/comparison#_top" target="_blank" rel="nofollow noopener noreferrer">https://react-query.tanstack.com/comparison#_top</a></p>
<p>Ref:</p>
<ul>
<li>React-Query: <a href="https://react-query.tanstack.com/" target="_blank" rel="nofollow noopener noreferrer">https://react-query.tanstack.com/</a>
</li>
<li>GraphQL-Request: <a href="https://github.com/prisma-labs/graphql-request" target="_blank" rel="nofollow noopener noreferrer">https://github.com/prisma-labs/graphql-request</a>
</li>
<li>GraphQL-Code Generator + GraphQL-Request Plugin: <a href="https://www.graphql-code-generator.com/plugins/typescript-graphql-request" target="_blank" rel="nofollow noopener noreferrer">https://www.graphql-code-generator.com/plugins/typescript-graphql-request</a>
</li>
</ul>
<h2 id="styling">
<a class="header-anchor-link" href="#styling" aria-hidden="true"></a> Styling</h2>
<p>I will quickly explain our selection process to decide our styling option.</p>
<p><strong>Candidates:</strong></p>
<ul>
<li>CSS Modules (Sass?)</li>
<li>Tailwind CSS</li>
<li>CSS Modules + Tailwind CSS</li>
<li>Styled-Components</li>
<li>Chakra-UI</li>
<li>Vanilla-Extract</li>
</ul>
<p><strong>Selection Criteria:</strong></p>
<ul>
<li>Maintainability</li>
<li>Development Speed</li>
<li>Readability (Code Review)</li>
<li>Future proof</li>
<li>Bundle size = SEO</li>
</ul>
<p>We tried all the options to confirm the Developer Experience and possible bottle-necks on the following GitHub repository:<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c21a7252ee1b3" src="https://embed.zenn.studio/card#zenn-embedded__c21a7252ee1b3" data-content="https%3A%2F%2Fgithub.com%2Fxpromx%2Freact-component-styles" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/xpromx/react-component-styles" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/xpromx/react-component-styles</a></p>
<p><strong>Quick Summary</strong></p>
<table>
<thead>
<tr>
<th></th>
<th>CSS Modules</th>
<th>Tailwind CSS</th>
<th>CSS Module + TW</th>
<th>Styled-Components</th>
<th>Chakra-UI</th>
<th>Vanilla-Extract</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maintainability</td>
<td>✅</td>
<td>🔥</td>
<td>🔥</td>
<td>⚠️</td>
<td>⚠️</td>
<td>🔥</td>
</tr>
<tr>
<td>Development Speed</td>
<td>🔥</td>
<td>🔥+1</td>
<td>🔥</td>
<td>✅</td>
<td>⚠️</td>
<td>✅</td>
</tr>
<tr>
<td>Readability</td>
<td>🔥</td>
<td>⚠️</td>
<td>⚠️</td>
<td>⚠️</td>
<td>⚠️</td>
<td>✅</td>
</tr>
<tr>
<td>Future proof</td>
<td>🔥+1</td>
<td>🔥</td>
<td>🔥</td>
<td>⚠️</td>
<td>⚠️</td>
<td>⚠️</td>
</tr>
<tr>
<td>Bundle size = SEO</td>
<td>✅</td>
<td>🔥</td>
<td>✅</td>
<td>⚠️</td>
<td>⚠️</td>
<td>✅</td>
</tr>
<tr>
<td>Good for design system</td>
<td>⚠️</td>
<td>🔥</td>
<td>🔥</td>
<td>⚠️</td>
<td>⚠️</td>
<td>🔥</td>
</tr>
</tbody>
</table>
<ul>
<li>🔥 Perfect</li>
<li>✅ Very Good</li>
<li>⚠️  Good</li>
<li>❌ Not Good</li>
</ul>
<p>We reduced our list to these 3 options:</p>
<p><strong>TailwindCSS</strong><br>
A utility-first CSS framework<br>
<a href="https://tailwindcss.com/" target="_blank" rel="nofollow noopener noreferrer">https://tailwindcss.com/</a></p>
<ul>
<li>✅ Big community, development speed, Common writing style</li>
<li>❌ Readability</li>
</ul>
<p><strong>Vanilla-Extract CSS</strong><br>
Zero-runtime Stylesheets in TypeScript. (like CSS modules but with TypeScript)</p>
<p><a href="https://vanilla-extract.style/" target="_blank" rel="nofollow noopener noreferrer">https://vanilla-extract.style/</a></p>
<ul>
<li>✅ Easy to use, type-safe</li>
<li>❌ New library = Not big community or projects using it</li>
</ul>
<p><strong>CSS Modules:</strong></p>
<p>Default supported by Next.JS</p>
<ul>
<li>✅ Safer option, it’s just CSS, Work by default in Next.JS</li>
<li>❌ We need to define internal rules, flexibility = maintenance &amp; readability problems</li>
</ul>
<p><strong>Conclusion</strong></p>
<p>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.</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>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: <a href="https://youtu.be/ur-sGzUWId4" target="_blank" rel="nofollow noopener noreferrer">https://youtu.be/ur-sGzUWId4</a></p>
</div></aside>
<h1 id="our-team">
<a class="header-anchor-link" href="#our-team" aria-hidden="true"></a> Our Team</h1>
<p>We are a remote-first company; all the tools we selected from the beginning allowed us to work with high productivity even remotely.</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/6909ed183671-20211220.png" alt loading="lazy" class="md-img"></p>
<p>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.</p>
<p>For the product team, we hold morning meetings to have a common space where everyone can share and ask the other team members.</p>
<p>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.</p>
<h1 id="we-are-hiring!">
<a class="header-anchor-link" href="#we-are-hiring!" aria-hidden="true"></a> We are hiring!</h1>
<p>We just started working on our website, and we have big plans for it.<br>
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.</p>
<p>Let's talk and see how well we fit each other!</p>
<p>Feel free to contact us from the recruitment page:</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6854df2f3d158" src="https://embed.zenn.studio/card#zenn-embedded__6854df2f3d158" data-content="https%3A%2F%2Fherp.careers%2Fv1%2Freiwatravel%2F0JnHN8g9NMoF" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://herp.careers/v1/reiwatravel/0JnHN8g9NMoF" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://herp.careers/v1/reiwatravel/0JnHN8g9NMoF</a></p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c27b74d06b192" src="https://embed.zenn.studio/card#zenn-embedded__c27b74d06b192" data-content="https%3A%2F%2Fwww.reiwatravel.co.jp%2Frecruit" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.reiwatravel.co.jp/recruit" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.reiwatravel.co.jp/recruit</a></p>


NEWT: Front-end Technology Selection

graphql

Discussion