SlideShare une entreprise Scribd logo
1  sur  24
Qualidade e Performance de
            Sistemas 2.0
   Ivo Nascimento
   iannsp@gmail.com |
    ivo.nascimento@ianntech.com.br
O que é web 2.0


"Web 2.0 é a mudança para uma internet como
plataforma, e um entendimento das regras para
obter sucesso nesta nova plataforma. Entre
outras, a regra mais importante é desenvolver
aplicativos que aproveitem os efeitos de rede
para se tornarem melhores quanto mais são
usados      pelas    pessoas, aproveitando   a
inteligência coletiva"
                                  Tim O'Reilly
Regras que ajudam a definir
     sucintamente a Web 2.0
1.O beta perpétuo
2.Pequenas peças frouxamente unidas
3.Software acima do nível de um único
  dispositivo
4.Lei da Conservação de Lucros, de Clayton
  Christensen
5.Dados são o novo “Intel inside”
1. O beta perpétuo




não trate o software como um artefato, mas como
um processo de comprometimento com seus
usuários.
2. Pequenas peças frouxamente
             unidas




Abra seus dados e serviços para que sejam
reutilizados por outros. Reutilize dados e serviços
de outros sempre que possível.
3. Software acima do nível de um
        único dispositivo




Não pense em aplicativos que estão no cliente ou
servidor, mas desenvolva aplicativos que estão no
espaço entre eles.
4. Lei da Conservação de Lucros,
     de Clayton Christensen



Lembre-se de que em um ambiente de rede, APIs
abertas e protocolos padrões vencem, mas isso
não significa que a idéia de vantagem competitiva
vá embora.
5. Dados são o novo “Intel inside”



A mais importante entre as futuras fontes de
fechamento e vantagem competitiva serão os
dados, seja através do aumento do retorno sobre
dados gerados pelo usuário, sendo dono de um
nome ou através de formatos de arquivo
proprietários.
Em linhas de apache | php |
      javascript | css | ...




Temos de pensar em cada uma das partes do
        sistema com mais cuidado.
Servidores Http

   Segurança das transações
   Segurança dos dados
   Escalabilidade
php

   Manutenção das sessões.
   Segurança dos dados.
   Boas praticas de desenvolvimento.(POO, MVC,
    PDO, SCA SDO,SPL e outras).
   Planejamento antes da codificação.
javascript

   Diminuicao do uso do servidor.
   Segurança dos dados.
   Ambiente de aplicação.
   XHR.
   Atenção ao Multi Browser.
css

   Dominio sobre o layout(e não o contrário).
   Manipulação de componentes da DOM.
   Personalização por cliente facilitada.
Estudando o Ambiente


Toda aplicação web (sistemas http) necessitara
de um browser para interpreta-la e renderiza-la.

Os principais:
●Firefox

●IE

●Safari
Performance browser baseada
    em SunSpider JavaScript Benchmark
    http://webkit.org/perf/sunspider-0.9/sunspider.html


●Firefox 3 Nightly (PGO Optimized): 7263.8ms
●Firefox 3 Nightly (02/25/2008 build): 8219.4ms

●Opera 9.5.9807 Beta: 10824.0ms

●Firefox 3 Beta 3: 16080.6ms

●Safari 3.0.4 Beta: 18012.6ms

●Firefox 2.0.0.12: 29376.4ms

●Internet Explorer 7: 72375.0ms
Performance baseada em acesso
        a sites populares
yahoo.com                               hi5.com       google.com
                   msn.com
                                                    rapidshare.com

                                                       fotolog.net

                                                    facebook.com
                                                         live.com
                                                   youtube.com


                                                     microsoft.com

   myspace.com                   blogger.com
                                                  medaupload.com
                 wikipedia.org
friendster.com                    orkut.com
XHR – 1a Preocupação


●Dados - fatos em sua forma primária.
●Informação - estruturas significantes com a

intenção de gerar conhecimento no indivíduo e
seu espaço.

XHR transporta dados e não informação.
O contexto da aplicação gera a informação.
XHR (retorno)

Caso 1)                        Caso 2)
Retorno = ”<div                Retorno = ” titulo:'Exemplo 2',
id='titulo'>Exemplo 1 </div>   corpo:'Este e o corpo de um
<div id='corpo'>               exemplo de XHR sem
Este e o corpo de um exemplo   formatacao'”;
de retorno XHR ja formatado.
</div>”;                       var ret = Retorno.responseJSON;
                               $('titulo').innerHTML = ret.titulo;
