Fast rendering and More configurable settings in LINE TODAY @ TECHPULSE 2023

- Speaker: Rex Lin
- Event: http://techpulse.line.me/

LINE TODAY 作為數一數二的內容媒介平台，為了簡化與自動化文章編輯工作，開發許多 Module 使文章各區塊設定能夠架構化。

而 LINE TODAY 中有許多因應各種節慶所開發的在地化功能，其中泰國的樂透為最高流量需求功能之一，在這些功能中有哪些細節需要注意呢？讓我們一起來看看吧！

Transcript

1. View Slide

2. Agenda
   › LINE TODAY Services
   › Architecture
   › Modularized Page Setting
   › Features
   2
   

   View Slide

3. LINE TODAY Stays With You Today
   3
   12:00
   News
   International/
   Entertainment
   15:00
   Official Account
   News / Economics
   09:00
   Recommendations
   Weather / News
   18:00
   LIVE
   News / Sports
   21:00
   Daily Life
   Poll / Quiz
   

   View Slide

4. THAILAND TAIWAN
   HONG KONG
   

   View Slide

5. LINE TODAY
   Taiwan
   18M MAU
   

   View Slide

6. LINE TODAY Architecture
   6
   CDN
   Object
   Storage
   In Mem
   Cache
   Backend Server
   Frontend Server
   Cache
   Server
   Mini Service
   Feeding Service
   Internal CMS
   External CMS
   Vue.js
   Third Party API
   Content
   Provider
   Internal
   Editor
   External Editor
   Report Service
   Data Warehouse
   ML Data
   Analysis
   

   View Slide

7. LINE TODAY Architecture
   7
   CDN
   96%
   Object
   Storage Backend Server
   Frontend Server
   Cache
   Server
   Mini Service
   Feeding Service
   Internal CMS
   External CMS
   Vue.js
   Third Party API
   Content
   Provider
   Internal
   Editor
   External Editor
   Report Service
   Data Warehouse
   ML Data
   Analysis
   4%
   In Mem
   Cache
   

   View Slide

8. LINE TODAY Architecture
   8
   CDN
   Object
   Storage
   Frontend Server
   Cache
   Server
   Data
   Backend Server
   Mini Service
   Feeding Service
   Internal CMS
   External CMS
   Vue.js
   Third Party API
   Content
   Provider
   Internal
   Editor
   External Editor
   Report Service
   ML Data
   Analysis
   In Mem
   Cache
   

   View Slide

9. LINE TODAY Architecture
   9
   CDN
   Object
   Storage Backend Server
   Frontend Server
   Cache
   Server
   Mini Service
   Feeding Service
   Internal CMS
   External CMS
   Vue.js
   Third Party
   Content
   Provider
   Internal
   External
   Report Service
   Data
   ML Data
   Analysis
   Vue.js
   In Mem
   Cache
   

   View Slide

10. LINE TODAY Architecture
    10
    CDN
    Object
    Storage
    Frontend Server
    Cache
    Server
    Data
    Data
    Backend Server
    Mini Service
    Feeding Service
    Internal CMS
    External CMS
    Vue.js
    Third Party API
    Content
    Provider
    Internal
    Editor
    External Editor
    Report Service
    ML Data
    Analysis
    In Mem
    Cache
    

    View Slide

11. LINE TODAY Architecture
    11
    CDN
    Object
    Storage
    Frontend Server
    Cache
    Server
    Data
    Backend Server
    Mini Service
    Feeding Service
    Internal CMS
    External CMS
    Vue.js
    Third Party API
    Content
    Provider
    Internal
    Editor
    External Editor
    Report Service
    ML Data
    Analysis
    In Mem
    Cache
    

    View Slide

12. How to publish the contents ASAP?
    12
    Slow webpage loading
    Long cache time due to heavy traffic
    Bulky API response, no flexibility in portal page
    Problem
    Solutions
    HTTP/2 with new API design
    Decrease the cache time
    Modularized page setting
    

    View Slide

13. LINE TODAY Architecture
    13
    CDN
    Object
    Storage Backend Server
    In Mem
    Cache
    Frontend Server
    Cache
    Server
    Mini Service
    Feeding Service
    Internal CMS
    External CMS
    Vue.js
    Third Party API
    Content
    Provider
    Internal Editor
    External Editor
    Report Service
    Data Warehouse
    ML Data
    Analysis
    HTTP/2
    

    View Slide

14. How to publish the contents ASAP?
    14
    Problem
    Solutions
    Slow webpage loading
    Long cache time due to heavy traffic
    Bulky API response, no flexibility in portal page
    HTTP/2 with new API design
    Decrease the cache time
    Modularized page setting
    

    View Slide

15. LINE TODAY Architecture
    15
    CDN
    Object
    Storage Backend Server
    In Mem
    Cache
    Frontend Server
    Cache
    Server
    Mini Service
    Feeding Service
    Internal CMS
    External CMS
    Third Party API
    Content
    Provider
    Internal Editor
    External Editor
    Report Service
    Data Warehouse
    ML Data
    Analysis
    In
    Mem
    Cache
    In
    Mem
    Cache
    In
    Mem
    Cache
    In
    Mem
    Cache
    In
    Mem
    Cache
    

    View Slide

