DEV Community: Elisangela Silva

Desbravador, os segredos do JavaScript aguardam em sua mochila! 🎒🔮 (variáveis)

Elisangela Silva — Fri, 21 Mar 2025 20:14:37 +0000

Um dos grandes segredos para se dar bem com JavaScript (e frameworks que são baseados nele) é dominar o básico e praticar até que fique natural. Ignorar esses fundamentos ou não dar a devida importância a eles é um dos erros mais comuns que podemos cometer. Por isso, vamos começar nossa jornada de estudos com calma, explorando cada detalhe da Sintaxe Básica e, claro, botando a mão na massa com alguns exercícios.🛠️📚

Um dos primeiros passos em qualquer jornada de programação, assim como em uma aventura de ✨RPG✨, é conhecer suas ferramentas básicas. No mundo de JavaScript, as variáveis são como os itens da sua mochila: let, const e var. Cada uma tem seu próprio poder e propósito, e você não pode simplesmente jogar um dado 🎲 e escolher uma aleatoriamente. Elas têm seus segredos e momentos certos para serem usadas, então é importante entender qual delas vai te ajudar a vencer cada desafio! 🧙‍♂️✨

var 🧙‍♀️

Nossa primeira variável, a var, é como um mago antigo: poderosa, mas cheia de truques que podem confundir até os aventureiros mais experientes. Ela tem escopo de função, o que significa que, onde quer que você a declare dentro de uma função, ela estará acessível em todo o território dessa função. Além disso, ela tem uma habilidade especial chamada Hoisting, que faz com que o JavaScript "içe" sua declaração para o topo do escopo durante a fase de compilação. Em outras palavras, mesmo que você declare a var no meio do código, o JavaScript age como se ela tivesse sido declarada lá no começo. 🪄

function exemploHoisting() {
    console.log(arma); // undefined (hoisting)
    var arma = "Espada Flamejante 🔥⚔️";
    console.log(arma); // "Espada Flamejante 🔥⚔️"
}
exemploHoisting();

Ela também é bastante flexível: você pode reatribuir e redeclarar valores a uma var quantas vezes quiser.

function exemploRedeclaracao() {
    var poder = "Fogo 🔥";;
    console.log(poder); // "Fogo 🔥"

    var poder = "Gelo ❄️"; // Redeclarando a mesma variável
    console.log(poder); // "Gelo ❄️"

    poder = "Raio ⚡"; // Reatribuindo valor
    console.log(poder); // "Raio ⚡"
}

exemploRedeclaracao();

Parece incrível, né? Mas, como todo grande poder, isso vem com uma grande responsabilidade... ou, no caso, alguns problemas:

Por causa do hoisting, a var é inicializada com undefined. Isso pode levar a situações estranhas, especialmente se você tentar usar a variável antes de declarar ou atribuir um valor a ela. Imagine tentar usar uma poção antes de enchê-la! 🧪

Exemplo:

console.log(x); // undefined (não dá erro, mas o valor é undefined)
var x = 10;
console.log(x); // 10

Aqui, o JavaScript não reclama quando você tenta acessar x antes de declarar, mas ele te entrega um undefined. Isso pode causar bugs difíceis de rastrear, especialmente em projetos maiores. Por isso, hoje em dia, muitos aventureiros preferem usar let e const, que são mais previsíveis e seguras. Mas, mesmo assim, entender a var é essencial para dominar os segredos do JavaScript! 🛡️⚔️

let 🛡️

Se a var é como um mago antigo cheio de truques, o let é como um guerreiro confiável e previsível. Ele foi introduzido no JavaScript (ES6) para resolver muitos dos problemas que a var trazia, especialmente aqueles relacionados ao escopo e ao hoisting.

Escopo de Bloco 🧱

Diferente da var, que tem escopo de função, o let tem escopo de bloco. Isso significa que ele só existe dentro do bloco onde foi declarado (seja um if, for, while, ou qualquer coisa entre chaves {}). É como se ele fosse uma ferramenta que você só pode usar dentro de uma sala específica do seu castelo. 🏰

Exemplo:

