DEV Community: João Pedro Resende

O que é micro front end?

João Pedro Resende — Sun, 14 Nov 2021 17:43:29 +0000

Olá pessoal, neste artigo vou explicar um pouco sobre o micro front-end e as vantagens que ele proporciona.

Antes de realmente explicar o que é micro front-end, vamos entender alguns outros conceitos como:

Monolitos
Separação do front-end e back-end
Conceito de microsserviços

Monolitos

Uma aplicação monolítica consiste em um codebase centralizado em uma única unidade, ou seja, back-end e front-end em um único repositório. Não há distinção estrutural de front-end pra back-end tudo está dentro do mesmo código fonte.

Problemas comuns em uma aplicação monolítica

Alguns problemas comuns de uma aplicação monolítica.

Alta complexidade para corrigir bugs
Dificuldades para implementar novas features
Alto nível de interdependências no acoplamento de módulos
Dificuldades na coordenação entre times
Alto esforço para integração de novos desenvolvedores

Separação do front-end e back-end

Com o passar do tempo, o desenvolvimento passou a diferenciar as bases de códigos do back e front. Isso ajudou a melhorar o cenário caótico de código que aplicações monolíticas traziam.

Isso permitiu que times conseguissem fazer deploys sem depender do outro.

Microsserviços

Ainda neste contexto, surgiu o conceito de arquitetura de microsserviços. Quando falamos em microsserviços nos referindo a uma funcionalidade que pode ser dividida em partes menores.

Depois de entender esses conceitos podemos, finalmente, falar sobre micro front-ends!

Micro front-ends

Micro Front-end é um estilo arquitetônico que separa uma aplicação de front em várias camadas menores, cada uma sendo responsável por um módulo específico da aplicação, normalmente separadas por domínios ou contextos de uso, permitindo assim, que diferentes times cuidem dessas funcionalidades de forma independente.

Na prática, negócios podem separar produtos web em micro front-ends dividindo seus times de acordo com as funcionalidades dos seus sistemas.

Por fim algumas vantagens de uma arquitetura micro front-end:

Mais facilidade na correção de bugs
Facilidade na integração de novas pessoas no projeto
Mais facilidade de implementação de novas features
Facilidade na coordenação entre times
Times mais independentes

Obrigado por ler esse artigo até aqui!

Este artigo foi escrito com a ajuda do Vinicius Morellato, siga ele no Linkedin

Me siga nas redes sociais! https://links.jpres.dev

Até o próximo artigo!

Understanding Pattern Matching in Elixir

João Pedro Resende — Wed, 17 Mar 2021 12:08:56 +0000

Hey people! In this article I will explain a little about pattern matching In Elixir!

What is pattern matching after all?

Pattern matching is a way to easily break down data types, tuples and lists. Also, it is one of the fundamentals of recursion in Elixir.

Variables in the Elixir

Throughout the article we will see about the corresponding pattern and to make sense of the writings understand a little about how to vary the Elixir.

In Elixir the variables are not assigned a value

To explain it better here is an example:

variable = 1

For the variable to be equal to 1, in mathematics if, for example x = 1 what does x have to be worth to be equivalent to 1? It has to be 1

And the same thing happens in the Elixir, so the variables are immutable.

And we just saw a pattern matching the Elixir variables.

Running Elixir projects

To run our project we will enter the interactive mode of the Elixir (even though it is a compiled language, it has an interactive mode).

iex mix -S

And then

You will type the name of the module (in our case PatternMatchingArticle) and also the name of the function you want to execute.

iex> PatternMatchingArticle. <function name> (<parameters>)

And just change these <> for the function name and the parameters.

Using pattern matching in practice!

Requisites:

Elixir

First we will create the project in Elixir with the mix:

mix new pattern_matching_artigo

In lib / pattern_matching_artigo.ex,
we will delete all functions leaving only the defmodule

defmodule PatternMatchingArticle

end

After deleting all the functions, let's create a function called call () that will have a parameter that will be a list:

defmodule PatternMatchingArticle
    def call (list) do

    end
end

In the Elixir it is not possible to get the value of a list with list [1] ', so let's see how pattern matching works with the lists.