var ret =                      $('corpo').innerHTML = ret.corpo;
Retorno.responseText;          document.title = ”Texto sobre: ”+
$('texto').innerHTML = ret;    ret.titulo;
Renderização – 2a Preocupação
     Inserir objetos na página via html e via DOM
                      diretamente.

 With( espaco.appendChild(document.createElement('ID')) ){
   title=rec.titulo;
   innerHTML=rec.corpo;
}
ou

rec = ”<div title='”+rec.titulo+”'”> ”+rec.corpo+”</div>”;
espaco.innerHTML = rec;
Sincronismo – 3a Preocupação




Partes XHR da Aplicação precisão estar
serializadas, executando uma ação depois de
outra.
          Asynchronous | Synchronous
Código manutenível – 4a
           Preocupação


A evolução:
a) Coleção de functions espalhadas pelo código
da pagina.
b) Coleção de functions separadas em
arquivos(bibliotecas).
c) Coleção de classes bem definidas.
Prototype
Todo Objeto Javascript implementa prototype, que
          permite extensão do objeto.

  String.prototype.isIvoNome = function(){
     if (this=='Ivo')
            return true
     else
            return false;
  }
 var a = "Ivo";
    if(a.isIvoNome()) alert('Foi escrito Ivo');
Json Syntax

var modelo = {
 nome :'',
 setNome : function(n){
    this.nome = n;
},
 getNome:function(){
     return this.nome;
     }
}
m = modelo;
m.setNome('TR');
alert(m.getNome());
Provendo conexão a outros
        sistemas.




        Webservice
       API's Javascript
             RSS

Contenu connexe

En vedette (7)

Banner digital
Banner digitalBanner digital
Banner digital
 
Bloque 0 PACIE
Bloque 0 PACIEBloque 0 PACIE
Bloque 0 PACIE
 
Oficinas tecnologicas ppt tutores
Oficinas tecnologicas ppt tutoresOficinas tecnologicas ppt tutores
Oficinas tecnologicas ppt tutores
 
Slide Oficina
Slide OficinaSlide Oficina
Slide Oficina
 
Portaria n° 4.059(04)
Portaria n° 4.059(04)Portaria n° 4.059(04)
Portaria n° 4.059(04)
 
El alcohol laura
El alcohol lauraEl alcohol laura
El alcohol laura
 
Moodle para principiantes (2)
Moodle para principiantes (2)Moodle para principiantes (2)
Moodle para principiantes (2)
 

Similaire à Web 2.0, XHR e Performance

Entendendo Frameworks web com Python
Entendendo Frameworks web com PythonEntendendo Frameworks web com Python
Entendendo Frameworks web com PythonLuiz Aldabalde
 
Entendendo Framework Web com Python
Entendendo Framework Web com PythonEntendendo Framework Web com Python
Entendendo Framework Web com PythonPythOnRio
 
Desenvolvimento Agil Com Doctrine Orm
Desenvolvimento Agil Com Doctrine OrmDesenvolvimento Agil Com Doctrine Orm
Desenvolvimento Agil Com Doctrine OrmGuilherme Blanco
 
Aplicações Profissionais para Internet com Zend Framework
Aplicações Profissionais para Internet com Zend FrameworkAplicações Profissionais para Internet com Zend Framework
Aplicações Profissionais para Internet com Zend FrameworkFlávio Lisboa
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaAlexandre Tarifa
 
Web 2.0: conceito, tendências e desafios
Web 2.0: conceito, tendências e desafiosWeb 2.0: conceito, tendências e desafios
Web 2.0: conceito, tendências e desafiosMauricio Garcia
 
Joomla Day Brasil 2010: Customizações para grandes portais
Joomla Day Brasil 2010: Customizações para grandes portaisJoomla Day Brasil 2010: Customizações para grandes portais
Joomla Day Brasil 2010: Customizações para grandes portaisrafaelberlanda
 
Introdução ao Desenvolvimento Android
Introdução ao Desenvolvimento AndroidIntrodução ao Desenvolvimento Android
Introdução ao Desenvolvimento AndroidJosé Alexandre Macedo
 
Django - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com PythonDjango - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com PythonIgor Sobreira
 
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação WebDjango Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação Webantonio sérgio nogueira
 