function exemploEscopo() {
    if (true) {
        let arma = "Arco Flamejante 🏹🔥";
        console.log(arma); // "Arco Flamejante 🏹🔥" (dentro do bloco if)
    }
    console.log(arma); // Erro! "arma" não está definida fora do bloco if.
}
exemploEscopo();

Aqui, a variável arma só existe dentro do bloco if. Se você tentar usá-la fora dele, o JavaScript vai te dar um erro. Isso evita confusões e bugs, já que você sabe exatamente onde a variável pode ser usada. 🎯

Sem Hoisting Enganoso 🚫

O let também sofre hoisting, mas de uma forma mais segura. Ele é "içado" para o topo do bloco, mas não é inicializado até que a declaração seja encontrada no código. Isso significa que, se você tentar acessar a variável antes de declará-la, o JavaScript vai te avisar com um erro, em vez de te dar um undefined silencioso.

Exemplo:

function exemploHoistingLet() {
    console.log(poder); // Erro! "poder" não foi definido.
    let poder = "Invisibilidade 🕶️";
    console.log(poder); // "Invisibilidade 🕶️"
}
exemploHoistingLet();

Aqui, o JavaScript não deixa você usar a variável antes de declarar, o que evita aqueles bugs chatos que a var pode causar.🐛

Reatribuição, mas sem Redeclaração 🔄

Com o let, você pode reatribuir valores a uma variável, mas não pode redeclarar a mesma variável no mesmo escopo. Isso ajuda a evitar conflitos e mantém seu código mais organizado.

Exemplo:

function exemploReatribuicao() {
    let magia = "Bola de Fogo 🔥";
    console.log(magia); // "Bola de Fogo 🔥"

    magia = "Nevasca ❄️"; // Reatribuindo valor
    console.log(magia); // "Nevasca ❄️"

    // let magia = "Raio ⚡"; // Erro! Não pode redeclarar.
}

exemploReatribuicao();

const 🧙‍♀️

Se a var é o mago antigo e o let é o guerreiro confiável, a const é como um artefato mágico: uma vez criada, ela não pode ser alterada. Ela foi introduzida no JavaScript (ES6) para lidar com valores que não devem mudar ao longo do tempo, como constantes matemáticas, configurações ou referências a objetos imutáveis.

Escopo de Bloco 🧱

Assim como o let, a const tem escopo de bloco. Isso significa que ela só existe dentro do bloco onde foi declarada. Se você tentar acessá-la fora desse bloco, o JavaScript vai te avisar com um erro.

Exemplo:

function exemploEscopoConst() {
    if (true) {
        const tesouro = "Baú de Ouro 💰";
        console.log(tesouro); // "Baú de Ouro 💰" (dentro do bloco if)
    }
    console.log(tesouro); // Erro! "tesouro" não está definido fora do bloco if.
}
exemploEscopoConst();

Aqui, a variável tesouro só existe dentro do bloco if. Fora dele, ela é inacessível, o que ajuda a manter o código organizado e seguro. 🗝️

Sem Hoisting Enganoso 🚫

Assim como o let, a const também sofre hoisting, mas não pode ser acessada antes da declaração. Se você tentar, o JavaScript vai te dar um erro, evitando comportamentos inesperados.

Exemplo:

function exemploHoistingConst() {
    console.log(artefato); // Erro! "artefato" não foi definido.
    const artefato = "Amuleto da Proteção 🛡️";
    console.log(artefato); // "Amuleto da Proteção 🛡️"
}
exemploHoistingConst();

Imutabilidade (Quase) Absoluta 🔒

Aqui está a principal característica da const: ela não pode ser reatribuída. Uma vez que você declara uma const e atribui um valor a ela, esse valor não pode ser alterado. É como um selo mágico que protege seu tesouro. 🪙

Exemplo:

function exemploImutabilidade() {
    const PI = 3.14159;
    console.log(PI); // 3.14159

    // PI = 3.14; // Erro! Não pode reatribuir uma const.
}
exemploImutabilidade();

