Conceitos, Tecnologia, Metodologia e Tendências

Desenvolvimento WEB

Valmir Justo

@justoeu

justoeu@gmail.com

• Front-end

– HTML 5 e CSS 3: Por que devemos usar?

– Responsive Web Design! A tá, sei!

– Frameworks Responsivos, Balas!

• Linguagens e Frameworks

– Javascript: A linguagem que todo mundo “Manja”;

– NodeJS e seus Teclados!

– Java EE na atualidade.

• Arquitetura Enterprise

– Qual é o Real papel de um Arquiteto de Software?

– Qual é a diferença entre Arquitetura de Solução e

Corporativa?

– Pintando o 7 com os Desenhos de Arquitetura

Agenda

• Integração de Sistemas– Mundo SOA na atualidade

– SOAP ou Rest: Que tal os dois?

– WebSocket e Você, Tudo a ver.

• Metodologia Ágeis– Está na hora de pensar “Ágil”? As empresas

estão preparadas?

– Paradigmas do Scrum;

– Pensando diferente com Design Thinking

AgendaValmir Robson Justo

• Bacharel em Sistema de Informação/FGP

• Pós Graduado como Engenheiro de Componentes Reutilizáveis

• Desenvolvedor WEB e Java desde 2000

• Atualmente Sou Arquiteto SR na Capgemini Brasil

• Alguns Certificações

• Sun Certified Enterprise Architect for the Java Platform,Enterprise Edition 5 (I e II);

• Oracle Certified Professional, Java Platform, Enterprise Edition 6 Enterprise JavaBeans

Developer;

• Sun Certified Developer for Java Web Services 5;

• Sun Certified Java Business Component Developer Platform EE5

• Sun Certified Web Component Developer for J2EE 5;

• Sun Certified Programmer for Java 2 Platform 5;

• IBM Worklight Mobile Foundation Technical Sales Professional v1

• SCM - Certified ScrumMaster;

Front-end

HTML 5 e CSS 3

Por que devemos usar e

Por que NÓS devemos Aprender?

Quais são os Benefícios?

Os Browsers já estão suportando?

HTML 5 e CSS 3Por que devemos usar?

• Padronização;

• Criação de layout Ricos;

• Facilidade e organização no código;

• Nova estrutura de Elementos;

• Melhor aproveitamento dos Browsers na renderização das páginas;

• Consome menos processamento comparado ao Flash;

• Novos controles de Formulários;

• Conceitos Avançados para desenhos com Canvas;

• Novos padrões de cores, como HSL/A;

• Facilidade de criar Bordas arredondadas;

• Trabalhar com elementos em 3D;

• Recursos para trabalhar Off-line;

• Websockets e Geolocalização;

HTML 5 e CSS 3Benefícios

• Padronização: Usando elementos HTML5 , podemos aumentar o valor semântico da

página web como os códigos são muito padronizado;

• Mutualidade: Você não precisa mais dos plug-ins do Flash ou JS avançados para incluir

videos, gerar gráficos e animações entre outros recursos;

• Limpeza no Código: O HTML 5 fornece semânticas muito mais simples;

• Semântica melhoradas: Agora é fácil ver que partes da página são

cabeçalhos, NAV, rodapés, de lado, etc;

• Formulários Elegantes: HTML5 permite validação do formulário de forma Nativa

reduzindo expressiva o uso JavaScript;

• Consistência: Código estruturado, mais facilidade no entendimento e manutenção;

• Cache de aplicativo offline: Suporte a navegação offline;

• Armazenamento de Dados: O HTML 5 fornece o sessionStorage e localStorage que

permite armazenar dados estruturados temporariamente.

HTML 5 e CSS 3Suporte dos Browsers

*fonte: http://fmbip.com/litmus/

HTML 5 e CSS 3 Responsive Web Design

Responsive Web Design (Web Design Responsivo) é uma abordagem de web

design destinada a elaborar sites para fornecer uma ótima experiência de

visualização, fácil leitura e navegação com um mínimo de redimensionamento e

