create own CMS from scratch

1bf676e4bd36a48bf616c82d6f52c83a?s=47 sota ohara
November 08, 2019

create own CMS from scratch

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

1bf676e4bd36a48bf616c82d6f52c83a?s=128

sota ohara

November 08, 2019
Tweet

Transcript

  1. 1

  2. 2 Creating Serverless CMS from Scratch Sota Ohara JS Fest

    @ Kyiv November 8, 2019
  3. 4 ota Ohara
 sottar_
 sottar
 Frontend Engineer, ech Lead
 at

    Mercari

  4. 5 What Is Mercari?

  5. 6 About February 1st, 2013 Established Tokyo, Sendai, Fukuoka, Palo

    Alto, Portland, Boston Offices 1800+ Including subsidiaries Headcount 6
  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
  7. 8 Global Non-Japanese in the company 20% 40% Non-Japanese engineers

    40 nationalities represented in the workforce
  8. 9 Campaign Pages

  9. 10 Campaign Pages provide 5% off ticket for customer participate

    button for this campaign deadline of this campaign
  10. 11 Campaign Pages giving 500 yen (max) points if customer

    use the new feature use new feature button
  11. 12 Campaign Pages free commission fee campaign

  12. 13 Campaign Pages

  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...
  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
  15. 16 Ask for QA Ask for code review PM Frontend

    Engineer Review code Complete development Before Building the CMS QA check behaivior Designer
  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
  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
  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
  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
  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
  21. 22 Why We Created it from Scratch

  22. 23 What We Want to Create

  23. 24 What We Want to Create

  24. 25 What We Want to Create

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

    to Create
  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
  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
  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
  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
  30. 31 How We Created the CMS

  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
  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
  33. 34 Architecture

  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)
  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)
  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)
  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)
  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)
  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)
  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 ?
  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?
  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)
  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)
  44. 45 Codebase

  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)
  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
  47. 48 Architecture

  48. 49 CMS

  49. 50 CMS

  50. 51 CMS

  51. 52 CMS

  52. 53 CMS

  53. 54 CMS

  54. 55 Launch

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

    SSR
  56. 57 Re-Architecture CMS Campaign Page (Production) Campaign Page (Staging) Google

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

    Engine Cloud Storage (Production) Cloud Storage (Staging) Auth0 Cloud DataStore Re-Architecture
  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
  59. 60 Future...

  60. 61 Future Segmentation Service Conversion Kicker Activity Logger Automation Service

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

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

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

    CMS Tool Banner Tool ML Notification
  64. 65 Conclusion

  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
  66. 68 Conclusion https://twitter.com/sottar_
 https://github.com/sottar
 https://www.linkedin.com/in/sota-ohara
 https://about.mercari.com/en/


  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