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

create own CMS from scratch

sota ohara
November 08, 2019

create own CMS from scratch

jsfest @ Kiev, Ukraine
https://jsfest.com.ua/indexe.html

sota ohara

November 08, 2019
Tweet

More Decks by sota ohara

Other Decks in Technology

Transcript

  1. 1

    View Slide

  2. 2
    Creating Serverless CMS from Scratch
    Sota Ohara
    JS Fest @ Kyiv
    November 8, 2019

    View Slide

  3. 4
    ota Ohara

    sottar_

    sottar

    Frontend Engineer, ech Lead

    at Mercari


    View Slide

  4. 5
    What Is Mercari?

    View Slide

  5. 6
    About
    February 1st, 2013
    Established
    Tokyo, Sendai,
    Fukuoka, Palo Alto,
    Portland, Boston
    Offices
    1800+
    Including subsidiaries
    Headcount
    6

    View Slide

  6. 7
    By the Numbers (JP/Full Year)
    232
    346.8
    GMV¹
    530.2 B

    In: billion JPY
    FY
    06/2017
    FY
    06/2018
    21.2
    33.4
    Net Sales
    51.6 B

    In: billion JPY
    FY
    06/2017
    FY
    06/2018
    8.45
    10.75
    MAU²
    14.50 M

    In: Million
    people
    FY
    06/2017
    FY
    06/2018
    ource: Internal documents, from FY2018.6 Presentation Material

    1. GM after cancellation

    2. Monthly Active sers in June. Number of registered users that used our app in the month

    490.2
    FY
    06/2019
    46.2
    FY
    06/2019
    13.57
    FY
    06/2019

    View Slide

  7. 8
    Global
    Non-Japanese in
    the company
    20% 40%
    Non-Japanese
    engineers
    40 nationalities represented in the workforce

    View Slide

  8. 9
    Campaign Pages

    View Slide

  9. 10
    Campaign Pages
    provide 5% off ticket
    for customer
    participate button
    for this campaign
    deadline of this
    campaign

    View Slide

  10. 11
    Campaign Pages
    giving 500 yen (max)
    points if customer
    use the new feature
    use new feature
    button

    View Slide

  11. 12
    Campaign Pages
    free commission fee
    campaign

    View Slide

  12. 13
    Campaign Pages

    View Slide

  13. 14
    Before Building the CMS
    PM
    Designer
    Frontend Engineer
    Decide on the target,
    specs, content...
    Ask design to
    create
    Create design using
    figma, sketch...

    View Slide

  14. 15
    Before Building the CMS
    PM
    Frontend Engineer
    Confirm design
    Write pug, css with
    the design
    Ask to create
    Ask to create
    (if jQuery needed)
    Write jQuery
    Designer

    View Slide

  15. 16
    Ask for QA
    Ask for code
    review
    PM
    Frontend Engineer
    Review code
    Complete development
    Before Building the CMS
    QA
    check behaivior
    Designer

    View Slide

  16. 17
    - Designer writes the code (pug & css)
    - Frontend Engineer reviews the code
    - Frontend Engineer writes JavaScript if needed
    - QA checks behavior in the staging environment
    - If we want to update content - even one word - we need to repeat
    the process again
    Before Building the CMS

    View Slide

  17. 18
    - Designer writes the code (pug & css)
    - Frontend Engineer reviews the code
    - Frontend Engineer writes JavaScript if needed
    - QA checks behavior in the staging environment
    - If we want to update content - even one word - we need to repeat
    the process again
    Designers need to acquire knowledge about pug & css…
    Frontend Engineers need to take time to review code...

    Before Building the CMS

    View Slide

  18. 19
    - Designer writes the code (pug & css)
    - Frontend Engineer reviews the code
    - Frontend Engineer writes JavaScript if needed
    - QA checks behavior in the staging environment
    - If we want to update content - even one word - we need to repeat
    the process again

    We have to write a jQuery if JavaScript code is required (api
    request, dynamic movement…)
    Before Building the CMS

    View Slide

  19. 20
    - Designer writes the code (pug & css)
    - Frontend Engineer reviews the code
    - Frontend Engineer writes JavaScript if needed
    - QA checks behavior in the staging environment
    - If we want to update content - even one word - we need to
    repeat the process again

    Before Building the CMS

    View Slide

  20. 21
    => Takes time to create a campaign page
    => Not designed for long-term operation
    Hard to operate many campaigns using this schema
    Before Building the CMS

    View Slide

  21. 22
    Why We Created it from Scratch

    View Slide

  22. 23
    What We Want to Create

    View Slide

  23. 24
    What We Want to Create

    View Slide

  24. 25
    What We Want to Create

    View Slide

  25. 26
    Image
    Title
    Button
    Q&A
    Text
    LinkText
    What We Want to Create

    View Slide

  26. 27
    We decided on features such as…
    - There are two pages - listing page and editor page
    - User can create the new campaign page via listing page
    - On editor page, user can combine components to create pages
    What We Want to Create

    View Slide

  27. 28
    Pros
    - Reduce time needed to create a page
    - Designers are not required to have programming
    skill
    - Easy to update content
    What We Want to Create

    View Slide

  28. 29
    Cons
    - Need to implement a component if the campaign
    page requires a new component which isn’t
    provided
    => Will be decreasing
    What We Want to Create

    View Slide

  29. 30
    => Most of OSS CMS didn’t support the ability to
    decide the order & number of components
    - There are many useful CMS frameworks available
    - We tried to use these first
    Why We Created From Scratch

    View Slide

  30. 31
    How We Created the CMS

    View Slide

  31. 32
    User Documentation
    When creating a CMS, we need to think about many things...
    How We Created the CMS
    Access Control
    Authorization
    Change History / Track Changes
    Security
    SSR
    Preview
    Status of Content

    View Slide

  32. 33
    Wanted to release it as MVP - only support these
    features:
    - Provide enough components to create an existing page
    - Able to upload to staging environment via CMS to do QA
    - Able to upload to production environment via CMS to publish
    - Able to unpublish the page via CMS
    - Only accessible from in-house wifi
    How We Created the CMS

    View Slide

  33. 34
    Architecture

    View Slide

  34. 35
    Architecture
    CMS
    Amazon S3
    Cloud Functions
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    Host HTML, JS (React)
    file for CMS
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)

    View Slide

  35. 36
    Architecture
    CMS
    Amazon S3
    Cloud Functions
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    Provide
    HTML, JS file
    Get Data
    from
    Storage
    Host HTML, JS (React)
    file for CMS
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)

    View Slide

  36. 37
    Architecture
    CMS
    Amazon S3
    Cloud Functions
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Host HTML, JS (React)
    file for CMS
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    Get Data
    from
    Storage
    Get Data
    from
    Storage
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)

    View Slide

  37. 38
    Architecture
    CMS
    Amazon S3
    Cloud Functions
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Host HTML, JS (React)
    file for CMS
    getData
    From
    Storage
    getData
    From
    Storage
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    1. Get HTML file
    2. Get base JS file
    3. Get JSON file - including which component
    should be displayed
    4. Get JS component files
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)

    View Slide

  38. 39
    Architecture
    CMS
    Amazon S3
    Cloud Functions
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Host HTML, JS (React)
    file for CMS
    Save as
    Draft
    Post Campaign
    Data & Images
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)

    View Slide

  39. 40
    Architecture
    CMS
    Amazon S3
    Cloud Functions
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Host HTML, JS (React)
    file for CMS
    Publish
    Copy data to
    Production
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)

    View Slide

  40. 41
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Architecture
    CMS
    Amazon S3
    Cloud Functions
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Host HTML, JS (React)
    file for CMS
    Save as
    Draft
    Post campaign
    data and images
    Why are we using both and ?

    View Slide

  41. 42
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Architecture
    CMS
    Amazon S3
    Cloud Functions
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Host HTML, JS (React)
    file for CMS
    Save as
    Draft
    Post campaign
    data and images
    Do we need Cloud Function?

    View Slide

  42. 43
    Architecture
    CMS
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Authentication
    Service
    Authorization
    Database
    Google App
    Engine
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)

    View Slide

  43. 44
    Architecture
    CMS
    Amazon S3
    Cloud Functions
    Host HTML, JS (React)
    file for CMS
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)

    View Slide

  44. 45
    Codebase

    View Slide

  45. 46
    Architecture
    CMS
    Amazon S3
    Cloud Functions
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Host HTML, JS (React)
    file for CMS
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)

    View Slide

  46. 47
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Campaigns Data (JSON)
    & Static Files (HTML, JS)
    Architecture
    CMS
    Amazon S3
    Cloud Functions
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Host HTML, JS (React)
    file for CMS
    CMS
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    creation-tool

    View Slide

  47. 48
    Architecture

    View Slide

  48. 49
    CMS

    View Slide

  49. 50
    CMS

    View Slide

  50. 51
    CMS

    View Slide

  51. 52
    CMS

    View Slide

  52. 53
    CMS

    View Slide

  53. 54
    CMS

    View Slide

  54. 55
    Launch

    View Slide

  55. 56
    After Launching CMS
    - Authentication
    - Access Control
    - SSR

    View Slide

  56. 57
    Re-Architecture
    CMS
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Google App
    Engine
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    Auth0
    Cloud
    DataStore

    View Slide

  57. 58
    CMS
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Google App
    Engine
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    Auth0
    Cloud
    DataStore
    Re-Architecture

    View Slide

  58. 59
    CMS
    Campaign Page
    (Production)
    Campaign Page
    (Staging)
    Google App
    Engine
    Cloud Storage
    (Production)
    Cloud Storage
    (Staging)
    Auth0
    Cloud
    DataStore
    Create static HTML
    for SSR
    Re-Architecture

    View Slide

  59. 60
    Future...

    View Slide

  60. 61
    Future
    Segmentation
    Service
    Conversion
    Kicker
    Activity
    Logger
    Automation
    Service
    CMS Tool
    Banner
    Tool
    ML
    Notification

    View Slide

  61. 62
    Future
    Segmentation
    Service
    Conversion
    Kicker
    Activity
    Logger
    Automation
    Service
    CMS Tool
    Banner
    Tool
    ML
    Notification

    View Slide

  62. 63
    Future
    Segmentation
    Service
    Conversion
    Kicker
    Activity
    Logger
    Automation
    Service
    CMS Tool
    Banner
    Tool
    ML
    Notification

    View Slide

  63. 64
    Future
    Segmentation
    Service
    Conversion
    Kicker
    Activity
    Logger
    Automation
    Service
    CMS Tool
    Banner
    Tool
    ML
    Notification

    View Slide

  64. 65
    Conclusion

    View Slide

  65. 66
    We built the CMS step by step
    - Used cloud function first, and replaced it with GAE for a quick
    launch
    We built the CMS to create campaign pages easily
    - Can actually run more than 5 campaigns a month now
    - Decreased time needed to write code for LP, and can now focus
    on more important/fun things
    Conclusion

    View Slide

  66. 68
    Conclusion
    https://twitter.com/sottar_

    https://github.com/sottar

    https://www.linkedin.com/in/sota-ohara

    https://about.mercari.com/en/


    View Slide

  67. 69
    - React https://reactjs.org/
    - TypeScript https://www.typescriptlang.org/
    - styled-components https://www.styled-components.com/
    - nodejs https://nodejs.org/en/
    - jest https://jestjs.io/
    - Google Cloud Platform https://cloud.google.com/
    References

    View Slide