The presentation discusses the creation of a serverless CMS from scratch by Sota Ohara for Mercari, emphasizing the need for a system that allows easy campaign page creation without requiring programming skills from designers. It outlines the architecture, main features, and benefits of the CMS, such as reduced page creation time and easier content updates. The CMS was developed with a focus on accommodating new components and maintaining accessibility, leveraging various technologies like AWS and Google Cloud Services.

1. 1

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

3. 3
Sota Ohara
sottar_
sottar
Frontend Engineer, Tech Lead
at Mercari

4. 4
What Is Mercari?

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

6. 6
By the Numbers (JP/Full Year)
232
346.8
GMV¹
490.2B
In: billion JPY
FY
06/2017
FY
06/2018
21.2
33.4
Net Sales
46.2B
In: billion JPY
FY
06/2017
FY
06/2018
8.45
10.75
13.57M
In: Million
people
FY
06/2017
FY
06/2018
Source: Internal documents, from FY2018.6 Presentation Material
1. GMV after cancellation
2. Monthly Active Users 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. 7
Global
Non-Japanese in
the company
20%
40%
Non-Japanese
engineers
40 nationalities represented in the workforce
��
��

8. 8
Campaign Pages

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

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

11. 11
Campaign Pages
free commission fee
campaign

12. 12
Campaign Pages

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

14. 14
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. 15
Ask for QA
Ask for code
review
PM
Frontend Engineer
Review code
Complete development
Before Building the CMS
QA
check behaivior
Designer

16. 16
- 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. 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
Designers need to acquire knowledge about pug & css…
Frontend Engineers need to take time to review code...
��
Before Building the CMS

18. 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
��
We have to write a jQuery if JavaScript code is required (api
request, dynamic movement…)
Before Building the CMS

19. 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
��
Before Building the CMS

20. 20
=> 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. 21
Why We Created it from Scratch

22. 22
What We Want to Create

23. 23
What We Want to Create

24. 24
What We Want to Create

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

26. 26
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. 27
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. 28
Cons
- Need to implement a component if the campaign
page requires new component which isn’t provided
=> Will be decreasing
What We Want to Create

29. 29
=> 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. 30
How We Created the CMS

31. 31
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. 32
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. 33
Architecture

34. 34
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. 35
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. 36
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. 37
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. 38
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. 39
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. 40
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. 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
Do we need Cloud Function? 🤔

42. 42
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. 43
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. 44
Codebase

45. 45
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. 46
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. 47
Architecture

48. 48
CMS

49. 49
CMS

50. 50
CMS

51. 51
CMS

52. 52
CMS

53. 53
CMS

54. 54
Launch 🎉

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

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

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

58. 58
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. 59
Future...

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

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

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

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

64. 64
Conclusion

65. 65
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. 66
Conclusion
https://twitter.com/sottar_
https://github.com/sottar
https://github.com/sottar
https://about.mercari.com/en/

67. 67
- 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