O documento discute conceitos, tecnologias e tendências de desenvolvimento web. Aborda tópicos como HTML5, CSS3, frameworks responsivos, JavaScript, Node.js, linguagens e frameworks para desenvolvimento mobile, arquitetura empresarial e integração de sistemas. Apresenta também a agenda e perfil profissional do autor.
2. Agenda
•
Front-end
–
–
–
•
•
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
Integração de Sistemas
–
–
–
HTML 5 e CSS 3: Por que devemos usar?
Responsive Web Design! A tá, sei!
Frameworks Responsivos, Balas!
Linguagens e Frameworks
–
–
–
•
•
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
3. Valmir Robson Justo
Agenda
•
•
•
•
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;
•
•
•
•
•
•
5. 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?
6. HTML 5 e CSS 3
Por 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;
7. HTML 5 e CSS 3
Benefí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 é
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.
fácil
ver
que
partes
da
página
são
8. HTML 5 e CSS 3
Suporte dos Browsers
*fonte: http://fmbip.com/litmus/
9. 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
10. 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.
11. 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.
13. Javascript
A Linguagem que todo mundo “Manja”
Segundo Dados do GIT:
• Linguagem dominante, 25% dos
repositórios são de JavaScript;
• Node.JS é o segundo repositório
mais assistido;
• jQuery é o quarto repositório mais
assistido;
• 16 dos 30 repositórios mais
assistidos são puramente de
JavaScript.
16. 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
18. Javascript
Modernizr é uma biblioteca JavaScript pequeno que detecta a disponibilidade de
implementações nativas para tecnologias web de próxima geração, ou seja, as
características que resultam do HTML5 e CSS3 especificações.
Muitos desses recursos já estão implementados em pelo menos um navegador
principal (a maioria deles em duas ou mais), e que Modernizr faz é, muito
simplesmente, dizer se o navegador atual tem esse recurso nativamente
implementado ou não.
19. 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
20. Javascript
Pensando em Alto Volume de Acessos, Qual é o problema com os
programas que rodam nos servidor WEB atuais?
Como fornecer uma maneira fácil de criar programas de rede altamente escaláveis?
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?
21. 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.
•
23. 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;
24. Javascript
RequireJS é um gestor de Módulos Javascript
Quantos Arquivos Javascripts, normalmente, um projeto WEB tem?
Vantagens:
•
•
•
•
10? 20?
100?
Deixa Clara as dependências; e manter esta estrutura?
…
Evita várias Globais;
… e saber de qual arquivo vem tal function???
Ajuda a reduzir o Acoplamento;
… e evoluir não gerando efeitos colaterais..
Carrega os Scripts Automáticamente
Seus problemas ACABARAM!!!
Modulo de Log
Modulo Counter
Main.js
25. 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.
26. JAVA
JEE – Java Enterprise Edition
•
Que é JEE?
•
Desenvolvimento Moderno com o JEE
• Vantagens na utilização de um servidor JEE.
• Áreas de cobertura da JEE 6.
• Evolução da especificação.
27. JAVA
O 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).
29. JAVA
Vantagens 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.
30. 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.
31. 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 Beanssã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).
34. Arquitetura Enterprise
Qual O Real Papel do Arquiteto de Software?
Dado das coisasatual, onde o papel do Arquiteto de
Uma o cenário mais importantes para o arquiteto é
software se deve, sempre que possível, oferecer
que ele enquadraria?
liberdade para os desenvolvedores escolherem
tecnologias, framework, escolher as tecnologias e
Ele é o responsável pornão engessando totalmente
o software, todos os isso faz uma que seu
estruturas de visto queprojetos de com empresa? time
aprenda mais e fique mais motivado.
O arquiteto deve ser uminteressante é incluir os
Uma outra atitute programador?
desenvolvedores em reuniões arquiteturais, pois os
mesmos
podem
agregar
com
expriências
vivênciadas entre outros conhecimentos adquiridos.
*fonte: infoq.com.br
36. Arquitetura Enterprise
Arquitetura 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.
39. Integração de Sistemas
Mundo 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.
41. Integração de Sistemas
SOAP 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…
42. Integração de Sistemas
SOAP 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
43. Integração de Sistemas
SOAP 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.
44. Integração de Sistemas
SOAP 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
“Portanto, a melhor
Messaging);
abordagem é a flexibilidade”
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
gerenciamento de estado com coordenação e segurança, o
especificação adicional em sua estrutura que apoia essa
transações, coordenação etc.). Comparativamente, usar o
desenvolvedores construíssem uma solução personalizada.
informação contextual e
SOAP 1.2 possui uma
necessidade (segurança,
REST exigiria que os
45. Integração de Sistemas
WebSocket 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.
47. Metodologias Ágeis
Está na Hora de Pensar “Ágil”... As empresas estão preparadas?
Está na hora de Pensar “Ágil”
As empresas estão preparadas?
SIM!!!
Em sua grande maioria, NÃO!!!
Quanto menos transparência houver na adotar Agile possuem comunicações
Geralmente, empresas aptas a empresa, mais difícil será adotar abordagens
ágeis. Para saber oracionais, sua empresaoéequilíbrio entre escopo e outras
transparente, responda às três perguntas
abertas e quanto a envolvendo
abaixo: variáveis de projeto. Um pré-requisito para a empresa se tornar ágil
é possuir "conversas adultas".
O que acontece se as metas de orçamento não forem atingidas?
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?
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.
48. Metodologias Ágeis
Benefícios e Cuidados no Scrum
Overview:
Benefícios:
Cuidados:
Para obter o benefício do Scrum a empresa precisa fazer sua parte, adaptar-se
e A mudança de paradigma. Os retorna emde projetos tradicionais foram
mudar o pensamento. O resultado gestores produtividade e na capacidade
de poder finalmente reconhecer o quando pode produzir. de uma série de
treinados em uma série de práticas que partem
pressupostos. Eles estão ligados à engenharia faseada (fase de
Se bem adotado, permite à organização começar a ter uma métrica da
requisitos, que tem em converter demandas funcionais em produtos
capacidade fase de construção etc.) e também pressupostos sobre processos
empurrados, permite baseados em empurrar previsões no sistema de
prontos, o que que sãoque se possa melhorar a predictibilidade de entregas
produção
de produto. e muitos desses pressupostos caem por terra quando se aplica
engenharia simultânea, onde as disciplinas são realizadas simultaneamente
por disso, organiza e disciplina e quando se demandas entram em projetos
Além uma equipe multidisciplinar, a forma comotransforma o sistema de gestão
e de empurrado para puxado, que está baseado em responder às demandas o
o diálogo necessário entre as partes para organizar da melhor forma
mais rápido possível não ponto principal inicia um processo de melhoria
possível o trabalho. Eecomoem tentar prever a demanda com antecipação.
contínua que permite que gargalos sejam identificados na organização
identificando desperdícios que em outro tipo de metodologia passariam
desapercebidos.
49. Metodologias Ágeis
Pensando 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.