Understanding Front-End Technology Stacks

In recent years, single-page applications (SPA) have developed rapidly. From the early days of using JavaScript to write large amounts of HTML templates for SPAs, to the current dominance of frameworks like React and Vue, the front-end ecosystem has advanced at an astonishing pace. It feels like new technologies emerge constantly, and without keeping up, it’s easy to fall behind.

At its core, every new technology, when explored deeply, turns out to be more complex than it seems at first glance. Over time, however, some concepts start to make sense—this is the essence of “deeply understanding something to make it simple.” SPAs are inherently complex technologies, and many frameworks and tools have been developed to address these complexities, such as React, Vue, React-router, and Redux. For beginners, learning all these tools at once can be overwhelming. However, at a fundamental level, libraries like React and Vue are not drastically different; they are both solutions designed for SPAs. The main philosophy of these libraries is to divide web applications into reusable components. Each component can include other components to enhance reusability.

To ensure reusability, components must display different content rather than being identical. This is where the concept of state comes in. States are divided into props and state:

• props: States passed into the component from external sources.
• state: States managed internally by the component.

These UI libraries use advanced algorithms to re-render only the parts of the component that are affected by state changes, ensuring efficient updates.

The need for state management is essentially to let libraries like React track specific values. When these values change, React can calculate and re-render components accordingly. For example, the following code demonstrates passing a name value to reuse a component containing an <h2> tag. The internal state for this is accessed via props:

<Header name='hello'> // Output: <h2>Hello</h2>
<Header name='world'> // Output: <h2>World</h2>

On the other hand, state is more commonly used internally within a component. For example, when a user clicks a button to fetch a quote, the component makes a request to the server, retrieves the quote, updates its state, and triggers a re-render to display the quote. While React facilitates these functionalities and encourages componentization and reusability, many components still need to be built manually. This is where “component libraries” come in.

Component libraries, such as Ant Design and MaterialUI, provide a collection of pre-built, reusable components that can be directly used in projects, saving time and effort.

Routing in Single-Page Applications

After discussing UI and component libraries, another key feature of SPAs is routing. Routing can be implemented using plain JavaScript, for example:

• When a link is clicked, JavaScript clears (or hides) the current page content and renders the target content.

However, this approach introduces some problems:

1. Writing a large amount of code is required.
2. Browser navigation features, such as forward and back, are lost.
3. It becomes difficult to bookmark specific pages.

Although these issues can be solved with additional code, libraries like React-router-dom emerged to simplify routing. These libraries encapsulate all the underlying logic, providing an easy-to-use API. Most developers no longer need to write or even understand the underlying code, as these libraries are ready to use out of the box.

State Management: props and state

As previously mentioned, state management in React is divided into props (external state) and state (internal state). However, when component hierarchies become deeply nested, passing a state from the top-level component to the Nth-level component becomes cumbersome. Even components that don’t need the state must act as intermediaries to pass it along.

This problem is solved by global state management solutions like Redux. Redux allows the entire web application to share a global state. States that need to be passed through multiple layers can be placed in this global state, freeing unrelated components from having to manage irrelevant states and letting relevant components focus only on the states they care about.

Redux has an elegant design: application states cannot be modified directly. This is to avoid potential chaos in state management when multiple components try to modify states simultaneously. The Redux workflow for modifying states is as follows:

1. A component initiates an action.
2. The action is received by the dispatch function.
3. The reducer processes the action.
4. The state is updated.
5. Components are re-rendered accordingly.

By following this structured process, Redux ensures clear and manageable state updates in complex applications.