visionamento, para uma ampla gama de dispositivos (de monitores de computador

a telefones celulares);

…O Problema de entregar conteúdo em diversos formatos

O que importa não o tamanho da tela e sim a sua

RESOLUÇÃO

HTML 5 e CSS 3 Frameworks Responsivos

Bootstrap é um dos frameworks

mais populares para

desenvolvimento moderno

(front-end/UI). Ele possui 12

tipos de templates para layouts

prontos além de 13 plug-ins

para o JQuery.

HTML 5 e CSS 3 Frameworks Responsivos

Foundation, assim com o

Bootstrap é um framework para

construção de layouts

responsivos. Ele possui uma

gama de layout e

customizações para diversos

tipos de resoluções.

Um ponto interessante do

Foundation é a agilidade para

construir e customizar os

layouts.

Linguagens e Frameworks

JavascriptA Linguagem que todo mundo “Manja”

Segundo Dados do GIT:

• Linguagem dominante, 25% dos repositórios são de JavaScript;

• Node.JS é o segundo repositóriomais assistido;

• jQuery é o quarto repositório maisassistido;

• 16 dos 30 repositórios maisassistidos são puramente de JavaScript.

JavascriptAlguns dos Frameworks Javascript...

JavascriptOnde encontramos?

Javascript

Funciona com IE6+, smartphones recentes e até alguns antigos;

Utilizado por 41% dos 10 mil sites mais acessados do mundo;

14275 repositórios de plugins de jQuery no github;

Integrado com JSF, ASP.NET e Ruby on Rails

JavascriptJQuery

JAVASCRIPT PUROJQuery

Javascript

Modernizr é uma biblioteca JavaScript pequeno que detecta a disponibilidade deimplementações nativas para tecnologias web de próxima geração, ou seja, ascaracterísticas que resultam do HTML5 e CSS3 especificações.

Muitos desses recursos já estão implementados em pelo menos um navegadorprincipal (a maioria deles em duas ou mais), e que Modernizr faz é, muitosimplesmente, dizer se o navegador atual tem esse recurso nativamenteimplementado ou não.

Javascript

Backbone: Após dois anos e meio de

desenvolvimento, a versão 1.0 do

Backbone.js foi lançada. O Backbone.js é

uma popular biblioteca JavaScript que

segue o modelo Model/View, utilizada por

vários aplicativos web populares.

A premissa essencial no coração do

Backbone tem sido sempre encontrar e

descobrir o conjunto mínimo de primitivas

na estruturação de dados (Modelos e

Coleções) e de interface do usuário (Views

e URLs) que sejam úteis na construção de

aplicações web com JavaScript.

Rotas

Rotas View

Javascript

Como fornecer uma maneira fácil de criar programas de rede altamente escaláveis?

Pensando em Alto Volume de Acessos, Qual é o problema com os

programas que rodam nos servidor WEB atuais?

Vamos as contas:

Em linguagens como Java™ e PHP, cada conexão inicia um novo encadeamento

que, potencialmente, é acompanhado de 2 MB de memória. Em uma infra que

tenha 8 GB de RAM, nós vamos ter mais ou menos 4.000 usuários simultâneos, já

que é o máximo que o servidor poderia suportar. À medida que a base de clientes

cresce, a aplicatição Web para suportar mais usuários faz-se-necessário adicionar

mais servidores.

E o Custo disto?E manter esta infraestrutura?

Cloud Computing?

Javascript

Como fornecer uma maneira fácil de criar programas de rede altamente escaláveis?

• Node é um programa que roda nos servidores e utiliza o V8 JavaScript em sua

execução;

• O JavaScript no lado do servidor é um conceito relativamente novo, e há cerca de

dois anos, surgiu com o produto Aptana Jaxer, porém ganhou popularidade com o

NodeJS.

• O que é o V8? O V8 JavaScript é o mecanismo subjacente do JavaScript que o

Google crisou e usa em seu navegador Chrome. Esse mecanismo JavaScript

interpreta o código JS e o executa. Sendo assim, o V8, é um interpretador

