Efficieny and Scaling in Frontend

This talk discussed the possible challenges we face in frontend development over time. Mentions the seemingly effortless decisions at the beginning of a project, how they can become burdens later, and how they affect the developer experience.

Transcript

1. EFFICIENCY AND SCALING IN FRONTEND CHALLENGES WE FACE OVERTIME
2. BILAL ÇINARLI Principal Frontend Engineer @Atlassian @bcinarli
4. UNKNOWNS USERS, DEVICES, BROWSERS, EXTENSIONS, NETWORK LIMITATIONS
5. HTML WHOLE BASELINE CAN MADE YOUR CODE COMPLEX OR EASY
6. CSS STYLING OF THE HTML AND KEEPING THE UI INTACT
7. JAVASCRIPT WHERE NOWADAYS PEOPLE FOCUS AND IGNORE THE OTHER TWO
8. BUILD SYSTEMS GRUNT, GULP, WEBPACK, TURBOPACK, ROLLUP, VITE, RSPACK, SWC, ESBUILD, BABEL…
9. LIBRARIES & FRAMEWORKS REACT, ANGULAR, VUE, SVELTE, PREACT, NEXT, NUXT, REACT ROUTER, TANSTACKSTART, ASTRO, SOLID START, STATE MANAGEMENT…
10. DEPENDENCIES CUSTOM PACKAGES, LIBRARY COMPONENTS, WEB COMPONENTS, DESIGN SYSTEMS, UTILITY PACKAGES, STANDARDISATION PACKAGES…
11. RENDERING SERVER RENDERING, HYDRATION, CLIENT-SIDE RENDERING, SERVER COMPONENTS, BROWSER DIFFERENCES AND APIS…
12. How to reduce this complexity?
13. Know your team, know your business
14. Your problems are not unique, but your solutions are!
15. The core of the frontend development is developer experience
16. React Router Next Tanstack
17. "scripts": { "build": "react-router build", "dev": "react-router dev", "start": "react-router-serve ./build/server/index.js", "typecheck": "react-router typegen && tsc" } React Router
18. "dependencies": { "@react-router/node": "7.10.1", "@react-router/serve": "7.10.1", "isbot": "^5.1.31", "react": "^19.2.1", "react-dom": "^19.2.1", "react-router": "7.10.1" } React Router
19. "devDependencies": { "@react-router/dev": "7.10.1", "@tailwindcss/vite": "^4.1.13", "@types/node": "^22", "@types/react": "^19.2.7", "@types/react-dom": "^19.2.3", "tailwindcss": "^4.1.13", "typescript": "^5.9.2", "vite": "^7.1.7", "vite-tscon fi g-paths": "^5.1.4" } React Router
20. "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint" } Next
21. "dependencies": { "next": "16.0.7", "react": "19.2.0", "react-dom": "19.2.0" } Next
22. "devDependencies": { "@tailwindcss/postcss": "^4", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "eslint": "^9", "eslint-con fi g-next": "16.0.7", "tailwindcss": "^4", "typescript": "^5" } Next
23. "scripts": { "dev": "vite dev --port 3000", "build": "vite build", "serve": "vite preview", "test": "vitest run", "format": "biome format", "lint": "biome lint", "check": "biome check" } Tanstack
24. "dependencies": { "@tailwindcss/vite": "^4.0.6", "@tanstack/ai": "^0.0.1", "@tanstack/ai-anthropic": "^0.0.1", "@tanstack/ai-client": "^0.0.1", "@tanstack/ai-react": "^0.0.1", "@tanstack/react-devtools": "^0.7.0", "@tanstack/react-router": "^1.132.0", "@tanstack/react-router-devtools": "^1.132.0", "@tanstack/react-router-ssr-query": "^1.131.7", "@tanstack/react-start": "^1.132.0", "@tanstack/react-store": "^0.7.0", "@tanstack/router-plugin": "^1.132.0", "@tanstack/store": "^0.7.0", "highlight.js": "^11.11.1", "lucide-react": "^0.544.0", "nitro": "latest", "react": "^19.2.0", "react-dom": "^19.2.0", "streamdown": "^1.6.5", "tailwindcss": "^4.0.6", "vite-tscon fi g-paths": "^5.1.4", "zod": "^4.1.11" } Tanstack
25. "devDependencies": { "@biomejs/biome": "2.2.4", "@tanstack/devtools-event-client": "^0.3.2", "@tanstack/devtools-vite": "^0.3.11", "@testing-library/dom": "^10.4.0", "@testing-library/react": "^16.2.0", "@types/node": "^22.10.2", "@types/react": "^19.2.0", "@types/react-dom": "^19.2.0", "@vitejs/plugin-react": "^5.0.4", "jsdom": "^27.0.0", "typescript": "^5.7.2", "vite": "^7.1.7", "vitest": "^3.0.5", "web-vitals": "^5.1.0" } Tanstack
26. Avoid tight couplings as much as possible
27. export const wrapWithProviders = (Component, state, props = {}) => { const store = createMockStore(state); const { app: { con fi g = false, features = false, taxonomy = false } } = state; let router; if (!isEmpty(con fi g) && !isEmpty(features) && !isEmpty(taxonomy)) { router = createGlassRouter({ routes: mergeRoutes(createRoutes(con fi g, features, false),createCMSRoutes(con fi g, [], features)), con fi g, features, taxonomy }).router } else { router = router5createRouter() router.usePlugin(listenersPlugin()) router.usePlugin(browserPlugin()) } // get the original component and its initial props // if it is called <Component props /> const ChildComponent = getOriginalComponent(Component) const componentProps = React.isValidElement(Component) ? { ...Component.props, ...props } : { ...props } return createElement( props => ( <Provider store={store}> <RouterProvider router={router}> <HelmetProvider context={{}}> <ChildComponent {...props} fakeContext={{ store }} /> </HelmetProvider> </RouterProvider> </Provider> ), componentProps ) }
28. Temprorary Bad Code tends to stay
29. HTML will render what you expect to render
30. <table role="menu"> <tr role="menubar"> <td role="menuitem"> <button onclick="goToLink('home')" aria-current="page" aria-label="Home">Home</button> </td> <td role="menuitem"> <button onclick="goToLink('search')" aria-label="Search">Search</button> </td> <td role="menuitem"> <button onclick="goToLink('likes')" aria-label="Likes">Likes</button> </td> <td role="menuitem"> <button onclick="goToLink('pro fi le')" aria-label="Pro fi le">Pro fi le</button> </td> </tr> </table>
31. <nav> <ul> <li><a href="/" aria-current="page">Home</a></li> <li><a href="/search">Search</a></li> <li><a href="/likes">Likes</a></li> <li><a href="/pro fi le">Pro fi le</a></li> </ul> </nav>
32. Decide for tomorrow, work for today
33. Every decision you make now will become a burden in your code in the future
34. The moment you commit your code, you will maintain it for the rest of your work
35. EFFICIENCY AND SCALING IN FRONTEND BILAL ÇINARLI @bcinarli