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_