Aprenda a Separar o Framework das Regras de Negócio

Show me The Code Esse é o vídeo que eu vou continuar o vídeo passado de programação orientada a objetos para frontend mostrando para vocês um exemplo de como você pode separar aquilo que é modelagem aquilo que é regra da parte de interface gráfica da parte que tem a ver com frameworks esse também é um dos assuntos que nós vamos aprofundar no dia 2 a 4 de outubro no evento está faltando menos de uma semana próxima semana 2 de outubro nós vamos começar o nosso evento online gratuito e ao vivo para você interagir junto com a

gente e entender como separar regra de negócio de Framework saber utilizar de forma correta os frameworks para que você não fique preso e refém das constantes mudanças que acontecem no mundo daquilo que é a casca da sua aplicação não torne a casca da aplicação núcleo não leve para dentro do coração da sua aplicação aquilo que é detalhe de infraestrutura porque eu tenho certeza que a tua aplicação vai vai subir de nível e você vai parar de pensar como programador iniciante e vai começar a pensar muito mais como programador maduro esse é o nosso objetivo na

próxima semana vem fazer parte com a gente não deixa passar essa oportunidade link na descrição agora nós vamos entender na prática como a gente pode separar as regras de negócio de frameworks das bibliotecas que a gente vai usar para que a gente possa ter uma aplicação mais organizada mais saudável mais fácil de evoluir mesmo em aplicações simples a gente consegue fazer isso como um treinamento para aplicações mais complexas é claro que no caso aqui do jogo da velha eu poderia sim desenvolver tudo no mesmo lugar mas é muito interessante em aplicações mais simples você aplicar

isso porque você vai criando essa mentalidade de separar aquilo que é regra daquilo que é interface colocando as responsabilidades em cada lugar e assim você vai conseguir desenvolvendo essa nova mentalidade de pensar desenvolvimento de aplicações essa é uma aplicação que foi desenvolvida dentro da mentoria da formação D foi feita ao vivo junto com os alunos e a gente tá desenvolvendo uma série de aplicações bem interessantes e esse aqui é um exemplo que eu vou comentar com vocês o código fonte agora eu queria mostrar para vocês um pouco do código e aqui eu estou usando o

turbo rle que é um gerenciador digamos assim de Build de projetos que ele cria um repositório único com vários projetos e vários pacotes e ele te ajuda a integrar esses vários pacotes esses projetos no único Build para que você consiga separar a sua aplicação de uma forma mais interessante é muito legal eu sugiro já tem vídeo no canal falando um pouquinho do Turbo riple e aqui eu estou usando basicamente para separar a parte do frontend da aplicação da parte das regras que é o Core né o núcleo da aplicação então basicamente Nós temos duas partes

aqui eu posso colocar todo as minhas aplicações aquilo que vai ser deplo digamos assim né ser é que existe essa palavra mas por exemplo Ah tenho uma aplicação frontend eu tenho uma aplicação backend eu tenho uma aplicação Bet eu tenho uma aplicação que é um frontend administrativo todas essas aplicações eu posso colocar aqui dentro da pasta App no caso da pasta apps no plural e eu só tenho uma que é o frontend E você tem aqui uma outra pasta de pacotes que você pode colocar por exemplo uma bi Teca de componentes visuais você pode colocar

suas regras em um projeto então aqui é como se fosse né como se fosse não é um pacote npm que eu não estou publicando na nuvem e consigo acessar Ele diretamente através da minha aplicação frontend então a relação que existe aqui é que no pack de.jon eu fiz aqui uma referência para esse projeto Core que eu coloquei aqui dentro dos pacotes eu instalo ele como se fosse um pacote normal coloco npm i e ele instala internamente e ele consegue a partir dessa aplicação usar um outro pacote que está aqui na pasta packages mas basicamente o

que nós temos aqui é o seguinte nós temos a nossa aplicação frontend que é a casca utilizando nextjs e nós temos a parte das regras de negócio dentro desse projeto que são separados uma das grandes vantagens que você tem de separar é exatamente a testabilidade você tem um código muito mais fácil de testar tanto é que se entrar aqui na pasta Core só maximizar um pouco aqui a tela e colocar aqui npm testing você vai ver que nós temos uma cobertura de 100% do nosso código das regras do nosso Core da aplicação e isso é

uma vantagem absurda primeiro que você escreve código que tem um valor muito para além do Framework em si mesmo que o Framework mude as regras estão implementadas de forma separada de forma protegida né tege as regras das variações imensas que acontecem nos frameworks então é muito interessante você ter essa visão de separar as regras se a gente olhar aqui basicamente nós temos a pasta src e nós temos a pasta de teste não vou entrar muito aqui na implementação dos Testes porque não é o foco do vídeo mas basicamente o que nós temos aqui são algumas

