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_