online edit web

Desde julho, refatoramos este editor de código on -line e concluímos uma versão básica dentro de um mês. Dois meses depois, concluímos a função principal do editor: Colaboration.

Antes de começar, vamos postar o endereço relevante primeiro. Se for útil para você, seja bem -vindo Star:

1. Endereço do armazém front-end

2. Endereço de visualização front-end (pode executar diretamente o projeto React)

3. Endereço de visualização do front-end (pode realizar a colaboração)

4. Endereço do armazém de back -end

Como este projeto usa WebContainer, a implantação deve ser usada no HTTPS. No entanto, o Vercel fornece HTTPS para implantação, mas nosso serviço de back -end não possui HTTPS. Se implantado com a Vercel, não podemos acessar nosso serviço de back -end. Portanto, se você deseja experimentar o melhor efeito, minha sugestão é puxar diretamente o código deste repositório e iniciá -lo diretamente.

Seleção técnica

Para escrever um projeto de código aberto, o mais importante é definitivamente o mais importante. O front-end usa NextJs e o back-end usa o NestJS.

Primeiro de tudo, um dos pontos que prefiro no NextJS é que seu sistema de roteamento de arquivos é simples e intuitivo, e pode gerar automaticamente rotas de acordo com a estrutura da pasta, reduzindo a carga de trabalho de nossa configuração manual e é usado fora da caixa.

Next.js integra ambientes React e Node.js, os desenvolvedores podem começar rapidamente com a sintaxe do React Familiar sem configurar ferramentas de construção complexas. Em projetos que dependem menos no back-end, você pode usar o NextJS para implementar projetos de pilha completa sem a necessidade de back-ends adicionais para escrever.

Em segundo lugar, é mais adequado. Entre as pessoas com quem entrei em contato, alguns amigos tendem a encontrar um emprego remoto. Nas posições remotas em que entrevistei e trabalhei, a pilha de tecnologia básica usada é a NextJS. Esta é antes de tudo, graças à sua função de renderização do lado do servidor e é mais amigável para SEO. Outro ponto é que a ecologia também é muito completa, como Tailwindcss, Shadcn, Zustand, SWR, etc. Ele também fornece vercel para implantação gratuita e bancos de dados gratuitos, como o Supabase.

Quanto ao motivo pelo qual você escolhe o Nestjs, provavelmente não precisa explicar.

Implementação funcional

Em seguida, compartilharei algumas de suas funções com você para que você possa ter um entendimento abrangente deste projeto:

primeira página

Na página inicial, é apenas uma animação de meteoros, além do conteúdo a seguir, e a coordenação geral ainda é muito boa.

painel de controle

Depois de clicar no painel de controle, você entrará no painel. Se você não estiver conectado, pulará para a página de login:

Não há necessidade de se registrar aqui, você pode obter diretamente o código de verificação. Se você não tiver uma conta, registrará diretamente uma nova.

Digite o painel de controle, onde podemos optar por criar um projeto ou criar um documento colaborativo:

Existem muitas estruturas diferentes para inicialização aqui. Além de usar o modelo original, também podemos importar diretamente o código local para desenvolvimento e edição:

Há um avatar bonito aqui, eu gosto muito:

Edição de código

Depois de clicar para criar, inseriremos essa página. Primeiro, há uma barra de arquivos à esquerda, o layout geral é o mesmo que o vscode, e o seguinte é o console. Aqui podemos executar diretamente alguns comandos do NPM e PNPM, bem como alguns comandos NODEJS.

Agora, executamos o PNPM para este projeto para instalar os pacotes de dependência relevante e executar pnpm dev para iniciar estes projetos:

Pesquisa de arquivo

Além da árvore de arquivos, também fornecemos funções semelhantes ao vscode, pesquisa de arquivos:

Você também pode escrever na tela dividida:

Tema do editor de switch

Aqui também podemos mudar o tema do editor, e aqui fornecemos vários temas para escolher:

Co-editado

Desta vez, voltaremos à nossa função principal: edição colaborativa. Primeiro, precisamos criar um documento no painel de controle do painel:

Após a conclusão da criação, você verá esse efeito:

Clique para compartilhar o documento e compartilhar o documento com outros amigos para editá -lo juntos:

O efeito final de edição colaborativa:

Como a colaboração é implementada?

Em relação à edição colaborativa, vamos compartilhar a pilha de tecnologia envolvida nas extremidades da frente e de trás.

1. front-end

   1. Y-monaco: integra a função de colaboração em tempo real do YJS ao editor de Mônaco, fornecendo a sincronização de dados de edição colaborativa padrão e o efeito colaborativo da interface do usuário.

   2. Y-WebSocket: o adaptador WebSocket da YJS fornece função de sincronização de dados em tempo real, permitindo que vários clientes colaborem na edição através do WebSocket.

   3. YJS: Uma estrutura de CRDT de alto desempenho que suporta colaboração em tempo real e edição offline e mescla alterações automaticamente nos tipos de compartilhamento para lidar com conflitos, adequados para cenários com documentos grandes e usuários ilimitados.

   4. Cursores perfeitos: fornece movimento suave do mouse.

2. extremidade traseira

   1. Y-WebSocket: YJS encapsula a lógica colaborativa

   2. Y-Mongodb-Provider: armazenamento persistente

Colaboradores

Obrigado a todos que contribuíram para este projeto!

Se este projeto for útil para você ou estiver interessado neste projeto, seja bem -vindo a Stare

Por fim, vamos mencionar esses dois projetos de código aberto, ambos os projetos de código aberto que estamos mantendo atualmente:

• Editor colaborativo de código online

• Create-neat de andaimes do front-end

Se você deseja participar do desenvolvimento ou se juntar ao grupo para estudar, pode me adicionar WeChat yunmz777 . Haverá muitas necessidades no futuro. Após a conclusão deste projeto, haverá muitos projetos novos e interessantes de código aberto esperando por você.