classes importantes que vão modelar de forma orientada a objetos o nosso jogo eu tenho por exemplo o jogo emist eu só jogar aqui só pra gente ter aqui uma ideia basicamente você tem um jogador Começando por exemplo o x joga e na próxima rodada o bola começa na outra rodada o x começa e na outra rodada o bola começa sempre tem essa alternância de quem começa o jogo Independente de quem vai ganhar o jogo então por exemplo x bola aí eu coloco x bola e o x ganhou aqui no meio então o jogo detecta qual

foi a jogada que gerou a Vitória tanto é que ele marca aqui de azul mostra quem ganhou você pode zerar o jogo aí ele zera a pontuação ou você pode ir pra próxima rodada e agora quem começa é o bola então bola x bola x e o bola ganhou aqui em cima e aí ele vai contabilizando ponto para o jogador um e ponto para o jogador dois você pode ir pra próxima rodada e também pode ter empate né se você seleciona todos os quadrados e não tem uma vitória aí ele marca aqui como empate e

se você dá um refresh mesmo no meio do jogo ele vai começar o outro jogo iniciando o outro jogador né Sempre que você reseta ele vai trocando Quem começa a jogada legal então aqui é uma visão Geral do nosso jogo e como é que a gente mapeou primeiro nós temos uma classe que representa cada uma dessas células eu não tô falando da parte visual eu estou falando da modelagem orientada a objetos então aqui se eu tenho uma célula que representa um dos quadradinhos do meu jogo jogo aqui eu também tenho uma célula que é exatamente

aqui na pasta shar eu tenho o tipo do jogador que é o x e o bola e eu tenho uma célula que representa uma linha e uma coluna essa célula pode ter um jogador associado a ela ou pode estar nula ou seja uma célula vazia eu tenho se essa célula está vazia ou se ela está é preenchida não está vazia e eu também posso marcar aqui a célula com um tipo de jogador seja o jogador x ou o jogador bola e nesse caso todos os meus objetos são objetos somente leitura Então sempre que eu quero

fazer uma modificação no objeto eu chamo um comportamento rico nota que aqui eu tenho atributos e comportamentos comportamentos que implementam as regras dentro dos objetos essa ideia de separar atributos de comportamento não é interessante e eu entendo que a gente tem que resgatar nesse sentido a oo para que a gente possa trazer os comportamentos Ricos para dentro do objeto Então nesse caso sempre que você faz uma alteração entre aspas aqui do nosso objeto é criado uma Nova Instância desse objeto com essa alteração feita ou seja não é modificado o objeto atual e sim é evoluído

para uma Nova Instância do objeto então nós temos aqui a célula e nós temos um outro objeto que representa o tabuleiro que é exatamente a junção de todas as células se a gente olhar aqui ó dentro do jogo eu tenho uma classe chamada board que é o tabuleiro que aqui dentro nós temos a definição do nosso board eu coloquei de forma fixa para deixar mais simples ah Leo mas eu preciso de um jogo da velha que seja flexível que possa ser 5 por5 6 por6 7x se a gente poderia implementar dessa forma mas aqui eu

coloquei de forma bem simples colocando simplesmente 3 por TR então cada célula vai ter uma linha e uma coluna e o tabuleiro que foi criado a partir dessa função estática criando um tabuleiro vazio ele vai trazer pra gente aqui as nove células todas marcadas com nulo inicialmente porque elas estão vazias tá você pode saber quantas linhas tem nesse tabuleiro quantas colunas tem você consegue pegar todos os itens no único arrei você consegue pegar uma célula específica através da linha da coluna você sabe se está vazia ou não através da linha da coluna e você também

consegue ver se o tabuleiro está completo ou seja todas as jogadas ou seja todas as células estão marcadas com algum tipo E aí você vai usar essa lógica para saber por exemplo se houve um empate se não teve ninguém que ganhou e o tabuleiro está completo então a gente acaba tendo um empate e esse é o único comportamento esse último todos os outros são comportamentos que vão extrair em informações do Tabuleiro e o último é o que de fato gera uma Nova Instância do Tabuleiro para quando você quer alterar através da linha e da coluna

