$30 off During Our Annual Pro Sale. View Details »

Headless CMS in LINE

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

Tech-Verse2022
PRO

November 18, 2022
Tweet

More Decks by Tech-Verse2022

Other Decks in Technology

Transcript

  1. None
  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