Desenvolvimento de Apps e Games para Android - Parte 5
Desenvolvimento de Apps e Games para Android - Parte 5Desenvolvimento de Apps e Games para Android - Parte 5
Desenvolvimento de Apps e Games para Android - Parte 5Erisvaldo Junior
 
hibernate annotation
hibernate annotationhibernate annotation
hibernate annotationeduardo dias
 
Web 2.0 - Uma revisão da Internet
Web 2.0 - Uma revisão da InternetWeb 2.0 - Uma revisão da Internet
Web 2.0 - Uma revisão da InternetRommel Carneiro
 

Similaire à Web 2.0, XHR e Performance (20)

Aula hibernate
Aula hibernateAula hibernate
Aula hibernate
 
Entendendo Frameworks web com Python
Entendendo Frameworks web com PythonEntendendo Frameworks web com Python
Entendendo Frameworks web com Python
 
Entendendo Framework Web com Python
Entendendo Framework Web com PythonEntendendo Framework Web com Python
Entendendo Framework Web com Python
 
Desenvolvimento Agil Com Doctrine Orm
Desenvolvimento Agil Com Doctrine OrmDesenvolvimento Agil Com Doctrine Orm
Desenvolvimento Agil Com Doctrine Orm
 
Aplicações Profissionais para Internet com Zend Framework
Aplicações Profissionais para Internet com Zend FrameworkAplicações Profissionais para Internet com Zend Framework
Aplicações Profissionais para Internet com Zend Framework
 
PHP 10 CodeIgniter
PHP 10 CodeIgniterPHP 10 CodeIgniter
PHP 10 CodeIgniter
 
Java Seminar
Java SeminarJava Seminar
Java Seminar
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
 
Web 2.0: conceito, tendências e desafios
Web 2.0: conceito, tendências e desafiosWeb 2.0: conceito, tendências e desafios
Web 2.0: conceito, tendências e desafios
 
Framework struts2v2.5
Framework struts2v2.5Framework struts2v2.5
Framework struts2v2.5
 
Joomla Day Brasil 2010: Customizações para grandes portais
Joomla Day Brasil 2010: Customizações para grandes portaisJoomla Day Brasil 2010: Customizações para grandes portais
Joomla Day Brasil 2010: Customizações para grandes portais
 
Introdução ao Desenvolvimento Android
Introdução ao Desenvolvimento AndroidIntrodução ao Desenvolvimento Android
Introdução ao Desenvolvimento Android
 
Django - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com PythonDjango - Desenvolvimento web ágil com Python
Django - Desenvolvimento web ágil com Python
 
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação WebDjango Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
 
Desenvolvimento de Apps e Games para Android - Parte 5
Desenvolvimento de Apps e Games para Android - Parte 5Desenvolvimento de Apps e Games para Android - Parte 5
Desenvolvimento de Apps e Games para Android - Parte 5
 
Tutorial struts
Tutorial strutsTutorial struts
Tutorial struts
 
React js
React js React js
React js
 
hibernate annotation
hibernate annotationhibernate annotation
hibernate annotation
 
Asp net mvc
Asp net mvcAsp net mvc
Asp net mvc
 
Web 2.0 - Uma revisão da Internet
Web 2.0 - Uma revisão da InternetWeb 2.0 - Uma revisão da Internet
Web 2.0 - Uma revisão da Internet
 

Plus de Ivo Nascimento

PostgreSQL e a arquitetura liquida das startups, digo, das empresas
PostgreSQL e a arquitetura liquida das startups, digo, das empresasPostgreSQL e a arquitetura liquida das startups, digo, das empresas
PostgreSQL e a arquitetura liquida das startups, digo, das empresasIvo Nascimento
 
software architecture cant fight lean startup
software architecture cant fight lean startupsoftware architecture cant fight lean startup
software architecture cant fight lean startupIvo Nascimento
 
Programacao nao pode ser confinada
Programacao nao pode ser confinadaProgramacao nao pode ser confinada
Programacao nao pode ser confinadaIvo Nascimento
 
State Test 
of Applications and Domains
State Test 
of Applications and Domains State Test 
of Applications and Domains
State Test 
of Applications and Domains Ivo Nascimento
 
Impact of developer business knowledge on e commerce architecture efficiency
Impact of developer business knowledge on e commerce architecture efficiencyImpact of developer business knowledge on e commerce architecture efficiency
Impact of developer business knowledge on e commerce architecture efficiencyIvo Nascimento
 