o tipo de jogador Ou seja quando você quiser marcar um determinado Campo a partir da linha e da coluna ou seja você percebe que aqui não é simplesmente os dados que no caso que os dados são bem simples é basicamente o estado do Tabuleiro que é uma rede ar Reis ou uma matriz de células e aqui você tem uma série de comportamentos que vão te ajudar a entender como o tabuleiro está organizado e também para você alterar o estado do Tabuleiro Nós também temos o jogador que representa aqui tem o nome dele o tipo do

jogador e a pontuação dele por exemplo sempre que ele vai ganhando você vai acrescentando a pontuação do jogador tanto é que tem um método para adicionar um ponto né ou vários pontos dependendo de como a gente queira fazer e nós temos aqui a parte do resultado a parte do O resultado é a parte onde nós vamos calcular para saber se houve uma vitória ou não E aí eu quis separar bem para que a gente possa por exemplo ter uma verificação de um resultado horizontal ter uma verificação de um resultado na diagonal ter uma verificação do

resultado vertical verificação de empate tudo isso foi feito de forma separada para que a gente possa entender como é que funciona essas verificações e não colocar tudo em um único local mas separar isso bem para que a gente possa checar se houve ou não uma vitória então por exemplo os resultados verticais são essa combinação de jogos aqui tá eu poderia fazer um algoritmo que calculasse isso de forma simples sim inclusive tem um outro projeto que parece muito essa questão do jogo da velha Só que é o jogo Connect for né para conectar quatro em vez

de três que a gente faz essa lógica de forma digamos assim algorítmica né a gente consegue verificar os resultados Independente de você passar os jogos que geram determinadas vitórias mas aqui a gente quis simplificar Para deixar fácil o entendimento do código até porque nesse caso especificamente não tinha essa demanda de você flexibilizar o tamanho do Tabuleiro flexibilizar Quais são as jogadas possíveis de Vitória e nesse caso a gente acabou optando pela simplicidade em vez de ter um código extremamente flexível e obviamente acaba ficando mais complexo também então nós temos aqui toda a parte de verificação

de resultados inclusive nós temos aqui o result checker que é basicamente uma interface e essa interface ela é implementada pelos tipos diferentes de verificação como horizontal vertical diagonal e coisas do gênero e nós temos a classe principal digamos assim que é a classe jogo que essa classe é a classe que a gente vai instanciar o jogadores instanciar o tabuleiro saber quem é o jogador que vai iniciar o jogo saber quem é o jogador atual que está jogando porque sempre que há uma jogada ele vai trocando ó o jogador atual agora é o bola depois é

o x depois é o bola depois é o x então a gente sabe exatamente Quem é o jogador atual ele também armazena a quantidade de empates e nós temos aqui o resultado do jogo que pode ter algumas possibilidades por exemplo o resultado pode ser um resultado que o x ganhou o bola ganhou pode ser um resultado de empate ou jogo pode ainda estar em Progresso então ele sabe exatamente se o jogo já finalizou se o jogo está em progresso se o jogo deu empate se algum dos dois ganhou exatamente a partir dessa classe que modela

o resultado do jogo então vocês percebem que a gente pode fazendo essa modelagem completamente separada ah Léo ficou mais complexo do que se eu fizesse tudo em um único local tudo bem para um exemplo muito simples é possível que a sua modelagem acabe gerando a quantidade maior de código mas de qualquer forma deixa o seu código mais claro mais simples de manter no futuro do que se você tivesse feito tudo em um único local mesmo em códigos mais simples você percebe muito bem como a separação vai te ajudar a manter um código muito mais saudável

olha olha aqui dentro do front end a forma que a gente chama aqui no contexto que é o game context olha o tanto de código que a gente vai precisar fazer para ter o jogo todinho funcionando é basicamente aqui que nós chamamos toda a nossa regra de negócio então aqui eu vou instanciar um jogo ó game pcat passei um jogador P1 do tipo x passei um jogador P2 do tipo bola e aí eu crio o jogo a partir daqui como é que eu faço para adicionar um movimento game pad moove como é que eu faço

para reiniciar o jogo game.on next round ou seja próxima rodada como é que eu faço para limpar o jogo game.on clear basicamente eu só estou chamando as regras de negócio da minha aplicação e sempre que eu chamo um método ou um comportamento rico na minha aplicação ele vai retornar Uma Nova Instância do jogo ou seja porque eu tô trabalhando no jogo também como dados imutáveis o jogador é imutável o tabuleiro é imutável ou seja o estado do jogo é imutável e sempre que eu chamo por exemplo next round Ele vai criar uma nova Instância do