To go through a list we will create a function called count_length with a parameter called [head | tail]:

    def count_length ([head | tail]) of

    end

What would be this [head | tail]?

In Elixir one way to get the elements of a list is by using that form. The head is the first element of the list, and the tail is the body of the list, that is, all the other elements in the list.

For example:

    def count_length ([head | tail]) of
        IO.inspect (head)

        IO.inspect (tail)
    end

If we run this function by passing a list [1,2,3]

iex mix -S

iex> PatternMatchingArticle.count_length ([1,2,3])

will return:

1
[2.3]

Knowing this, we can continue our project:

To count the quantity of a list we have to have a counter, so let's pass it as a parameter:

def count_length ([head | tail], count) do
    IO.inspect (head)

    IO.inspect (tail)
end

Since we are not going to use our head to make a count, we can put a _ in front of this variable. This indicates that you will receive this variable as a parameter, but we will not use it.

And we’re also going to increase the count.

def count_length ([_ head | tail], count) do
    count = count + 1
end

But how are we assigning a value to a variable, with no Elixir as variables being immutable?

We are not actually reassigning a value to a variable, but we are creating a new variable called count.

If you execute this code with iex, passing as the parameter for the count that will be the number that will start counting the list.

iex> PatternMatchingArticle.count_length ([1,2,3], 0)

He will return:

Now let's apply recursion to this function:

def count_length ([head | tail], count) do
    count = count + 1

    # Passing tail and counting as parameter.
    count_length (tail, count)
end

If we run this function again it will give an error that is passing an empty list

We can solve it by adding another function filter_length ()

def count_length ([], count), do: count

And what does this function do?

This function checks whether the list is empty, and whether the total list count will return.

If it has values in this list it will add 1 to the count and will execute the function until it finishes scrolling through the list.

And we also just saw Pattern Matching with functions!

And finally in the function call (), we will add a parameter called list and execute a function count_length.

def call (list) do
    count_length (list, 0)
end

So, we finished our mini project of counting the size of the lists with Pattern Matching and also using recursion!

Pattern Matching also works with tuples

For example:

defp print_content_file ({: ok, content}), do: content

defp print_content_file ({: error, reason}), do: reason

In this private function (private function in the Elixir is defp and a public function is def) it will take a tuple that returns: ok, and some content and it will return that content.

If it returns an error it will return an error.

And so we use pattern matching with lists, tuples, functions and we also deal with errors.

If you have any doubts about the code made during the article, access the repository that contains the project made during that article.

This article was a little long but I hope you enjoyed it!

If you liked the article leave the like, share with friends and comment what you think of the article!

To the next!

[PT-BR] Pattern Matching no Elixir

João Pedro Resende — Wed, 17 Mar 2021 11:47:36 +0000

Eae galera! Neste artigo irei explicar um pouco sobre o pattern matching no elixir!

Afinal o que é o pattern matching?

O pattern matching é uma forma de desestruturar facilmente os tipos de dados, tuplas e listas. Támbem é um dos fundamentos da recursividade no Elixir.

Váriaveis no Elixir

Ao longo do artigo iremos ver sobre o pattern matching e para entender os códigos escritos entenda um pouco sobre as váriaveis no elixir.

No elixir as variaveis não são atribuidas por um valor.

Para explicar melhor aqui está um exemplo:

variavel = 1

Para a variavel ser igual a 1, na matemática se, por exemplo x = 1 o que o x tem que valer para ser equivalente a 1? Ele tem que ser 1

E acontece a mesma coisa no elixir, por isso as váriaveis são imutaveis.

E acabamos de ver pattern matching nas váriaveis do elixir.

Rodando projetos elixir

Para rodar o nosso projeto iremos entrar no modo interativo do elixir(mesmo ele sendo uma lang compilada, ele tem um modo interativo).

iex -S mix

E depois

Vai digitar o nome do módulo(no nosso caso PatternMatchingArtigo) e também o nome da função que você quer executar.

iex> PatternMatchingArtigo.<nome da função>(<parametros>)

E é só trocar esses <> pelo nome da função e os parametros.

Utilizando o pattern matching na prática!

Pré-requesitos:

Elixir

