This document aims to help Korean users learn Framer by addressing the lack of Korean resources. It translates content from the official blog into Korean and adds practical insights. We hope it provides some assistance to those using Framer.

TL;DR

• Better Performance: Efficient rendering and state management with React result in fast-loading and responsive websites

• Better User Experience: A component-based structure provides a smooth and consistent user experience

• Future-Proof Scalability: React enables flexible and sustainable website development for both present and future needs

What Does Today's Web Demand?

In today's web environment, the goal is to create seamless and immersive experiences, beyond just aesthetics. This requires tools that consider not only performance but also management, scalability, and collaboration.

Early websites were static pages designed mainly for information consumption. Traditional HTML and CSS-based sites were lightweight and high-performing but lacked the interactivity and dynamic features that modern users expect.

The modern web has evolved into being dynamic and interactive, turning websites into full-fledged applications. They integrate with APIs, offer smooth animations and transitions to engage users, provide real-time updates, and support a range of devices from desktops to phones and tablets.

Traditional web development remains essential, but relying solely on it without modern tools can make it challenging to build the complex interfaces and features required for contemporary web applications.

This is where tools like React come in. React is one of the most popular frontend development libraries developed by Meta with modern website creation in mind. It equips developers in companies of all sizes to meet and even exceed today's user expectations with advanced web applications.

Improving Performance and User Experience

As websites incorporate more features and complex UIs, issues like slow loading times and responsiveness become common challenges, particularly on low-spec devices or under slow network conditions.

Browsers follow a process called the “pixel pipeline” to update the user interface. This includes layout calculation, element painting, and layer composition. While essential for interface changes, this process can be resource-intensive, at times blocking the main thread and causing the interface to become unresponsive during updates.

React addresses this with the concept of the “Virtual DOM.” Instead of direct updates to the actual DOM, it keeps a virtual in-memory DOM, calculates the changes, and commits the updates to the real DOM.

This process, known as reconciliation, uses React’s diffing algorithm to find the minimum changes needed to update the real DOM. React then batches these updates and executes them in a single pass, optimizing the update process while reducing resource-intensive reflows and repaints.

Furthermore, React provides a scheduling mechanism that assigns priority to updates based on user interactions and device rendering performance. Framer utilizes this mechanism to prioritize critical updates, like user inputs, ensuring a smooth and responsive user experience.

Although React doesn't guarantee perfect performance itself, it offers tools to tackle performance issues on the modern web. With optimized update processes, interaction prioritization, and techniques like the Virtual DOM and reconciliation, React helps developers maintain high performance and responsiveness while building complex, interactive web applications.

Component-Based Design

Traditional web development involves writing HTML, CSS, and JavaScript in separate files, often resulting in large, monolithic code files. React adopts a different approach by designing the UI as components. These components are encapsulated, reusable UI elements that can be combined to build complex user interfaces. They're created with JavaScript functions or classes and designed to receive inputs (props) that change their behavior and display.

This enables developers to systematically build today's complex user interfaces with simple components. These components can be easily shared and reused across applications or multiple projects, enhancing code reusability and consistency.

Framer leverages this component-based paradigm by offering a collection of professionally crafted React components produced by the community. These components smoothly integrate into projects, matching specific requirements while effortlessly exploiting the reusability and modularity of the React component model.

Forward-Thinking Architecture

In the ever-changing web landscape of today, React stands out because it is designed to adapt easily to change. Traditional interface programming involves a detailed process of DOM manipulation.

// index.html

<div>
  <input type="text" id="itemInput" placeholder="Enter new item" />
  <button id="addItemButton">Add Item</button>
  <ul id="itemList"></ul>
</div>

// index.js

// 1. Get the button element
const addItemButton = document.getElementById("addItemButton");