ultrarrápido escrito em C++ que tem um aspecto exclusivo: é possível fazer o

download do mecanismo e integrá-lo em qualquer aplicativo que você desejar. Ele

não é restrito à execução em um navegador;

• Portanto, o Node, na verdade, usa o mecanismo V8 e o redireciona para uso no

servidor

• Até esta data, o Node apresenta 35 APIs para resolver diversos tipos de situação.

JavascriptNode APIs

Javascript

• Jasmine é um framework para testar código Javascript orientado

a comportamento;

• Ele não depende de quaisquer outros frameworks JavaScript;

• Possui um ambiente limpo, sintaxe simples para que você possa

facilmente escrever testes;

Javascript

Quantos Arquivos Javascripts, normalmente, um projeto WEB tem?

10? 20? 100?

… e saber de qual arquivo vem tal function???

… e manter esta estrutura?

… e evoluir não gerando efeitos colaterais..

Seus problemas ACABARAM!!!

RequireJS é um gestor de Módulos Javascript

Vantagens:

• Deixa Clara as dependências;

• Evita várias Globais;

• Ajuda a reduzir o Acoplamento;

• Carrega os Scripts Automáticamente

Modulo CounterModulo de Log

Main.js

Javascript

Desenvolver uma Aplicação exclusiva para cada plataforma utilizando os SDK

nativos ou criar uma Aplicação com um framework multiplataforma?

• Phonegap/ Cordova é uma tecnologia open source que tem como principal

característica desenvolver aplicativos webapp, que podem ser funcionais nos

ambientes online ou offline;

• Para suprir as necessidades das linguagens nativas de cada plataforma, ele utiliza

dos melhores padrões de web com o HTML5, CSS3 e o Javascript, tratando de

uma forma bastante simples o seu desenvolvimento;

• Com uma interface baseada em telas de HTML, a sua lógica de programação e os

seus recursos de dispositivos são tratados pelo Javascript tendo a possiblidade de

realizar combinações com diversos scripts. Estes são: Jquery, MooTools e XUI;

• O Phonegap/ Cordova abstrai o acesso nativa aos recursos do dispositivo através

da linguagem Javascript.

JAVAJEE – Java Enterprise Edition

• Que é JEE?

• Vantagens na utilização de um servidor JEE.

• Áreas de cobertura da JEE 6.

• Evolução da especificação.

• Desenvolvimento Moderno com o JEE

JAVAO Que é JEE – Java Enterprise Edition?

• Padrão para desenvolvimento de aplicações corporativas com Java.

• Controles comuns em aplicações corporativas: controle de transações, definição de

regras de segurança em aplicações, componentização, integração com outros

sistemas, entre outras.

• Tecnologias integradas, planejadas para prover uma experiência unificada para o

desenvolvedor: podemos trabalhar com componentes de interface juntamente com um

componente de negócio (EJB) que é injetado em um controlador intermediário, que por

sua vez está anotado com suas regras de segurança especificas.

• Define apenas as interfaces (o que deve ser feito) e as empresas implementam

(como é feito): A JEE define apenas a estrutura de interfaces e métodos, com base

nisso cada empresa que possui um servidor certificado JEE implementa essa

funcionalidade.

• A execução é realizada dentro de um servidor de aplicação JEE certificado pela

JCP: JBoss, Glassfish, WebSphere (IBM), Weblogic (Oracle).

JAVADesenvolvimento Moderno com JEE

*fonte: oracle.com.br

JAVAVantagens na utilização de um servidor JEE

• Padronização das operações: Aderindo aos padrões da JEE é possível ter

uma maior produtividade, pois as operações são feitas sempre seguindo os

mesmos passos;

• Aplicações independentes de servidor de aplicação (teoricamente): Na

teoria uma aplicação escrita utilizando somente as interfaces da JEE deve

rodar em qualquer servidor de aplicação;

• Menos código para infra-estrutura e maior foco no negócio: Geralmente as

empresas não querem ter o ônus de desenvolver toda a infra-estrutura de

controle de uma aplicação, é muito mais vantajoso utilizar uma arquitetura