Mas atenção! A const não torna o valor em si imutável, apenas a *referência *àquele valor. Se você usar const com objetos ou arrays, ainda pode modificar suas propriedades ou elementos.

Exemplo:

function exemploObjetoConst() {
    const personagem = { nome: "Aragorn 🧝‍♂️", classe: "Guerreiro ⚔️" };
    console.log(personagem.nome); // "Aragorn 🧝‍♂️"

    personagem.nome = "Legolas 🏹"; // Isso é permitido!
    console.log(personagem.nome); // "Legolas 🏹"

    // personagem = { nome: "Gandalf 🧙‍♂️" }; // Erro! Não pode reatribuir a variável.
}
exemploObjetoConst();

Resumindo a Jornada das Variáveis 🛡️⚔️

var: O mago antigo, poderoso, mas cheio de truques. Escopo de função e hoisting podem causar confusão. 🧙‍♂️
let: O guerreiro confiável. Escopo de bloco e sem hoisting enganoso. Ideal para variáveis que precisam ser reatribuídas. 🛡️
const: O artefato mágico. Escopo de bloco e imutabilidade (quase absoluta). Perfeita para valores fixos e referências que não devem mudar. 🧙‍♀️

Upgrade do Rails 4.2.7 para o Rails 5.2.6

Elisangela Silva — Wed, 24 Nov 2021 20:17:37 +0000

Hi guys! Espero que vocês estejam bem e seguros. 😃 Bom, esses dias recebi a missão de atualizar as versões do ruby (2.3.7 para 2.6.6) e rails (7.2.7 para 5.2.6) em um dos projetos do trabalho. Tinha em mente que iria ser chatinho e cansativo, mas não imaginava que tanto, kkkkkk.

Irei abordar os pontos que considero importantes e que gostaria de ter ouvido antes de iniciar esta jornada. 😃

Inicialmente testei o simples, adicionei no Gemfile as versões que desejava do ruby e rails, e em seguida executei o bundle install para atualizar as novas versões no Gemfile.Lock. Obtive como resposta vários erros sobre as versões das gems, isso porque as versões que estavam no projeto não suportavam o rails 5.x ou estavam depreciadas.

Iniciei as atualizações das gems pelo bundler, adicionando uma versão compatível e estável com a versão do rails 5.x. Esse é um ponto importante pois algumas versões de gems necessitam de uma versão mais atualizada do bundler. Eu por exemplo, atualizei da versão ‘1.17.3’ para '~> 2.1', '>= 2.1.4' e em seguida executei o bundle install, obtive alguns erros mas esperado pois não tinha atualizado as demais gems. E assim fui atualizando as versões das gems de cima para baixo, adicionando versões compatíveis e estáveis com a versão do rails 5.x, utilizando o RubyGems e documentação das próprias como referência.

Algumas gems podem estar depreciadas, por exemplo, a gem 'quiet_assets', o próprio rails agora tem uma solução. Neste caso não será necessário encontrar uma substituta, mas em outros casos pode ser necessário. Depois de atualizar algumas versões, rodei o bundle install e obtive o mesmo erro do início, mesmo não sendo recomendado pela comunidade, decidi pela exclusão do Gemfile.Lock e rodar novamente o bundle install, a partir daí consegui rodar e gerar um novo Gemfile.Lock atualizado 😃 . Agora vamos para as configurações.

Na documentação do Rails podemos encontrar os próximos passos. Quando rodar o rails app:update será apresentado no terminal alguns ajustes que podem ser realizados nos arquivos já existentes, neste momento você deve ter cuidado principalmente nas configs e não terminar modificando as configurações personalizadas do projetos, tente mudar o mínimo possível e consulte a documentação sempre sobre alguma mudança nas configurações padrões do Rails. Também serão adicionados novos arquivos.

O próximo passo foi rodar o rails server, apareceram outros erros por causa de código depreciado. O primeiro foi o alias_method_chain que foi desatualizado. O segundo foi com o ActiveRecord::Migration não ser suportado, sendo assim necessario atualização das migrations para ActiveRecord::Migration[5.2], nesse link tem um exemplo de como faz.

