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

Misato Inaoki
LINE Front-end Dev Team5 Front-end Engineer
https://linedevday.linecorp.com/2020/ja/sessions/7611
https://linedevday.linecorp.com/2020/en/sessions/7611

Transcript

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