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

How to quickly develop static pages in LINE

How to quickly develop static pages in LINE

Eebedc2ee7ff95ffb9d9102c6d4a065c?s=128

LINE DevDay 2020

November 26, 2020
Tweet

Transcript

  1. None
  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

  70. None
  71. None
  72. None
  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

  90. None
  91. None
  92. None
  93. None
  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
  96. None
  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