Pilha de tecnologia
Antes de mergulhar na pilha MERN, vamos entender rapidamente o que é uma pilha de tecnologia. Uma pilha de tecnologia é um conjunto de tecnologias que você escolhe e usa para criar um aplicativo da Web, aplicativo móvel ou aplicativo semelhante. Uma boa pilha de tecnologia deve proporcionar uma experiência perfeita ao usuário, além de ser escalável e econômica. Uma pilha de tecnologia típica contém front-end, back-end e banco de dados e é conhecida como uma pilha de tecnologia completa.
Normalmente, as tecnologias básicas de front-end ou interface do usuário permanecem as mesmas, ou seja, HTML, CSS e JavaScript. Dependendo dos requisitos do projeto , você pode usar bibliotecas e estruturas, como React ou Angular, que são criadas sobre essas tecnologias de UI.
O backend consiste em um servidor, onde reside sua lógica de aplicação . Você pode escrever a lógica do aplicação em uma ou mais linguagens de programação, como JavaScript, Java, Python, ou usar estruturas como Django, Spring e Express.js. Para executar os programas, seu aplicação precisa de um tempo de execução como Node.js, JRE (Java Runtime Environment).
O banco de dados de dados é o centro de armazenamento, onde todos os dados relacionados ao aplicação são armazenados. Você pode optar por armazenar seus dados em uma estrutura tabular (usando sistemas de banco de dados relacionais) ou não relacionais, também chamados de NoSQL, como estrutura de documentos, estrutura de gráficos etc., e selecionar o banco de dados de acordo. Alguns exemplos de bancos de dados são MongoDB, Oracle, MySQL.
O que é a pilha MERN?
Uma pilha de tecnologia pode ser personalizada (os desenvolvedores podem escolher as tecnologias dependendo dos requisitos do projeto ) ou pré-construída (onde as tecnologias foram pré-decisas).
O MERN é uma pilha de tecnologia pré-criada com base em tecnologias JavaScript. MERN significa MongoDB, Express, Reacte Node, em homenagem às quatro principais tecnologias que compõem a pilha.
- MongoDB — banco de dados de documentos
- Express(.js) — Framework web Node.js
- React(.js) — uma estrutura JavaScript do lado do cliente
- Node(.js) - o principal servidor da Web JavaScript (tempo de execução)
Express e Node compõem a camada intermediária (aplicação). O Express.js é um framework web do lado do servidor e o Node.js é a popular e poderosa plataforma JavaScript para servidor . Independentemente da variante que você escolher, o ME(RVA)N é a abordagem ideal para trabalhar com JavaScript e JSON, em todo o caminho.
Como a pilha MERN funciona?
A arquitetura MERN permite que você construa facilmente uma arquitetura de três camadas (front-end, back-end, banco de dados de dados) inteiramente usando JavaScript e JSON.
React.js front-end
O nível superior da pilha MERN é React.js, a estrutura JavaScript declarativa para criar aplicativos dinâmicos do lado do cliente em HTML. O React permite criar interfaces complexas por meio de componentes simples, conectá-las aos dados em seu servidor de back-end e renderizá-las como HTML.
O ponto forte do React é lidar com interfaces com estado e orientadas por dados com o mínimo de código e complicações, e ele tem todos os recursos que você espera de uma estrutura moderna da Web: ótimo suporte para formulários, tratamento de erros, eventos, listas e muito mais.
Camada do servidor Express.js e Node.js
O próximo nível abaixo é a estrutura do lado do servidor Express.js, executada dentro de um servidor Node.js. O Express.js se apresenta como uma "estrutura da Web rápida, sem opiniões e minimalista para o Node.js", e é exatamente isso que ele é. O Express.js tem modelos avançados para roteamento de URL (correspondência de um URL de entrada com uma função de servidor) e tratamento de solicitações e respostas HTTP.
Ao fazer solicitações HTTP HTTP (XHRs), GETs ou POSTs a partir do front-end do React.js, você pode se conectar às funções do Express.js que alimentam o seu aplicação. Essas funções, por sua vez, usam os drivers do Node.js do MongoDB para acessar e atualizar dados em seu banco de banco de dados MongoDB .
Camada do banco de dados do MongoDB
Se o seu aplicação armazenar quaisquer dados (perfis de usuário, conteúdo, comentários, carregamentos, eventos etc.), então você vai querer um banco de dados de dados que seja tão fácil de trabalhar quanto React, Express e Node.js
É aí que entra o MongoDB: Os documentos JSON criados em seu front-end React.js podem ser enviados para o servidor Express.js, onde podem ser processados e (supondo que sejam válidos) armazenados diretamente no MongoDB para recuperação posterior. Mais uma vez, se estiver construindo no site cloud, você vai querer dar uma olhada em MongoDB Atlas. Se você deseja configurar sua própria pilha MERN, continue lendo!
Exemplo de uma solicitação/resposta simples usando a pilha MERN
Uma solicitação HTTP típica (de um cliente) executa uma das 4 operações - POST, GET, PUT, DELETE correspondentes às quatro operações de banco de dados de dados - Criar, Ler, Atualizar e Excluir (CRUD), respectivamente. Para atender a essas solicitações, o Express.js fornece objetos de solicitação e resposta que armazenam os parâmetros necessários. O HTTPrequest armazena os dados fornecidos pelo usuário final e a resposta HTTP armazena os dados que são recuperados do banco de banco de dados.
Com o driver do MongoDB Node.js , você pode conectar facilmente suas implementações do MongoDB ao aplicação em algumas etapas simples.
Uma das funcionalidades mais importantes da pilha MERN é que todas as tecnologias armazenam dados no mesmo formato.
A camada front-end, React, armazena dados como um objeto JavaScript, a camada de backend (aplicação) usa código JavaScript e a camada de dados MongoDB armazena dados no formato BSON (Binary JavaScript ON). Express converte dados entre JS e JSON usando o arquivo .json() .
O Node.js permite que os desenvolvedores escrevam lógica de aplicação de backend (do lado do servidor) em JavaScript. Embora o Node.js forneça módulos http principais, escrever o mesmo no Express fornece uma experiência de código mais limpa. O Express também oferece recursos avançados de roteamento para obter os dados necessários do endpoint correto, outro local em que os desenvolvedores não precisam escrever código explícito para roteamento.
Como o código é escrito na mesma linguagem (JavaScript) de ponta a ponta, muito tempo que, de outra forma, seria gasto em conversões durante a transição de camada para camada, é economizado.
Digamos que um cliente (cliente) queira atualizar seu número de celular por meio de um portal online. O frontend, construído usando React.js, teria um formulário onde o usuário pode inserir o número de celular. O React usa o gancho "useState" para definir o número de celular inserido pelo cliente no parâmetro de solicitação.
O código Express.js pega o número de celular da solicitação http put, mapeia para o esquema do modelo de dados do aplicação e aplica o método correspondente (por exemplo, findByIdAndUpdate()) para executar a operação de atualização. Em seguida, a resposta é enviada pelo objeto de resposta http com uma mensagem de sucesso/falha.
Um exemplo completo está disponível na página de tutorial da pilha MERN .
Pilha MERN versus desenvolvimento de pilha completa
A pilha MERN é um tipo de pilha completa, em que as camadas de tecnologia são predefinidas. Um desenvolvedor de pilha completa tem uma curva de aprendizado maior, pois precisa ser habilidoso em várias tecnologias, enquanto um desenvolvedor de pilha MERN precisa conhecer apenas as tecnologias correspondentes. Algumas diferenças importantes abaixo o ajudarão a escolher entre uma pilha completa personalizada e uma pilha MERN, dependendo dos requisitos do seu projeto: