O caminho da produtividade para
   desenvolvedores web




Bruno Pereira          7 anos do CEJUG
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
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
Muito tempo atrás...




          Nós adoramos Struts!
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
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
What's Next???
Dezenas de opções, nenhuma dominante
Sucessores do Struts



»   Frameworks MVC Model 2
»   Frameworks orientados a componentes
»   Foco em desenvolvimento com POJOs
»   Muitas opções semelhantes
Cenário Atual – Frameworks Java




» Alta dose de opiniões pessoais «
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
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
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!
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
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
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.
Opções Modernas




Um choque de produtividade!
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!
»   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
»   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?
»   É 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
Web Standards e Client-side
Client-side - Motivação

»   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 :)
»   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?
Frameworks Javascript/Ajax




»   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
»   Talvez seja o mais popular atualmente

               Perfeito na separação de:


Conteúdo/Estrutura             HTML

           +
      Design/Visual            CSS

           +
Comportamento/UX               Javascript
Filosofia principal: facilitar interação entre HTML e JS
1) Encontrar (query) elementos HTML
2) Fazer alguma coisa com eles
<html>                               <html>
 <body>                               <body>
  <span>     $(“span”).                <span class=”ceara”>
   CEJUG     addClass(“ceara”);          CEJUG
  </span>                              </span>
  <span>                               <span class=”ceara”>
   7 anos                                7 anos
  </span>                              </span>
 </body                               </body
</html>                              </html>
»   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 :)
»   Enorme e vibrante comunidade
»   Documentação excepcional, incluindo vários livros
»   Integrado em muitos produtos
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”!!!
O melhor amigo do desenvolvedor web
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
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.
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
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
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 :)
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!
Dúvidas
Contato


twitter.com/blpsilva
http://brunopereira.org
blpsilva@gmail.com

Desenvolvimento web produtivo

  • 1.
    O caminho daprodutividade para desenvolvedores web Bruno Pereira 7 anos do CEJUG
  • 2.
    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
  • 3.
    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
  • 4.
    Muito tempo atrás... Nós adoramos Struts!
  • 5.
    A era doStruts 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
  • 6.
    A era doStruts 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
  • 7.
  • 8.
    Dezenas de opções,nenhuma dominante
  • 9.
    Sucessores do Struts » Frameworks MVC Model 2 » Frameworks orientados a componentes » Foco em desenvolvimento com POJOs » Muitas opções semelhantes
  • 10.
    Cenário Atual –Frameworks Java » Alta dose de opiniões pessoais «
  • 11.
    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
  • 12.
    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
  • 13.
    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!
  • 14.
    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
  • 15.
    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
  • 16.
    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.
  • 17.
    Opções Modernas Um choquede produtividade!
  • 18.
    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!
  • 19.
    » 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
  • 20.
    » 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?
  • 21.
    » É 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
  • 22.
    Web Standards eClient-side
  • 23.
    Client-side - Motivação » 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 :)
  • 24.
    » 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?
  • 25.
    Frameworks Javascript/Ajax » 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
  • 26.
    » Talvez seja o mais popular atualmente Perfeito na separação de: Conteúdo/Estrutura HTML + Design/Visual CSS + Comportamento/UX Javascript
  • 27.
    Filosofia principal: facilitarinteração entre HTML e JS 1) Encontrar (query) elementos HTML 2) Fazer alguma coisa com eles <html> <html> <body> <body> <span> $(“span”). <span class=”ceara”> CEJUG addClass(“ceara”); CEJUG </span> </span> <span> <span class=”ceara”> 7 anos 7 anos </span> </span> </body </body </html> </html>
  • 28.
    » 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 :)
  • 29.
    » Enorme e vibrante comunidade » Documentação excepcional, incluindo vários livros » Integrado em muitos produtos
  • 30.
    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”!!!
  • 31.
    O melhor amigodo desenvolvedor web
  • 32.
    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
  • 33.
    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.
  • 34.
    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
  • 35.
    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
  • 36.
    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 :)
  • 37.
    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!
  • 38.
  • 39.