Separation of concerns (SoC) – Front-end – 4 Layers

Separation of concerns (Separação de conceitos) apesar de não ser algo novo, ainda pode dar muita dar de cabeça.
Pensando nisso que resolvi escrever um cado sobre e compartilhar como vejo as coisas no front,
principalmente nesse momento em que o frontend passa por um turbilhão de coisas novas…

Como disse antes, talvez você não veja nada de novo, e até vai achar meio tosco =P.
Compreenda que o intuito não foi gastar tempo escrevendo um cenário mais aprazível, também não focarei no passo a passo das coisas, ou seja, não farei deste post um tutorial, ok? 😉
#simbora

 

Separation of concerns – Design Principle

Acoplamento: o grau de dependência entre dois módulos.

Coesão funcional: A coesão funcional é quando partes de um módulo são agrupadas porque todas elas contribuem para uma única tarefa bem definida do módulo.

Manutenção: uma medida de como é fácil manter o sistema.

Extensibilidade: uma medida de quão facilmente o sistema pode ser estendido com novas funcionalidades.

Reusabilidade: uma medida de como é fácil reutilizar um módulo em um sistema diferente.

Essa versão resumida de SoC é o que vamos ter em mente nas nossas alterações.

 

Nosso caso:

Como a arquitetura está nesse ponto:

(View+Model+Controller sem muita definição sobre suas responsabilidades)

(View+Model+Controller sem muita definição sobre suas responsabilidades)


STYLE

Iniciarei pela parte que está mais batida (assim eu espero)
Nosso querido style!
Facilmente se encontra bons conteúdos sobre esse assunto.
E tanto faz aqui o que você tem como apoio OOCSS, ACSS, BEM, SMACSS ou outro….
O importante, pra mim, é não deixar o style no DOM.
Jogue para um arquivo (de preferência um sass lindão, ou, claro,
se a tecnologia já tem sua maneira de lidar com isso, como é o caso do VUE, use-a!)

Particularmente prefiro simplificar algumas coisas aqui.

  1. pai-filho-característica costuma resolver todos os meus problemas
  2. Nível de indentação maior que 4 pode embolar as coisas
  3. Não use !important
  4. Tem que ser fácil customizar o elemento dependendo do seu contexto


TEMPLATE

Indo para o template:
Também não tem mistérios, mas tem DEV que insisti em fazer o !melhor possível aqui =/
Trabalhando um pouco mais no nosso template ele vai ficar assim:

Acabamos de deixar o style da nossa view pra quem sabe dessas coisas e a manipulação pro código,
assim nossa view começa a ver uma luz …
(Voltaremos na view depois)


CODE

Agora é a vez da estrela, o código!
Quem vai ficar por fazer a manipulação de dados e etc…
No início nosso código estava assim:

Depois de um update ficou assim:

Internalizamos a funcionalidade/operação que estava no DOM…
Agora garantimos que cada camada esteja fazendo o que lhe cabe…

CSS -> Pra estilo
Html -> Exibe o dado seguindo o estilo.
TS -> Pra inputar informação na view

(View-Model-Controller com suas responsabilidades mas bem definidas)

(View-Model-Controller com suas responsabilidades mas bem definidas)


 

Até aqui, ok?
Podemos chamar esse parte de primeiro ciclo.
Vamos para o segundo, tudo de novo, só que, agora, iniciando pelo código.


CODE

Voltando pra programação:
Vamos analisar o código com um olhar mais critico, e,
com pouco esforço, já vamos notar que esse controller faz muita coisa. Ruim.

Não é difícil ver desenvolvedor pimpão usando 3 camadas (MVC, MVP ou qualquer outra sopa dessas) e estrangulado/sobrecarregando as camadas.
Foco no concerne!
Tente subir o máximo possível o nível das responsabilidades do seu código.
O que somente o controller, ou qualquer outra camada que fique perto da view, deveria fazer?

Buscar dado?!  Será?
Prefira delegar isso pra outra parte.
Parte que vai cuidar dos dados da view.

Manipular dados? Será?
Deixe isso também pra camada que vai cuidar dos dados.

Uai! Então o que o controller faz?
Só o que só ele pode fazer =)
Ele é o único próximo o suficiente da view pra ouvir seus eventos e inputar dados.

Novo controller:

Transferindo o que estava n@ controller para nossa nova camada teremos:

Vamos centralizar qualquer dependência de dado da view nessa camada, qualquer eventual formatação e etc.
Entretanto, nossa nova camada ainda vai direto na API para buscar o dado, e é isso que vamos remover.

Pronto!
Onde tinhamos -> View + model + controller

Agora temos -> View + model + controller + data-layer -> APIs

 

E no final ficou assim:

 

Ainda temos muito pra trabalhar nesse pequeno caso, não chegamos a terminar o segundo ciclo, não chegamos nem a listar os impactos das mudanças nos nossos testes de unidade, não componentizamos e etc =)
Essas coisas legais ficarão para um part2 desse post 😉