Primeiro nós vamos criar o projeto em elixir com o mix:

mix new pattern_matching_artigo

Em lib/pattern_matching_artigo.ex,
vamos apagar todas as funções deixando apenas o defmodule

defmodule PatternMatchingArtigo do

end

Depois de apagarmos todas as funções, vamos criar uma função chamada call() que vai ter um parametro que vai ser uma lista:

defmodule PatternMatchingArtigo do
    def call(list) do

    end
end

No elixir não é possivel pegar o valor de uma lista com lista[1], por isso vamos ver como funciona o pattern matching com as listas.

Para percorrer a lista vamos criar uma função chamada count_length com um paremetro chamado [head | tail]:

    def count_length([head | tail]) do

    end

O que seria esse [head | tail]?

Em elixir uma forma de pegar os elementos de uma lista é utilizando essa forma. O head é o primeiro elemento da lista, e o tail é o corpo da lista, ou seja, todos os outros elementos da lista.

Por exemplo:

    def count_length([head | tail]) do
        IO.inspect(head)

        IO.inspect(tail)
    end

Se a gente rodar esta função passando uma lista [1,2,3]

iex -S mix

iex> PatternMatchingArtigo.count_length([1,2,3])

vai retornar:

1
[2,3]

Sabendo disso podemos continuar nosso projeto:

Para contar a quantidade de uma lista temos que ter um contador, então vamos passar ele como parametro:

def count_length([head | tail], count) do
    IO.inspect(head)

    IO.inspect(tail)
end

Já que não iremos usar o head para fazer a contagem podemos colocar um _ na frente dessa váriavel. Isso indica que iremos receber essa variavel como parametro mas não vamos utiliza-lo.

E também vamos incrementar a contagem.

def count_length([_head | tail], count) do
    count = count + 1
end

Mas como estamos atribuindo um valor ao uma váriavel, sendo que no elixir as váriaveis são imutaveis?

Na verdade não estamos reatribuindo um valor a uma variavel e sim estamos criando uma nova variavel chamada count.

Se executarmos esse código com o iex, passando como parametro o count que vai ser o número que vai iniciar a contagem da lista.

iex> PatternMatchingArtigo.count_length([1,2,3], 0)

Ele vai retornar:

Agora vamos aplicar recursividade nesta função:

def count_length([head | tail], count) do
    count = count + 1

    # Passando tail e a contagem como parametro.
    count_length(tail, count)
end

Se rodarmos essa função novamente ele vai dar um erro que está passando uma lista vazia

Podemos resolver adicionando outra função filter_length()

def count_length([], count), do: count

E o que esta função faz?

Esta função verifica se a lista está vazia, e se estiver vai retornar a contagem total da lista.

Caso esteja com valores nesta lista ele vai adicionar 1 na contagem e vai executar denovo a função até acabar de percorrer a lista.

E também acabamos de ver Pattern Matching com funções!

E por fim na função call(), vamos adicionar um paremetro chamado list e executar a função count_length.

def call(list) do
    count_length(list, 0)
end

Assim, finalizamos nosso mini projeto de contar o tamanho das listas com Pattern Matching e também utilizando recursão!

O Pattern Matching funciona também com tuplas

Por exemplo:

defp print_content_file({:ok, content}), do: content

defp print_content_file({:error, reason}), do: reason

Nesta função privada(função privada no elixir é defp e uma função pública é def) ele vai pegar uma tupla que retorna :ok, e algum conteudo e vai retornar esse conteudo.

Se retornar um erro vai retornar um erro.

E assim utilizamos pattern matching com listas, tuplas, funções e também tratamos de erros.

Caso tenha alguma duvida do código feito durante o artigo acesse o repositório que contem o projeto feito durante esse artigo.

Esse artigo foi um pouco longo mas espero que você tenha gostado!

Se gostou do artigo deixe o like, compartilhe com os amigos e comente o que achou do artigo!

Até a proxima!

[PT-BR] Fazendo uma todo list com VueJS.

João Pedro Resende — Sat, 02 Jan 2021 00:59:28 +0000

Fala galera! No primeiro artigo do ano de 2021 irei mostrar um pouco do Vue.js 3, fazendo uma todo list.

