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

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 Services • Architecture • Modularized Page Setting • Thailand Features Agenda
3. • LINE TODAY Services • Architecture • Modularized Page Setting • Thailand Features Agenda
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. 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
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
7. Taiwan Thailand Hong Kong
8. LINE TODAY Thailand 38M MAU
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 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
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
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. 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
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
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
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
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. 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
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?
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
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?
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?
28. Headline news module Latest news module Topic module Trending news module Weather module Merit-date module Modularized Page Setting Fortune stick module
29. Headline news module Latest news module Topic module Trending news module Weather module Merit-date module Modularized Page Setting Fortune stick module
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
48. Thailand Features
49. Lottery 
 Displaying / Checking the winning number Instant News Official Account
50. Lottery 
 Displaying / Checking the winning number Instant News Official Account
51. Lottery 
 Displaying / Checking the winning number Instant News Official Account
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
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
54. Lottery Resources Tuning 
 CPU Alert after Launch Request Limit
55. Lottery Resources Tuning 
 CPU Alert after Launch Request Limit
56. Lottery Resources Tuning 
 CPU Alert after Launch Request Limit
57. Lottery Resources Tuning 
 CPU Alert after Launch Request Limit
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
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
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
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
62. Thailand Fortune Modules Switch to tab: ดู ดวง Merit-date Calendar Fortune Stick Lucky Color fortell
63. Thailand Fortune Modules Switch to tab: ดู ดวง Merit-date Calendar Fortune Stick Lucky Color fortell
64. Merit-date Calendar 
 Show the Lucky/Unlucky Day, Recommended/Avoid Activities Activities Lucky Calendar วั นธง ชั ย วั น อั ปมงคล วั นอ ธิ บ ดี วั นโลกา วิ นาศ Description Recommended / Avoid Activities Next 5 lucky days
65. Merit-date Calendar 
 Show the Lucky/Unlucky Day, Recommended/Avoid Activities Activities Lucky Calendar วั นธง ชั ย วั น อั ปมงคล วั นอ ธิ บ ดี วั นโลกา วิ นาศ Description Recommended / Avoid Activities Next 5 lucky days
66. Merit-date Calendar 
 Show the Lucky/Unlucky Day, Recommended/Avoid Activities Activities Lucky Calendar วั นธง ชั ย วั น อั ปมงคล วั นอ ธิ บ ดี วั นโลกา วิ นาศ Description Recommended / Avoid Activities Next 5 lucky days
67. Fortune Stick 
 Draw a Fortune Stick from Thai Temples
68. Fortune Stick 
 Draw a Fortune Stick from Thai Temples
69. Lucky Color 
 Show the Lucky Color Everyday in a Week
70. • LINE TODAY Micro-service Architecture • Modularized Page Setting: Fast rendering and efficient settings • Thailand Features: Lottery and Resources Tuning Summary
71. • LINE TODAY Micro-service Architecture • Modularized Page Setting: Fast rendering and efficient settings • Thailand Features: Lottery and Resources Tuning Summary
72. ขอบ คุ ณค รั บ Thank you