Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Frontend Infra 成魔之路

Slide 3

Slide 3 text

成魔之路 - 熊仔 (2023)，〈存活〉 有的不成仁便成魔了 像我歌詞本像聊齋誌異 all eyes on me 拍⼦太⿁了 因為⼼裏有軌

Slide 4

Slide 4 text

01 02 03 About JSTF About My Work About Me CONTENT

Slide 5

Slide 5 text

Who I am & how I got here. 01 About Me

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

“你好 我是學⽣會的”

Slide 8

Slide 8 text

What we are dealing with. 02 About JSTF

Slide 9

Slide 9 text

JavaScript is Chaotic (But it’s kinda okay)

Slide 10

Slide 10 text

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 🌐 🧳 🖥 🧺

Slide 11

Slide 11 text

Beyond Features Performance Non-Functional Concerns of Frontend Development Security Accessibility Observability Testing Coding Style

Slide 12

Slide 12 text

Role of Frontend Infra Team Testing Performance Security Accessibility Observability JSTF Feature Feature Product Teams Feature Feature Feature Feature Feature Feature

Slide 13

Slide 13 text

JSTF Research & Produce Guidelines for Developers Provide Tools for Following Guidelines Monitor the Enforcement of the Guidelines Support Developers with Feedback & Queries Our Mission

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

How I adapted & what I learned 03 About My Work

Slide 22

Slide 22 text

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. 🧙 🗿 🔮 🐢 🕸 💆

Slide 23

Slide 23 text

Takeaway #1 Source code is the most accurate documentation.

Slide 24

Slide 24 text

Takeaway #2 Elegance means influence.

Slide 25

Slide 25 text

No content