Projects
Introduction
With the abundance of frameworks available, navigating the world of front-end web development can be tricky. The good news is that there are common patterns and techniques that are shared across these frameworks. Consequently, mastering one framework can significantly ease the process of learning additional ones. I have showcased this principle by implementing the same app in various frameworks. The resulting app serves as a client for The Movie Database API, showcasing movies and TV shows. You can find links to the different projects on this page.
Common Patterns
Components
Components are the building blocks of modern UIs. They are pieces of code that encapsulate specific functionality or UI elements, and allow us to organize our UI into smaller, more manageable pieces.
Reactivity
Reactivity refers to the ability of the framework to update the UI when the underlying data changes. This allows developers to focus on writing business logic instead of UI updates.
State Management
A UI will have many pieces of state. For example, the state of a dropdown may be open or closed. Or, the state of a user may be authenticated or unauthenticated. Managing both component-specific and app-wide state is fundamental.
Responsive Web Design
Responsive web design is an approach to designing an app so that it looks good on various screen sizes, such as phones, tablets, and computers.
Routing
Many frameworks offer client-side routing. This allows users to navigate to new pages in their browser without having to request a full page from the server.
Data Fetching
Data fetching may need to occur on the server or client. Common methods of fetching data from the client include utilizing the Axios HTTP client or the Fetch API. Fetching from the server is typically framework-specific since each framework requires a specific implementation in order to hydrate the fetched data to the client.