online edit web
1.0.0
Desde julio, hemos refactorado este editor de código en línea y hemos completado una versión básica dentro de un mes. Dos meses después, hemos completado la función central del editor: colaboración.
Antes de comenzar, publicamos primero la dirección relevante. Si es útil para usted, bienvenido a Star:
Dirección del almacén front-end
Dirección de vista previa delantera (puede ejecutar directamente el proyecto React)
Dirección de vista previa delantera (puede realizar la colaboración)
Dirección del almacén de backend
Debido a que este proyecto utiliza WebContainer, la implementación debe usarse bajo HTTPS. Sin embargo, Vercel proporciona HTTPS para la implementación, pero nuestro servicio de backend no tiene HTTPS. Si se implementa con Vercel, no podemos acceder a nuestro servicio de backend. Entonces, si desea experimentar el mejor efecto, mi sugerencia es extraer directamente el código de este repositorio y comenzarlo directamente.
Para escribir un proyecto de código abierto, lo más importante es definitivamente el más importante. El front-end usa NextJS, y el back-end usa NestJs.
En primer lugar, uno de los puntos que prefiero NEXTJS es que su sistema de enrutamiento de archivos es simple e intuitivo, y puede generar automáticamente rutas de acuerdo con la estructura de la carpeta, reduciendo la carga de trabajo de nuestra configuración manual y se usa fuera de la caja.
Next.js integra entornos React y Node.js, los desarrolladores pueden comenzar rápidamente con la sintaxis React familiar sin configurar herramientas complejas de compilación. En proyectos que dependen menos del backend, puede usar NextJS para implementar proyectos de pila completa sin la necesidad de backends adicionales para escribir.
En segundo lugar, es más remoto. Entre las personas con las que he entrado en contacto, algunos amigos tienden a encontrar un trabajo remoto. En los puestos remotos en los que he entrevistado y trabajado, la pila de tecnología básica utilizada es NextJS. Esto es en primer lugar, gracias a su función de representación del lado del servidor y es más amigable con SEO. Otro punto es que la ecología también es muy completa, como Tailwindcss, Shadcn, Zustand, SWR, etc. También proporciona Vercel para la implementación gratuita y bases de datos gratuitas como Supabase.
En cuanto a por qué elige NESTJS, probablemente no necesite explicarlo.
A continuación, compartiré algunas de sus funciones con usted para que pueda tener una comprensión integral de este proyecto:
En la página de inicio, es solo una animación de meteoritos, más el siguiente contenido, y la coordinación general sigue siendo bastante buena.
Después de hacer clic en el panel de control, ingresará al tablero. Si no ha iniciado sesión, saltará a la página de inicio de sesión:
No es necesario registrarse aquí, puede obtener directamente el código de verificación. Si no tiene una cuenta, registrará directamente una nueva.
Ingrese el panel de control, donde podemos elegir crear un proyecto o crear un documento colaborativo:
Hay muchos marcos diferentes para la inicialización aquí. Además de usar la plantilla original, también podemos importar directamente el código local para el desarrollo y la edición:
Hay un bonito avatar aquí, me gusta mucho:
Después de hacer clic para crear, ingresaremos de este tipo. Primero, hay una barra de archivo a la izquierda, el diseño general es el mismo que VScode, y lo siguiente es la consola. Aquí podemos ejecutar directamente algunos comandos de NPM y PNPM, así como algunos comandos NodeJS.
Ahora ejecutamos PNPM para que este proyecto instale los paquetes de dependencia relevantes y ejecutamos pnpm dev para iniciar estos proyectos:
Además del árbol de archivos, también proporcionamos funciones similares a VScode, búsqueda de archivos:
También puedes escribir en la pantalla dividida:
Aquí también podemos cambiar el tema del editor, y aquí proporcionamos múltiples temas para elegir:
Esta vez volveremos a nuestra función central: edición colaborativa. Primero, necesitamos crear un documento en el panel de control del tablero:
Después de completar la creación, verá tal efecto:
Haga clic para compartir el documento y compartir el documento con otros amigos para editarlo juntos:
El efecto de edición de colaboración final:
Con respecto a la edición colaborativa, compartimos la pila de tecnología involucrada en los extremos delanteros y traseros.
Interfaz
Y-MONACO: Integra la función de colaboración en tiempo real de YJS con el editor de Monaco, proporcionando la sincronización de datos de edición de colaboración predeterminada y el efecto de la interfaz de usuario colaborativo.
Y-Websocket: el adaptador WebSocket de YJS proporciona una función de sincronización de datos en tiempo real, lo que permite a varios clientes colaborar en la edición a través de WebSocket.
YJS: un marco CRDT de alto rendimiento que admite la colaboración en tiempo real y la edición fuera de línea, y fusiona automáticamente los cambios en los tipos de intercambio para manejar conflictos, adecuados para escenarios con grandes documentos y usuarios ilimitados.
Cursores perfectos: proporciona movimiento liso del mouse.
extremo posterior
Y-Websocket: YJS encapsula la lógica colaborativa
Y-MongoDB-Provista: almacenamiento persistente
¡Gracias a todos los que contribuyeron a este proyecto!
Si este proyecto es útil para usted o está interesado en este proyecto, bienvenido a Starmin.
Finalmente, mencionemos estos dos proyectos de código abierto, los cuales son proyectos de código abierto que estamos manteniendo actualmente:
Editor colaborativo de código en línea
Andamio delantero crea una nata
Si desea participar en el desarrollo o desea unirse al grupo para estudiar, puede agregarme WeChat yunmz777 . Habrá muchas necesidades en el futuro. Después de completar este proyecto, habrá muchos proyectos de código abierto nuevos e interesantes que lo esperan.