definida por uma empresa que o foco dela é esse.

• Mão de obra especializada: Utilizando um padrão de mercado para o

desenvolvimento é sempre mais fácil encontrar profissionais que conheçam

essa arquitetura.

JAVAÁrea de Abrangência do JEE

Controle transacional: Controle de transações do usuário, a qual não se limita

apenas a banco de dados. É possível controlar uma transação completa que usa

mais de um banco de dados e até webservices de maneira atômica, ou seja, ou é

executado tudo ou nenhuma operação é confirmada.

Manipulação de XML: Bibliotecas para manipulação de XMLs, disponibilização

de objetos nesse formato, entre outras facilidades (JAXB).

Interação com banco de dados e mapeamento Objeto-Relacional: Controle

completo de ações com banco de dados. Utilização dos próprios objetos para

controlar ações de manutenção com o banco de dados.

Servlets / JSP / JSF: Disponiblização de paginas para web de maneira integrada

com os demais componentes. Disponibilização de componentes ricos para

interface web pelo JSF e bibliotecas que seguem sua especificação.

JAVAÁrea de Abrangência do JEE

Webservices: Disponibilização de métodos para outras aplicações, provendo

assim interoperabilidade entre aplicações de tecnologias distintas.

EJB (utilização dos serviços de forma simplificada): Enterprise Java Beans-

são componentes que são capazes de encapsular uma logica de negócio,

provendo sem muito esforço vários controles que teriam que ser feitos

manualmente, tais como controle de transação, controles de performance,

restrições de segurança, entre outras coisas.

Injeção de dependências: Disponibiliza, de forma simples, recursos e contextos

de uma aplicação, sem a necessidade de configurações em XMLs ou criação

efetiva de Objetos. Conexão com banco de dados, fontes de e-mail, transação do

usuário, componentes próprios, etc.

Segurança: Controle de usuários, perfis de acesso e restrição de recursos de

uma aplicação (JAAS).

JAVAEvolução do JEE - Roadmap

*fonte: oracle.com

Arquitetura Enterprise

Arquitetura EnterpriseQual O Real Papel do Arquiteto de Software?

Dado o cenário atual, onde o papel do Arquiteto de

software se enquadraria?

Ele é o responsável por escolher as tecnologias e

estruturas de todos os projetos de uma empresa?

O arquiteto deve ser um programador?

Uma das coisas mais importantes para o arquiteto é

que ele deve, sempre que possível, oferecer

liberdade para os desenvolvedores escolherem

tecnologias, framework, não engessando totalmente

o software, visto que isso faz com que seu time

aprenda mais e fique mais motivado.

Uma outra atitute interessante é incluir os

desenvolvedores em reuniões arquiteturais, pois os

mesmos podem agregar com expriências

vivênciadas entre outros conhecimentos adquiridos.

*fonte: infoq.com.br

Arquitetura EnterpriseQual é a diferença entre Arquitetura de Solução e Corporativa?

*fonte: blog.msdn.com

Arquitetura EnterpriseArquitetura de Referência

• Uma arquitetura de referência é sempre um ponto de início. É uma representação, bem genérica e

abstrata, que ajuda o time (e o arquiteto) na definição de elementos concretos do sistema. Elas

apontam para os principais componentes a serem definidos – orientando indiretamente seus

papéis, comportamentos e relacionamentos.

• Arquiteturas de referência surgem da observação de determinados tipos de software. Definem e

explicitam elementos comuns aplicados por vários profissionais de arquitetura no projeto de vários

software de um determinado tipo. São representações em alto-nível das similaridades identificadas

nessas diversas instâncias.

• Considerar uma arquitetura de referência, ao conceber um novo sistema, poupa ao arquiteto um

volume considerável de análise e ponderação na identificação de componentes – seus

comportamentos, papéis e relacionamentos.

• Arquiteturas de referência não foram criadas para atender conjuntos específicos de requisitos. Isso

significa que não podemos pegar uma arquitetura de referência e apontá-la como sendo a

