0
Onlook: Визуальный редактор React
Разрыв между проектированием и разработкой часто расстраивает многие команды. Дизайнеры используют такие инструменты, как Figma, для создания красивых интерфейсов, но разработчикам трудно превратить эти проекты в рабочий код, используя традиционные среды IDE. Это несоответствие иногда замедляет разработку и может привести к недоразумениям и дорогостоящим исправлениям.
Onlook - это новый инструмент, который помогает преодолеть этот пробел, перенося функции проектирования непосредственно в вашу среду разработки. С помощью Onlook вы можете улучшить свой рабочий процесс, улучшить взаимодействие дизайнеров и разработчиков и предоставлять продукты быстрее и точнее.
В этой статье мы рассмотрим Onlook, инструмент, который предоставляет возможности проектирования непосредственно в среде разработки. Мы рассмотрим, чем он отличается от существующих инструментов, таких как Figma и Webflow, и дадим практическое руководство по его настройке.
Что такое Onlook?
Onlook - это визуальный редактор с открытым исходным кодом, разработанный специально для приложений React. Он позволяет разработчикам создавать и изменять пользовательские интерфейсы во время работы с их компонентами live React. Onlook предоставляет интерфейс прямого управления, аналогичный Figma, с такими функциями, как редактирование перетаскиванием, предварительный просмотр в режиме реального времени и плавная генерация кода.
С помощью Onlook разработчики могут визуально манипулировать компонентами, настраивать стили и видеть изменения в режиме реального времени, работая в рамках реальной кодовой базы своего приложения. Его прямая интеграция упрощает процесс передачи функций между проектированием и разработкой, сокращая несоответствия и оптимизируя общий рабочий процесс.
В отличие от традиционных инструментов проектирования или конструкторов без использования кода, Onlook позволяет разработчикам напрямую интегрировать свои существующие проекты React и сохранять полный контроль над разработкой, одновременно получая преимущества визуального редактирования. Onlook - относительно новая платформа, получившая более 4,2 тыс. звезд на Github. В нем более 40 участников, а это значит, что они регулярно публикуют обновления и новые функции.
Особенности просмотра
- Оперативное редактирование в React apps: Onlook позволяет редактировать компоненты, пока они полностью функциональны и интерактивны. Это позволяет вам видеть, как ваши изменения влияют на реальное состояние и поведение приложения, изменять макеты с учетом реальных данных, передаваемых через ваши компоненты, и тестировать взаимодействия сразу после внесения изменений в дизайн
- Редактирование дизайна в режиме реального времени: возможности редактирования Onlook в режиме реального времени выходят за рамки базового стиля. Они включают в себя интерфейс перетаскивания для позиционирования компонентов и корректировки макета, предварительный просмотр изменений CSS в режиме реального времени с немедленной обратной связью, интерактивное изменение размеров элементов с адаптивной визуализацией точек останова и обновление реквизитов и состояния компонентов в режиме реального времени
- Чат с искусственным интеллектом: Onlook интегрирует чат с искусственным интеллектом для улучшения своих функций. С помощью искусственного интеллекта он может предлагать дизайн на основе текущей работы, рекомендовать цветовые палитры, макеты и выбор компонентов, а также помогать пользователям быстро разрабатывать свои идеи
- Подход "сначала код": Подход "сначала код" гарантирует, что ваши визуальные изменения будут преобразованы в чистый, поддерживаемый React-код, с прямой обработкой существующего кода компонента, без создания ненужных элементов-оболочек или стилевых излишеств, а также с полным доступом к реквизитам, состоянию и методам компонентов во время редактирования
- Совместимость с существующими проектами React: Onlook может легко интегрироваться с существующими проектами React, работая с любой структурой проекта React, поддерживая современные функции React и популярные стилевые решения, такие как Tailwind CSS, модули CSS, контекст, перехватчики, а также сохраняя существующие рабочие процессы сборки и развертывания
Преимущества использования Onlook
- Onlook помогает избавиться от необходимости переключаться между инструментами проектирования и редакторами кода, а также способствует более эффективному и интегрированному процессу разработки
- Это позволяет быстро экспериментировать с различными макетами, стилями и взаимодействиями
- Onlook устраняет разрыв между дизайнерами и разработчиками, предоставляя общий визуальный язык, который облегчает передачу дизайнерских идей и обеспечивает согласованность
- Перевод его дизайна в коды React упрощает работу с Onlook для разработчиков React
Предпосылки
Onlook - это отдельное приложение, но для того, чтобы следовать этому руководству, вам также понадобится:
- Редактор кода, такой как VS Code или Cursor
- Базовые знания о выполнении команд на вашем терминале
- Базовое знакомство с концепциями design и React
Настройка проекта
Чтобы начать работу с Onlook, выполните следующие действия:
- Загрузите и установите настольное приложение Onlook, выбрав версию, подходящую для вашей системы.
- Запустите приложение Onlook. Вам будет предложено зарегистрироваться или войти в систему, используя свой аккаунт на GitHub или Google.
- Создайте новый проект React: Дайте своему проекту название. Выберите папку для вашего приложения. После завершения настройки вы будете перенаправлены в интерфейс, где сможете создать свое приложение.
- Запустите сервер разработки: нажмите кнопку воспроизведения на нижней панели инструментов.
- Проверьте URL-адрес: убедитесь, что http://localhost:3000/ указывает на правильное местоположение. Если он открывается в вашем браузере, он также должен открываться в приложении Onlook.
- Проверьте терминал: Вы также можете открыть терминал, чтобы подтвердить, что ваше приложение запущено.
После запуска вам будет представлена домашняя страница вашего приложения.
Теперь, когда мы запустили наше приложение, давайте погрузимся в интерфейс Onlook, прежде чем разрабатывать наше первое приложение.
Понимание интерфейса Onlook
Когда вы впервые откроете Onlook, вы увидите интерфейс, сочетающий визуальное редактирование с функциями кода. В интерфейсе есть несколько ключевых областей, каждая из которых имеет определенное назначение в процессе разработки.
Основное рабочее пространство состоит из трех основных разделов:
- Панель компонентов находится в центре, где вы можете видеть, как ваши компоненты работают в режиме реального времени
- Панель "Свойства" и "Чат с искусственным интеллектом" находятся справа и отображают элементы управления для элемента, который вы в данный момент редактируете, включая раздел, в котором вы можете общаться с искусственным интеллектом
- Навигатор по дереву компонентов находится слева и отображает структуру вашего приложения
Кроме того, есть и другие важные разделы:
- Панель инструментов: Расположена в нижней части интерфейса и включает в себя кнопки для выбора элементов, панорамирования изображения, вставки объектов и текста, запуска приложения и доступа к консоли/терминалу.
Интерфейс Onlook объединяет дизайн и разработку. Любое внесенное вами изменение в дизайн немедленно обновляет базовый код React. Любые изменения в коде также отражаются на дизайне. Эта двусторонняя взаимосвязь отличает Onlook от традиционных инструментов проектирования.
От дизайна к коду
В отличие от традиционных рабочих процессов, в которых вы экспортируете дизайн в код, Onlook поддерживает прямую связь между вашими визуальными изменениями и кодом React. Это позволяет:
- Визуальные изменения для немедленного обновления кода в вашем приложении React
- Код, который будет оставаться доступным через ваш любимый редактор (например, VS Code)
- Изменения должны быть внесены либо визуально, либо в коде, сохраняя синхронизацию
Давайте разберем это на компоненты. Когда вы работаете над компонентом, вы можете:
- Создайте его визуально в интерфейсе Onlook
- Нажмите "Открыть в VS Code", чтобы просмотреть и отредактировать сгенерированный код
- Вносите изменения в любую из этих сред
- Мгновенно отображайте ваши изменения в обоих местах
Создание компонентов и управление ими
Давайте создадим приложение для составления списка дел с помощью Onlook, чтобы показать, как визуальный редактор работает с React. В этом примере мы рассмотрим основные возможности Onlook при создании реального приложения, использующего управление состоянием, взаимодействие с пользователем и состав компонентов.
Когда вы начинаете разрабатывать дизайн в Onlook, у вас есть два варианта: вы можете либо использовать визуальный редактор напрямую, либо воспользоваться AI assistant от Onlook. Новичкам или тем, кому требуется руководство, AI assistant может оказаться полезным. Вы можете описать, что вы хотите, и искусственный интеллект поможет вам создать базовый макет, который вы сможете улучшить:
Визуальный редактор позволяет перетаскивать элементы, изменять стили и быстро получать результаты. По мере внесения изменений Onlook автоматически записывает за вас код React. Сначала весь код помещается в файл page.tsx, который является отправной точкой, но не лучшей настройкой для рабочего приложения.
Структурирование приложения Хотя автоматическая генерация кода в Onlook полезна, реальные приложения нуждаются в более четкой структуре. Для решения этой проблемы мы можем использовать архитектуру на основе компонентов. Такой подход позволит избежать проблем и упростить поддержку кода.
Вот как мы организуем наш проект:
app/
âÂÂâÂÂâ page.tsx
âÂÂâÂÂâ components/
âÂÂâÂÂâ TodoContainer.tsx
âÂÂâÂÂâ TodoForm.tsx
âÂÂâÂÂâ TodoList.tsx
âÂÂâÂÂâ TodoItem.tsx
âÂÂâÂÂâ types.ts
Эта структура соответствует лучшим практикам React, разбивая пользовательский интерфейс на понятные компоненты, которые можно использовать повторно. Каждый компонент, который мы продемонстрируем ниже, выполняет определенную функцию, помогая коду оставаться организованным и более простым для понимания.
Компонент "Типы наблюдателей":
// types.ts
export interface Todo {
id: number;
text: string;
completed: boolean;
}
Компонент страницы просмотра:
// page.tsx
import TodoContainer from './components/TodoContainer';
export default function Page() {
return (
<div className="w-full min-h-screen bg-gradient-to-br from-purple-50 to-white dark:from-gray-900 dark:to-gray-800 p-4">
<div className="max-w-2xl mx-auto">
<div className="text-center mb-8">
<h1 className="text-4xl font-bold text-purple-600 dark:text-purple-400 mb-2">
Todo List
</h1>
<p className="text-gray-600 dark:text-gray-300">
Stay organized and productive
</p>
</div>
<TodoContainer />
</div>
</div>
);
}
Компонент TodoContainer от Onlook:
// components/TodoContainer.tsx
'use client';
import { useState } from 'react';
import TodoForm from './TodoForm';
import TodoList from './TodoList';
import { Todo } from './types';
export default function TodoContainer() {
const [todos, setTodos] = useState<Todo[]>([]);
const [newTodo, setNewTodo] = useState('');
const addTodo = (e: React.FormEvent) => {
e.preventDefault();
if (newTodo.trim()) {
setTodos([
...todos,
{
id: Date.now(),
text: newTodo.trim(),
completed: false,
},
]);
setNewTodo('');
}
};
const toggleTodo = (id: number) => {
setTodos(
todos.map((todo) => (todo.id === id ? { ...todo, completed: !todo.completed } : todo)),
);
};
const deleteTodo = (id: number) => {
setTodos(todos.filter((todo) => todo.id !== id));
};
return (
<>
<TodoForm
newTodo={newTodo}
setNewTodo={setNewTodo}
addTodo={addTodo}
/>
<TodoList
todos={todos}
toggleTodo={toggleTodo}
deleteTodo={deleteTodo}
/>
</>
);
}
Компонент TodoForm для просмотра:
// components/TodoForm.tsx
'use client';
interface TodoFormProps {
newTodo: string;
setNewTodo: (value: string) => void;
addTodo: (e: React.FormEvent) => void;
}
export default function TodoForm({ newTodo, setNewTodo, addTodo }: TodoFormProps) {
return (
<form onSubmit={addTodo} className="mb-8">
<div className="flex gap-2">
<input
type="text"
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
placeholder="What needs to be done?"
className="flex-1 p-3 rounded-lg border border-gray-300 dark:border-gray-600
bg-white dark:bg-gray-700 text-gray-900 dark:text-white
focus:ring-2 focus:ring-purple-500 focus:border-transparent"
/>
<button
type="submit"
className="px-6 py-3 bg-purple-600 text-white rounded-lg
hover:bg-purple-700 focus:outline-none focus:ring-2
focus:ring-purple-500 focus:ring-offset-2
transition-colors duration-200"
>
Add
</button>
</div>
</form>
);
}
Компонент списка задач Onlook'а:
// components/TodoList.tsx
'use client';
import { Todo } from './types';
import TodoItem from './TodoItem';
interface TodoListProps {
todos: Todo[];
toggleTodo: (id: number) => void;
deleteTodo: (id: number) => void;
}
export default function TodoList({ todos, toggleTodo, deleteTodo }: TodoListProps) {
return (
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
{todos.length === 0 ? (
<p className="text-center text-gray-500 dark:text-gray-400 py-8">
No todos yet. Add one above!
</p>
) : (
<ul className="space-y-3">
{todos.map((todo) => (
<TodoItem
key={todo.id}
todo={todo}
toggleTodo={toggleTodo}
deleteTodo={deleteTodo}
/>
))}
</ul>
)}
{todos.length > 0 && (
<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
<div className="flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>{todos.filter((t) => !t.completed).length} items left</span>
<span>{todos.filter((t) => t.completed).length} completed</span>
</div>
</div>
)}
</div>
);
}
Текущий компонент просмотра:
// components/TodoItem.tsx
'use client';
import { Todo } from './types';
interface TodoItemProps {
todo: Todo;
toggleTodo: (id: number) => void;
deleteTodo: (id: number) => void;
}
export default function TodoItem({ todo, toggleTodo, deleteTodo }: TodoItemProps) {
return (
<li className="flex items-center gap-3 bg-gray-50 dark:bg-gray-700/50
p-4 rounded-lg group">
<input
type="checkbox"
checked={todo.completed}
onChange={() => toggleTodo(todo.id)}
className="w-5 h-5 rounded border-gray-300
text-purple-600 focus:ring-purple-500"
/>
<span
className={`flex-1 ${
todo.completed
? 'line-through text-gray-400 dark:text-gray-500'
: 'text-gray-700 dark:text-gray-200'
}`}
>
{todo.text}
</span>
<button
onClick={() => deleteTodo(todo.id)}
className="opacity-0 group-hover:opacity-100 transition-opacity
text-red-500 hover:text-red-600 p-1"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clipRule="evenodd"
/>
</svg>
</button>
</li>
);
}
Одной из полезных функций Onlook является его способность связывать визуальный редактор и код в обоих направлениях. Это делается с помощью специального атрибута data-oid, который Onlook добавляет к компонентам в процессе разработки:
<TodoContainer data-oid="zshvwmp"/>
Этот атрибут помогает Onlook отслеживать изменения в компонентах, связывать визуальные элементы с кодом, обеспечивать обновление в реальном времени в обоих направлениях и поддерживать функции компонентов при визуальном редактировании.
При создании приложения вы можете использовать визуальный редактор Onlook, чтобы улучшить дизайн без ущерба для качества кода. Например, вы можете изменять расположение компонентов, настраивать интервалы, улучшать цвета и шрифты, а также тестировать, как ваше приложение реагирует на различные размеры экрана:
Как Onlook вписывается в экосистему дизайна
Инструменты веб-разработки отвечают различным потребностям и рабочим процессам. Они предлагают решения как для дизайна, так и для разработки. Чтобы понять, какое место занимает Onlook, мы сравним его с другими инструментами, выделив его сильные и слабые стороны.
Взгляд со стороны против Figma: Сравнение традиционных инструментов проектирования Традиционные инструменты дизайна хороши для иллюстрации, совместной работы, создания прототипов и управления дизайнерскими активами. Onlook предлагает нечто иное, позволяя напрямую манипулировать компонентами React, взаимодействовать в режиме реального времени с состояниями компонентов и реквизитами, готовым к работе кодом, бесшовной интеграцией с рабочими процессами разработки и активным тестированием поведения компонентов в процессе проектирования.
Взгляд со стороны против Webflow: сравнение разработчиков без использования кода Платформы без кода предлагают визуальную разработку и экспорт кода, они сильны в быстром создании прототипов, визуальной интеграции CMS и встроенном хостинге. Onlook отличается тем, что напрямую интегрируется в существующие кодовые базы React, поддерживает логику компонентов и ориентирован на разработчиков, позволяя при этом визуальное редактирование. Он интегрируется со средствами разработки и поддерживает пользовательские компоненты с полным набором функций React и чистым кодом React.
Преимущества проектирования непосредственно в React
- Разработчики могут видеть, как ведут себя компоненты, используя реальные данные и изменяя их состояние в процессе проектирования. Это помогает им выявлять проблемы взаимодействия и управления состоянием
- Использование компонентов live React позволяет разработчикам быстро оценить, как выбор дизайна влияет на производительность
- Дизайнеры и разработчики могут принимать разумные решения о том, как выглядят компоненты в различных состояниях, следя за тем, чтобы при проектировании учитывались все возможные состояния
- Работа в React дает разработчикам быстрый доступ к системе поддержки приложений и контексту, что позволяет им работать с реальными потоками данных
- Разработчики могут опробовать различные способы объединения компонентов и их организации, сохраняя при этом полный доступ к логике и реквизиту компонента
Вывод
Onlook улучшает рабочий процесс в экосистеме React. Он улучшает взаимодействие между командами разработчиков и проектировщиков и позволяет пользователям визуально редактировать компоненты React, сохраняя при этом код неизменным. Синхронизируя визуальные изменения с кодом в режиме реального времени, Onlook решает множество распространенных проблем с рабочим процессом. Кроме того, его функции искусственного интеллекта и плавная интеграция с существующими проектами React делают его полезным дополнением к современным процессам разработки.
Несмотря на то, что Onlook все еще совершенствуется, он демонстрирует большой потенциал для изменения принципов создания приложений React. Поскольку в него добавлены новые функции, он может стать важным инструментом для разработчиков React, которые хотят улучшить свои рабочие процессы и упростить создание высококачественных пользовательских интерфейсов. Ознакомьтесь с Onlook и опробуйте его возможности в своих проектах.
