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

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

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 團隊整合總部的規範與在地的開發經驗,讓前端團隊在開發初期或現有產線上能夠符合規範並增進開發品質。

LINE Developers Taiwan

February 21, 2023
Tweet

More Decks by LINE Developers Taiwan

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Topics
    Others
    Performance
    Dev Solutions
    Framework
    Security
    Testing
    3

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Monitoring
    SonarQube
    6

    View full-size slide

  6. Monitoring - multiple projects
    Grafana
    7

    View full-size slide

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

    View full-size slide

  8. Monitoring - Performance
    Lighthouse CI
    9

    View full-size slide

  9. Monitoring - Performance
    Lighthouse CI
    10

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 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 full-size slide

  14. Process Loop
    Develop
    Topics
    Monitoring Collect
    Feedback
    16

    View full-size slide