arquitetura de um novo sistema sem a avaliação e ajustes indispensáveis. Elas são projetadas

para servir como “uma indicação de caminho a seguir”. Uma arquitetura concreta surge da

adaptação de uma referência para as necessidades e propósitos de um sistema específico.

Arquitetura EnterpriseDesenhos de Arquitetura

#Arquitetura de Referência#Arquitetura de Solução#Arquitetura de Infraestrutura

Integração de Sistemas

Integração de SistemasMundo SOA na atualidade

A Arquitetura Orientada à Serviço (SOA), atualmente, passou de ser apenas uma

tentativa para ser realidade. Hoje as empresas buscam integrar e compartilhar as

informações entre os sistemas de forma que a informação se torne algo

realmente valioso;

Através da SOA, é possível alinhar a Tecnologia da Informação (T.I.) com

negócios no ambiente corporativo, através da criação de soluções em forma de

serviços que possam ser reutilizados em diversas composições e cenários.

Porém, falar sobre SOA, não é apenas falarmos de Webservices e sim, de uma

moderna prática de compartilhamento de informação, regras de negócio, etc.

Integração de SistemasMundo SOA na atualidade

Integração de SistemasSOAP ou Rest: Que tal os dois?

Qual é o Melhor dos dois??

…Por que o SOAP trata melhor a segurança e trabalha com contratos…

…o REST é muito mais performático, trabalha sobre o HTTP e trafega dados com

menos verbosidade…

Integração de SistemasSOAP ou Rest: Que tal os dois?

Ambas tecnologias são muito viáveis no mercado atual. Ambos REST e o SOAP

conseguem resolver um grande número de problemas e desafios na web, e em

muitos casos, tanto um como o outro podem atender os cenários necessários;

O REST é fácil de entender e extremamente acessível porém, faltam padrões, e

a tecnologia é considerada apenas uma abordagem arquitetural. Em

comparação, o SOAP é um padrão da indústria, com protocolos bem definidos e

um conjunto de regras bem estabelecidas.

*fonte: infoq.com.br

Integração de SistemasSOAP ou Rest: Que tal os dois?

Alguns casos onde o REST vai muito bem:

• Situações em que há limitação de recursos e de largura de banda: A estrutura de retorno

é em qualquer formato definido pelo desenvolvedor e qualquer navegador pode ser

usado. Isso porque a abordagem REST usa o padrão de chamadas GET, PUT, POST e

DELETE;

• REST também pode usar objetos XMLHttpRequest (a base do velho AJAX) que a maioria

dos navegadores modernos suporta;

• Operações totalmente sem-estado: se uma operação precisa ser continuada, o REST não

será a melhor opção. No entanto, se forem necessárias operações de CRUD stateless

(Criar, Ler, Atualizar e Excluir), o REST seria a melhor alternativa;

• Situações que exigem cache: se a informação pode ser armazenada em cache, devido à

natureza da operação, o stateless do REST, esse seria um cenário adequado para a

tecnologia.

Integração de SistemasSOAP ou Rest: Que tal os dois?

O SOAP é bastante maduro e bem definido e vem com uma especificação

completa. Já a abordagem REST é apenas isso: uma abordagem e esta totalmente

aberta, sendo assim existem cenários interessantes para utilizarmos SOAP:

Processamento e chamada assíncronos: se o aplicativo precisa de um nível alto de

confiabilidade e segurança para a troca de mensagens, então o SOAP 1.2 oferece padrões

adicionais para esse tipo de operação como, por exemplo, o WSRM (WS-Reliable

Messaging);

Contratos formais: se ambos os lados (fornecedor e consumidor) têm que concordar com o

formato de intercâmbio de dados, então o SOAP 1.2 fornece especificações rígidas para esse

tipo de interação;

Operações stateful: para o caso de o aplicativo precisar de informação contextual e

gerenciamento de estado com coordenação e segurança, o SOAP 1.2 possui uma

especificação adicional em sua estrutura que apoia essa necessidade (segurança,

transações, coordenação etc.). Comparativamente, usar o REST exigiria que os