16. How to publish the contents ASAP?
    16
    Slow webpage loading
    Long cache time due to heavy traffic
    Bulky API response, no flexibility in portal page
    Problem
    Solutions
    HTTP/2 with new API design
    Decrease the cache time
    Modularized page setting
    

    View Slide

17. Modularized Page Setting
    17
    Headline news
    Latest news
    Topic
    Trending news
    Weather
    Quiz
    

    View Slide

18. Modularized Page Setting
    Editor
    Content Management System
    Page
    Subscribe Module
    Article Module
    Recommend
    Module
    Comment Module
    Page Mapping Rule Page Setting
    Service
    Subscribe
    Module
    Article
    Module
    Recommend
    Module
    Comment
    Module
    Storage
    Rule Page
    Rule Page
    Rule Page
    Rule Page
    Content Provider
    Rule
    Category Display Mode
    

    View Slide

19. Modularized Page Setting
    Editor
    Content Management System
    Page
    Subscribe Module
    Article Module
    Recommend
    Module
    Comment Module
    Page Setting
    Service
    Subscribe
    Module
    Article
    Module
    Recommend
    Module
    Comment
    Module
    Storage
    Rule Page
    Rule Page
    Rule Page
    Rule Page
    Content Provider
    Rule
    Category Display Mode
    Page Mapping Rule
    

    View Slide

20. Pros of Modularized Page Setting
    20
    Fast rendering
    Decrease API payload size
    Render first frame modules by Server-Side Render
    System
    Editor
    Easier configuration
    More configurable page pattern
    Reduce duplicated page setting
    

    View Slide

21. A/B Testing, Gradual Rollout Framework
    21
    Editor
    Content Management System
    Page A
    News Module
    Weather Module
    Fortune Module
    Page
    Setting
    Service
    Page B
    News Module
    AD Module
    Weather Module
    Page Mapping
    Rule
    Grou
    p A
    Page
    A
    Grou
    p B
    Page
    B
    News
    Weather
    Fortune
    News
    AD

    Weather
    User Grouping System
    User Group Mapping
    Group A
    User
    B ID
    Group B Group C
    User
    A ID
    

    View Slide

22. A/B Testing, Gradual Rollout Framework
    22
    Editor
    Content Management System
    Page A
    News Module
    Weather Module
    Fortune Module
    Page
    Setting
    Service
    Page B
    News Module
    AD Module
    Weather Module
    Page Mapping
    Rule
    Grou
    p A
    Page
    A
    Grou
    p B
    Page
    B
    News
    Weather
    Fortune
    News
    AD

    Weather
    User Grouping System
    User Group Mapping
    Group A
    User
    B ID
    Group B
    Get user group by user ID
    Group C
    User
    A ID
    Hash Hash
    0 35 60 100
    

    View Slide

23. A/B Testing, Gradual Rollout Framework
    23
    Editor
    Content Management System
    Page A
    News Module
    Weather Module
    Fortune Module
    Page
    Setting
    Service
    Page B
    News Module
    AD Module
    Weather Module
    Page Mapping
    Rule
    Grou
    p A
    Page
    A
    Grou
    p B
    Page
    B
    User Grouping System
    User Group Mapping
    Group A
    User
    B ID
    Group B Group C
    User
    A ID
    News
    Weather
    Fortune
    News
    AD

    Weather
    AD

    Get user group by user ID
    

    View Slide

24. 24
    Features
    

    View Slide

25. Lottery
    25
    Instant News
    Official Account
    

    View Slide

26. Lottery Resources Tuning

    26
    apiVersion: apps/v1

    kind: Deployment

    metadata:

    name: today-lottery-service

    spec:

    replicas: 2

    template:

    spec:

    containers:

    - name: today-lottery-service

    resources:

    requests:

    cpu: 250m

    memory: 1536Mi

    limits:

    cpu: 500m

    memory: 1536Mi
    

    View Slide

27. Lottery Resources Tuning

    27
    Request
    Limit
    

    View Slide

28. Lottery Resources Tuning

    28
    apiVersion: apps/v1

    kind: Deployment

    metadata:

    name: today-lottery-service

    spec:

    replicas: 2

    template:

    spec:

    containers:

    - name: today-lottery-service

    resources:

    requests:

    cpu: 250m

    memory: 1536Mi

    limits:

    cpu: 500m

    memory: 1536Mi
    AS IS
    apiVersion: apps/v1

    kind: Deployment

    metadata:

    name: today-lottery-service

    spec:

    replicas: 3

    template:

    spec:

    containers:

    - name: today-lottery-service

    resources:

    requests:

    cpu: 200m

    memory: 1024Mi

    limits:

    cpu: 500m

    memory: 1024Mi
    TO BE
    

    View Slide

29. Election
    29
    

    View Slide

30. Quiz
    30
    

    View Slide

31. Summary
    › LINE TODAY Micro-service Architecture
    › Modularized Page Setting: Fast rendering
    and efficient settings
    › A/B Testing Framework
    › Features
    31
    

    View Slide

32. Thank you
    32
    

    View Slide