Front-end Technology Selection

Agenda 02 03 01 Self Introduction Frontend Team Frontend Stack 04 From Zero to Release 05 Future Plans

自己紹介 Self introduction

RODRIGO RAMIREZ　/ ロドリゴ　ラミレス @xpromx Argentinian Spanish: Native | English: Business | 日本語: 勉強中！ https://xpromx.me Career ● 2006~2008: Freelance Developer ● 2008~2015: CEO/CTO - PowerSite (SaaS: NewsMaker, SocialHint) ● 2015-2021: CTO - Travelience (GoWithGuide: Tour Guide Marketplace) ● 2021~: Full-Stack Developer at ReiwaTravel (NEWT: Abroad Tour Package) ( + 10 years ) Self introduction Full-Stack Developer

Engineer Team

Engineer Team Frontend Backend iOS Android PM QA Designer

Engineer Team Engineer Team

Engineer Team

Engineer Team

Frontend Team Frontend Backend iOS Android PM QA Designer

Frontend Team FULL TIME https://www.reiwatravel.co.jp/recruit Full Time Position Open! You? Rodrigo Ramirez プロパートナー Yuito Kawashima Shunsuke Mano Yasuyuki Matsumoto

Frontend Stack

Frontend Stack NEWT.net (Web) was release on June 6th 🎉🎉

Choosing the right technology stack Current team knowledge + Scope of the project your are trying to build Developers available using that technology + Future proof Development speed + Scalability & Maintainability

Monorepo TurboRepo Turborepo is a high-performance build system for JavaScript and TypeScript codebases

Framework: Next.JS Why ISR ( Incremental Static Regeneration ) ? ● It fits well with our services since our tours content doesn’t change once created ● If the traffic increase, there is no impact on the API server. ● Best of both worlds: SSR & SSG Data Fetching SSR CSR SSG ISR

GraphQL What is GraphQL? GraphQL is a query language for your API, used by companies like Facebook, Airbnb, Booking.com, etc.

GraphQL Packages ● graphql-codegen to generate TypeScript types from the GraphQL schema ● graphql-request instead of Apollo Client ● react-query for Client Side Fetching Why not Apollo Client? ● We don’t need Apollo advance cache ● We fetch almost all our data from server side (ISR) ● We use react-query when client side fetching is required React-Query vs Apollo Client https://react-query-v3.tanstack.com/comparison

GraphQL Tours query Server Side（ISR） ● graphql-request Client Side ● graphql-request ● react-query

Styling https://github.com/xpromx/react-component-styles Steps: 1. Chose popular CSS libraries 2. Try a real use case by creating a button component that supports different sizes & variants 3. Compare the DX and other important points and select one of them

Styling CSS Modules Tailwind CSS CSS Modules + TW Styled-Components Chakra-UI Vanilla-Extract DX ◯ △ △ △ △ ◯ Development Speed ◉ ◉ ◯ △ △ ◯ Future Proof ◉ ◯ ◯ △ △ △ Bundle size = SEO ◯ ◉ ◯ △ △ ◯ Why CSS Modules? ● It’s just CSS, anyone can write it and read it ● Work by default in Next.JS ● It’s not perfect, but you can find an easy solution for the problems https://github.com/xpromx/react-component-styles

Infrastructure Why Vercel? ● Easy to start with, by just linking your Github Repository ● Generate Testing Env. from each branch (perfect for Code Review & QA) ● Vercel Infra: ○ Super Fast Deployments ○ CDN ○ Edge Functions, ○ …

NEWT.net: Screen Mode PC SP SP (Webview) Responsive

From Zero to Release

Initial State ● Members: ○ No Full-time Frontend engineer ○ Rodrigo (half time) + 2 Side Jobs (副業) ● Web Design: ○ We decided to keep the Web design similar to the App to provide the same UX to our users. ■ SP = App ■ Tablet, PC = responsive version of SP with some differences ○ Before starting by organized & designed the basic components ● Web Development: ○ Before we start coding, We started by deciding the Stack & some coding rules ○ Then we created the initial project and CI/CD setup

Release Timeline 12月2021年 1月2022年 2月2022 3月2022 4月2022 5月2022 6月2022 Stack決める UI Components Web版開発 QA Design Components 6月6日にリリース Design Web版 ● Decide Stack + Setup the project to start coding = 1 month ● Components + Web版開発 + QA feedback = 5 months ● QA before release = 1.5 months

UI Components Development ● Started by building the basic components (Buttons, Forms, Modals, Grid, etc) ○ We separated UI components from the Application Layer in a monorepo ○ Each member were building different components in parallel ● Components were made by scratch to maximize extensibility and maintainability ○ Using libraries can lead to restrictions, loss of design scalability, and unexpected maintenance costs ○ Exception: Calendar component ● Implemented Storybook to easily check our components

Website Development ● Divided the work by page type & assigned them to different members. ○ e.g: ■ Member 1: Top, Search, Tour Details, … ■ Member 2: Sign In, Booking Process, … ● While building each page, our UI components also evolved to support real use cases. ● Each page was tested on a separate Testing Environment before merge it.

Challenges

Code Review ● Situation ○ No full-time frontend engineer, Code-reviews were concentrated on me (Rodrigo) ○ It affected the development speed ● Temporal Solution ○ Focus on the final output (UI/UX) ○ We did some sacrifices in quality at the beginning

QA ● Situation ○ We started the QA process one month before the release ○ We had many small bugs, that we needed to fix until the last minute. ● Solution: ○ やり切る

App new features ● Situation: ○ During those 4~5 months of the web version development the App version was also including new features ● Temporal Solution: ○ Try to minimize the Impact of new features, and decided which ones could be added after release.

Future Plans

Future Plans ● GraphQL Colocation ● SEO optimizations ● Accessibility ● Production move to GCP when traffic increase? ● Testing: e2e using cypress ● Next.JS nested layouts ❤ https://nextjs.org/blog/layouts-rfc ● New Features ● … Just released… many things pending to do

Frontend Team FULL TIME https://www.reiwatravel.co.jp/recruit Full Time Position Open! You? Rodrigo Ramirez プロパートナー Yuito Kawashima Shunsuke Mano Yasuyuki Matsumoto

Thank You! @xpromx https://www.reiwatravel.co.jp/recruit We are hiring! All positions open! ありがとうございます！ Muchas Gracias!