Dans cet article, je voudrais parler du système de gestion de contenu Zoia que je développe, écrit en Javascript. Ceci est mon projet parallèle, sans rapport avec le travail principal, que je conçois et développe pendant mon temps libre. Il y a une opinion que chaque développeur web devrait écrire son propre CMS tôt ou tard, et quelqu'un n'en aura même pas :-)
TL; DR:
demo.zoiajs.org ,
panneau d' administration (connexion: admin, mot de passe: mot de passe),
Github , licence MIT
Un fait accompli: Javascript est désormais partout, il peut être utilisé non seulement côté client, mais aussi côté serveur, ainsi que dans les microcontrôleurs, voitures, smartphones - en un mot, dans presque tous les domaines. Mais le domaine «traditionnel» de JS était et reste le Web, où ce langage de programmation s'est développé sur tout un zoo de bibliothèques, de modèles, d'utilitaires et de frameworks. Comprendre tout cela est assez difficile, et parfois il suffit de faire un site assez simple qui peut être rapidement géré si nécessaire: ajouter et éditer du contenu, des menus de navigation, etc.
Pour de telles tâches, il existe de nombreux CMS écrits en PHP (dont certains que j'ai utilisés dans mon travail, tels que
GetSimple CMS ), mais je n'ai vu aucun CMS réactif écrit entièrement en JS et utilisant Mongo comme base de données (veuillez écrire à commentaires, s'il y en a un, mais je l'ai manqué). Après avoir rencontré React et Marko, je ne veux plus retourner dans le monde difficile de jQuery, et donc Zoia est née. À propos, il s'agit de la deuxième version, la
première fonctionnait à l'ancienne (maintenant elle n'est pas prise en charge et n'est pas mise à jour).
Au stade actuel de développement, la capacité de mettre en œuvre les éléments suivants:
- Zoia est en cours de développement sur Javascript - à la fois côté serveur et côté client
- A une architecture modulaire, il est possible d'étendre les fonctionnalités en ajoutant de nouveaux modules
- Architecture distribuée: API sur Fastify + Mongo , panneau d'administration sur React + Redux , serveur Web pour l'espace utilisateur sur Fastify + Marko - tout cela peut être installé sur différents serveurs
- Multilinguisme "prêt à l'emploi", il existe déjà des langues anglaise et russe, vous pouvez ajouter n'importe quel nombre de langues - Lingui est utilisé.
- Un grand nombre de composants auxiliaires, bibliothèques et utilitaires: pour générer des formulaires, des tables dynamiques (jusqu'à présent uniquement dans le panneau d'administration), l'autorisation, etc.
- Construire avec Webpack
- Édition de contenu: vous pouvez utiliser plusieurs modèles de conception (par exemple, pour différentes pages); Il existe une option pour choisir une façon de gérer le contenu: soit l'éditeur WYSIWYG (à l'aide de CKEditor 5 ) ou l'éditeur de code HTML ( ACE Editor, respectivement); lors de l'enregistrement, le contenu est optimisé (minification du code et utilisation de la typographie) - lors de la définition des options appropriées; il est possible de structurer l'arborescence des catégories dans lesquelles se trouvent les pages et d'utiliser des «miettes de pain»; il y a un «chargeur» d'images (implémentation pour CKEditor et ACE)
- Gestion des utilisateurs: ajout d'un nombre illimité d'utilisateurs, possibilité de modifier leur profil, de définir un mot de passe et un statut
- Gestion de la navigation: gestion pratique de l'arborescence de navigation, possibilité d'ajouter un "sous-menu"
- Scripts prêts à l'emploi pour la construction, la préparation de systemd, les configurations NGINX, etc.
Un peu d'architecture. Comme je l'ai dit ci-dessus, le système se compose d'une
API (il sert les requêtes de base de données, le traitement des données), un
panneau d'administration (fonctionne comme SPA, utilise le routage côté client, développé en utilisant React + Redux) et
un espace utilisateur (architecture isomorphe, développé en utilisant Marko, le rendu se fait côté serveur avec réhydratation ultérieure sur le client). Le panneau d'administration accède à l'API directement du côté client, le serveur Web de l'espace utilisateur accède à l'API avant le rendu. L'autorisation se fait via JWT.
Pour un développement pratique des modules du panneau de contrôle, des outils ont été créés pour faciliter la création d'une interface utilisateur: un générateur de formulaires pour React avec un grand nombre d'options de champs possibles (y compris le téléchargement de fichiers et d'images avec des aperçus), un tableau dynamique avec la possibilité de trier les colonnes et les champs d'édition en ligne.
Voici à quoi ressemble le modèle par défaut:
Le panneau d'administration est le suivant:
La disposition est adaptative;
UIkit est utilisé pour l'espace utilisateur et le
panneau d' administration. C'est un excellent framework CSS. qui contient un grand nombre de composants prêts à l'emploi, est facile à personnaliser et prend en charge Webpack prêt à l'emploi.
Il existe plusieurs domaines d'application CMS, mais la tâche principale (comme je l'ai dit ci-dessus) est le développement d'une solution légère pour créer des sites de complexité moyenne qui utiliserait les capacités à la fois du Javascript moderne et d'un grand nombre d'outils de développement et de stockage modernes.
Le plan de développement pour un avenir relativement proche est le suivant:
- Il est nécessaire d'écrire de la documentation sur le développement des modules, ainsi que sur les composants prêts à l'emploi du panneau d'administration
- Réfléchissez et écrivez des tests (maintenant ils ne sont plus du tout :)
- Enregistrement de vis / autorisation / compte personnel côté client + autorisation via social. réseau (OAuth)
- Développer les modules nécessaires avec des fonctionnalités supplémentaires (blog, catalogue de produits, boutique en ligne, etc.)
La version de démonstration avec quelques restrictions fonctionnelles est ici:
demo.zoiajs.org , le
panneau d' administration est également disponible (login: admin, mot de passe: mot de passe). Toutes les heures paires, la base de données est réinitialisée aux paramètres par défaut, vous devrez recommencer l'autorisation.
Le code CMS
est disponible sur Github , donc si vous le souhaitez, vous pouvez rejoindre le développement, signaler des bugs, etc. Je serai ravi des contributeurs ;-)