desenvolvedores construíssem uma solução personalizada.

“Portanto, a melhor

abordagem é a flexibilidade”

Integração de SistemasWebSocket e Você, Tudo a ver.

A especificação WebSocket define uma API que estabelece conexões de

"soquete" entre um navegador da web e um servidor;

Ele permitem abrir uma conexão com o servidor remoto e trafegar dados

arbitrariamente do servidor para o cliente e vice-versa. Isso viabiliza diversos

cenários como: Chats online, Transmissão de video, propagação de mensagem

para usuários conectados na solução etc.

A complexidade do lado do Cliente é muito simples e boa parte dos Browser já

suportam essa API que roda sobre o protocolo HTTP;

A grande complexidade fica do lado do Servidor que, precisa suportar este tipo de

comunicação.

Metodologias Ágeis

Metodologias ÁgeisEstá na Hora de Pensar “Ágil”... As empresas estão preparadas?

Está na hora de Pensar “Ágil” SIM!!!As empresas estão preparadas? Em sua grande maioria, NÃO!!!Quanto menos transparência houver na empresa, mais difícil será adotar abordagens

ágeis. Para saber o quanto a sua empresa é transparente, responda às três perguntas

abaixo:

O que acontece se as metas de orçamento não forem atingidas?

Se as respostas para essas perguntas forem "horas-extra para atingir as metas",

"humilhação pública" e "demissão", sua empresa provavelmente não está

preparada para ser Agile.

O que acontece se os story points previstos não forem concluídos em uma iteração?

O que acontece quando um vendedor não atinge sua cota?

Geralmente, empresas aptas a adotar Agile possuem comunicações

abertas e racionais, envolvendo o equilíbrio entre escopo e outras

variáveis de projeto. Um pré-requisito para a empresa se tornar ágil

é possuir "conversas adultas".

Metodologias ÁgeisBenefícios e Cuidados no Scrum

Overview:

Para obter o benefício do Scrum a empresa precisa fazer sua parte, adaptar-se

e mudar o pensamento. O resultado retorna em produtividade e na capacidade

de poder finalmente reconhecer o quando pode produzir.

Benefícios:

Se bem adotado, permite à organização começar a ter uma métrica da

capacidade que tem em converter demandas funcionais em produtos

prontos, o que permite que se possa melhorar a predictibilidade de entregas

de produto.

Além disso, organiza e disciplina a forma como demandas entram em projetos

e o diálogo necessário entre as partes para organizar da melhor forma

possível o trabalho. E como ponto principal inicia um processo de melhoria

contínua que permite que gargalos sejam identificados na organização

identificando desperdícios que em outro tipo de metodologia passariam

desapercebidos.

Cuidados:

A mudança de paradigma. Os gestores de projetos tradicionais foram

treinados em uma série de práticas que partem de uma série de

pressupostos. Eles estão ligados à engenharia faseada (fase de

requisitos, fase de construção etc.) e também pressupostos sobre processos

empurrados, que são baseados em empurrar previsões no sistema de

produção e muitos desses pressupostos caem por terra quando se aplica

engenharia simultânea, onde as disciplinas são realizadas simultaneamente

por uma equipe multidisciplinar, e quando se transforma o sistema de gestão

de empurrado para puxado, que está baseado em responder às demandas o

mais rápido possível e não em tentar prever a demanda com antecipação.

Metodologias ÁgeisPensando Diferente com Design Thinking

Inovar é uma tarefa árdua e muitas vezes frustrante, mas essencial para obter

diferenciação no mercado;

O design thinking propõe que um novo olhar seja adotado ao se endereçar a

problemas complexos, com um ponto de vista mais empático que permita colocar

as pessoas no centro do desenvolvimento de um projeto e gerar resultados que

são mais desejáveis para elas, mas que ao mesmo tempo financeiramente

interessantes e tecnicamente possíveis de serem transformados em realidade.

Nesse sentido, ele é parte do paradigma Arquitetura/Design, caracterizado pela

inovação e pelo human-centered design.

</OBRIGADO>