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

Fast Rendering and Efficient Settings in LINE TODAY
High Traffic Feature in Thailand

Fast Rendering and Efficient Settings in LINE TODAY
High Traffic Feature in Thailand

LINE Developers Thailand

September 10, 2022
Tweet

More Decks by LINE Developers Thailand

Other Decks in Technology

Transcript

  1. Fast Rendering and Efficient Settings in LINE TODAY

    High Traffic Feature in Thailand
    Rex Lin - LINE TODAY Backend Developer


    03/09/2022

    View Slide

  2. • LINE TODAY Services


    • Architecture


    • Modularized Page Setting


    • Thailand Features
    Agenda

    View Slide

  3. • LINE TODAY Services


    • Architecture


    • Modularized Page Setting


    • Thailand Features
    Agenda

    View Slide

  4. LINE TODAY Stays With You Today
    12:00

    News
    International/

    Entertainment
    15:00

    LIVE
    Lottery / Fortune
    09:00

    Recommendations
    Weather / News

    18:00

    Official Account
    News / Economics

    21:00

    Daily Life
    Quiz / Poll

    View Slide

  5. LINE TODAY Stays With You Today
    12:00

    News
    International/

    Entertainment
    15:00

    LIVE
    Lottery / Fortune
    09:00

    Recommendations
    Weather / News

    18:00

    Official Account
    News / Economics

    21:00

    Daily Life
    Quiz / Poll

    View Slide

  6. LINE TODAY Stays With You Today
    12:00

    News
    International/

    Entertainment
    15:00

    LIVE
    Lottery / Fortune
    09:00

    Recommendations
    Weather / News

    18:00

    Official Account
    News / Economics

    21:00

    Daily Life
    Quiz / Poll

    View Slide

  7. Taiwan Thailand Hong Kong

    View Slide

  8. LINE TODAY Thailand
    38M MAU

    View Slide

  9. 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
    LINE TODAY Architecture
    ML Data
    Analysis

    View Slide

  10. CDN
    96%
    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
    LINE TODAY Architecture
    4%
    ML Data
    Analysis

    View Slide

  11. CDN
    96%
    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
    LINE TODAY Architecture
    4%
    ML Data
    Analysis

    View Slide

  12. 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
    LINE TODAY Architecture
    ML Data
    Analysis

    View Slide

  13. 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
    LINE TODAY Architecture
    ML Data
    Analysis

    View Slide

  14. 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
    LINE TODAY Architecture
    ML Data
    Analysis

    View Slide

  15. 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
    LINE TODAY Architecture
    ML Data
    Analysis

    View Slide

  16. 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
    LINE TODAY Architecture
    ML Data
    Analysis

    View Slide

  17. 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
    LINE TODAY Architecture
    ML Data
    Analysis

    View Slide

  18. 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
    LINE TODAY Architecture
    ML Data
    Analysis

    View Slide

  19. 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
    LINE TODAY Architecture
    ML Data
    Analysis

    View Slide

  20. 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
    LINE TODAY Architecture
    ML Data
    Analysis

    View Slide

  21. 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
    LINE TODAY Architecture
    ML Data
    Analysis

    View Slide

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


    Problem
    Solutions
    How to publish the contents ASAP?

    View Slide

  23. 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
    HTTP/2 with new API design
    ML Data
    Analysis
    HTTP/2

    View Slide

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


    Problem
    Solutions
    How to publish the contents ASAP?

    View Slide

  25. CDN
    Object
    Storage
    In
    Mem
    Cache
    Backend Server
    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
    Decrease the cache time
    ML Data
    Analysis
    HTTP/2
    In
    Mem
    Cache
    In
    Mem
    Cache
    In
    Mem
    Cache
    In
    Mem
    Cache
    In
    Mem
    Cache

    View Slide

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


    Problem
    Solutions
    How to publish the contents ASAP?

    View Slide

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


    Problem
    Solutions
    How to publish the contents ASAP?

    View Slide

  28. Headline news module
    Latest news module
    Topic module
    Trending news module
    Weather module
    Merit-date module
    Modularized Page Setting
    Fortune stick module

    View Slide

  29. Headline news module
    Latest news module
    Topic module
    Trending news module
    Weather module
    Merit-date module
    Modularized Page Setting
    Fortune stick module

    View Slide

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

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  37. Pros of Modularized Page Setting
    Fast rendering


    Decrease API payload size


    Render first frame modules by Server-Side Render


    Easier configuration


    More configurable page pattern


    Reduce duplicated page setting
    System
    Editor

    View Slide

  38. Pros of Modularized Page Setting
    Fast rendering


    Decrease API payload size


    Render first frame modules by Server-Side Render


    Easier configuration


    More configurable page pattern


    Reduce duplicated page setting
    System
    Editor

    View Slide

  39. Pros of Modularized Page Setting
    Fast rendering


    Decrease API payload size


    Render first frame modules by Server-Side Render


    Easier configuration


    More configurable page pattern


    Reduce duplicated page setting
    System
    Editor

    View Slide

  40. Pros of Modularized Page Setting
    Fast rendering


    Decrease API payload size


    Render first frame modules by Server-Side Render


    Easier configuration


    More configurable page pattern


    Reduce duplicated page setting
    System
    Editor

    View Slide

  41. A/B Testing, Gradual Rollout Framework
    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
    Group
    A
    Page
    A
    Group
    B
    Page
    B
    News
    Weather
    Fortune
    News
    AD

    (Advertisement)
    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

    View Slide

  42. A/B Testing, Gradual Rollout Framework
    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
    Group
    A
    Page
    A
    Group
    B
    Page
    B
    News
    Weather
    Fortune
    News
    AD

    (Advertisement)
    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

    View Slide

  43. A/B Testing, Gradual Rollout Framework
    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
    Group
    A
    Page
    A
    Group
    B
    Page
    B
    News
    Weather
    Fortune
    News
    AD

    (Advertisement)
    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

    View Slide

  44. A/B Testing, Gradual Rollout Framework
    Editor
    Content Management System
    Page A
    News Module
    Weather Module
    Fortune Module
    Page
    Setting
    Service
    User Grouping System
    User Group Mapping
    Group A
    User
    B ID
    Group B
    Page B
    News Module
    AD Module
    Weather Module
    Page Mapping Rule
    Group
    A
    Page
    A
    Group
    B
    Page
    B
    Get user group by user ID
    News
    Weather
    Fortune
    News
    AD

    (Advertisement)
    Weather
    Group C
    0 35 60 100
    User
    A ID
    Hash Hash

    View Slide

  45. A/B Testing, Gradual Rollout Framework
    Editor
    Content Management System
    Page A
    News Module
    Weather Module
    Fortune Module
    Page
    Setting
    Service
    User Grouping System
    User Group Mapping
    Group A
    User
    B ID
    Group B
    Page B
    News Module
    AD Module
    Weather Module
    Page Mapping Rule
    Group
    A
    Page
    A
    Group
    B
    Page
    B
    Get user group by user ID
    News
    Weather
    Fortune
    News
    AD

    (Advertisement)
    Weather
    Group C
    0 35 60 100
    User
    A ID
    Hash Hash

    View Slide

  46. A/B Testing, Gradual Rollout Framework
    Editor
    Content Management System
    Page A
    News Module
    Weather Module
    Fortune Module
    Page
    Setting
    Service
    User Grouping System
    User Group Mapping
    Group A
    User
    B ID
    Group B
    Page B
    News Module
    AD Module
    Weather Module
    Page Mapping Rule
    Group
    A
    Page
    A
    Group
    B
    Page
    B
    Get user group by user ID
    News
    Weather
    Fortune
    News
    AD

    (Advertisement)
    Weather
    Group C
    0 35 60 100
    User
    A ID
    Hash Hash

    View Slide

  47. A/B Testing, Gradual Rollout Framework
    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
    Group
    A
    Page
    A
    Group
    B
    Page
    B
    News
    Weather
    Fortune
    News
    Weather
    User Grouping System
    User Group Mapping
    AD

    (Advertisement)
    Group A
    User
    B ID
    Group B
    Get user group by user ID
    Group C
    User
    A ID

    View Slide

  48. Thailand Features

    View Slide

  49. Lottery

    Displaying / Checking the winning number
    Instant News
    Official Account

    View Slide

  50. Lottery

    Displaying / Checking the winning number
    Instant News
    Official Account

    View Slide

  51. Lottery

    Displaying / Checking the winning number
    Instant News
    Official Account

    View Slide

  52. Lottery Resources Tuning

    Resource Configuration when Release
    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

  53. Lottery Resources Tuning

    Resource Configuration when Release
    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

  54. Lottery Resources Tuning

    CPU Alert after Launch
    Request
    Limit

    View Slide

  55. Lottery Resources Tuning

    CPU Alert after Launch
    Request
    Limit

    View Slide

  56. Lottery Resources Tuning

    CPU Alert after Launch
    Request
    Limit

    View Slide

  57. Lottery Resources Tuning

    CPU Alert after Launch
    Request
    Limit

    View Slide

  58. Lottery Resources Tuning

    Increase Replica and Decrease CPU/Memory without Autoscaling
    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 TO BE
    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

    View Slide

  59. Lottery Resources Tuning

    Increase Replica and Decrease CPU/Memory without Autoscaling
    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 TO BE
    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

    View Slide

  60. Lottery Resources Tuning

    Increase Replica and Decrease CPU/Memory without Autoscaling
    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 TO BE
    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

    View Slide

  61. Lottery Resources Tuning

    Increase Replica and Decrease CPU/Memory without Autoscaling
    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 TO BE
    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

    View Slide

  62. Thailand Fortune Modules
    Switch to tab:
    ดู
    ดวง
    Merit-date Calendar
    Fortune Stick
    Lucky Color
    fortell

    View Slide

  63. Thailand Fortune Modules
    Switch to tab:
    ดู
    ดวง
    Merit-date Calendar
    Fortune Stick
    Lucky Color
    fortell

    View Slide

  64. Merit-date Calendar

    Show the Lucky/Unlucky Day, Recommended/Avoid Activities
    Activities
    Lucky Calendar

    วั
    นธง
    ชั


    วั

    อั
    ปมงคล

    วั
    นอ
    ธิ

    ดี


    วั
    นโลกา
    วิ
    นาศ
    Description
    Recommended /

    Avoid Activities
    Next 5 lucky days

    View Slide

  65. Merit-date Calendar

    Show the Lucky/Unlucky Day, Recommended/Avoid Activities
    Activities
    Lucky Calendar

    วั
    นธง
    ชั


    วั

    อั
    ปมงคล

    วั
    นอ
    ธิ

    ดี


    วั
    นโลกา
    วิ
    นาศ
    Description
    Recommended /

    Avoid Activities
    Next 5 lucky days

    View Slide

  66. Merit-date Calendar

    Show the Lucky/Unlucky Day, Recommended/Avoid Activities
    Activities
    Lucky Calendar

    วั
    นธง
    ชั


    วั

    อั
    ปมงคล

    วั
    นอ
    ธิ

    ดี


    วั
    นโลกา
    วิ
    นาศ
    Description
    Recommended /

    Avoid Activities
    Next 5 lucky days

    View Slide

  67. Fortune Stick

    Draw a Fortune Stick from Thai Temples

    View Slide

  68. Fortune Stick

    Draw a Fortune Stick from Thai Temples

    View Slide

  69. Lucky Color

    Show the Lucky Color Everyday in a Week

    View Slide

  70. • LINE TODAY Micro-service Architecture


    • Modularized Page Setting: Fast rendering and efficient settings


    • Thailand Features: Lottery and Resources Tuning
    Summary

    View Slide

  71. • LINE TODAY Micro-service Architecture


    • Modularized Page Setting: Fast rendering and efficient settings


    • Thailand Features: Lottery and Resources Tuning
    Summary

    View Slide

  72. ขอบ
    คุ
    ณค
    รั



    Thank you

    View Slide