Latinoware 2012 - Desenvolvendo Interfaces com Holy

37

description

Apresentação divulgada na Latinoware 2012 - Desenvolvendo Interfaces com Holy - por Leandro Guimarães

Transcript of Latinoware 2012 - Desenvolvendo Interfaces com Holy

Page 1: Latinoware 2012 - Desenvolvendo Interfaces com Holy
Page 2: Latinoware 2012 - Desenvolvendo Interfaces com Holy

about.me/leguimas

Leandro Guimarães

1997 2003

2008

Page 3: Latinoware 2012 - Desenvolvendo Interfaces com Holy
Page 4: Latinoware 2012 - Desenvolvendo Interfaces com Holy

holyho.ly

n santuário, lugar sagrado. • adj santo,sagrado, consagrado, divino. he took holyorders ele tornou-se padre. Holy CrossDay Dia da Exaltação da Cruz. Holy ofHolies Santíssimo, Santuário. holyorders clero.

Page 5: Latinoware 2012 - Desenvolvendo Interfaces com Holy
Page 6: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Teve sua “origem” na época da Guerra Fria com pesquisadores militares americanos pensando em um meio de distribuir suas informações

diminuindo a vulnerabilidade das bases americanas.

ARPANET - Advanced Research Projects Agency

Page 7: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Década de 70

RFC 685 com a descrição doprotocolo TCP/IP.

Avanço em redes privadas.

Década de 80

Grandes redes integradas porTCP/IP.

Abertura comercial em 1988.

Década de 90

Grandes redes integradas porTCP/IP.

Criação da World Wide Web(WWW).

Popularização (Brasil – 1995).

Page 8: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Sistemas

• Domínio da arquitetura cliente-servidor (desktop);

• Processamentos cada vez mais complexos e pesados;

• Clients cada vez mais robustos;

• Dependência “geográfica” para acesso à informação;

• Hardware alto custo.

[ 1995 – 2000 ]

Page 9: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Clientes (“escalabilidade”) mais robustos a um alto custo.

Dependência “geográfica” para acesso à informação.

Comunicação entre máquinas geograficamente separadas.

Possibilidade de transitar dados de forma confiável.

+

Page 10: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Acessar a informação de qualquer lugar.

Investir em servidores mais robustos mas que concentrem o

processamento.

Ter clients mais enxutos, consequentemente, mais baratos.

Page 11: Latinoware 2012 - Desenvolvendo Interfaces com Holy
Page 12: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Do desktop para a WEB...

Page 13: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Nos primórdios...

Servidor Clients

Tecnologias “embrionárias” e bastante simples.

Páginas dinâmicas.

Simples “consumidores” de informações.

Recursos precários para exibição de dados.

Page 14: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Nos primórdios...

Page 15: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Com o passar do tempo...

Servidor

Page 16: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Com o passar do tempo...

Client

Barateamento

Desenvolvimento da tecnologia

(JavaScript, jQuery, CSS, HTML5)

Page 17: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Mas...

Page 18: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Consequências...

Servidor Clients

Sobrecarregados em não só se responsabilizar pelo

processamento de dados mas também por preparar a visualização dos dados pelo

client.

Dificuldades de escalabilidade.

Capacidade ociosa: o servidor prepara tudo

mesmo o client fornecendo uma capacidade incrível para a visualização, e até

processamento, de informações.

Comprometimento da usabilidade.

Page 19: Latinoware 2012 - Desenvolvendo Interfaces com Holy
Page 20: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Testemunho

Desenvolver um novo CMS para a Globosat.

(2008)

Page 21: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Testemunho

Principais dificuldades encontradas:

Conteúdo altamente dinâmico;

Conciliar usabilidade e formuláriosgerados dinamicamente;

Além disso...

Gostamos de prototipação mas os protótipossão desperdiçados pois não são reaproveitados;

Page 22: Latinoware 2012 - Desenvolvendo Interfaces com Holy

E se a gente separasse, efetivamente, o cliente (visualização e input de dados) do servidor (obtenção e processamento de dados)? Os browsers atualmente tem

tecnologia suficiente pra obter dados e renderizar a visualização na tela da melhor forma com a usabilidade e

design que se queira...

Paulo Murer

Page 23: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Outra coisa: pra que precisa renderizar a página toda vez que qualquer alteração nela precisa ser feita? Se precisar

mudar só um label, precisa renderizar a página toda?

E se a gente gosta de protótipos, por que não criar um jeito de se fazer protótipo que possa ser reaproveitado?

Paulo Murer

Page 24: Latinoware 2012 - Desenvolvendo Interfaces com Holy
Page 25: Latinoware 2012 - Desenvolvendo Interfaces com Holy

O que é?

Uma solução open-source para o desenvolvimento WEB na qual se isola, efetivamente, cliente e

servidor. O servidor tem como responsabilidade “somente” a gestão dos dados enquanto o cliente tem

como responsabilidade interagir com o servidor, enviando e obtendo dados, e renderizar as

informações na tela.

http://holy.dextra-sw.com

Page 26: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Como funciona?

Para as ações na sua aplicação, você faz uma requisição AJAX para o seu servidor obtendo a resposta

necessária. De posse da resposta, você chama um template que renderizará os dados recebidos na

página da sua aplicação.

Page 27: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Como assim?

Page 28: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Como assim?

HTML<body>

<div id=“myDiv”>

</div>

</body>

Servidor

HTTP REST

JSON

$.ajax()

Obtenção dos dados

Page 29: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Como assim?

HTML<body>

<div id=“myDiv”>

</div>

</body>

Servidor

HTTP

TEMPLATE XML

$.holy()

<template selector=“#myDiv">

<span>${dado}</span>

</template>

Obtenção do template

Page 30: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Como assim?

HTML<body>

<div id=“myDiv”>

<span>Hello</span>

</div>

</body>

Servidor

Renderização dos dados(trimpath)

Page 32: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Benefícios

• Real separação entre cliente e servidor;

• Desenvolvimento de protótipos funcionais e 100% reaproveitáveis;

• Tecnologias padrão de mercado (W3C) e amplamente conhecidas;

• Acervo de componentes: tudo o que a WEB oferece;

• WEB API “de graça”;

• Facilidade de desenvolvimento de novas camadas de interface;

Page 33: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Benefícios

• Facilidade para a implementação de testes automatizados – controle total sobre os componentes;

• Independência da plataforma utilizada no servidor;

• Economia de processamento no servidor de aplicação;

• Facilidade para escalar seu sistemas (sessionless);

• Foco na usabilidade e, se eu quiser, no design da aplicação.

Page 34: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Tendências

Leaving JSPs in the dust: moving LinkedIn to dust.js client-side templates.

http://bit.ly/R8UMgg

Improving performance on twitter.comhttp://bit.ly/R8UPc2

Page 35: Latinoware 2012 - Desenvolvendo Interfaces com Holy

@leguimas

[email protected]

leguimas

Page 36: Latinoware 2012 - Desenvolvendo Interfaces com Holy
Page 37: Latinoware 2012 - Desenvolvendo Interfaces com Holy

Casos de SucessoSOFTWARE LIVRE

AGILE COM PONTO DE FUNÇÃO

ATA DE REGISTRO DE PREÇO

www.dextra.com.br/arp