Desenvolvimento de Software e Negócios: Universo Expandido
Desenvolvimento de Software e Negócios:  Universo ExpandidoDesenvolvimento de Software e Negócios:  Universo Expandido
Desenvolvimento de Software e Negócios: Universo ExpandidoIvo Nascimento
 
Pensando o desenvolvimento_de_software
Pensando o desenvolvimento_de_softwarePensando o desenvolvimento_de_software
Pensando o desenvolvimento_de_softwareIvo Nascimento
 
Processamento de Linguagem natural com PHP
Processamento de Linguagem natural com PHPProcessamento de Linguagem natural com PHP
Processamento de Linguagem natural com PHPIvo Nascimento
 
Design Pattern for Data Source
Design Pattern for Data SourceDesign Pattern for Data Source
Design Pattern for Data SourceIvo Nascimento
 

Plus de Ivo Nascimento (12)

PostgreSQL e a arquitetura liquida das startups, digo, das empresas
PostgreSQL e a arquitetura liquida das startups, digo, das empresasPostgreSQL e a arquitetura liquida das startups, digo, das empresas
PostgreSQL e a arquitetura liquida das startups, digo, das empresas
 
software architecture cant fight lean startup
software architecture cant fight lean startupsoftware architecture cant fight lean startup
software architecture cant fight lean startup
 
Programacao nao pode ser confinada
Programacao nao pode ser confinadaProgramacao nao pode ser confinada
Programacao nao pode ser confinada
 
State Test 
of Applications and Domains
State Test 
of Applications and Domains State Test 
of Applications and Domains
State Test 
of Applications and Domains
 
Impact of developer business knowledge on e commerce architecture efficiency
Impact of developer business knowledge on e commerce architecture efficiencyImpact of developer business knowledge on e commerce architecture efficiency
Impact of developer business knowledge on e commerce architecture efficiency
 
Desenvolvimento de Software e Negócios: Universo Expandido
Desenvolvimento de Software e Negócios:  Universo ExpandidoDesenvolvimento de Software e Negócios:  Universo Expandido
Desenvolvimento de Software e Negócios: Universo Expandido
 
Pensando o desenvolvimento_de_software
Pensando o desenvolvimento_de_softwarePensando o desenvolvimento_de_software
Pensando o desenvolvimento_de_software
 
Blue Seed Framework
Blue Seed FrameworkBlue Seed Framework
Blue Seed Framework
 
Processamento de Linguagem natural com PHP
Processamento de Linguagem natural com PHPProcessamento de Linguagem natural com PHP
Processamento de Linguagem natural com PHP
 
Design Pattern for Data Source
Design Pattern for Data SourceDesign Pattern for Data Source
Design Pattern for Data Source
 
Sera que?
Sera que?Sera que?
Sera que?
 
inteligencia coletiva
inteligencia coletivainteligencia coletiva
inteligencia coletiva
 

