39
O caminho da produtividade para desenvolvedores web Bruno Pereira 7 anos do CEJUG

Desenvolvimento web produtivo

Embed Size (px)

Citation preview

Page 1: Desenvolvimento web produtivo

O caminho da produtividade para desenvolvedores web

Bruno Pereira 7 anos do CEJUG

Page 2: Desenvolvimento web produtivo

Agenda

» Motivação

» Desenvolvimento web Java antigamente

» Cenário atual

» Opções Modernas

» Web standards e client-side

» Caixa de ferramentas no Firefox

» Conclusão

Page 3: Desenvolvimento web produtivo

Motivação

» Todos queremos fazer mais e melhor

» Produtividade traz resultados

» Resultados trazem reconhecimento

» O perfil certo pode te manter no topo por muito tempo

Page 4: Desenvolvimento web produtivo

Muito tempo atrás...

Nós adoramos Struts!

Page 5: Desenvolvimento web produtivo

A era do Struts 1.x

» Muito mais produtivo que a Servlet API pura

» Rápida curva de aprendizado

» Virou padrão de mercado rapidamente

» Ainda é o framework com mais deployments em produção

Page 6: Desenvolvimento web produtivo

A era do Struts 1.x

» Muito verbose

» Necessidade de criar muitas classes

» Configuration over convention

» Começou a perder mercado em 2006

Amadureceu muito o mercado, trazendo várias lacunas para os sucessores preencherem

Page 7: Desenvolvimento web produtivo

What's Next???

Page 8: Desenvolvimento web produtivo

Dezenas de opções, nenhuma dominante

Page 9: Desenvolvimento web produtivo

Sucessores do Struts

» Frameworks MVC Model 2

» Frameworks orientados a componentes

» Foco em desenvolvimento com POJOs

» Muitas opções semelhantes

Page 10: Desenvolvimento web produtivo

Cenário Atual – Frameworks Java

» Alta dose de opiniões pessoais «

Page 11: Desenvolvimento web produtivo

Apache Tapestry

» Bastante inovador, introduzindo “de fato” o modelo orientado a componentes

» Péssima política de compatibilidade entre releases

» Extremamente dependente do fundador do projeto

» Comunidade não é muito forte, e só enfraquece

Page 12: Desenvolvimento web produtivo

Java Server Faces

» Ganhou muita adesão por ser padrão Java EE

» “Resposta” da Sun ao desenvolvimento web .NET

» Facilita que desenvolvedores criem páginas bonitas sem ter talento de design

» Facilita a criação de interfaces RIA sem experiência em javascript

Page 13: Desenvolvimento web produtivo

Java Server Faces

» Longa curva de aprendizado

» Dificulta trabalho com designers. Client-side muito sujo.

» Bibliotecas de componentes conflitantes

» Totalmente UN-RESTful. Urls non-bookmarkable.

» Na linha de JSF, recomendado avaliar o JBoss Seam

1° mau hábito de desenvolvedores JSF: usar JSF!

Page 14: Desenvolvimento web produtivo

Apache Wicket

» All-Java development: uns adoram, outros odeiam

» Client-side muito mais limpo que JSF

» Comunidade muito ativa

» Chegou tarde demais? Java já estava dando sinais da idade

Page 15: Desenvolvimento web produtivo

Spring MVC

» Ótima abordagem RESTful

» Muito cômodo quando se usa outros componentes do framework

» Framework Spring é um pouco complexo no começo

» Excelente documentação e comunidade

» Minha opção preferida em Java

Page 16: Desenvolvimento web produtivo

Google Web Toolkit

» Extremamente inovador, trazendo nova forma de trabalhar com javascript

» Gera javascript cross-browser otimizado

» Intensamente desenvolvido e testado para produtos Google

» Markup gerado dinamicamente. Bom para RIA, mas não para sites tradicionais, com forte trabalho de design.

Page 17: Desenvolvimento web produtivo

Opções Modernas

Um choque de produtividade!

Page 18: Desenvolvimento web produtivo

Opções Modernas – Pontos em Comum

» Componentes de persistência muito produtivos

» Convention over configuration

» Escritos com linguagens dinâmicas: Python, Groovy, Ruby

» Muito menos código do que desenvolvimento Java

» Abordagem RESTFul de arquitetura

Recomendo muito avaliar pelo menos 1 dos 3!

Page 19: Desenvolvimento web produtivo

» Framework for perfectionists with deadlines

» Criado para atender com qualidade aos prazos curtos de um ambiente editorial muito dinâmico

» Geração de um Admin de conteúdo muito poderoso, que poupa muito tempo de desenvolvimento

» Framework Python

» Enorme comunidade, muito ativa

Page 20: Desenvolvimento web produtivo

» Feito em Groovy, sobre Spring, Hibernate e Sitemesh.

» Oferece os enormes benefícios de Spring/Hibernate de forma bem menos complexa, mas sem tirar o poder.

» É a opção de mais fácil integração com Java

» Gera WAR padrão Java

» Comunidade bem menor do que Django e Rails

» Será que tem futuro dentro da VMWare?

Page 21: Desenvolvimento web produtivo

» É a opção com mais sucesso comercial

» Forte comunidade no Brasil e no mundo