Pré-requisitos:

Ter o Node.js instalado no pc;
Conhecimento básico de HTML, Css e Javascript.

Para criar o projeto com vuejs já configurado precisamos do Vue CLI.

O Vue CLI é um ferramenta para auxiliar no desenvolvimento nos projetos Vue.js.

Existe duas formas de instala-lo:

Com npm:

npm install -g @vue/cli

Ou com yarn:

yarn global add @vue/cli

Com o Vue CLI já instalado podemos criar o nosso projeto vue.

vue create <nomedoprojeto>

Vamos nomear este projeto como todolist-vuejs.

Quando você rodar esse comando vai aparecer essas 3 opções:

Neste artigo vamos usar a versão 3 do Vue.js.

Depois do Vue CLI criar o projeto, já podemos ver a estrutura de arquivos básica de um projeto vue.

No terminal se você rodar o comando:

npm run serve

yarn serve

Você estará rodando localmente o projeto vue.

Para começar o projeto vamos criar a lógica basica de uma todo list, adicionar uma tarefa.

No arquivo HelloWorld.vue vamos apagar todo o conteudo do bloco <template> e todo o conteudo do bloco <style>

No bloco <template vamos fazer a estrutura html do projeto:

<div class="app">
    <ol>
      <li >
        <p>Aprender Vue</p>
      </li>
    </ol>
    <div class="inputs">
      <input placeholder="Todo"/>
      <div class="buttons">
        <button >Adicionar Tarefa</button>
        <button>Remover Todas as tarefas</button>
      </div>
    </div>
  </div>

No javascript vamos implementar a lógica da todo list:

Antes de tudo no export default vamos adicionar a função data responsavel por renderizar os dados do projeto:

data() {
    return {
      todos: [{ id: 1, text: "Aprender VueJs" }],
    };
}

No return criamos um objeto chamado todos que armazena as tarefas cadastradas.

Novamente no export default vamos adicionar um objeto chamado methods:

methods: {

},

Nele vamos criar os métodos da aplicação como remover tarefas e adicionar tarefas.

Vamos criar o nosso primeiro metodo o de adicionar tarefas:

addTodo(text) {
    if (text !== " ") {
        this.todos.push({
           id: this.todos.length + 1,
           text,
        });
    }
}

E tambem de remover tarefas:

removeTodos() {
      this.todos = [];
},

Para fazer tudo funcionar vamos adicionar atributos nas tags html:

No li vamos adicionar um atributo para renderizar todas as tarefas cadastradas, com o v-for:

<ol>
    <li v-for="todo in todos" v-bind:key="todo.id">
        <p>{{ todo.text }}</p>
    </li>
</ol>

O v-bind:key="todo.id" é para cada li tem um id unico.

O {{ todo.text }} vai fazer o <p></p> renderizar o texto da tarefa.

Vamos fazer a lógica de adicionar tarefas no html com os atributos v-model e v-on:click:

<div class="inputs">
      <input placeholder="Todo" v-model="text" />
      <div class="buttons">
        <button v-on:click="addTodo(text)">Adicionar Tarefa</button>
        <button v-on:click="removeTodos()">Remover Todas as tarefas</button>
      </div>
</div>

O v-model vai nos auxiliar a pegar o dado do input de adicionar tarefa, guardando em uma variavel.

O v-on:click vai executar uma função caso o botão seja clicado.

Por fim vamos renomear o arquivo HelloWorld.vue para TodoList.vue.

E também no arquivo App.vue vamos fazer as seguintes alterações:

No bloco <template>:

Vamos Criar a tag da todo list:

<template>
  <h1>TodoList com Vue.js 3!</h1>
  <TodoList/>
</template>

E no Javascript vamos renomear o import do componente:

<script>
import TodoList from './components/TodoList.vue'

export default {
  name: 'App',
  components: {
    TodoList
  }
}
</script>

Depois de muito código é só rodar npm run serve, para ver o resultado final!

Se este artigo realmente te ajudou compartilhe com seus amigos e amigas deixe o gostei(se tiver) e até a próxima!

Caso tenha alguma dúvida, confira o repositório no github que contem o todo código desenvolvido neste artigo!

