Frontend

The term Frontend is meaning the user facing part that in case of web, is being sent to user + in some cases the logic before it generates what gets sent to user. In apps it can be used as the whole app that is installed on the device.

In case of web the client side code is usually sent over https (secured HTTP-Hypertext Transfer Protocol)-

• you ask DNS provider to give you the number address for the URL (desiredAddress.com -> 93.184.216.34)
• you ask the 93.184.216.34 for via HTTP and if it goes well responds to you with the page content usually some html, css and js
• browser then renders it and runs the js that it got, and that could trigger some more logic

Parts

• User Interface(UI)- buttons, text, layout, images
• logic that connects the UI to some logic inside the application, examples:
  • Theme switching button that on click updates the whole page layout and styling to match what you have selected.
  • Add to cart button, that adds something locally to your cart(optimistic UI), and then also sends a request to backend for the single state of truth and synchronisation across devices
  • Fetching of initial state of the app from backend
  • Searching and filtering

Common integration with backend

• Sending CRUD requests (create, read, update, delete)
• Fetching initial state
• Connection using websockets

How am I usually implementing frontend

• I start by thinking about the platform that I would be needing the product made for- web, IOS, android, windows, linux, other
• I also think about the requirements (speed, SEO, single page application, existing backend solutions)
• Selecting technologies that suits the platform, what I mostly use for:
  • Web - NextJs, React, tailwind, MUI, or in past I used Vue, Shadcn/ui
  • Web and mobile - NextJs and React Native for shared components
  • Mobile - Flutter or React Native

Helpful dev tools:

• Chrome dev tools or similar
  • Debugging with client logs
  • checking component layout (if not handled via some rendering engine that blocks it)
  • checking accessibility
  • running lighthouse to test the site performance and SEO layout and SEO related content
  • network tab
    • view requests states and their load times
    • limiting the connection speed to simulate slower network connection
    • disabling cache
    • checking details of websocket communication
    • checking the origin of requests in the codebase(in dev builds)

Common pitfalls

• bundle size( mainly the images and other content that is big, it needs to be limited, and the bundle needs to be minified for production)
• re-renders( it needs to limit the re-renders or components as much as possible, ideal scenario is where only the component that actually needs the update is updated)
• memory leaks (can happen often and can be checked with devtools if there are some big hits)
• layout shifts
• long response time for blocking content