Abraços!

The king of space (TKOS)

Aproveitando que meu filho está com preguiça de nascer eu resolvi tirar um projeto do papel \o/ (mais um dos que não devo terminar? XD)

The king of space (TKOS) será um jogo de batalha espacial, onde o objetivo vai ser pegar a coroa do rei pirata.  Esse projeto, na realidade, será um grande estudo das ferramentas que escolhi usar .

No momento eu só tenho a base do projeto, agora focarei em fazer o gameplay…

tkos.png

Classe da primeira tela

#javascript #node #babel #webpack #es6 #es7 #phaser3 #yarn #vscode #SOCKETIO

#tkos #indieGame #soloGame #craftGame

As Chaves de Isópolis

As Chaves de Isópolis

As Chaves de Isópolis surgiu de uma desafio proposto pela empresa Tamboro, onde tínhamos que escolher uma mecânica do livro 10 melhores jogos de todos os tempos  e transforma em um jogo educativo que atendesse os requisitos da Plataforma Ludz com o tema do Sr.X,  que você pode encontrar na Google Play e na App Store.

Escolhemos Agon também  conhecido como Guarda Real, ou Guarda da Rainha (The Queen’s Guard). Um jogo de confronto estratégico para 1 jogador. O tabuleiro é formado por casas hexagonais e, na nossa releitura, a quantidade de casas varia de acordo com a progressão do jogador.

Para tornar o joga um pouco mais divertido, colocamos no final, depois de dominar o centro, um cofre com uma senha super secreta, e para desvenda-la o jogador vai ter que coletar e decifrar enigmas matemáticos ao longo do jogo.

Isópolis se trata de uma cidade pacata que teve seu equilíbrio perturbado pelo Sr.X, que com sua incrível astucia descobriu onde o prefeito guardou as preciosas chaves da cidade e pretende controlar a cidade tomando-as pra si.  Em meio ao caos, o(a) xerife deve chegar primeiro nos cofres e garantir que tudo ficará bem.

No desenvolvimento de As Chaves de Isópolis seguimos todas as regras proposta pelo jogo original e tomamos a liberdade de colocar uns powerups, como: teletransporte, poder voltar, andar mais de uma casa e outros.
Pra montar o tabuleiro eu procurei um bocado na internet, e, rapidamente, encontrei varias abordagens.
Segue o link do material que mais me ajudou ->
http://catlikecoding.com/unity/tutorials/hex-map/part-1/
http://www.redblobgames.com/grids/hexagons/

Usamos como ferramenta Unity que, sem dúvidas, é uma ferramenta espetacular. Tentei explorar o máximo possível do que  “UnityEntityManager” e C# tinham pra dar usando bastante namespaces, signals, extension method, delegate, event, action, generics, lambda, reflection, annotations, customização do editor e etc.

 

Maestria – Jogo de Cartas

Maestria – Jogo de Cartas

Maestria é um jogo de cartas onde o jogador, no papel de maestro, deve evoluir sua orquestra para que possa ser feito um bom show. Seu nível de maestria controla a quantidade de músicos que podem estar sob sua regência. Os músicos permitem que seja feito a música e a platéia faz seu papel de encher a casa. Entretanto, encher só a casa não basta, você também deve agradar o público, que as vezes é bastante criterioso. Não se preocupe com a pressão de estar no palco, com alguns C[Dó], D[Ré], E[Mi], semicolcheia, colcheia e semínima o seu show será incrível!

O jogo suporta até 4 jogadores com um conjunto de 70 cartas podendo chegar a 8 jogadores com 2 pacotes de cartas. Se a casa estiver cheia, prepare um bom espaço para jogar.

Possui uma extensão que trara ao jogo mais personagens e um lindo tabuleiro.

Com poucas regras acaba sendo um jogo de rápido entendimento.

Use os tokens de maneira adequada para facilitar a contagem de pontos. Mas com uma mesa de jogadores pro os tokens podem nem entrar no jogo.

mastria_blog

Maestria – Arte – v0.2

foto

Maestria – Arte – v0.1

#MasteryCardGame
#MaestriaJogoDeCartas

Entidade – Jogo de tabuleiro

Entidade – Jogo de tabuleiro

Entidade é um jogo de investigação cercado de eventos paranormais, onde os jogadores devem desvendar os mistérios, manter-se vivos e manter-se sãos.

O jogo e composto por contos, pisos, cômodos, objetos(faca, crânio, bandagem e etc), dicas e eventos. Alguma sorte é preciso para que ao manipular uma arma não atire no próprio pé, ou quando se deparar com um crânio não perca as estribeiras.

O tabuleiro e divido em três partes, os pisos, que podem ser usados individualmente pelo conto. O tabuleiro e dividido em tiles (quadradinhos) e o jogador se movimenta ortogonalmente por ele. Os cômodos dentro do piso (nome dado para as partes do tabuleiro) são organizados de acordo com o conto. Cada cômodo guarda um segredo, um fragmento da trama e/ou um objeto. Os cômodos possuem 4 possíveis temas, normalmente um conto usa um tema.