» Excelentes ferramentas para TDD/BDD

» Tem feito excelente uso da plataforma Java, reduzindo drasticamente as questões de escalabilidade

Page 22: Desenvolvimento web produtivo

Web Standards e Client-side

Page 23: Desenvolvimento web produtivo

» Skills de client-side são muito mais perenes do que skills em um determinado framework server-side

» As exigências de usabilidade e UX são cada vez maiores, e são o diferencial de alguns produtos

» Se o dinossauro do Struts era fera em client-side, ele aprenderá Rails/Grails/Django e vai ser ninja :)

» ... mas se ele aprender JSF vai virar um rinoceronte :)

Client-side - Motivação

Page 24: Desenvolvimento web produtivo

» Consórcio que desenvolve as especificações abertas para máxima interoperabilidade de produtos web

Por que devo me importar com isso?

» Sites mais legíveis para pessoas e engines de busca

» Manutenção do site fica mais fácil

» Compatibilidade cross-browser

» Acessibilidade

» É melhor para você e pro seu cliente

Como começar?

Page 25: Desenvolvimento web produtivo

» Talvez mais opções do que Frameworks web Java

» É importante ser proficiente em pelo menos 1 deles

» Programadores poliglotas podem usar sempre o mesmo framework Javascript

Frameworks Javascript/Ajax

Page 26: Desenvolvimento web produtivo

» Talvez seja o mais popular atualmente

Perfeito na separação de:

Conteúdo/Estrutura HTML

Design/Visual

+CSS

+Comportamento/UX Javascript

Page 27: Desenvolvimento web produtivo

1) Encontrar (query) elementos HTML

2) Fazer alguma coisa com eles

Filosofia principal: facilitar interação entre HTML e JS

<html> <body> <span> CEJUG </span> <span> 7 anos </span> </body</html>

<html> <body> <span class=”ceara”> CEJUG </span> <span class=”ceara”> 7 anos </span> </body</html>

$(“span”).

addClass(“ceara”);

Page 28: Desenvolvimento web produtivo

» Cross-browser. Suporta até non-browsers (IE6)

» Queries através de seletores CSS (até CSS 3) ou xpath

» Bem leve: 19 KB minified + gzipped

» Extensamente testado

» Enorme ecossistema de plugins, quase um Eclipse JS :)

Page 29: Desenvolvimento web produtivo

» Enorme e vibrante comunidade

» Documentação excepcional, incluindo vários livros

» Integrado em muitos produtos

Page 30: Desenvolvimento web produtivo

HTTP

Você fala dele pro seu browser todo dia. Já são íntimos? Precisam ser!

» Há outros métodos além de GET e POST. Conheça todos.

» Entenda seu web server: o STATUS significa muito!

» Saiba interpretar os cabeçalhos do Request/Response

» Aprenda os conceitos de uma arquitetura REST de verdade

» Saiba dizer porque você colocou charset=UTF-8 ou charset=ISO-8859-1. NÃO EXISTE “TEXTO PLANO”!!!

Page 31: Desenvolvimento web produtivo

O melhor amigo do desenvolvedor web

Page 32: Desenvolvimento web produtivo

Live HTTP Headers

» Trace completo dos cabeçalhos do Request/Response

» Permite filtrar conteúdo relevante e salvar análise

» Oferece “Replay” de Request, podendo ainda editá-lo

Page 33: Desenvolvimento web produtivo

Poster

» Facilidade de montar qualquer tipo de requisição, com controle total sobre cabeçalhos e conteúdo

» Visão detalhada do Request/Response. Perfeito para REST ou qualquer aplicação web.

Page 34: Desenvolvimento web produtivo

Firebug

» Inspecionar e modificar conteúdo e estilo

» Verificar tempo de carregamento de cada arquivo

» Debug de Javascript

2 eras na internet: AF e DF

Page 35: Desenvolvimento web produtivo

Web Developer

Junto com o Firebug: indispensável

» Validação de HTML/CSS/JS

» Inspecionar CSS detalhadamente

» Destacar elementos de diferentes características

» Manipular cookies

» Régua para medir qualquer pedaço da página

» Identificar imagens quebradas

» Form: GET <-> POST, várias transformações de campos

Page 36: Desenvolvimento web produtivo

Google Page Speed

» Extensão do Firebug

» Poderoso “profiler” de velocidade das páginas

» Você vai sentir vergonha no começo :)

» Relatório completo do que está bom, do que está ruim e como melhorar cada coisa

» Cache, downloads paralelos, gzip, eficiência do CSS, posição de imports e muito mais

É o gabarito da sua página, basta apertar um botão :)

Page 37: Desenvolvimento web produtivo

Conclusão» Produtividade no server-side é sempre importante,

mantenha-se atualizado com o que há de mais novo

» Client-side é igualmente importante, e suas habilidades serão duradouras

» Web standards são critérios fundamentais de qualidade

» HTTP é seu idioma com o servidor: seja fluente

» Aprenda com o Firefox e vire um Web Jedi!

Page 38: Desenvolvimento web produtivo

Dúvidas

Page 39: Desenvolvimento web produtivo

Contato

twitter.com/blpsilvahttp://[email protected]