Frontend Infra 成魔之路

Speaker: Timi Chen
Event: 台大電機企業參訪

Transcript

2. Frontend Infra 成魔之路
3. 成魔之路 - 熊仔 (2023)，〈存活〉 有的不成仁便成魔了 像我歌詞本像聊齋誌異 all eyes on me 拍⼦太⿁了 因為⼼裏有軌
4. 01 02 03 About JSTF About My Work About Me CONTENT
5. Who I am & how I got here. 01 About Me
6. Timi Chen 陳以潼 TECH FRESH • BBA in Information Management @ NTU • LINE | TECH FRESH @ JSTF • 2023 – Current • 25Sprout | Frontend Intern @ SurveyCake • 2022 – 2023 • NTUSA | Director for Information / Vice President • 2021 – Current
7. “你好 我是學⽣會的”
8. What we are dealing with. 02 About JSTF
9. JavaScript is Chaotic (But it’s kinda okay)
10. Frontend Framework React Vue Angular Svelte Module Bundlers SSR/SSG Framework Next Nuxt Gatsby Package Manager npm Yarn Pnpm Bun Vibrant JavaScript Ecosystem Webpack Vite Rollup Parcel 🌐 🧳 🖥 🧺
11. Beyond Features Performance Non-Functional Concerns of Frontend Development Security Accessibility Observability Testing Coding Style
12. Role of Frontend Infra Team Testing Performance Security Accessibility Observability JSTF Feature Feature Product Teams Feature Feature Feature Feature Feature Feature
13. JSTF Research & Produce Guidelines for Developers Provide Tools for Following Guidelines Monitor the Enforcement of the Guidelines Support Developers with Feedback & Queries Our Mission
14. Lighthouse Testing Performance Security Accessibility Observability • Tool for measuring performance, accessibility, best practices, and SEO for Web pages. • JSTF will track the scores, notify the teams in event of significant score decrease.
17. SonarQube Tes0ng Performance Security Accessibility Observability • Tool for checking source code for code quality, potential bugs, vulnerabilities, and security hotspots. • JSTF maintains our own set of rules, to fit the requirements of our teams.
19. Sentry Testing Performance Security Accessibility Observability • Tool for recording and tracking runtime errors of application. Zap Tes0ng Performance Security Accessibility Observability • Tool for automated security test.
20. JSTF Project Generator + Backstage Software Template Tes0ng Performance Security Accessibility Observability • Generates new FE project with config that follows JSTF guidelines. • Set up the entire development-deployment (CI/CD) environment.
21. How I adapted & what I learned 03 About My Work
22. What I Actually Do • Trying to understand poorly documented code. • Discovering hidden API endpoint with intuition. • Attempting to emulate a x86 machine on an Apple M1 laptop. • Getting massages. • Waiting for pipeline to finish. 🧙 🗿 🔮 🐢 🕸 💆
23. Takeaway #1 Source code is the most accurate documentation.
24. Takeaway #2 Elegance means influence.