NEWT.net: Frontend Technology Selection

Blog:
https://engineering.reiwatravel.co.jp/blog/newt-frontend-stack

Transcript

1. Front-end Technology Selection
2. Agenda 02 03 01 Self Introduction Frontend Team Frontend Stack 04 From Zero to Release 05 Future Plans
3. 自己紹介 Self introduction
4. 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
5. Engineer Team
6. Engineer Team Frontend Backend iOS Android PM QA Designer
7. Engineer Team Engineer Team
8. Engineer Team
9. Engineer Team
10. Frontend Team Frontend Backend iOS Android PM QA Designer
11. Frontend Team FULL TIME https://www.reiwatravel.co.jp/recruit Full Time Position Open! You? Rodrigo Ramirez プロパートナー Yuito Kawashima Shunsuke Mano Yasuyuki Matsumoto
12. Frontend Stack
13. Frontend Stack NEWT.net (Web) was release on June 6th 🎉🎉
14. 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
15. Monorepo TurboRepo Turborepo is a high-performance build system for JavaScript and TypeScript codebases
16. 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
17. GraphQL What is GraphQL? GraphQL is a query language for your API, used by companies like Facebook, Airbnb, Booking.com, etc.
18. 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
19. GraphQL Tours query Server Side（ISR） • graphql-request Client Side • graphql-request • react-query
20. 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
21. 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
22. 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, ◦ …
23. NEWT.net: Screen Mode PC SP SP (Webview) Responsive
24. From Zero to Release
25. 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
26. 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
27. 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
28. 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.
29. Challenges
30. 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
31. 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: ◦ やり切る
32. 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.
33. Future Plans
34. 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
35. Frontend Team FULL TIME https://www.reiwatravel.co.jp/recruit Full Time Position Open! You? Rodrigo Ramirez プロパートナー Yuito Kawashima Shunsuke Mano Yasuyuki Matsumoto
36. Thank You! @xpromx https://www.reiwatravel.co.jp/recruit We are hiring! All positions open! ありがとうございます！ Muchas Gracias!