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

先を見据えたMVPのフロントエンド開発

Yuku Kotani
February 25, 2022

 先を見据えたMVPのフロントエンド開発

DeNA×Ubie×FiNC presents 「とりあえず打った施策」のアンチパターン ~ 一旦はじめてみたけれど、うまくワークしなかった打ち手をぶっちゃけ公開 ~

https://techplay.jp/event/845155

Yuku Kotani

February 25, 2022
Tweet

More Decks by Yuku Kotani

Other Decks in Technology

Transcript

  1. MVP
    2022/02/24 DeNA×Ubie×FiNC presents
    Yuku Kotani (@MonchiFC)

    View full-size slide

  2. 2
    (@MonchiFC)
    ● Software Engineer @ Ubie Discovery
    ○ AI
    ● (B3) @
    2

    View full-size slide

  3. 3
    ● Ubie MVP
    ● MVP

    View full-size slide

  4. 4
    AI

    ● 2020 5 450 MAU
    ● TypeScript+Next.js / Kotlin+Spring Boot /
    GraphQL / Capacitor
    https://ubie.app

    View full-size slide

  5. 5
    ● 2019 MVP
    ● 2020 5 2021 PMF 300 MAU

    ● 2021 4 5 AI
    ○ Nuxt.js Next.js 1
    ○ : https://zenn.dev/yuku/articles/a9edd53e13bb26

    View full-size slide

  6. 7
    1
    (SLO)
    SLO
    SLO
    SLO

    View full-size slide

  7. 8
    1
    1 1
    ● toC toB
    ○ toC toB
    ● toC toB

    View full-size slide

  8. 9
    現在
    1つのコードベースに複数のサービスレベル
    AI 3
    ● Next.js
    ● React
    ● 秩 Nuxt.js



    View full-size slide

  9. 10
    1
    ● SPA
    ● Web Storage
    Fastly Istio
    Next.js
    Nuxt.js
    React
    (Nginx)
    /foo/*
    /bar/*
    /*
    ubie.app

    View full-size slide

  10. 12
    MVP


    src
    api
    constants
    controllers
    models
    services
    store
    utils
    v2
    adapters
    controllers
    gateways
    transformers
    domains
    infrastructure
    useCases
    views
    components
    hooks
    layouts
    locales
    middleware
    pages
    plugins
    seo
    serverMiddleware
    static
    src
    api
    constants
    controllers
    models
    services
    store
    utils
    views
    components
    layouts
    locales
    middleware
    mixins
    pages
    plugins
    seo
    static

    View full-size slide

  11. 13

    ● I/F
    Service
    (Usecase)
    Infra
    Something
    Else
    GraphQL
    (BFF)
    Web
    Storage
    Component
    Model

    View full-size slide

  12. 14
    学び
    中途半端なクリーンアーキテクチャ
    MVP
    - I/F
    -
    -
    -
    - I/F 秩

    View full-size slide

  13. 16
    600

    ● SEO

    View full-size slide

  14. 17
    ● GraphQL BE
    ● BE
    ● dev-n BE
    ○ https://zenn.dev/ubie/articles/4c02baa037c5aa

    View full-size slide

  15. 19
    MVP



    View full-size slide

  16. 20




    ● /

    View full-size slide

  17. 21
    FE/BE FE
    I/F
    Component
    Service (Usecase)

    View full-size slide

  18. 22
    1

    toB modules
    Component Usecase
    Component Usecase
    toC modules
    Common
    logics

    View full-size slide

  19. 23
    https://meety.net/matches/ivWSVUlcTGtZ
    TypeScript, React, Next.js, Capacitor,
    Kotlin, SpringBoot, Rails, DGS, GraphQL,
    GCP, Kubernetes, Fastly, Service Mesh,
    , , ,
    Meety with

    View full-size slide