Depois desses ajustes consegui iniciar o servidor, agora é testar todo projeto, não deixar escapar nenhum detalhe, todas funcionalidades devem ser testadas. Essa parte é importante para analisar se está tudo funcionando ou se será necessário ajustes, por exemplo pode ocorrer de uma funcionalidade não está funcionando no projeto porque a gem não é mais utilizada daquela forma e será necessário atualização no código para usar aquela gem.

Por não conter testes no projeto, foi necessário uma bateria extensa de testes.

REFERENCIA BIBLIOGRAFICA
Atualizando o Ruby on Rails - https://guiarails.com.br/upgrading_ruby_on_rails.html
RubyGems -https://rubygems.org/
Descontinuação do alias_method_chain - https://api.rubyonrails.org/v5.0.0/classes/Module.html#:~:text=alias_method_chain(target%2C%20feature)
ActiveRecord::Migration is not supported - https://stackoverflow.com/questions/48815984/rails5-directly-inheriting-from-from-activerecordmigration-is-not-supported-s
Descontinuação do before_filter - https://stackoverflow.com/questions/41572287/deprecation-warning-before-filter-is-deprecated-and-will-be-removed-in-rails-5

Validação e Formatação de Formulários: Client-Side vs. Server-Side

Elisangela Silva — Sat, 22 May 2021 11:39:46 +0000

Artigo atualizado dia 22/03/2025

Olá, pessoal!

Hoje vamos explorar um pouco sobre validação e formatação de dados no client-side (navegador) e no server-side (servidor).

Este artigo presume que você já conhece o básico de HTML e JavaScript. Caso não, deixei dois links para você começar sua jornada.

Em alguns momentos, utilizarei Expressões Regulares (regex). Se você não está familiarizado com o conceito, recomendo este artigo:

O básico sobre expressões regulares

Sumário

Introdução
Campo que permite apenas letras
Campo para e-mail
Campo para CPF
Campo para data de nascimento
Campo para celular e telefone fixo
Campo para observação
Conclusão
Código completo no Codepen

Introdução

Para ilustrar os conceitos, vamos utilizar um formulário simples. Comecei criando um rascunho no Figma, uma ferramenta incrível para design de interfaces. Confira o resultado:

Rascunho do formulário criado no Figma.

Agora, vamos implementar as validações e formatações!

1. Campo que permite apenas letras

Começaremos pelo campo Nome, que deve aceitar apenas letras. Existem duas abordagens para isso:

Opção 1: Usando o atributo `pattern` do HTML

O atributo pattern permite validar o valor de um campo usando uma expressão regular. Ele funciona com inputs do tipo text, email, tel, entre outros.

<form action="#">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" pattern="[A-Za-zÀ-ú\s]+" placeholder="Apenas letras" required>
  <input type="submit">
</form>

[A-Za-zÀ-ú\s]+: Aceita letras maiúsculas, minúsculas, acentuadas e espaços.
required: Garante que o campo não seja enviado vazio.

Quando o usuário tenta enviar o formulário com dados inválidos, uma mensagem de erro é exibida:

Opção 2: Bloqueando números com JavaScript

Outra abordagem é impedir que números sejam digitados no campo. Para isso, usamos o evento keydown:

<input type="text" id="nome" class="nomeClient" placeholder="Apenas letras">

let inputNome = document.querySelector(".nomeClient");
inputNome.addEventListener("keydown", function(e) {
  if (e.key >= "0" && e.key <= "9") {
    e.preventDefault(); // Bloqueia a tecla pressionada
  }
});

2. Campo para e-mail

Para validar e-mails, podemos usar o atributo type="email" do HTML. Ele verifica se o valor contém um @ e um domínio válido.

<label for="email">E-mail:</label>
<input type="email" id="email" placeholder="exemplo@dominio.com" required>

Se o e-mail for inválido, o navegador exibe uma mensagem de erro:

Observação: A validação no client-side é útil para melhorar a experiência do usuário, mas nunca substitui a validação no server-side.

3. Campo para CPF

A validação de CPF envolve três etapas:

