Neste artigo, gostaria de falar sobre o sistema de gerenciamento de conteúdo Zoia que estou desenvolvendo, escrito em Javascript. Este é o meu projeto paralelo, não relacionado ao trabalho principal, que eu desenho e desenvolvo no meu tempo livre. Há uma opinião de que todo desenvolvedor web deve escrever seu próprio CMS, mais cedo ou mais tarde, e alguém nem sequer terá um :-)
TL; DR:
demo.zoiajs.org ,
painel de administração (login: admin, senha: senha),
Github , licença MIT
Um fato consumado: o Javascript está agora em toda parte, pode ser usado não apenas no lado do cliente, mas também no lado do servidor, bem como em microcontroladores, carros, smartphones - em uma palavra, em quase todos os campos. Mas a área "tradicional" para JS era e continua sendo a web, onde essa linguagem de programação cresceu em todo um zoológico inteiro de bibliotecas, padrões, utilitários e estruturas. Entender tudo isso é bastante difícil e, às vezes, tudo o que é necessário é criar um site bastante simples que possa ser gerenciado rapidamente, se necessário: adicionar e editar conteúdo, menus de navegação etc.
Para essas tarefas, existem muitos CMS escritos em PHP (alguns dos quais eu usei no meu trabalho, como o
GetSimple CMS ), mas não vi um único CMS reativo escrito inteiramente em JS e usando o Mongo como banco de dados (por favor, escreva para comentários, se houver, mas eu perdi). Depois de conhecer React e Marko, não quero mais voltar ao mundo cruel do jQuery e, assim, Zoia nasceu. A propósito, esta é a segunda versão, a
primeira funcionou da maneira antiga (agora não é suportada e não é atualizada).
No estágio atual de desenvolvimento, a capacidade de implementar o seguinte:
- Zoia está sendo desenvolvido em Javascript - no lado do servidor e no cliente
- Possui uma arquitetura modular, é possível expandir a funcionalidade adicionando novos módulos
- Arquitetura distribuída: API no Fastify + Mongo , painel de administração no React + Redux , servidor web para espaço de usuário no Fastify + Marko - tudo isso pode ser instalado em vários servidores
- Multilinguismo "pronto para uso", já existem inglês e russo, você pode adicionar qualquer número de idiomas - o Lingui é usado.
- Um grande número de componentes auxiliares, bibliotecas e utilitários: para gerar formulários, tabelas dinâmicas (até agora apenas no painel de administração), autorização, etc.
- Construa com o Webpack
- Edição de conteúdo: você pode usar vários modelos de design (por exemplo, para páginas diferentes); Há uma opção para escolher uma maneira de gerenciar o conteúdo: o editor WYSIWYG (usando o CKEditor 5 ) ou o editor de código HTML ( ACE Editor, respectivamente); ao salvar, o conteúdo é otimizado (redução do código e uso da tipografia) - ao definir as opções apropriadas; é possível estruturar a árvore de categorias em que as páginas estão localizadas e usar “migalhas de pão”; existe um "carregador" de imagens (implementação para o CKEditor e o ACE)
- Gerenciamento de usuários: adicionando qualquer número de usuários, a capacidade de editar seu perfil, definir uma senha e status
- Gerenciamento de navegação: gerenciamento conveniente da árvore de navegação, a capacidade de adicionar um "submenu"
- Scripts prontos para criar, preparar systemd, configurações NGINX, etc.
Um pouco sobre arquitetura. Como eu disse acima, o sistema consiste em uma
API (que atende a consultas de banco de dados, processamento de dados), um
painel de administração (funciona como SPA, usa roteamento do lado do cliente, desenvolvido usando React + Redux) e
espaço do usuário (arquitetura isomórfica, desenvolvida usando Marko, a renderização é feita no lado do servidor com subsequente reidratação no cliente). O painel do administrador acessa a API diretamente do lado do cliente, o servidor da web do espaço do usuário acessa a API antes da renderização. A autorização é feita através do JWT.
Para um desenvolvimento conveniente dos módulos do painel de controle, foram criadas ferramentas que facilitam a criação de uma interface do usuário: um construtor de formulários para o React com um grande número de opções de campo possíveis (incluindo o download de arquivos e imagens com visualizações), uma tabela dinâmica com a capacidade de classificar colunas e editar campos em linha.
É assim que o modelo padrão se parece:
O painel do administrador é o seguinte:
O layout é adaptável; o
UIkit é usado para espaço do usuário e
painel de administração. Este é um ótimo framework CSS. que contém um grande número de componentes prontos para uso, é fácil de personalizar e suporta o Webpack pronto para uso.
Existem várias áreas do aplicativo CMS, mas a principal tarefa (como eu disse acima) que vejo é o desenvolvimento de uma solução leve para criar sites de média complexidade que usem os recursos do Javascript moderno e um grande número de ferramentas modernas de desenvolvimento e armazenamento.
O plano para um maior desenvolvimento em um futuro relativamente próximo é o seguinte:
- É necessário escrever documentação sobre o desenvolvimento de módulos, bem como sobre os componentes prontos do painel de administração
- Pense e escreva testes (agora eles não são de todo :)
- Parafuso de registro / autorização / conta pessoal no lado do cliente + autorização através do social. rede (OAuth)
- Desenvolva os módulos necessários com funcionalidade adicional (blog, catálogo de produtos, loja online etc.)
A versão demo com algumas restrições funcionais está localizada aqui:
demo.zoiajs.org , o
painel de administração também está disponível (login: admin, senha: senha). A cada hora, o banco de dados é redefinido para as configurações padrão, você precisará passar pela autorização novamente.
O código CMS
está disponível no Github ; portanto, se desejar, você pode participar do desenvolvimento, relatar bugs etc. Ficarei feliz em contribuir ;-)