Apaixone-se pela CHARM stack

Disclaimer

Esse post uma traduo de um post de nome parecido feito por mim no blog oficial do MeteorJS com alguns ajustes para se adequar ao pblico brasileiro. Conhecimento tem sempre que estar disponvel. Sempre que possivel, em meu tempo livre, irei estar traduzindo os posts de forma que o pblico brasileiro tenha esse conhecimento de ponta de forma nativa sobre esse framework que eu me apaixonei e posso estar trabalhando 100% do meu tempo nele.
Venha comigo nessa viagem com MeteorJS.

O que MeteorJS

Acho que sempre uma boa dar pelo menos uma relembrada no que o MeteorJS.

"MeteorJS um framework fullstack para desenvolvimento de aplicaes cross-platform"

Produtividade algo que o MeteorJS tem em seu corao faz um bom tempo, a ideia de cdigo isomrfico, que faz com que voc escreva menos e foque realmente no que importa simplismente sensacional.

O que e qual a razo dessa stack?

Caso queira tem o repo onde voc poder acompanhar todas as explicaes das decises tcnicas.

Existe uma demo rodando aqui.
O objetivo de qualquer stack te deixar mais produtivo em alguma tarefa, no caso da CHARM levar essa produtividade a outro nvel. Detalhadamente a stack composta por:

• MeteorJS - Fullstack framework focado em produtividade que usa RPC e Sockets embaixo do cap;

• ReactJS - Lib de UI para criao de interfaces web;

• Chakra UI - Biblioteca focada em simplicidade e produtividade;

• MongoDB - Banco de dados NoSQL para criao de aplicaes de maneiras mais prticas e rpidas;

• Meteor Cloud - Provedor cloud acoplado a CLI do meteor, fazendo lanamentos de apps de maneira fcil, com bancos de dados incluido.

Como o projeto est estruturado?

Como muitas coisas da vida, o template desse projeto inspirado nos trabalhos de Alex Kondov: Tao of Node e Tao of React

Muitos apps Meteor so feitos de maneira similar a um monorepo com suas divises para front e back end declarado respectivamente em ui e api. Voc pode ter uma pasta compartilhada para dividir cdigo em sua codebase, como exemplo o front e back utilizarem dos mesmos tipos.

Uma boa pratica que boa de ser ressaltada a de organizar suas pastas por funcionalidade do sistema, no por funcionalidade tcnica. Pensando sempre nos dminios de sua aplicao.

Colocaremos tudo que ser reutilizado em uma pasta chamada common que indica que ela estar no front e back.

Decises do backend

Neste template, o banco de dados de escolha o MongoDB, que incluso automaticamente quando se cria um projeto MeteorJS. Tambm foi adicionado pacotes externos para ajudar com algumas rotinas especificas que voc poder encontrar, so eles: simpl-schema andpercolate:migrations. O primeiro para validar objetos e schemas em runtime e o outro para criar migraes no banco de dados.

Migraes do banco de dados

Quer um exemplo de como estruturar suas migraes ?

Use api/db/migration.js como refrencia

Esse tipo de funcionalidade pode vir a ser til a depender do tamanho da tua aplicao. Toda vez que o servidor comear, ele rodar o cdigo que est localizado em api/main.js

import { Meteor } from "meteor/meteor";import { Migrations } from "meteor/percolate:migrations";import "./db/migrations";import "./tasks/tasks.methods";import "./tasks/tasks.publications";/** * This is the server-side entry point */Meteor.startup(() => {  Migrations.migrateTo("latest");});

Ele pega todas as migraes que ainda no foram aplicadas e as roda.

Um bom exemplo de utilizao de migraes quando h mudans em como seu banco est estruturado e voc gostaria de alterar dados ou ter dados padro para trabalhar em cima.

Para mais detalhes voc pode olhar as docs.

Schemas

Schemas so uma maneira de garantir que os dados que vem de fora de sua aplicao esto conforme voc os definiu, limpos e sanitizados.

Optamos pelo uso do simpl-schema e voc pode observar seu uso em api/tasks/tasks.collection.js, fazendo isso, todos os dados que passam pelo banco de dados esto validados e seguem nossa estrutura definida.

No esquea de olhar as docs em caso de dvidas.

Conectando-se ao servidor

Mantendo a ideia de ter uma pasta para cada funcionalidade, faremos a mesma coisa para conectar-se ao front-end. Similarmente ao tRPC e Blitz.js usaremos as chamadas remotas que em Meteor tem o nome de Meteor Methods em nosso template algumas chamadas ficam em api/tasks/tasks.methods.js.

/** * Remove a task. * @param {{ taskId: String }} * @throws Will throw an error if user is not logged in or is not the task owner. */export const removeTask = ({ taskId }) => {  checkTaskOwner({ taskId });  TasksCollection.remove(taskId);};...Meteor.methods({  insertTask,  removeTask,  toggleTaskDone,});

Para chamar esse method teremos de chamar ele por seu nome dessa maneira:

onDelete={taskId => Meteor.call('removeTask', { taskId })}

This sample comes from ui/tasks/TaskItems.jsx.

Decises do Frontend

React com Meteor

Para nosso framework de frontend escolhemos o React por sua simplicidade e ecossistema. Meteor tem um pacote para fazer queries usando hooks, deixando voc pensar apenas nas solues que voc precisa dar vida. Para mais informaes veja o repo do react-meteor-data

O corao da produtividade: Chakra-UI

Para nossos componentes de UI, Escolhemos Chakra-UI pela sua simplicidade e produtividade. Que comparavl com o que temos em nosso backend com meteor. Criando um fluxo de produtividade inigualvel. Est incluso, modo light e dark em nosso template. Para a lista completa de componentes, veja nas docs do Chakra-UI

Ficou interessado?

Depois dessa maravilhosa explicao de nossa stack, espero que tenha vontade de testar e brincar com nosso template. Voc pode clicar aqui para ver ele. Se houver alguma dvida, pode ns mandar mensagem em nossas redes. No esquea de dar star no nosso Github tambm.