jogo com as informações atuais e fazendo a mudança exatamente naquilo que interessa nesse caso aqui ó eu pedi para ele gerar um tabuleiro novo já que eu estou indo paraa próxima rodada do jogo Então quando você separa essas responsabilidades você começa a perceber que você coloca o comportamento certo no lugar certo então aqui dentro do meu contexto do nextjs não é o local pra gente implementar as regras de negócio da minha aplicação Então você percebe que eu tenho um contexto extremamente pequeno simplesmente tendo aquilo que interessa para eu acessar dentro dos meus componentes e Basicamente

aquilo que tem de regra é chamado diretamente nos meus objetos utilizando a programação orientada a objetos para modelar de forma separada aquilo que é regra da minha aplicação e aquilo que de fato é frontend aquilo que é casca tá e eu queria só terminar mostrando exatamente essa figura para você aqui ó todo o nosso código foi testado isso não quer dizer que não existam bugs pode existir bugs sim mas fica muito mais fácil a gente refatorar fica muito mais fácil a gente ter um código maduro Exatamente porque a gente é capaz de testar cada um

desses elementos só para mostrar aqui para vocês para finalizar essa parte aqui do nosso overview do código aqui se a gente entra por exemplo a em resultado você vai ver ó o resultado horizontal eu vou lá e crio ó deve finalizar com vitória do jogador x aí eu crio aqui um exemplo tabuleiro 700 jogador x 7 né a linha zero e a coluna um pro jogador x linha 0 e coluna 2 pro jogador x ou seja esse resultado do meu Tabuleiro é para ser um resultado de Vitória então eu pego aqui o verificador de Vitória

na horizontal verifico o tabuleiro e eu tenho o resultado do meu jogo ou seja o jogo finalizou é para ser verdadeiro o x ganhou é para ser verdadeiro o bola ganhou é para ser falso até poderia colocar o resultado está em Progresso deve ser falso porque esse teste também deve funcionar ó então ó expect no caso aqui resultado in Progress to be false já que ele finalizou não é para estar em Progresso Então você percebe que dessa forma fica muito mais fácil de explicar para vocês o jogo mostrar por exemplo e os testes né Tem

uma grande vantagem também porque você percebe como você vai usar as classes a partir do teste fica claro beleza como é que eu vou usar a classe e para verificar o resultado do jogo na horizontal como é que eu vou fazer para usar o meu tabuleiro você vai lá no boord test.ts e você vai ver as possibilidades ó criar um tabuleiro vazio então se eu criei vazio eu vou ter três linhas e três colunas e ele não pode estar preenchido você pode por exemplo verificar se um determinado elemento né a linha zero coluna 3 coluna

dois no caso vai tá ou não preenchido é para est falso eu quero aqui conseguir retornar todos os itens de forma linear né flat em vez de ser um arrei dentro de outro arrei Ah eu quero marcar uma célula por linha e por coluna Ah eu quero fazer tal e tal comportamento então fica muito fácil você entender como você pode usar determinadas classes quando você tem também os testes unitários mostrando para você os principais comportamentos de cada uma dessas classes tá Ah eu vou limpar aqui o jogador eu quero adicionar 10 pontos ao jogador eu

quero limpar um jogador que tem pontuação existente quando der um reset no jogo Então você tem aqui as funcionalidades O que é muito legal isso aqui gente serve tanto para um jogo simples como principalmente vai servir para aplicações mais complexas então tem muitas vantagens de você programar dessa forma e aí ficou um pouco mais fáil de entender como é possível fazer essa separação do que é negócio daquilo que é Framework infraestrutura essa é uma aplicação minúscula nível quase atômico mas quando você passa para aplicações empresariais que vão passar 2 3 7 10 15 anos sendo

desenvolvidas evoluídas refatorado melhoradas essa separação ela é vital porque em 10 anos um Framework ele muda diversas vezes a tecnologia vai pro pro front end volta pro backend volta pro front end de novo vai pro backend faz uma reviravolta no mundo da tecnologia Mas o negócio ele estando separado protegido você vai ter uma organização muito maior na tua aplicação Isso vai trazer um benefício gigante fora que o nível de testabilidade ele vai para um outro patamar o nível de maturidade do código também porque você sabe muito bem como separar essas responsabilidades é exatamente esse um

dos temas que nós vamos aprofundar e ver com calma na semana do dia 2 a 4 de outubro já é próxima semana está bem aí link na descrição se inscreve no evento que eu tenho certeza que ele vai fazer uma grande diferença na tua jornada como programador Olha o que eu estou dizendo vai sim mudar a forma como você imagina o desenvolvimento Então vem com a gente se inscreve não deixa passar essa oportunidade que a gente se encontra no evento e nos próximos vídeos aqui no canal da codem um grande abraço e até [Música] lá