Bloquear letras e caracteres especiais.
Verificar se o CPF tem 11 dígitos.
Validar o CPF usando o algoritmo da Receita Federal.

Código Completo para CPF

<label for="cpf">CPF:</label>
<input type="text" id="cpf" placeholder="Apenas números" required>
<span id="erro_cpf" class="mensagem-erro" style="display: none;">CPF inválido!</span>

let campoCPF = document.querySelector("#cpf");

campoCPF.addEventListener("keydown", function(e) {
  if (e.key >= "a" && e.key <= "z") {
    e.preventDefault(); // Bloqueia letras
  }
});

campoCPF.addEventListener("blur", function() {
  let cpf = this.value.replace(/\D/g, ""); // Remove não dígitos

  if (cpf.length === 11 && validarCPF(cpf)) {
    let cpfFormatado = cpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4");
    this.value = cpfFormatado;
    document.getElementById("erro_cpf").style.display = "none";
  } else {
    document.getElementById("erro_cpf").style.display = "block";
  }
});

function validarCPF(cpf) {
  // Implementação do algoritmo da Receita Federal
  // (Código omitido para brevidade)
}

4. Campo para data de nascimento

Para o campo de data de nascimento, podemos usar o tipo date do HTML, que já inclui uma validação básica.

<label for="data_nascimento">Data de Nascimento:</label>
<input type="date" id="data_nascimento" required>

5. Campo para celular e telefone fixo

Para telefones, usamos o atributo maxlength para limitar o número de caracteres e regex para formatação.

<label for="celular">Celular:</label>
<input type="text" id="celular" placeholder="Apenas números" maxlength="11" required>

<label for="telefone">Telefone Fixo:</label>
<input type="text" id="telefone" placeholder="Apenas números" maxlength="10" required>

// Formatação para celular
document.querySelector("#celular").addEventListener("blur", function() {
  let numero = this.value.replace(/\D/g, "");
  if (numero.length === 11) {
    this.value = numero.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3");
  }
});

// Formatação para telefone fixo
document.querySelector("#telefone").addEventListener("blur", function() {
  let numero = this.value.replace(/\D/g, "");
  if (numero.length === 10) {
    this.value = numero.replace(/(\d{2})(\d{4})(\d{4})/, "($1) $2-$3");
  }
});

6. Campo para observação

Para campos de texto longo, usamos a tag <textarea>:

<label for="observacao">Observação:</label>
<textarea id="observacao" placeholder="Limite de 100 caracteres" maxlength="100"></textarea>

Conclusão

Neste artigo, exploramos como validar e formatar dados no client-side usando HTML e JavaScript. Lembre-se de que a validação no client-side é importante para melhorar a experiência do usuário, mas nunca deve substituir a validação no server-side, que garante a segurança e integridade dos dados.

Confira o código completo no Codepen:

Ver código no Codepen

Se tiver dúvidas, sugestões ou críticas, deixe um comentário abaixo.

Gerando PDF com a gem wicked_pdf no Rails 6

Elisangela Silva — Sun, 25 Apr 2021 03:30:48 +0000

Hi guys! Espero que vocês estejam bem e seguros 😃. Sou iniciante no Rails e esses dias no trabalho surgiu uma tasks envolvendo a gem wicked_pdf, decidi estudá-la e escrever esse artigo. Espero que gostem!

Dividirei o artigo em duas partes, a primeira parte abordarei as instalações e ajustes necessários,e na segunda parte desenvolverei uma aplicação simples.

Iniciaremos criando a aplicação utilizando o seguinte comando:

$ rails new schedule

Ela se chamará Schedule.

Logo em seguida utilizando o seguinte comando para criar view e controller:

$ rails generate controller Schedule index --skip-routes

Ajuste da rota:

Rails.application.routes.draw do
  root "schedule#index"
end

Agora você pode rodar a aplicação:

$ rails s

Caso você não tenha ideia do que esses comandos acima fazem, sua jornada inicia por esse link, este link tem um tutorial legal para iniciantes.

1. Instalações e Ajustes