Link para o repositório.

[PT-BR] Primeiros passos com o Nunjucks!

João Pedro Resende — Wed, 30 Sep 2020 12:11:29 +0000

Olá, pessoal! Sou o João Pedro e hoje por meio deste artigo venho falar sobre uma tecnologia que utilizo muito, o nunjucks, e também fazer um CRUD com ele!

Mas o que é uma template engine?

Template engine é basicamente para você deixar o seu html mais "dinâmico", por exemplo:

No back-end eu passo uma variável de valor "x" e para eu acessar essa variável através do html, eu posso utilizar uma template engine.

Utilizando o nunjucks na prática!

O primeiro passo é criar um projeto node.js

Mas como eu crio um projeto node.js?

É bem simples!!

Abra seu terminal, entre no diretório do projeto e digite:

É necessário ter o node e o npm instalado!

npm init -y

O "-y" serve para criar sem fazer nenhuma pergunta o arquivo package.json. Neste arquivos tem as informações deste projeto.

Depois que fizermos isso você pode abrir o diretório do projeto em um editor de sua preferência. No meu caso estarei usando o Vscode.

Depois vamos criar o arquivo server.js na raiz do projeto, neste arquivo vai ficar as rotas do projeto.

Para criar as rotas vamos precisar instalar o Express

O Express é um framework node.js para a criação de aplicações web e api's

Para instalar ele você deve rodar o seguinte comando no seu terminal.

npm install express

Após a instalação, no arquivo package.json,vai ter todas as dependências do seu projeto e também foi criada a pasta node_modules que é onde fica o código das dependências.

No arquivo server.js vamos escrever as nossas rotas!

const express = require("express")
const server = express()

server.get("/", (request , response) => {
    return response.send("Está rota está funcionando!")
})

No código acima:

Importamos o express no nosso projeto
Criamos a variável "server" ela vai conter todas as nossas rotas.
Fizemos uma rota do tipo GET que ao ser acessada ela nos retorna: "Está rota está funcionando!"

Agora podemos criar uma pasta chamada "views" nela vai conter todo o html do projeto.

Na pasta views crie o arquivo "home.html" e digite:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <h1>CRUD com nunjucks</h1>
    <form action="/post" method="post">
        <input type="text" placeholder="Seu nome." name="name">
        <input type="email" name="email" placeholder="Seu email.">
        <button type="submit">Enviar!</button>
    </form>

</body>
</html>

No arquivo server.js, vamos importar o nunjucks mas primeiro precisamos ter ele instalado.

npm install nunjucks

Após a instalação vamos configurá-lo.

const express = require("express")
const server = express()
const nunjucks = require("nunjucks")

// Configurando a pasta public.
server.use(express.static("public"))

// Configurando para receber dados do request.body.
server.use(express.urlencoded({extended:true}))
server.use(express.json());

// Config da template engine.
server.set("view engine", "njk")
nunjucks.configure("views", {
    express:server,
    autoescape:false,
    noCache:true,
})

server.get("/", (request , response) => {
    return response.render("home")
})

// Adicionando uma porta para o projeto.
server.listen(3333)

Repare que configuramos uma pasta chamada "public", mas por quê?

Caso você queira adicionar arquivos css você pode criar a pasta "styles", arquivos js você pode criar a pasta "scripts" e para imagens você pode criar a pasta "assets". Mas essas 3 pastas tem que estar dentro da pasta "public" e a "public" na raiz do projeto.E o nunjucks vai reconhecer ela.

Após tudo configurado renomeie o arquivo "home.html" para "home.njk".

No terminal rode:

node server.js

Abra o seu navegador e na barra de pesquisa digite:

http://localhost:3333

Pronto! Conseguimos utilizar o nunjucks e o node para renderizar um arquivo html!

Agora vamos fazer este CRUD! Mas antes vamos conhecer o nodemon!

Nodemon

Caso você não queira escrever "node server.js" a cada alteração, você pode instalar o nodemon.

npm install nodemon -D

Após a instalação repare que no comando para instalar o nodemon tem o "-D".

Para que ele serve?

