How JS task-force improve the quality of projects in LINE Taiwan @ TECHPULSE 2023

- Speaker: Tom Wu
- Event: http://techpulse.line.me/

隨著組織與產品線的擴大，長期的維護與經營就相當重要。因此 LINE台灣成立了 Frontend Infra 團隊，Infra 團隊整合總部的規範與在地的開發經驗，讓前端團隊在開發初期或現有產線上能夠符合規範並增進開發品質。

Transcript

1. View Slide

2. Context
   2
   LINE
   TRAVEL
   LINE
   INVOICE
   LINE
   TODAY
   LINE
   SPOT
   

   View Slide

3. Topics
   Others
   Performance
   Dev Solutions
   Framework
   Security
   Testing
   3
   

   View Slide

4. Testing › Write minimal test code to produce maximum
   confidence
   › Don’t test your code duplicately
   4
   

   View Slide

5. Testing
   › Unit Test
   › End-to-end test
   › Integration Test
   5
   

   View Slide

6. Monitoring
   SonarQube
   6
   

   View Slide

7. Monitoring - multiple projects
   Grafana
   7
   

   View Slide

8. Performance
   › Web Vitals, FCP, LCP, TBT, CLS
   › Standard way to integrate
   › Lighthouse CI
   8
   

   View Slide

9. Monitoring - Performance
   Lighthouse CI
   9
   

   View Slide

10. Monitoring - Performance
    Lighthouse CI
    10
    

    View Slide

11. Lighthouse Score Diff
    › Show the trend of performance
    score
    › Target the peaks and valleys of
    the scores
    11
    

    View Slide

12. Security
    › Static Application Security Testing (SAST)
    › Dynamic Application Security Testing (DAST)
    › Software Composition Analysis (SCA)
    12
    

    View Slide

13. Security
    › SAST: SonarQube
    › DAST: OWASP Zed Attack Proxy (ZAP)
    › SCA: Renovate, Github Dependabot
    13
    

    View Slide

14. Generator
    › Performance - Lighthouse CI Integration
    › Security - SonarQube, OWASP ZAP Integration, Renovate
    › Code Test - SonarQube Integration
    14
    › Error log and performance field data - Sentry Integration
    › Pipeline configuration
    

    View Slide

15. View Slide

16. Process Loop
    Develop
    Topics
    Monitoring Collect
    Feedback
    16
    

    View Slide

17. Thank you
    17
    

    View Slide