Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
  2. 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
  3. 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
  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
  5. 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
  6. 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
  7. 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
  8. 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
  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
  10. 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
  11. 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
  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
  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
  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
  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
  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
  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
  18. 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?
  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 HTTP/2 with new API design ML Data Analysis HTTP/2
  20. 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?
  21. 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
  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?
  23. 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?
  24. Headline news module Latest news module Topic module Trending news

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

    module Weather module Merit-date module Modularized Page Setting Fortune stick module
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. 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
  41. 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
  42. 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
  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 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
  44. 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
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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
  50. Merit-date Calendar 
 Show the Lucky/Unlucky Day, Recommended/Avoid Activities Activities

    Lucky Calendar วั นธง ชั ย วั น อั ปมงคล วั นอ ธิ บ ดี วั นโลกา วิ นาศ Description Recommended / Avoid Activities Next 5 lucky days
  51. Merit-date Calendar 
 Show the Lucky/Unlucky Day, Recommended/Avoid Activities Activities

    Lucky Calendar วั นธง ชั ย วั น อั ปมงคล วั นอ ธิ บ ดี วั นโลกา วิ นาศ Description Recommended / Avoid Activities Next 5 lucky days
  52. Merit-date Calendar 
 Show the Lucky/Unlucky Day, Recommended/Avoid Activities Activities

    Lucky Calendar วั นธง ชั ย วั น อั ปมงคล วั นอ ธิ บ ดี วั นโลกา วิ นาศ Description Recommended / Avoid Activities Next 5 lucky days
  53. • LINE TODAY Micro-service Architecture • Modularized Page Setting: Fast

    rendering and efficient settings • Thailand Features: Lottery and Resources Tuning Summary
  54. • LINE TODAY Micro-service Architecture • Modularized Page Setting: Fast

    rendering and efficient settings • Thailand Features: Lottery and Resources Tuning Summary