• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Desenvolvimento web - conceitos, tecnologia e tendências.
 

Desenvolvimento web - conceitos, tecnologia e tendências.

on

  • 507 views

O Desenvolvimento de Aplicações WEB nem sempre é uma tarefa trivial. Esta apresentação demonstra diversos conceitos, tecnologias e metodologias que são utilizadas em diversos projetos.

O Desenvolvimento de Aplicações WEB nem sempre é uma tarefa trivial. Esta apresentação demonstra diversos conceitos, tecnologias e metodologias que são utilizadas em diversos projetos.

Statistics

Views

Total Views
507
Views on SlideShare
507
Embed Views
0

Actions

Likes
1
Downloads
15
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Desenvolvimento web - conceitos, tecnologia e tendências. Desenvolvimento web - conceitos, tecnologia e tendências. Presentation Transcript

    • Desenvolvimento WEB Conceitos, Tecnologia, Metodologia e Tendências Valmir Justo @justoeu justoeu@gmail.com
    • 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
    • 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; • • • • • •
    • 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 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;
    • 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
    • HTML 5 e CSS 3 Suporte 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
    • 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.
    • Javascript Alguns dos Frameworks Javascript...
    • Javascript Onde 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
    • Javascript JQuery JQuery JAVASCRIPT PURO
    • 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.
    • 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 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?
    • 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. •
    • Javascript Node 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 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
    • 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.
    • 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.
    • 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).
    • JAVA Desenvolvimento Moderno com JEE *fonte: oracle.com.br
    • 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.
    • 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 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).
    • JAVA Evolução do JEE - Roadmap *fonte: oracle.com
    • Arquitetura Enterprise
    • 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
    • Arquitetura Enterprise Qual é a diferença entre Arquitetura de Solução e Corporativa? *fonte: blog.msdn.com
    • 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.
    • Arquitetura Enterprise Desenhos de Arquitetura #Arquitetura de Solução #Arquitetura dede Referência #Arquitetura Infraestrutura
    • Integração de Sistemas
    • 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.
    • Integração de Sistemas Mundo SOA na atualidade
    • 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…
    • 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
    • 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.
    • 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
    • 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.
    • Metodologias Ágeis
    • 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.
    • 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.
    • 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.
    • </OBRIGADO>