Tudo ok até aqui?! Caso sim, vamos prosseguir. A documentação da gem mostra o passo a passo de como a gem deve ser instalada, ela funciona nas versões do Rails abaixo do 6, a partir dessa versão vocês terão que realizar algumas modificações que iremos tratar nesse artigo.

Vamos iniciar adicionando a gem ao Gemfile e executar bundle install:

gem  'wicked_pdf'

Agora crie o initializer:

$ rails generate wicked_pdf

Depois de adicionar a gem wicked_pdf, precisamos incluir um detalhe. O wicked_pdf usa o binário wkhtmltopdf que, por sua vez, é baseado no WebKit. Sua funcionalidade é pegar um documento HTML e passar para o wkhtmltopdf que converte em um documento PDF que pode ser baixado pelo usuário.

Então vamos adicionar a gem do wkhtmltopdf ao Gemfile e execute bundle install:

gem  'wkhtmltopdf-binary'

O problema inicia agora, quando você tenta rodar o servidor aparece no console um erro parecido com esse aqui:

Error: No such file or directory @ rb_sysopen - /home/user/folder/schedele/config/webpacker.yml (RuntimeError)

Desde o Rails 6, o Webpacker é o compilador JavaScript padrão. Portanto, você também terá que configurá-lo antes de iniciar seu servidor Rails.

Existem algumas resoluções legais nessa issue, recomendo que você leia e até tente, vou disponibilizar abaixo o que funcionou comigo.

Certifique-se que você tem o yarn instalado ou ou dê uma olhada em https://yarnpkg.com/en/docs/install
Será necessário o nodejs na versão 10.17.0
Configure

$ rails webpacker:install

Certifique-se que todos os pacotes estão atualizados

$ yarn install --check-files

Agora teste iniciando seu servidor Rails

$ rails s

2. Desenvolvendo a aplicação

Tudo ok até aqui? Caso sim, vamos dar continuidade na construção da aplicação.

Iniciei essa segunda parte pelo controller:

class ScheduleController < AplicationController
  def index
  end
  def relatorio
      render pdf: "file",
      layout: "application.pdf.erb",
      template: "schedule/relatorio.pdf.erb"
  end
end

A action index será a view principal. Já a action relatorio será responsável por renderizar o pdf.

Criei o arquivo "application.pdf.erb" onde será definido o layout principal do pdf.

#app/views/layouts/application.pdf.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Schedule</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

#app/views/schedele/relatorio.pdf.erb

<h1>Hello Word!</h1>

Adicionei a rota da nova action no arquivo routes.rb

Rails.application.routes.draw do
  root "schedule#index"
  get "relatorio", to: "shedule#relatorio"
  resources: :schedele
end

Na view index, adicionei o helper to_link com a path da action que irá renderizar o arquivo pdf.

<h1>Schedule#index</h1>
<p>Find me in app/views/schedule/index.html.erb</p>

<%= link_to 'Create PDF document', relatorio_path(format: 'pdf') =%>

A partir daí consegui gerar o pdf:

No repositório da gem tem dicas de como utlizar css, imagens e javascript no pdf.

Qualquer duvida deixa nos comentários. Obrigada pela paciência e espero ter ajudado. Até mais!

Novo Recurso do GitHub - README no Perfil

Elisangela Silva — Thu, 16 Jul 2020 16:51:12 +0000

Nos últimos dias o GitHub disponibilizou um novo recurso na plataforma onde os usuários podem adicionar um readme e deixar em destaque no perfil. Vou mostrar o passo a passo de como adicionar.

Primeiro você terá que criar um repositório com o mesmo nome do seu usuário. Por exemplo meu username é Elisangelamsilva ao adicionar aparecerá isso aqui:

É necessário deixar público e marcar na opção de inicializar com o README.

Visualização do perfil:

Agora você já pode personalizar como quiser, como exemplo adicionei apenas o ícone com link para o meu perfil no Linkedin.
O próprio GitHub disponibiliza alguns exemplos do que pode ser adicionado, mas isso é por
sua conta. Use com sabedoria e configure do seu jeito.

Segue alguns links úteis para você deixar seu readme personalizado:

Emoji Markup 2.Conversão de imagens

