Refactoring Frontend

Transcript

1. Refactoring Frontend How to keep your sanity Bilal Çinarli Principal Software Engineer
2. TO KEEP YOUR SANITY You have to enjoy the challenges
3. Thank you!
4. So… What is the joyful part?
5. Where the complexity makes things interesting Overture
6. A little bit about me 21 years Working on frontend and web application development 5 green field project Almost no projects from scratch Migrations, Refactoring, Improvements The majority of my work for the last 21 years has involved refactoring, improvements, architectural changes etc.
7. - Device - Browser - Size - Speed - Extensions - Limitations… Unknowns
8. Not Complex? HTML Whole baseline can made your code complex or easy CSS Styling of the HTML and keeping the UI intact JavaScript Where nowadays people focus and ignore the other two
9. Not complex enough? Build Systems Grunt, Gulp, Webpack, Turbopack, Rollup, Vite, RSPack, SWC, ESBuild, Babel… Libraries, Meta Frameworks React, Angular, Vue, Svelte, Preact, Next, Nuxt, Remix (ReactRouter), TanStackStart, Astro, Solid Start, State management… Dependencies Custom packages, library components, web components, design systems, utility packages, standardisation packages… Rendering and Browsers Server rendering, hydration, client- side rendering, server components, browser differences and APIs…
10. Things can go crazy HTML is very forgiving, like a priest. It tries its hard to render your UI
11. <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('profile')" aria-label="Profile">Profile </ button> < / td> </ tr> < / table>
12. <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="/profile">Profile < / a> < / li> </ ul> </ nav>
13. Aria Your problems are not unique, but your solutions are
14. “ We wanted to upgrade React to use React Hooks
15. 3500+ Enzyme tests with error: “could not find react-redux context value; please ensure the component is wrapped in a <Provider>”
16. Every developer using Enzyme and Redux in March 2019
17. Looking for a battle-tested npm package?
18. export const wrapWithProviders = (Component, state, props = {}) = > { const store = createMockStore(state); const { app: { config = false, features = false, taxonomy = false } } = state; let router; if (!isEmpty(config) & & !isEmpty(features) & & !isEmpty(taxonomy)) { router = createGlassRouter({ routes: mergeRoutes(createRoutes(config, features, false),createCMSRoutes(config, [], features)), config, 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 ) }
19. Recitative Sometimes you need a different perspective
20. Seems to be an easy fix Problem Height calculation issue Solution Upgrade legacy component Fallback #issue-workf l ow-transition { .form-body { min-height: 40vh; // force form to have some meaningful height in Windows devices till our JS calculates the max-height in modal } }
21. Working in Jira When you dig into the code in Jira, you see the evolution
22. EVOLUTION In every long- running system
23. Dialogs in Jira EXPERIMENT Understand what we have in common and not in common…
24. Change, refactor… Half-finished or never started migrations, changes in use cases, new dependencies
25. Multiple Implementations Original Jira Dialog, AUI/Dialog, AUI Dialog2
26. Relationships of Dialogs
27. 30+ Dialog implementation in Jira Core and JSW
28. This is really useful to understand the context and complexity of potential component upgrade JIRI “
29. repositories 96 Work Done 40 3 PRs files
30. Nearly Done! Core Dialogs Fully upgraded, 20 core dialogs Extra or Plugin Dialogs Additional 12 dialogs upgraded Complex Ones 2 remaining, next major version
31. How did we start? Temporary fixes They have a habit of becoming permanent Almost That would be almost true
32. Arioso Timing and the right tools
33. Don’t Break You can’t break or regress the app
34. jQuery upgrade - Act 1
35. jQuery Upgrade - Act 1 Phase 2 Didn’t finish… jQuery Migrate Continued to live in Jira 8, Jira 9 and Jira 10 You don’t need to use every text box. Delete the non-essential!
36. jQuery Upgrade - Act 2
37. jQuery Upgrade - Act 2
38. jQuery Upgrade - Final Act
39. Convert experience to tools After many attempts, there must be many learnings. Push one extra mile for future BEYOND
40. Apotheosis Not every frontend work is frontend or on UI
41. Do you remember this part?
42. Frontend engineers are more opinionated
43. You need to make them believe Usually you go through multiple iterations in each work to achieve your end result.
44. Old system Built for a single product, single app, then became a monorepo for other applications. The story of making a framework We wanted to standardise setup Diverged dependencies, different standards, a mixture of TypeScript, JavaScript, testing etc. Things to convince people * 12+ minutes local env start * 45+ minutes for build pipeline * 10000+ unit test in CI * Dependency standards * Complex release mechanism and blocker * Many more other issues Getting there Seeding thoughts, 1.5 years of step-by-step work, talking, demoing, getting allies
45. Coda Change is constant
46. LEARN WHYs Understand the history of the code
47. Improving maintenance and reducing tech debt is the goal, not refactoring…
48. “ The moment you merge your code, your refactoring journey starts
49. STAGES It is a multi-step journey, have a long term plan
50. Use opportunities to prepare the code
51. Enjoy the coding
52. Thank you!