This document was created to assist domestic users learning Framer, addressing the challenges posed by the lack of Korean resources. It translates content from the official blog into Korean and adds practical information. We hope it provides you with some help in using Framer.

Key Summary

• Better Performance: Thanks to React's efficient rendering and state management, websites load quickly and respond swiftly.

• Enhanced User Experience: The component-based structure delivers a seamless and consistent user experience.

• Forward-looking Scalability: React enables the development of flexible and sustainable websites, suitable for both the present and future.

What Does Today’s Web Demand?

Today’s web goes beyond just having a visually appealing screen; the essence is to create an experience that is seamless and immersive without interruptions. To achieve this, tools that consider performance, management, scalability, and collaboration are necessary.

The initial websites of the internet were a collection of static pages designed primarily for information consumption. These traditional HTML and CSS-based sites were lightweight and high-performing but lacked the interactivity and dynamic features today’s users expect.

Modern web has evolved to be dynamic and interactive, turning websites into full-fledged applications. Websites are integrated with APIs, encouraging user engagement with smooth and efficient animations and transitions, providing real-time updates, and supporting various devices from desktops to phones and tablets.

Traditional web development remains an essential part of today's web. However, continuing to use these methods without modern tools can make it challenging to build the complex user interfaces/functions required for today’s web applications.

This is where tools like React come into play. React, developed by Meta with today’s web creation in mind, is one of the most popular frontend development libraries. React equips developers of any scale to meet, and even exceed, current user expectations by supporting the development of advanced web applications.

Improving Performance and User Experience

As websites incorporate more features and complex UIs, challenges such as longer load times and responsiveness issues become common. These performance issues can particularly affect low-spec devices or slow network environments.

Browsers undertake a process known as the “pixel pipeline” to update the user interface, which involves layout calculation, element painting, and layer composition. This process is essential for changing the interface but is resource-intensive, potentially blocking the main thread and sometimes causing the interface to become unresponsive during updates.

To solve this, React introduces the concept of the “Virtual DOM”. Rather than directly updating the actual DOM, a virtual DOM is maintained in memory to calculate changes and then update the actual DOM.

This process, called reconciliation, uses React's diffing algorithm to find the minimal changes needed to update the actual DOM. React then optimizes the update process by batching DOM updates and executing them in a single pass, minimizing the resource-heavy reflow and repaint processes.

Additionally, React provides a scheduling mechanism that prioritizes updates according to user interactions and device rendering performance. Framer utilizes this mechanism to prioritize critical updates, like user inputs, maintaining a smooth and responsive user experience.

While React doesn’t guarantee perfect performance by default, it provides the necessary tools to address today’s web performance issues. React helps optimize the update process, prioritize user interactions, and use technologies like Virtual DOM and reconciliation to support developers in maintaining excellent performance and responsiveness while building complex and interactive web applications.

Component-Based Design

Traditional web development often involves writing HTML, CSS, and JavaScript in separate files, leading to massive single code files. React takes a different approach by designing the UI in component units. Components are encapsulated, reusable UI elements that can be composed to build complex user interfaces. These components are created using JavaScript functions or classes, designed to receive inputs (props) that modify their behavior and display content.

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

Framer offers a collection of professionally made React components from the community to fully utilize this component-based paradigm. These components can be seamlessly integrated into projects, adapted to specific requirements, while effortlessly utilizing the reusability and modularity of the React component-based model.

Future-Proof Structure

In today’s ever-changing web environment, React stands out because it is designed to adapt easily to changes. Traditional interface programming methods require detailed descriptions of the DOM manipulation processes.

// 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 uses a declarative approach to define interfaces instead of 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>
  );
}

In React, when defining an interface, you merely declare “the UI should look this way in this state.” When data changes, React efficiently updates the DOM to match the defined components.

This declarative approach enhances code reusability by making it easier to share components and compose them to build more complex user interfaces. Developers only need to update the desired state or properties of a component, making it easier to add and adjust new features to meet evolving user demands and web standards.

React and Framer also adhere to the principle of immutability. Instead of directly modifying an object once created, a new object is created with changes, making the UI predictable and stable, which benefits long-term maintenance. Additionally, React ensures strict backward compatibility. Similarly, Framer enables long-term stable project operation without unexpected issues with outdated components.

Framer advances this by automatically converting elements designed in the canvas into reusable React components. Designers can create modular user interfaces with React without writing a line of code, maintaining compatibility with the latest web technologies. Projects built with Framer adapt to the latest web trends and user demands while maintaining compatibility with previous features. Moreover, Framer simplifies the process of keeping applications up-to-date.

Community Support

Another strength of React is its thriving community ecosystem. React has a vast ecosystem where developers, designers, and companies contribute to its growth and development. This ecosystem helps React stay at the forefront of web development, continuously evolving to meet the needs of the modern web.

Although Framer is no-code, it is connected to the React ecosystem, allowing easy access to community-provided innovations such as animations, API integrations, and advanced state management features. These community-driven technologies are perfectly integrated into Framer, empowering users to create more creative and functional websites without coding. Thus, you can enjoy the benefits of the React ecosystem without learning React.

The sharing of knowledge and resources within the React community allows Framer users to utilize various resources without learning React directly. From tutorials and documentation for specific libraries and tools to best practices and design patterns, community efforts help Framer users better understand and fully harness the potential of the React ecosystem in their projects.

It's also possible to expand Framer projects by hiring React developers based on existing Framer designs. By using the Monaco code editor built into Framer, React developers can extend website functions in a familiar environment, complete with auto-completion and an IDE-like setup.

Framer offers an experience that surpasses limits, whether you're an individual creator or part of a large team. Start with Framer’s no-code approach and, as your project grows, seamlessly integrate custom React components, advanced logic, and cutting-edge features while maintaining an extensible and maintainable codebase. Framer not only allows users to create websites for the modern web without specialized coding knowledge but also provides a future-proof environment that enables growth and evolution beyond the constraints of a closed ecosystem, allowing you to expand the boundaries of what's possible in today's modern web.

Conclusion

The reason Framer adopted React is clear. The combination of performance, user experience, future-ready design, and community has positioned Framer not just as a no-code tool but as a scalable platform for the modern web.

Both those with development experience and non-experts can realize their ideas, and if needed, draw on the React ecosystem and manpower to further advance their projects. Choosing Framer means choosing React. It's not just about building your current project, but also about choosing a foundation that will withstand future changes.

This article is an adaptation and translation of the content from Framer's official blog 'Why Framer uses React to build sites'.