online edit web

Depuis juillet, nous avons refactorisé cet éditeur de code en ligne et terminé une version de base dans un délai d'un mois. Deux mois plus tard, nous avons rempli la fonction centrale de l'éditeur: la collaboration.

Avant de commencer, publions d'abord l'adresse pertinente. Si cela vous est utile, bienvenue à Star:

1. Adresse de l'entrepôt frontal

2. Adresse d'aperçu front-end (peut directement exécuter le projet React)

3. Adresse d'aperçu avant (peut réaliser la collaboration)

4. Adresse de l'entrepôt backend

Étant donné que ce projet utilise WebContainer, le déploiement doit être utilisé sous HTTPS. Cependant, Vercel fournit HTTPS pour le déploiement, mais notre service backend n'a pas HTTPS. Si nous sommes déployés avec Vercel, nous ne pouvons pas accéder à notre service backend. Donc, si vous souhaitez vivre le meilleur effet, ma suggestion est de retirer directement le code de ce référentiel et de le démarrer directement.

Sélection technique

Pour rédiger un projet open source, la chose la plus importante est certainement la plus importante. Le front-end utilise NextJS et le back-end utilise NESTJS.

Tout d'abord, l'un des points que je préfère NextJS est que son système de routage de fichiers est simple et intuitif, et il peut générer automatiquement des itinéraires en fonction de la structure du dossier, réduisant la charge de travail de notre configuration manuelle et est utilisée hors de la boîte.

Next.js intègre les environnements React et Node.js, les développeurs peuvent rapidement démarrer avec la syntaxe REACT familière sans configurer des outils de construction complexes. Dans les projets qui comptent moins sur le backend, vous pouvez utiliser NIXTJS pour mettre en œuvre des projets complets sans avoir besoin de backends supplémentaires à écrire.

Deuxièmement, il est plus éloigné. Parmi les personnes avec lesquelles je suis en contact, certains amis ont tendance à trouver un emploi éloigné. Dans les positions à distance que j'ai interviewées et travaillé, la pile de technologie de base utilisée est NextJS. Ceci est tout d'abord, grâce à sa fonction de rendu côté serveur et est plus convivial pour le référencement. Un autre point est que l'écologie est également très complète, comme TailwindCSS, Shadcn, Zustand, SWR, etc. Il fournit également à Vercel pour un déploiement gratuit et des bases de données gratuites telles que Supabase.

Quant à savoir pourquoi vous choisissez NESTJS, vous n'avez probablement pas besoin de l'expliquer.

Implémentation fonctionnelle

Ensuite, je partagerai certaines de ses fonctions avec vous afin que vous puissiez avoir une compréhension complète de ce projet:

première page

Sur la page d'accueil, c'est juste une animation de météore, plus le contenu suivant, et la coordination globale est toujours assez bonne.

Panneau de contrôle

Après avoir cliqué sur le panneau de configuration, vous entrerez le tableau de bord. Si vous n'êtes pas connecté, vous passez à la page de connexion:

Il n'est pas nécessaire de vous inscrire ici, vous pouvez obtenir directement le code de vérification. Si vous n'avez pas de compte, vous en enregistrerez directement un nouveau.

Entrez le panneau de configuration, où nous pouvons choisir de créer un projet ou de créer un document collaboratif:

Il existe de nombreux cadres différents pour l'initialisation ici. En plus d'utiliser le modèle d'origine, nous pouvons également importer directement le code local pour le développement et l'édition:

Il y a un joli avatar ici, je l'aime beaucoup:

Modifier le code

Après avoir cliqué pour créer, nous entrons une telle page. Tout d'abord, il y a une barre de fichiers à gauche, la disposition globale est la même que VScode, et ce qui suit est la console. Ici, nous pouvons exécuter directement certaines commandes de NPM et PNPM, ainsi que certaines commandes NodeJS.

Maintenant, nous exécutons PNPM pour ce projet pour installer les packages de dépendance pertinents et exécuter pnpm dev pour démarrer ces projets:

Recherche de fichiers

En plus de l'arborescence de fichiers, nous fournissons également des fonctions similaires à VScode, recherche de fichiers:

Vous pouvez également écrire sur l'écran fendu:

THÈME DE l'éditeur de commutation

Ici, nous pouvons également changer le thème de l'éditeur, et ici, nous fournissons plusieurs thèmes au choix:

Co-édité

Cette fois, nous allons revenir à notre fonction principale: l'édition collaborative. Tout d'abord, nous devons créer un document sur le panneau de configuration du tableau de bord:

Une fois la création terminée, vous verrez un tel effet:

Cliquez pour partager le document et partager le document avec d'autres amis pour le modifier ensemble:

L'effet d'édition collaboratif final:

Comment la collaboration est-elle mise en œuvre?

En ce qui concerne l'édition collaborative, partageons la pile technologique impliquée dans les pointes avant et arrière.

1. l'extrémité avant

   1. Y-Monaco: intègre la fonction de collaboration en temps réel de YJS avec l'éditeur de Monaco, fournissant la synchronisation des données de modification collaborative par défaut et l'effet d'interface utilisateur collaboratif.

   2. Y-Websocket: l'adaptateur WebSocket de YJS fournit une fonction de synchronisation de données en temps réel, permettant à plusieurs clients de collaborer sur l'édition via WebSocket.

   3. YJS: un cadre CRDT haute performance qui prend en charge la collaboration en temps réel et l'édition hors ligne, et fusionne automatiquement les changements dans les types de partage pour gérer les conflits, adaptés aux scénarios avec de grands documents et des utilisateurs illimités.

   4. Curseurs parfaits: offre un mouvement de souris lisse.

2. extrémité arrière

   1. Y-websocket: YJS résume la logique collaborative

   2. Y-MongoDB-Provider: stockage persistant

Contributeurs

Merci à tous ceux qui ont contribué à ce projet!

Si ce projet vous est utile ou est intéressé par ce projet, bienvenue dans Star️️️EStes

Enfin, mentionnons ces deux projets open source, qui sont tous deux des projets open source que nous maintenons actuellement:

• Éditeur collaboratif du code en ligne

• Échafaudage avant Création de neat

Si vous souhaitez participer au développement ou que vous souhaitez rejoindre le groupe pour étudier, vous pouvez m'ajouter WeChat yunmz777 . Il y aura de nombreux besoins à l'avenir. Une fois ce projet terminé, il y aura de nombreux projets open source nouveaux et intéressants qui vous attendent.