online edit web
1.0.0
С июля мы рефактировали этот онлайн -редактор кода и завершили базовую версию в течение одного месяца. Через два месяца мы завершили основную функцию редактора: сотрудничество.
Перед началом давайте сначала опубликуем соответствующий адрес. Если это полезно для вас, добро пожаловать в звезду:
Адрес склада фронта
Адрес предварительного просмотра фронта (может напрямую запустить проект React)
Адрес предварительного просмотра фронта (может реализовать сотрудничество)
Бэкэнд -склад Адрес
Поскольку этот проект использует WebContainer, развертывание должно использоваться в HTTPS. Тем не менее, Vercel предоставляет HTTPS для развертывания, но наша бэкэнд -сервис не имеет HTTPS. При развертывании с Vercel мы не можем получить доступ к нашей бэкэнд -службе. Поэтому, если вы хотите испытать наилучший эффект, мое предложение состоит в том, чтобы напрямую вытащить код этого репозитория и начать его напрямую.
Чтобы написать проект с открытым исходным кодом, самая важная вещь, безусловно, самая важная. Фронт-энд использует NextJS, а в задней части используются NESTJS.
Прежде всего, одна из точек, которые я предпочитаю NextJS, заключается в том, что его система маршрутизации файлов является простой и интуитивно понятной, и она может автоматически генерировать маршруты в соответствии со структурой папок, уменьшая рабочую нагрузку нашей ручной конфигурации и используется из коробки.
Next.js интегрирует среды React и Node.js, разработчики могут быстро начать с привычного синтаксиса React без настройки сложных инструментов сборки. В проектах, которые меньше полагаются на бэкэнд, вы можете использовать NextJS для реализации проектов с полным стеком без необходимости писать дополнительные бэкэнды.
Во-вторых, это более отдаленно. Среди людей, с которыми я вступал в контакт, некоторые друзья, как правило, находят удаленную работу. На отдаленных должностях, над которыми я опросил и работал, используемый базовый технологический стек - NextJS. Это, прежде всего, благодаря своей функции рендеринга на стороне сервера и более удобно для SEO. Другой момент заключается в том, что экология также очень полна, например, Tailwindcss, Shadcn, Zustand, SWR и т. Д. Она также предоставляет Vercel для бесплатного развертывания и бесплатных баз данных, таких как Supabase.
Что касается того, почему вы выбираете NESTJS, вам, вероятно, не нужно это объяснять.
Далее я поделюсь с вами некоторыми его функциями, чтобы вы могли получить всеобъемлющее понимание этого проекта:
На домашней странице это просто метеорная анимация, плюс следующий контент, и общая координация все еще довольно хороша.
Нажав на панель управления, вы войдете в панель инструментов. Если вы не вошли в систему, вы перейдете на страницу входа в систему:
Здесь нет необходимости регистрироваться, вы можете напрямую получить код проверки. Если у вас нет учетной записи, вы напрямую зарегистрируете новую.
Введите панель управления, где мы можем создать проект или создать совместный документ:
Здесь есть много разных структур для инициализации. В дополнение к использованию исходного шаблона, мы также можем напрямую импортировать локальный код для разработки и редактирования:
Здесь есть симпатичный аватар, мне это очень нравится:
После нажатия, чтобы создать, мы введем такую страницу. Во -первых, слева есть панель файлов, общий макет такой же, как VSCODE, и следующая консоль. Здесь мы можем напрямую выполнить некоторые команды NPM и PNPM, а также некоторые команды NodeJS.
Теперь мы выполняем PNPM для этого проекта, чтобы установить соответствующие пакеты зависимостей и выполнять pnpm dev , чтобы начать эти проекты:
В дополнение к дереву файлов, мы также предоставляем аналогичные функции для VSCODE, поиск файлов:
Вы также можете написать на разделенном экране:
Здесь мы также можем изменить тему редактора, и здесь мы предоставляем несколько тем на выбор:
На этот раз мы вернемся к нашей основной функции: совместное редактирование. Во -первых, нам нужно создать документ на панели управления панелью панели управления:
После завершения творения вы увидите такой эффект:
Нажмите, чтобы поделиться документом и поделиться документом с другими друзьями, чтобы редактировать его вместе:
Окончательный эффект редактирования совместной работы:
Что касается совместного редактирования, давайте поделимся технологическим стеком, участвующим в передней и задней части.
внешний интерфейс
Y-Monaco: интегрирует функцию сотрудничества YJS в реальном времени с Monaco Editor, обеспечивая синхронизацию данных по умолчанию и совместное влияние пользовательского интерфейса.
Y-Websocket: адаптер YJS WebSocket обеспечивает функцию синхронизации данных в реальном времени, что позволяет нескольким клиентам сотрудничать по редактированию с помощью WebSocket.
YJS: высокопроизводительная структура CRDT, которая поддерживает сотрудничество в режиме реального времени и редактирование в автономном режиме, и автоматически объединяет изменения в типах обмена для обработки конфликтов, подходящих для сценариев с большими документами и неограниченными пользователями.
Perfect-Cursors: обеспечивает плавное движение мыши.
задняя часть
y-websocket: YJS инкапсулирует совместную логику
Y-Mongodb-Provider: постоянное хранение
Спасибо всем, кто внес свой вклад в этот проект!
Если этот проект полезен для вас или заинтересован в этом проекте, добро пожаловать в Star️
Наконец, давайте упомянем эти два проекта с открытым исходным кодом, оба из которых являются проектами с открытым исходным кодом, которые мы в настоящее время поддерживаем:
Редактор совместного онлайн -кода
Фронтовые леса создают nate
Если вы хотите участвовать в разработке или хотите присоединиться к группе для обучения, вы можете добавить меня WeChat yunmz777 . В будущем будет много потребностей. После завершения этого проекта будет много новых и интересных проектов с открытым исходным кодом.
