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

Why does the LINE front-end separate markup and logic?

Why does the LINE front-end separate markup and logic?

Eebedc2ee7ff95ffb9d9102c6d4a065c?s=128

LINE DevDay 2020

November 26, 2020
Tweet

Transcript

  1. None
  2. Agenda › Possible Cons › Why do LINE front-end projects

    separate markup from business logic? › Our Workflow
  3. Possible Cons CSS scope problems HTML templates are duplicated Slower

    development cycle
  4. Why do LINE front-end projects separate markup and business logic?

    Make choosing a JS/CSS library easier Keep a high UI quality standard Work in parallel
  5. Our Workflow

  6. Our Workflow QA Write business logic in JS Write markup

    using HTML/CSS Create a new project Designers Review
  7. Our Workflow QA Write business logic in JS Write markup

    using HTML/CSS Create a new project Designers Review Import CSS/HTML in JS
  8. frontend-template 2020 PHP -> 11ty husky,monorepo 2015 Using Git 2011

    Sass, PHP 2019 Stylelint, Autoprefixer
  9. Create a new project You have two Options: 2. Use

    Github Repository Template 1. Use @linecorp/frontend-template-cli
  10. Create a new project frontend-template directory structure Tools for markup

    are included in the "packages/markup/" directory. The JavaScript project should be created in a new directory under the "packages" directory.
  11. Create a new project frontend-template directory structure Tools for markup

    are included in the "packages/markup/" directory. The JavaScript project should be created in a new directory under the "packages" directory.
  12. Our Workflow QA Write business logic in JS Write markup

    using HTML/CSS Create a new project Designers Review Import CSS/HTML in JS
  13. Generating HTML/CSS How to write markup Review Write HTML Write

    CSS Use 11ty as a static site generator Use Sass and CSS guideline Make to deploy is easier
  14. HTML/CSS Markup

  15. Our Workflow QA Write business logic in JS Write markup

    using HTML/CSS Create a new project Designers Review Import CSS/HTML in JS
  16. How to import CSS? Example: Vue

  17. How to import CSS? Example: Vue

  18. Why do LINE front-end projects separate markup and business logic?

    Make choosing a JS/CSS library easier Keep a high UI quality standard Work in parallel
  19. Thank you