Web 2.0, XHR e Performance

  • 1. Qualidade e Performance de Sistemas 2.0  Ivo Nascimento  iannsp@gmail.com | ivo.nascimento@ianntech.com.br
  • 2. O que é web 2.0 "Web 2.0 é a mudança para uma internet como plataforma, e um entendimento das regras para obter sucesso nesta nova plataforma. Entre outras, a regra mais importante é desenvolver aplicativos que aproveitem os efeitos de rede para se tornarem melhores quanto mais são usados pelas pessoas, aproveitando a inteligência coletiva" Tim O'Reilly
  • 3. Regras que ajudam a definir sucintamente a Web 2.0 1.O beta perpétuo 2.Pequenas peças frouxamente unidas 3.Software acima do nível de um único dispositivo 4.Lei da Conservação de Lucros, de Clayton Christensen 5.Dados são o novo “Intel inside”
  • 4. 1. O beta perpétuo não trate o software como um artefato, mas como um processo de comprometimento com seus usuários.
  • 5. 2. Pequenas peças frouxamente unidas Abra seus dados e serviços para que sejam reutilizados por outros. Reutilize dados e serviços de outros sempre que possível.
  • 6. 3. Software acima do nível de um único dispositivo Não pense em aplicativos que estão no cliente ou servidor, mas desenvolva aplicativos que estão no espaço entre eles.
  • 7. 4. Lei da Conservação de Lucros, de Clayton Christensen Lembre-se de que em um ambiente de rede, APIs abertas e protocolos padrões vencem, mas isso não significa que a idéia de vantagem competitiva vá embora.
  • 8. 5. Dados são o novo “Intel inside” A mais importante entre as futuras fontes de fechamento e vantagem competitiva serão os dados, seja através do aumento do retorno sobre dados gerados pelo usuário, sendo dono de um nome ou através de formatos de arquivo proprietários.
  • 9. Em linhas de apache | php | javascript | css | ... Temos de pensar em cada uma das partes do sistema com mais cuidado.
  • 10. Servidores Http  Segurança das transações  Segurança dos dados  Escalabilidade
  • 11. php  Manutenção das sessões.  Segurança dos dados.  Boas praticas de desenvolvimento.(POO, MVC, PDO, SCA SDO,SPL e outras).  Planejamento antes da codificação.
  • 12. javascript  Diminuicao do uso do servidor.  Segurança dos dados.  Ambiente de aplicação.  XHR.  Atenção ao Multi Browser.
  • 13. css  Dominio sobre o layout(e não o contrário).  Manipulação de componentes da DOM.  Personalização por cliente facilitada.
  • 14. Estudando o Ambiente Toda aplicação web (sistemas http) necessitara de um browser para interpreta-la e renderiza-la. Os principais: ●Firefox ●IE ●Safari
  • 15. Performance browser baseada em SunSpider JavaScript Benchmark http://webkit.org/perf/sunspider-0.9/sunspider.html ●Firefox 3 Nightly (PGO Optimized): 7263.8ms ●Firefox 3 Nightly (02/25/2008 build): 8219.4ms ●Opera 9.5.9807 Beta: 10824.0ms ●Firefox 3 Beta 3: 16080.6ms ●Safari 3.0.4 Beta: 18012.6ms ●Firefox 2.0.0.12: 29376.4ms ●Internet Explorer 7: 72375.0ms
  • 16. Performance baseada em acesso a sites populares yahoo.com hi5.com google.com msn.com rapidshare.com fotolog.net facebook.com live.com youtube.com microsoft.com myspace.com blogger.com medaupload.com wikipedia.org friendster.com orkut.com
  • 17. XHR – 1a Preocupação ●Dados - fatos em sua forma primária. ●Informação - estruturas significantes com a intenção de gerar conhecimento no indivíduo e seu espaço. XHR transporta dados e não informação. O contexto da aplicação gera a informação.
  • 18. XHR (retorno) Caso 1) Caso 2) Retorno = ”<div Retorno = ” titulo:'Exemplo 2', id='titulo'>Exemplo 1 </div> corpo:'Este e o corpo de um <div id='corpo'> exemplo de XHR sem Este e o corpo de um exemplo formatacao'”; de retorno XHR ja formatado. </div>”; var ret = Retorno.responseJSON; $('titulo').innerHTML = ret.titulo; var ret = $('corpo').innerHTML = ret.corpo; Retorno.responseText; document.title = ”Texto sobre: ”+ $('texto').innerHTML = ret; ret.titulo;
  • 19. Renderização – 2a Preocupação Inserir objetos na página via html e via DOM diretamente. With( espaco.appendChild(document.createElement('ID')) ){ title=rec.titulo; innerHTML=rec.corpo; } ou rec = ”<div title='”+rec.titulo+”'”> ”+rec.corpo+”</div>”; espaco.innerHTML = rec;
  • 20. Sincronismo – 3a Preocupação Partes XHR da Aplicação precisão estar serializadas, executando uma ação depois de outra. Asynchronous | Synchronous
  • 21. Código manutenível – 4a Preocupação A evolução: a) Coleção de functions espalhadas pelo código da pagina. b) Coleção de functions separadas em arquivos(bibliotecas). c) Coleção de classes bem definidas.
  • 22. Prototype Todo Objeto Javascript implementa prototype, que permite extensão do objeto. String.prototype.isIvoNome = function(){ if (this=='Ivo') return true else return false; } var a = "Ivo"; if(a.isIvoNome()) alert('Foi escrito Ivo');
  • 23. Json Syntax var modelo = { nome :'', setNome : function(n){ this.nome = n; }, getNome:function(){ return this.nome; } } m = modelo; m.setNome('TR'); alert(m.getNome());
  • 24. Provendo conexão a outros sistemas. Webservice API's Javascript RSS