// 2. Add event listener to button element
addItemButton.addEventListener("click", {

  // 3. Get input and list elements
  const itemInput = document.getElementById("itemInput");
  const list = document.getElementById("itemList");

  // 4. Create new list item
  const listItem = document.createElement("li");

  // 5. Set inner text to value of input
  listItem.innerText = itemInput.value;

  // 6. Add list item to list
  list.appendChild(listItem);

  // 7. Set input back to empty
  itemInput.value = "";
})

However, React employs a declarative approach to interface programming rather than an imperative one.

// itemList.jsx

import React, { useState } from "react";

function itemList() {

  // 1. Define the state
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState("");

  // 2. Handle button click
  function handleAddItem() {
    setItems(prevItems => [...prevItems, newItem]);
    setNewItem(""); // Clear input after adding;
  }

  // 3. Bind state and event handlers to the UI
  return (
    <div>
      <input 
          type="text"
          value={newItem}
          onChange={e => setNewItem(e.target.value)}
      />
      <button onClick={handleAddItem}>Add Item</button>
      <ul>
        {items.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}

When defining interfaces in React, you merely declare “the UI should look like this given this state.” As data changes, React automatically updates the DOM efficiently according to the defined components.

This declarative approach facilitates easy sharing and composition of components to build more complex user interfaces, enhancing code reuse. Developers need only update the desired state or properties of components, simplifying the addition and adjustment of new features in line with shifting user needs and web standards.

Additionally, React and Framer adhere to the immutability principle. Instead of directly modifying an existing object, a new sub-object is created for updates. This makes the UI predictable and stable, advantageous for long-term maintenance. Moreover, React rigorously maintains backward compatibility. Framer likewise enables long-term stable project operation without sudden breakdowns of old components.

Framer advances this by automatically converting elements designed on the canvas into reusable React components. Designers can create modular user interfaces with React without writing any code while maintaining compatibility with the latest web technologies. Projects built with Framer evolve with the latest web trends and user demands while preserving compatibility with previous features. Additionally, Framer is well-suited for simplifying the process of keeping applications up-to-date.

Community Support

Another strength of React is its vibrant community ecosystem. React boasts a broad ecosystem where developers, designers, and companies all contribute to its growth and development. This ecosystem helps React remain at the forefront of web development, constantly evolving to meet the demands of the modern web.

Though Framer is based on a no-code platform, it is connected to the React ecosystem, making it easy to leverage community-provided innovations like animations, API integrations, and advanced state management capabilities. Many of these community-driven technologies integrate seamlessly with Framer, allowing users to build more creative and functional websites without coding. Thus, even without learning React, you can enjoy the benefits of the React ecosystem.

Thanks to the breadth of knowledge and resource sharing within the React community, Framer users can access a variety of resources without directly learning React. From tutorials and documentation on specific libraries and tools to best practices and design patterns, the community's efforts enable Framer users to better understand and capitalize on the potential of the React ecosystem in their projects.

Furthermore, it's possible to hire React developers to expand Framer projects based on existing Framer designs. With Framer's built-in Monaco code editor, React developers can enhance website functionality in a familiar environment with auto-completion and IDE-like settings.

Whether you are an individual creator or part of a large team, Framer delivers an experience that transcends boundaries. You can start with Framer’s no-code approach and smoothly integrate custom React components, advanced logic, and cutting-edge features as your project grows, maintaining an extendable and manageable codebase. Framer not only empowers users to create state-of-the-art websites for today’s web without needing coding expertise, but it also provides a future-proof environment so you can freely explore the limits within the modern web without being confined by the restrictions of a closed ecosystem.

Conclusion

The reasons Framer adopts React are clear. Performance, user experience, future-readiness, and community—these four elements combine to establish Framer not just as a no-code tool, but as a scalable platform for the modern web.

Whether you're someone with development experience or a non-specialist bringing ideas to life, Framer allows you to pull from the React ecosystem and talent as needed to further grow your project. Choosing Framer means choosing React, not just for current project creation but as a solid foundation that withstands future changes.

This article is a translated and adapted version of content from Framer's official blog titled 'Why Framer uses React to build sites'.