PRINCIPAIS CONCEITOS DO PADRÃO MVC (MODEL-VIEW-CONTROLLER)

Elisangela Silva — Fri, 10 Jul 2020 19:14:08 +0000

Existem diversos padrões de arquitetura de software (design pattern) que podem ser aplicados para organizar o código de uma aplicação, e talvez o mais acessível deles seja o padrão MVC. Este padrão cria uma separação da implementação do software em camadas entre os dados da aplicação (model) e sua apresentação (view). Ações do usuário são interceptadas por um controller responsável em atualizar o modelo e refletir seu estado mais atual através de sua respectiva view. Essa divisão em camadas torna mais fácil e define melhor as responsabilidades e proporciona uma independência.

É altamente testável, pois quando se tem as camadas divididas onde cada parte está em seu devido lugar e o desenvolvedor consegue testar cada parte de forma separada, favorecendo o Desenvolvimento Dirigido por Testes (TDD).

O que significa cada sigla do MVC (MODEL-VIEW-CONTROLLER)
O model seria o coração da aplicação, onde se tem a regra de negócio, entidades, aplicação do banco de dados, e tudo que pertença a aplicação em termo de regra de negócio e validação.

A view onde temos a interface de comunicação com o usuário é responsável por renderizar a resposta da requisição seja ela em desktop ou web.

A camada controller faz o controle do fluxo da aplicação, fazendo o intermédio de todo o fluxo a definir o que o usuário verá na tela. É a primeira camada que recebe requisição dentro do padrão MVC.

Quando é necessário acessar o banco de dados para obter resposta.
Fluxo com dados:

Como funciona?
O usuário em seu browser realiza uma requisição HTPP, que ao chegar ao controller que verifica e comunica ao model. O model realiza uma consulta ao banco de dados, retornando os dados requisitados para o mode, vale lembrar que essa parte do model é invisível ao usuário. O model retorna ao controller que tem o trabalho de renderizar a informação na view. A view retornará um evento para o controller que devolverá a resposta HTPP para o browser onde o usuário poderá visualizar o que foi requerido.

Caso não seja necessário acessar dados, a requisição não precisa passar pela camada model, pois a camada model que se liga ao banco de dados.
Fluxo sem dados:

Implementação
Isso depende da linguagem de programação que será utilizada e do contexto da aplicação. Normalmente haverá uma classe abstrata para cada um dos 3 elementos principais: Model, View e Controller. O programador desenvolve aplicações criando subclasses dessas classes abstratas onde cada aspecto do sistema vai ter seu model. Cada modelo terá 1 ou mais controladores e visões.

Sugestão de leitura:
Use a Cabeça! Padrões de Projetos (livro).

DEV Community: Elisangela Silva

Desbravador, os segredos do JavaScript aguardam em sua mochila! 🎒🔮 (variáveis)

var 🧙‍♀️

let 🛡️

Escopo de Bloco 🧱

Sem Hoisting Enganoso 🚫

Reatribuição, mas sem Redeclaração 🔄

const 🧙‍♀️

Escopo de Bloco 🧱

Sem Hoisting Enganoso 🚫

Imutabilidade (Quase) Absoluta 🔒

Resumindo a Jornada das Variáveis 🛡️⚔️

Upgrade do Rails 4.2.7 para o Rails 5.2.6

Validação e Formatação de Formulários: Client-Side vs. Server-Side

Sumário

Introdução

1. Campo que permite apenas letras

Opção 1: Usando o atributo pattern do HTML

Opção 2: Bloqueando números com JavaScript

2. Campo para e-mail

3. Campo para CPF

Código Completo para CPF

4. Campo para data de nascimento

5. Campo para celular e telefone fixo

6. Campo para observação

Conclusão

Gerando PDF com a gem wicked_pdf no Rails 6

1. Instalações e Ajustes

2. Desenvolvendo a aplicação

Novo Recurso do GitHub - README no Perfil

PRINCIPAIS CONCEITOS DO PADRÃO MVC (MODEL-VIEW-CONTROLLER)

Opção 1: Usando o atributo `pattern` do HTML