Slide 1

Slide 1 text

Front-end Technology Selection

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

自己紹介 Self introduction

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Engineer Team

Slide 6

Slide 6 text

Engineer Team Frontend Backend iOS Android PM QA Designer

Slide 7

Slide 7 text

Engineer Team Engineer Team

Slide 8

Slide 8 text

Engineer Team

Slide 9

Slide 9 text

Engineer Team

Slide 10

Slide 10 text

Frontend Team Frontend Backend iOS Android PM QA Designer

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Frontend Stack

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

GraphQL Tours query Server Side(ISR) ● graphql-request Client Side ● graphql-request ● react-query

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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, ○ …

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

From Zero to Release

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

Challenges

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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: ○ やり切る

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

Future Plans

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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