How to quickly develop static pages in LINE

Haegul Pyun
LINE Plus Web Service Dev 3 Frontend Engineer
https://linedevday.linecorp.com/2020/ja/sessions/2181
https://linedevday.linecorp.com/2020/en/sessions/2181

Transcript

2. › LINE UIT Web Service Dev 3 › Frontend Engineer › @hg-pyun
3. How long will it take to develop?
4. How long will it take to develop? 3 ~ 5 Day
5. Agenda › Background › Problems › Improvement
6. Web Page Background
7. Today’s Web Page
8. Dynamic Page
9. Database Web App Server Client Request HTML Data Query Request Data Rendering Dynamic Page External Server Data </> HTML
10. Database Web App Server Client Request HTML Data Query Request Data Rendering Dynamic Page External Server Data </> HTML
11. Static Contents ?
12. Static Page
13. Static Page Web Server Client Request HTML </> HTML
14. Static Page Web Server Client Request HTML </> HTML
15. Advantage Static Page › No need for database › Fast transfer speed › Fast FMP(First Meaningful Paint) › Aggressive Cache
16. Advantage Static Page › No need for database › Fast transfer speed › Fast FMP(First Meaningful Paint) › Aggressive Cache
17. Advantage Static Page › No need for database › Fast transfer speed › Fast FMP(First Meaningful Paint) › Aggressive Cache
18. Advantage Static Page › No need for database › Fast transfer speed › Fast FMP(First Meaningful Paint) › Aggressive Cache
19. other Usage Static Page
20. Repeat Problems
21. Resource
22. Dev Process FRONT DEV BUILD DEPLOY Markup JavaScript SEO i18n DevServer Bundling Uglify Minify Env Injection Continuous Integration TLS Domain Setting Caching Strategy Continuous Delivery
23. Dev Process FRONT DEV BUILD DEPLOY Markup JavaScript SEO i18n DevServer Bundling Uglify Minify Env Injection Continuous Integration TLS Domain Setting Caching Strategy Continuous Delivery
24. Dev Process FRONT DEV BUILD DEPLOY Markup JavaScript SEO i18n DevServer Bundling Uglify Minify Env Injection Continuous Integration TLS Domain Setting Caching Strategy Continuous Delivery
25. Dev Process FRONT DEV BUILD DEPLOY Markup JavaScript SEO i18n DevServer Bundling Uglify Minify Env Injection Continuous Integration TLS Domain Setting Caching Strategy Continuous Delivery
26. Repeat Repeat Repeat…
27. Automation
28. Reduce Improvement
29. Reduce Repetitive Tasks
30. Goal › Shorten Development Period › Organized and Standardized › Reduce Unnecessary Communications
31. Goal › Shorten Development Period › Organized and Standardized › Reduce Unnecessary Communications
32. Goal › Shorten Development Period › Organized and Standardized › Reduce Unnecessary Communications
33. Project Name
34. LAND PRESS
35. Dev Process BUILD DEPLOY Markup JavaScript SEO i18n DevServer Bundling Uglify Minify Env Injection Continuous Integration TLS Domain Setting Caching Strategy Continuous Delivery FRONT DEV
36. Dev Process BUILD DEPLOY Markup JavaScript SEO i18n DevServer Bundling Uglify Minify Env Injection Continuous Integration TLS Domain Setting Caching Strategy Continuous Delivery FRONT DEV
37. Command Line Interface
38. Command Line Interface
39. › Support transpile, unify, minify and i18n Feature Command Line Interface
40. › Simple Deploy › Support transpile, unify, minify and i18n Feature Command Line Interface
41. › Simple Deploy › Providing a Development Environment › Support transpile, unify, minify and i18n Feature Command Line Interface
42. Command Line Interface Command $ npm install @linecorp/landpress-cli
43. Command Line Interface Command $ landpress init $ landpress dev $ landpress build $ landpress deploy
44. Verda Object Storage Deploy Process Bundle Land Press CLI
45. Dev Process BUILD DEPLOY Markup JavaScript SEO i18n DevServer Bundling Uglify Minify Env Injection Continuous Integration TLS Domain Setting Caching Strategy Continuous Delivery FRONT DEV
46. Command Line Interface Limitation
47. Dashboard
48. Land Press
49. STEP 1
50. STEP 2
51. STEP 3
52. STEP 4
53. Verda Object Storage Bundle Build Information Git src Build command Env variable Cache Land Press
54. Verda Object Storage Bundle Build Information Git src Build command Env variable Cache Land Press
55. Webhook Local Verda Object Storage Push Webhook Trigger LandPress Backend Bundle
56. Webhook Local Verda Object Storage Push Webhook Trigger LandPress Backend Bundle
57. Webhook Local Verda Object Storage Push Webhook Trigger LandPress Backend Bundle
58. Webhook Local Verda Object Storage Push Webhook Trigger LandPress Backend Bundle
59. Dev Process BUILD DEPLOY Markup JavaScript SEO I18n DevServer Bundling Uglify Minify Env Injection Continuous Integration TLS Domain Setting Caching Strategy Continuous Delivery FRONT DEV
60. Dev Process BUILD DEPLOY Markup JavaScript SEO I18n DevServer Bundling Uglify Minify Env Injection Continuous Integration TLS Domain Setting Caching Strategy Continuous Delivery FRONT DEV
61. Contents
62. Static Contents
63. Abstract
64. How?
65. JAMSTACK
66. JavaScript APIs Markup STACK
67. JavaScript APIs Markup STACK
68. JavaScript APIs Markup STACK
69. Headless CMS
73. JavaScript APIs Markup STACK
74. Static Site Generator
75. Concept Headless CMS Static Site Generator Contents Request
76. JAMStack Land Press +
77. Headless CMS +
78. Headless CMS Cluster CMS Container CMS Container CMS Container CMS Container CMS Container CMS Container CMS Container CMS Container CMS Container Docker
79. Land Press Content
80. Github Headless CMS CDN Land Press User Write contents Webhook trigger Request source code Response source code Request contents data Response contents data Deploy Bundle Bundling
81. Github Headless CMS CDN Land Press User Write contents Webhook trigger Request source code Response source code Request contents data Response contents data Deploy Bundle Bundling
82. Github Headless CMS CDN Land Press User Write contents Webhook trigger Request source code Response source code Request contents data Response contents data Deploy Bundle Bundling
83. Github Headless CMS CDN Land Press User Write contents Webhook trigger Request source code Response source code Request contents data Response contents data Deploy Bundle Bundling
84. Github Headless CMS CDN Land Press User Write contents Webhook trigger Request source code Response source code Request contents data Response contents data Deploy Bundle Bundling
85. One More Thing
86. Template Echosystem
87. Pre defined Headless CMS + Template
88. Template Scenario Deploy Create Instance Template + Pre-Defined Headless CMS Create Post Select Template Register Template
89. Components
94. How long will it take to develop?
95. Person-Day Conventional With Land Press 0 1 2 3 4 5 Front Dev Project Setting Build Task Deploy Task Server Setting
97. Dev Process BUILD DEPLOY Markup JavaScript SEO i18n DevServer Bundling Uglify Minify Env Injection Continuous Integration TLS Domain Setting Caching Strategy Continuous Delivery FRONT DEV
98. Dev Process BUILD DEPLOY Markup JavaScript SEO i18n DevServer Bundling Uglify Minify Env Injection Continuous Integration TLS Domain Setting Caching Strategy Continuous Delivery FRONT DEV
99. Reduce Repetitive Tasks
100. Thank you