Headless CMS in LINE

Kwangyong Park (LINE Plus / LandPress Dev 2 / Senior Server Engineer)

https://tech-verse.me/ja/sessions/31
https://tech-verse.me/en/sessions/31
https://tech-verse.me/ko/sessions/31

Transcript

2. About me Server Engineer No-Code Paradigm Projects - GUI Mobile App Maker - Analyph 3D Auto Converter Player
3. How we developed
4. How we developed Backend Developer 0 Database 0 Server 0
5. How we developed Backend Developer 0 Database 0 Server 0
6. How we developed Data HTML
7. How we developed Data HTML Developer Planner
8. How we developed Another event page Top Banner... Typo Other Taiwanese Planner
9. How we developed Another event page Top Banner... Typo Other Taiwanese Planner
10. How we developed Admin Page Planner HTML
11. Headless CMS How we developed Planner HTML
12. What is Headless CMS CMS Headless CMS Traditional CMS CMS + Frontend
13. What is Headless CMS CMS + Frontend CMS Headless CMS Traditional CMS
14. What is Headless CMS Headless CMS Traditional CMS CMS + Frontend CMS
15. What is Headless CMS Vanilla js React Others Vue Backends Frontends API Headless CMS
16. What is Headless CMS Vanilla js React Others Vue Frontends API Headless CMS Backends
17. What is Headless CMS Vanilla js React Others Vue Frontends API Headless CMS Backends
18. What is Headless CMS Vanilla js React Others Vue Frontends API Headless CMS Backends
19. What is Headless CMS
20. What is the difference? GET /notices Notice Title Content Author CreatedAt UpdatedAt
21. What is Headless CMS API Development Deployment Database Design
22. What is Headless CMS API Development Deployment Database Design
23. 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
24. What is Headless CMS API Development Deployment Database Design
25. 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
26. What is Headless CMS API Development Database Design Deployment
27. What is Headless CMS Deployment Build / Upload Code Server
28. What is Headless CMS Headless CMS
29. Headless CMS What is Headless CMS
30. Headless CMS What is Headless CMS Title
31. Headless CMS What is Headless CMS Content
32. Headless CMS What is Headless CMS
33. What is Headless CMS API Development Deployment Database Design Headless CMS
34. 3 years ago LINE DEVELOPER DAY 2020
35. Static website projects LINE CAREERS LINE CREATIVE
36. Problems
37. How to use Headless CMS JavaScript APIs Markup STACK
38. How to use Headless CMS Headless CMS Static Site Generator
39. It's not enough Website iOS Others Android API Headless CMS Frontend
40. Improve Headless CMS
41. Move model structures to database Headless CMS Database Article Model Tag Model .. Model Frontend Solution I - Stable
42. Skip restart Developer Headless CMS Database Edit collection model Edit model data Update database structure Edit completed collection model Restart Solution I - Stable
43. Skip restart Developer Headless CMS Database Edit collection model Edit model data Update database structure Edit completed collection model Solution I - Stable
44. Improve scaling Database Frontend Headless CMS Headless CMS Headless CMS Solution I - Stable
45. 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%
46. Complex model structures Notice Release Headless CMS 2022. 10. 14. 2022. 9. 28. 2022. 8. 22. Solution II - High performance
47. Complex model structures Notice Release Headless CMS 2022. 10. 14. 2022. 9. 28. 2022. 8. 22. Solution II - High performance
48. Complex model structures Notice Release Headless CMS 2022. 10. 14. 2022. 9. 28. 2022. 8. 22. Solution II - High performance
49. Complex model structures Notice Release Headless CMS 2022. 10. 14. 2022. 9. 28. 2022. 8. 22. Solution II - High performance
50. Complex model structures Notice Release Headless CMS 2022. 10. 14. 2022. 9. 28. 2022. 8. 22. Solution II - High performance
51. Notice Title Content Author CreatedAt UpdatedAt Type VideoURL ImageURL Add Fields Complex model structures Solution II - High performance
52. 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
53. Notice Title Content Author CreatedAt UpdatedAt URL Video URL Image Content Text Complex model structures Solution II - High performance
54. Complex model structures Solution II - High performance
55. Complex model structures Solution II - High performance
56. Notice Title Content Author CreatedAt UpdatedAt GET /notices “content”: { "_type": “image”, "imageURL": “https://.." } Complex model structures Solution II - High performance
57. 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
58. 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
59. 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
60. Time Collection Relation Count 1 3 5 8 10 Before Processing time Solution II - High performance
61. Improve model storage optimization Headless CMS Model Cache Storage Database Frontend Solution II - High performance
62. 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
63. 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
64. 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
65. 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
66. 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
67. 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
68. 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
69. 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
70. 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
71. 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
72. 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
73. Time Collection Relation Count 1 3 5 8 10 After Before Processing time Solution II - High performance
74. One more thing
75. 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
76. 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
77. Improve data optimization title relation_data Home Renewal Open {“category”: [..], “comment”: [..], “member”: [..]} Solution II - High performance
78. 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
79. 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
80. Improve architecture Solution III - Friendly Project Clone Webhook Item scheduling Audit Logging Item Normalization Item API …. Headless CMS
81. Project Clone PROD DEV Clients Developer Clone Solution III - Friendly
82. Webhook Headless CMS Push Server Deploy Server … Server Clients Webhook PUT /notices Solution III - Friendly
83. Item scheduling Solution III - Friendly Open Tech-Verse Nov.17-18
84. Improve architecture Database Solution II - High performance Change Data Capture Headless CMS
85. Improve architecture Solution III - Friendly Project Clone Webhook Item scheduling Audit Logging Item Normalization Change Data Capture Stream
86. Projects
87. Projects
88. Projects
89. Projects 23 LINE DEVELOPER DAY 2020 Server 1 LINE DEVELOPER DAY 2021 Server (LINE Push Server)
90. Projects
91. Projects
92. Conclusion 131+ Create project / month 4400% Transaction Per Second
93. Thank you