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

NEWT.net: Frontend Technology Selection

NEWT.net: Frontend Technology Selection

A2040e0e2f7a6cabf81b54e4a401c0e8?s=128

Rodrigo Ramirez

June 27, 2022
Tweet

Other Decks in Programming

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!