O objetivo do jogo vai variar de conto pra conto, mas posso adiantar que ele e bem dinâmico podendo ter no mesmo conto objetivos diferentes para jogadores diferentes, ou, mudar ao logo do jogo, fora isso e só decifrar o que a entidade está querendo para parar de perturbar a vida de todo mundo 🙂

Há… Sim… A entidade por vezes pode pegar o corpo de algum jogador pra poder ficar  mais “”divertido””.

Como podem ter notado, o conto dita as regras. Dita mesmo! Um conto pode ter suas próprias regras, mudando como algo se comporta no jogo.

 

Entidade é um jogo para toda a família, complexo, que envolve estratégia e lógica. Ler bem as regras antes e/ou ter na mesa alguém que já saiba jogar pode ajudar.

tumblr_nhil1hAE3P1u5cg6io1_1280[1]

1ª versão da arte e dos elementos que compõem o jogo


O jogo ainda esta em beta faltando bem pouco para fechar (apenas finalizar o ultimo conto)  \o/

#EntityBoardGame
#EntidadeJogoDeTabuleiro

Angular 2 – Bundle

Angular 2 trouxe muitas coisas legais, mas algumas coisas NÃO tem sido fácil =’/
Uma dessas coisas ruins que estou enfrentando com Angular 2 tem sido gerar um bundle pra produção num fluxo fluido de trabalho…
Pensando nisso (sofrendo com)…
Resolvi fazer uns protótipos com diversas ferramentas pra saber o caso de uso de cada uma delas.

 

Webpack

(work in progress)
https://github.com/Espigah/JavascriptRepo/tree/master/Angular2/casework_6_bundle/webpack

JSPM + SystemJS

(work in progress)
https://github.com/Espigah/JavascriptRepo/tree/master/Angular2/casework_6_bundle/jspm

Rollup

(work in progress)
https://github.com/Espigah/JavascriptRepo/tree/master/Angular2/casework_6_bundle/rollup

Angular “official”

(work in progress)
https://github.com/Espigah/JavascriptRepo/tree/master/Angular2/casework_6_bundle/official

Gradle

Coming soon…
https://github.com/Espigah/JavascriptRepo/tree/master/Angular2/casework_6_bundle/gulp

Gulp

(Coming soon) https://github.com/Espigah/JavascriptRepo/tree/master/Angular2/casework_6_bundle/gradle

 

 

Gradle vs Gulp

gulp_vs_gradle


Um pouco sobre as duas ferramentes

Gulp tem sido usado em larga escala por desenvolvedores front-end para automatização de processos. Tendo algumas concorrências diretas como o Grunt.
http://gulpjs.com/

 

Gradle vem ganhando forças principalmente por ter sido adotado pelo Google e por ser um ótima opção pra quem usa Apache Maven.
http://gradle.org/

 

Irei apenas mostrar algumas diferenças dos pontos mais básicos das duas ferramentas, ou seja, serei bem superficial, mas irei colocando links para quem tiver interesse em mais conteúdo.

Instalação:

Gulp Gradle
Ter feito a instalacao do node
Criar um npm project
Depois instalar globalmente e localmente o gulp

npm init
npm i --global gulp
npm i --save gulp

https://github.com/gulpjs/gulp/blob/master/
docs/getting-started.md

Faze download do Gradle no site e configurar o GRADLE_HOME
https://docs.gradle.org/current/
userguide/installation.html

 

Arquivo principal:

Gulp Gradle
gulpfile.js  build.grade

 

Primeira tarefa:

Gulp Gradle
var gulp = require('gulp');
gulp.task('HelloTask', 
function() { 
 console.log(‘gulp_vs_gradle’)
});

No prompt de comando:

 gulp HelloTask 
task HelloTask<< {
 println 'gradle_vs_gulp'
}

No prompt de comando:

gradle HelloTask

ou

gradle HT

 

Ciando variáveis:

Gulp Gradle
Como o Gulp é puramente javascript basta usar o var


gulp.task('Task2', 
function() {
var foo="gulp_vs_gradle"; 
console.log(foo);
});
Como o Gradle tira proveito do Groovy podemos ter tipagem ou não.

task Task2 << {
String foo='gradle_vs_';
def bar = 'gulp';
println (foo+bar);
}

 

Usando plugins:

Gulp Gradle
Pra instalar tem que usar o node

npm install --save-dev PLUGIN

e no gulpfile.js “importa-lô”

 

var plugin = require('plugin');


http://gulpjs.com/plugins/

Coloque os imports no build.gradle

 plugins { 
id "com.moowork.node"
 version "0.12"

id "com.moowork.gulp" 
 version "0.12" 
} 

Execute ‘gradle tasks’ e veja que já teremos tasks para o node e para o gulp
feito magica!

gradle tasks

https://plugins.gradle.org/

%d blogueiros gostam disto: