as a full- stack framework 2024/06/25 Vercel Meetup #1 Yuta Yamada (山田 悠太) CX Team, SoE Group, DPI Department Digital Innovation Headquarters Mitsubishi Heavy Industries, Ltd.
Yamada 山田悠太 nickname: モンゴル (@mongolyy) Who am I? Member of Digital Transformation(DX) promotion organization TechLead Developing an e-commerce site for mechanical consumables Current tech stack: Next.js, React, TypeScript Previous tech stack: Scala, Play Framework, Ruby on Rails
my DX promotion context There are two elements ➢ Usability • Users have become more discerning ➢ Agility • Speed is crucial for building a trusting relationship with the business division
choice ✓ Usability • Front-end development is required -> React, Next.js ✓ Agility • Choose technologies with good developer experience -> Next.js on Vercel • Reduce what we develop -> Utilizing Next.js as a full-stack framework -> Vercel
from Headless Commerce DB Admin UI API Headless Commerce front-end client ✓ The front-end is directly related to usability and needs to be implemented ✓ Back-end can be thinly implemented by using SaaS （SaaS） （scratch）
with Next.js DB Admin UI API Headless Commerce Next.js client ➢ Since API requests require an API key, server-side processing such as SSR is necessary ➢ Since tasks like estimating and ordering need to be server-side (SSR or API Route) -> A large amount of server-side code is required (explain this later) （SaaS） SSR/ API Route React
quotation and ordering site for users of our machinery products E-commerce site for mechanical consumables Previously communicated by phone, email, and fax.
Step: Integrating with RDB ➢ Multi-business unit development ➢ RDB has a proven track record of data integration, making it easy to coordinate with the business unit's IT department ➢ Ensure consistency of table structure and code ➢ Migrate safely by managing the database schema in code ➢ Testability ➢ Test including DB layer by launching DB on Docker or using in-memory database ➢ Other ➢ Team became more technologically proficient over time
Considerations for Back-End Technology Selection ✓ Agility • Choose technologies with good developer experience • Reduce what we develop • All developers can act as full-stack engineers • The number of developers(3~4) does not change much • Front-end engineers can also handle back-end development and manage it safely
Next.js + Hasura architecture ➢ Pros ➢ User-friendly admin screen for easy start ➢ Built-in GraphiQL for quick GraphQL query testing ➢ DB data management ➢ Safely development through admin screen ➢ Version control for database schema (automatic migration file generation) ➢ Detailed access control (table/row/column level) ➢ Simple query calls using GraphQL-Codegen ➢ Cons ➢ More expensive to develop and learn than Prisma + RDB ➢ Not good at complex transactions ➢ In our case, it is mainly a reference system, so it is not a big problem ➢ Transaction will be supported in next version ➢ https://github.com/hasura/graphql-engine/issues/5773
with Next.js (reprint) DB Admin UI API Headless Commerce Next.js client ➢ Since API requests require an API key, server-side processing such as SSR is necessary ➢ Since tasks like estimating and ordering need to be server-side (SSR or API Route) -> A large amount of server-side code is required (explain this later) （SaaS） SSR/ API Route React
with Using Next.js as a Full-Stack Framework ➢ We needed to write a lot of server-side code ➢ We tried to make our code more reusable by splitting it into smaller functions, but: ➢ Different developers created functions of different sizes ➢ We lacked a shared understanding of how these functions should work together -> Reduced code readability and maintainability Dependency structure visualization
We defined layers based on their roles and integrated and separated functions We were influenced by layered architecture Service function Validate data as it relates to processing and business logic. Transform data for frontend. Repository function Interacts with the data persistence layer, such as database. getServerSideProps Perform minimal validation, such as the presence of required parameters.
➢ My team prioritized usability and agility in our technology choices and made changes according to the product requirements and the growth of our team members ➢ When utilizing a full-stack framework, a shared understanding of design within the team became crucial ➢ Adaptation as tech and business change
the Vercel design, Next.js and related marks, designs and logos are trademarks or registered trademarks of Vercel, Inc. or its affiliates in the US and other countries.
mongolyy
snoozer05
camaelon
sodainc
zsmb
mazrean
eddie
maikokojima
murabayashi
hiranuma
carta_engineering
mae616
minodriven
danielanewman
denniskardys
maggiecrowley
trallard
thoeni
paigeccino
bkeepers
speakerdeck
chriscoyier
csswizardry
trishagee
morganepeng
