Upgrade to Pro — share decks privately, control downloads, hide ads and more …

NEWT.net: Frontend Technology Selection

NEWT.net: Frontend Technology Selection

Rodrigo Ramirez

June 27, 2022
Tweet

More Decks by Rodrigo Ramirez

Other Decks in Programming

Transcript

  1. Agenda 02 03 01 Self Introduction Frontend Team Frontend Stack

    04 From Zero to Release 05 Future Plans
  2. 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
  3. Frontend Team FULL TIME https://www.reiwatravel.co.jp/recruit Full Time Position Open! You?

    Rodrigo Ramirez プロパートナー Yuito Kawashima Shunsuke Mano Yasuyuki Matsumoto
  4. 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
  5. 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
  6. GraphQL What is GraphQL? GraphQL is a query language for

    your API, used by companies like Facebook, Airbnb, Booking.com, etc.
  7. 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
  8. 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
  9. 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
  10. 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, ◦ …
  11. 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
  12. 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
  13. 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
  14. 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.
  15. 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
  16. 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: ◦ やり切る
  17. 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.
  18. 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
  19. Frontend Team FULL TIME https://www.reiwatravel.co.jp/recruit Full Time Position Open! You?

    Rodrigo Ramirez プロパートナー Yuito Kawashima Shunsuke Mano Yasuyuki Matsumoto