Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
About me
Server Engineer
No-Code Paradigm
Projects
- GUI Mobile App Maker
- Analyph 3D Auto Converter Player
Slide 3
Slide 3 text
How we developed
Slide 4
Slide 4 text
How we developed
Backend Developer
0
Database
0
Server
0
Slide 5
Slide 5 text
How we developed
Backend Developer
0
Database
0
Server
0
Slide 6
Slide 6 text
How we developed
Data HTML
Slide 7
Slide 7 text
How we developed
Data
HTML
Developer
Planner
Slide 8
Slide 8 text
How we developed
Another event page
Top Banner...
Typo
Other Taiwanese
Planner
Slide 9
Slide 9 text
How we developed
Another event page
Top Banner...
Typo
Other Taiwanese
Planner
Slide 10
Slide 10 text
How we developed
Admin Page
Planner HTML
Slide 11
Slide 11 text
Headless CMS
How we developed
Planner HTML
Slide 12
Slide 12 text
What is Headless CMS
CMS
Headless CMS Traditional CMS
CMS
+
Frontend
Slide 13
Slide 13 text
What is Headless CMS
CMS
+
Frontend
CMS
Headless CMS Traditional CMS
Slide 14
Slide 14 text
What is Headless CMS
Headless CMS Traditional CMS
CMS
+
Frontend
CMS
Slide 15
Slide 15 text
What is Headless CMS
Vanilla
js
React Others
Vue
Backends
Frontends
API
Headless CMS
Slide 16
Slide 16 text
What is Headless CMS
Vanilla
js
React Others
Vue
Frontends
API
Headless CMS
Backends
Slide 17
Slide 17 text
What is Headless CMS
Vanilla
js
React Others
Vue
Frontends
API
Headless CMS
Backends
Slide 18
Slide 18 text
What is Headless CMS
Vanilla
js
React Others
Vue
Frontends
API
Headless CMS
Backends
Slide 19
Slide 19 text
What is Headless CMS
Slide 20
Slide 20 text
What is the difference?
GET /notices
Notice
Title
Content
Author
CreatedAt
UpdatedAt
Slide 21
Slide 21 text
What is Headless CMS
API
Development
Deployment
Database
Design
Slide 22
Slide 22 text
What is Headless CMS
API
Development
Deployment
Database
Design
Slide 23
Slide 23 text
Database Design
create table notice
(
title varchar(100) not null,
content text not null,
author varchar(20) not null,
created_at datetime not null,
updated_at datetime not null
);
What is Headless CMS
Slide 24
Slide 24 text
What is Headless CMS
API
Development
Deployment
Database
Design
Slide 25
Slide 25 text
const express = require("express");
const router = express.Router();
router.get("/notices", (req, res) => {
connection.query("SELECT * FROM notice", function (err, rows, fields) {
res.send(rows);
});
});
module.exports = router;
What is Headless CMS
API Development
Slide 26
Slide 26 text
What is Headless CMS
API
Development
Database
Design
Deployment
Slide 27
Slide 27 text
What is Headless CMS
Deployment
Build / Upload
Code Server
Slide 28
Slide 28 text
What is Headless CMS
Headless CMS
Slide 29
Slide 29 text
Headless CMS
What is Headless CMS
Slide 30
Slide 30 text
Headless CMS
What is Headless CMS
Title
Slide 31
Slide 31 text
Headless CMS
What is Headless CMS
Content
Slide 32
Slide 32 text
Headless CMS
What is Headless CMS
Slide 33
Slide 33 text
What is Headless CMS
API
Development
Deployment
Database
Design
Headless CMS
Slide 34
Slide 34 text
3 years ago
LINE DEVELOPER DAY 2020
Slide 35
Slide 35 text
Static website projects
LINE CAREERS
LINE CREATIVE
Slide 36
Slide 36 text
Problems
Slide 37
Slide 37 text
How to use Headless CMS
JavaScript
APIs
Markup
STACK
Slide 38
Slide 38 text
How to use Headless CMS
Headless CMS
Static Site
Generator
Slide 39
Slide 39 text
It's not enough
Website
iOS Others
Android
API
Headless CMS
Frontend
Slide 40
Slide 40 text
Improve Headless CMS
Slide 41
Slide 41 text
Move model structures to database
Headless CMS Database
Article
Model
Tag
Model
..
Model
Frontend
Solution I - Stable
Slide 42
Slide 42 text
Skip restart
Developer Headless CMS Database
Edit collection model
Edit model data
Update database structure
Edit completed collection model
Restart
Solution I - Stable
Slide 43
Slide 43 text
Skip restart
Developer Headless CMS Database
Edit collection model
Edit model data
Update database structure
Edit completed collection model
Solution I - Stable
Slide 44
Slide 44 text
Improve scaling
Database
Frontend
Headless CMS
Headless CMS
Headless CMS
Solution I - Stable
Slide 45
Slide 45 text
0
100
200
300
400
0s 6s 18s 24s 30s 36s 42s 48s 60s
55.5
53
57
55
60
47
42.5
39.5
32
309
299
288
303
299
301
313
235
180
Solution I
V1
Transactions per second
Solution I - Stable
400%
Slide 46
Slide 46 text
Complex model structures
Notice
Release Headless
CMS
2022. 10. 14. 2022. 9. 28. 2022. 8. 22.
Solution II - High performance
Slide 47
Slide 47 text
Complex model structures
Notice
Release Headless
CMS
2022. 10. 14. 2022. 9. 28. 2022. 8. 22.
Solution II - High performance
Slide 48
Slide 48 text
Complex model structures
Notice
Release Headless
CMS
2022. 10. 14. 2022. 9. 28. 2022. 8. 22.
Solution II - High performance
Slide 49
Slide 49 text
Complex model structures
Notice
Release Headless
CMS
2022. 10. 14. 2022. 9. 28. 2022. 8. 22.
Solution II - High performance
Slide 50
Slide 50 text
Complex model structures
Notice
Release Headless
CMS
2022. 10. 14. 2022. 9. 28. 2022. 8. 22.
Solution II - High performance
Slide 51
Slide 51 text
Notice
Title
Content
Author
CreatedAt
UpdatedAt
Type
VideoURL
ImageURL
Add Fields
Complex model structures
Solution II - High performance
Slide 52
Slide 52 text
Notice
Title
Content
Author
CreatedAt
UpdatedAt
Type
VideoURL
ImageURL
Type Content VideoURL ImageURL
TEXT Release Headless CMS NULL NULL
VIDEO NULL https://.. NULL
IMAGE NULL NULL https://..
Complex model structures
Solution II - High performance
Slide 53
Slide 53 text
Notice
Title
Content
Author
CreatedAt
UpdatedAt
URL
Video
URL
Image
Content
Text
Complex model structures
Solution II - High performance
Slide 54
Slide 54 text
Complex model structures
Solution II - High performance
Slide 55
Slide 55 text
Complex model structures
Solution II - High performance
Slide 56
Slide 56 text
Notice
Title
Content
Author
CreatedAt
UpdatedAt
GET /notices “content”: {
"_type": “image”,
"imageURL": “https://.."
}
Complex model structures
Solution II - High performance
Slide 57
Slide 57 text
Too slow modeling time
Solution II - High performance
Notice
Title
Content
Author
Image Type
Video Type
Text Type
KeyVisual
Comment
Message
Author
Session
Track
Title
…
Category
Name
…
Member
Reaction
Component Collection
Slide 58
Slide 58 text
Too slow modeling time
Solution II - High performance
Notice
Title
Content
Author
Image Type
Video Type
Text Type
KeyVisual
Comment
Message
Author
Session
Track
Title
…
Category
Name
…
Member
Reaction
Component Collection
Slide 59
Slide 59 text
Too slow modeling time
Solution II - High performance
Notice
Title
Content
Author
Image Type
Video Type
Text Type
KeyVisual
Comment
Message
Author
Session
Track
Title
…
Category
Name
…
Member
Reaction
Component Collection
Slide 60
Slide 60 text
Time
Collection Relation Count
1 3 5 8 10
Before
Processing time
Solution II - High performance
Slide 61
Slide 61 text
Improve model storage optimization
Headless CMS
Model
Cache Storage
Database
Frontend
Solution II - High performance
Slide 62
Slide 62 text
Frontend Headless CMS Database
Get API /notices
Response
Select Database
Get model structure
Define Notice Model
Flow of generating model structure using Database
Solution II - High performance
Slide 63
Slide 63 text
Headless CMS Database
Get API /notices
Response
Select Database
Define Notice Model
Get model structure
Frontend
Flow of generating model structure using Database
Solution II - High performance
Slide 64
Slide 64 text
Headless CMS Database
Response
Select Database
Define Notice Model
Get model structure
Frontend
Get API /notices
Flow of generating model structure using Database
Solution II - High performance
Slide 65
Slide 65 text
Headless CMS Database
Response
Select Database
Get model structure
Frontend
Relation Models
Define Notice Model
Get API /notices
Flow of generating model structure using Database
Solution II - High performance
Recursion
Slide 66
Slide 66 text
Headless CMS Database
Get model structure
Response
Select Database
Define Notice Model
Frontend
Get API /notices
Flow of generating model structure using Database
Solution II - High performance
Slide 67
Slide 67 text
Headless CMS Database
Response
Select Database
Get model structure
Frontend
Define Notice Model
Get API /notices
Flow of generating model structure using Database
Solution II - High performance
Slide 68
Slide 68 text
Get API /notices
Response
Get model structure
Frontend Headless CMS Model Cache
Storage Database
Select Database
Define Notice Model
Flow of generating model structure using Model Cache Storage
Solution II - High performance
Slide 69
Slide 69 text
Get API /notices
Response
Get model structure
Headless CMS Model Cache
Storage Database
Select Database
Frontend
Define Notice Model
Flow of generating model structure using Model Cache Storage
Solution II - High performance
Slide 70
Slide 70 text
Response
Get model structure
Headless CMS Model Cache
Storage Database
Select Database
Frontend
Define Notice Model
Get API /notices
Flow of generating model structure using Model Cache Storage
Solution II - High performance
Slide 71
Slide 71 text
Response
Get model structure
Headless CMS Model Cache
Storage Database
Select Database
Frontend
Define Notice Model
Get API /notices
Flow of generating model structure using Model Cache Storage
Solution II - High performance
Slide 72
Slide 72 text
Response
Get model structure
Headless CMS Model Cache
Storage Database
Select Database
Frontend
Define Notice Model
Get API /notices
Flow of generating model structure using Model Cache Storage
Solution II - High performance
Slide 73
Slide 73 text
Time
Collection Relation Count
1 3 5 8 10
After
Before
Processing time
Solution II - High performance
Slide 74
Slide 74 text
One more thing
Slide 75
Slide 75 text
Too slow reading time
Notice
Title
Content
Author
Image Type
Video Type
Text Type
KeyVisual
Comment
Message
Author
Session
Track
Title
…
Category
Name
…
Member
Solution II - High performance
Clients
Headless CMS
GET /notices
Slide 76
Slide 76 text
Too slow reading time
Notice
Title
Content
Author
Comment
Message
Author
Category
Name
…
Member
Image Type
Video Type
Text Type
KeyVisual
Solution II - High performance
Reaction
Notice
Title
Content
Author
Image Type
Video Type
Text Type
KeyVisual
Comment
Message
Author
Category
Name
…
Member
Component Collection
Slide 77
Slide 77 text
Improve data optimization
title relation_data
Home Renewal Open {“category”: [..], “comment”: [..], “member”: [..]}
Solution II - High performance
Slide 78
Slide 78 text
Too slow reading time
Notice
Title
Content
Author
Comment
Message
Author
Category
Name
…
Member
Image Type
Video Type
Text Type
KeyVisual
Solution II - High performance
Reaction
Notice
Title
Content
Author
Image Type
Video Type
Text Type
KeyVisual
Comment
Message
Author
Category
Name
…
Member
Component Collection
Slide 79
Slide 79 text
Improve data optimization
title relation_data
Home Renewal Open {“category”: [..], “comment”: [..], “member”: [..]}
[{“content": “cool”},
{“content": “Awesome”}]
[{“content": “cool”,
“reaction”, “Very Good”},
{“content": “Awesome”,
“reaction”, “Good”}]
Solution II - High performance
Slide 80
Slide 80 text
Improve architecture
Solution III - Friendly
Project
Clone
Webhook
Item
scheduling
Audit
Logging
Item
Normalization
Item API
….
Headless CMS
Slide 81
Slide 81 text
Project Clone
PROD
DEV
Clients
Developer
Clone
Solution III - Friendly
Slide 82
Slide 82 text
Webhook
Headless CMS
Push Server
Deploy Server
… Server
Clients
Webhook
PUT /notices
Solution III - Friendly
Slide 83
Slide 83 text
Item scheduling
Solution III - Friendly
Open Tech-Verse Nov.17-18
Slide 84
Slide 84 text
Improve architecture
Database
Solution II - High performance
Change Data
Capture
Headless CMS
Slide 85
Slide 85 text
Improve architecture
Solution III - Friendly
Project
Clone
Webhook
Item
scheduling
Audit
Logging
Item
Normalization
Change Data
Capture
Stream
Slide 86
Slide 86 text
Projects
Slide 87
Slide 87 text
Projects
Slide 88
Slide 88 text
Projects
Slide 89
Slide 89 text
Projects
23
LINE DEVELOPER DAY 2020
Server
1
LINE DEVELOPER DAY 2021
Server
(LINE Push Server)
Slide 90
Slide 90 text
Projects
Slide 91
Slide 91 text
Projects
Slide 92
Slide 92 text
Conclusion
131+
Create project / month
4400%
Transaction Per Second
Slide 93
Slide 93 text
Thank you