O "-D" serve para que o nodemon só possa ser usado no ambiente de desenvolvimento.

Agora para startar o server digite "nodemon server.js" e pronto! O server será reestartado a cada alteração.

CRUD com nunjucks

Na raiz do projeto vamos criar o arquivo "data.json" um arquivo onde vai ficar os dados que serão enviados, como se fosse um banco de dados e escrever o seguinte:

{
    "dados":[]
}

No arquivo server.js vamos fazer a rota "/post" do tipo POST e importar o fs para escrever os dados no arquivo data.json .

const data = require("./data.json")
const fs = require("fs")
const express = require("express")
const server = express()
const nunjucks = require("nunjucks")

server.use(express.static("public"))
server.use(express.urlencoded({extended:true}))
server.use(express.json());
server.set("view engine", "njk")
nunjucks.configure("views", {
    express:server,
    autoescape:false,
    noCache:true,
})

server.get("/", (request , response) => {
    return response.render("home")
})
server.post("/post", (request, response) => {
    const keys = Object.keys(request.body)
    // Vendo se nenhum dado está vazio.
    for (key of keys) {
        if (request.body[key] == '') {
            return response.send("Please, fill all fields")
        }
    }
    // Desestruturando o request.body e pegando os dados dele.
    let { name, email } = request.body

    // A Variavel do ID.
    const id = Number(data.dados.length + 1)
    // Inserindo no json os dados.
    data.dados.push({
        id,
        name,
        email,
    })
    // Escrevendo no json as alterações.
    fs.writeFile("data.json", JSON.stringify(data, null, 2), (err) => {
        if (err) {
            return response.send("White file error... :(")
        }
        return response.redirect("/")
    })
})
server.listen(3333)

Na rota GET do arquivo server.js vamos altera-la para também retornar uma variável.


const data = require("./data.json")
const fs = require("fs")
const express = require("express")
const server = express()
const nunjucks = require("nunjucks")

server.use(express.static("public"))
server.use(express.urlencoded({extended:true}))
server.use(express.json());
server.set("view engine", "njk")
nunjucks.configure("views", {
    express:server,
    autoescape:false,
    noCache:true,
})

server.get("/", (request , response) => {
    // Retornando uma variavel para o frontend.
    return response.render("home",{data: data.dados})
})
server.post("/post", (request, response) => {
    const keys = Object.keys(request.body)

    for (key of keys) {
        if (request.body[key] == '') {
            return response.send("Please, fill all fields")
        }
    }
    let { name, email } = request.body

    const id = Number(data.dados.length + 1)

    data.dados.push({
        id,
        name,
        email,
    })
    fs.writeFile("data.json", JSON.stringify(data, null, 2), (err) => {
        if (err) {
            return response.send("White file error... :(")
        }
        return response.redirect("/")
    })
})
server.listen(3333)

Para finalizar, no arquivo "home.njk" vamos escrever:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <h1>CRUD com nunjucks</h1>
    <form action="/post" method="post">
        <input type="text" placeholder="Seu nome." name="name">
        <input type="email" name="email" placeholder="Seu email.">
        <button type="submit">Enviar!</button>
    </form>
    <div class="dados">
        <ul>
            <h1>Dados</h1>
             <!--
              Aqui ja estamos utilizando um método do nunjucks o for.
              -->
            {% for dados in data %}
                <ul>
                    <li>Nome:{{dados.name}}</li>
                    <li>Email:{{dados.email}}</li>
                </ul>
            {% endfor %}

        </ul>
    </div>
</body>
</html>

Repare que neste código acima temos um for, mas para que ele?

O for foi utilizado para percorrer a variavel data que passamos no back-end e agora ele retorna outra variavel com o nome dados

Ou seja

A cada dado ele vai retornar:

<ul>
    <li>Nome:"o nome"</li>
    <li>Email:"o email"</li>
</ul>

Projeto Final com alguns dados:

Não se esqueça que a cada alteração rode "node server.js"

Se este artigo realmente te ajudou compartilhe com seus amigos deixe o gostei se tiver e até a próxima!

Caso tenha alguma dúvida, confira o repositório no github que contem o todo código desenvolvido neste artigo!

Link para o repositório.