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.

  • 1,255