Keilla Fernandes
Front-end Developer at Daitan Group
Ordem no Caos
Arquitetura e Boas Práticas para o Front-end
Bacharel em Ciência da Computação
Codando desde 2008
Front-end Tech Lead
Integrante do Campinas Front-end
A Evolução da Engenharia de Software
"Aqueles que não podem lembrar o passado estão condenados a repeti-lo”.
George Santayana
Engenharia de Software
“A aplicação da ciência e da matemática
pelo qual as propriedades do software são úteis para as pessoas. ”
Anos 50
Desenvolva software como você desenvolve hardware
Hardware
Linguagem de Máquina
Linguagem de Montagem
Anos 60
Artesanato de Software
Especificação
Release
Code and Fix
Anos 70
Processos de Formalidade e Waterfall
Engenharia de Requisitos
Codificação
Projeto
Anos 80
Produtividade e Escalabilidade
Processos
Reuso
Ferramentas
+
+
Anos 90
Métodos Orientados a Objetos
Padrões de Projeto
Importância crítica do Software para competição de mercado
Arquiteturas de Software
Usabilidade
Controle da Concomitância
Anos 2000
Agilidade e Valor
Métodos Ágeis
Preferências do Consumidor e Custos
Anos 2010
Conectividade Global e Integração
SISoS
Sistemas de Sistemas
Primórdios da Web
motor V8
No mundo de desenvolvimento Web, um dos maiores desafios é fazer um documento estático se comportar como aplicativo dinâmico.
SPA's
SPA x MPA
Suporte a mútiplos navegadores
Validação e Ajax
jQuery
Ecossistema JS
Arquitetura de Micro Serviços x Monolitica
Front-end Workflow
Gerenciador de Pacotes
Automatização do processo de instalação, atualização, configuração e remoção de programas de uma maneira consistente
Metadados: Nome, versão, dependências
NPM
foo
├── hello ^0.1.2
└── world ^1.0.7
bar
├── hello ^0.2.8
└── goodbye ^3.4.0
node_modules/
├── foo/
│ └── node_modules/
│ ├── hello/
│ └── world/
└── bar/
└── node_modules/
├── hello/
└── goodbye/
Geração de Build
+
=
Geração de Build
Autotomizadores de tarefas
Gerenciadores de pacotes + Plugins
Execução de Testes
Watch save
Geração de JS/CSS Bundle
Minificação
Instala 'coisas'
Faz 'coisas'
Continuous Integration
Integração do código no repositório
Detecção de Problemas
Visibilidade
Build Automatizada
Build Auto-testável
Engenheiro de Software
Solução de Problemas
"Any fool can write code that a computer can understand, good programmers write code that humans can understand."
Martin Fowler
Clean Code
Evolução JS
Software never ends
Style Guide
Reutilização, manutenção e refatoração
CSS
Metodologia para escrever seu CSS
Muita especificidade = Sobreescrever
Conflitos
Arquitetura
Code Review
Lint
Imagens ou GIF's
Visão Global
Testes
Software never ends
Debugging
Refatoração
CI
Refatoração
Baby Steps
Bad Smells
Uma coisa é certa: seu código vai mudar
Metáfora dos 2 chapéus
Performance
Otimização de Build, Lazy-loading, Assets, Scripts de terceiros
Medida, monitorada e refinada
Diversas variáveis
Defina métricas
Apoie-se em ferramentas
Conclusão
Processo de Desenvolvimento de Software
Plano Micro
Plano Macro
Ferramentas
Solução de Problemas
Obrigada :)))
slides.com/keilla/devcamp2018
@keillamenezes_
Ordem no Caos
By Keilla Fernandes
Ordem no Caos
Como modelar o sua aplicação front-end para que seja mais mais fácil de manter e evoluir? Ter uma arquitetura bem definida como organização de arquivos, divisão de responsabilidades, comunicação das partes são escolhas que definem o grau de entendimento e a capacidade de mudança que sua aplicação terá. Não queremos (e nem devemos) criar um software que em pouco tempo terá que ser descartado por tem um arquitetura frágil (ou até pela falta dela). Para isso é essencial que tenha alicerces sólidos e capazes de se adaptarem ao decorrer do tempo.
