O documento discute as Single Page Applications e a nova arquitetura da web, onde as aplicações são construídas usando HTML, CSS e JavaScript com foco em melhor experiência do usuário. Apresenta as tecnologias e frameworks para desenvolvimento deste tipo de aplicação, como testá-las e quais as novas responsabilidades do servidor web. Discutem também os desafios e oportunidades deste novo modelo de desenvolvimento web.

1. Single Page Applications
A nova Web
Giovanni Bassi
giovanni@lambda3.com.br
@giovannibassi
Victor Cavalcante
vcavalcante@lambda3.com.br
@vcavalcante

2. @VCavalcante
@GiovanniBassi

5. Agenda
História Tecnologias
Novo workflow de
desenvolvimento
Arquitetura da nova
web
Testando na nova
web
Responsabilidades
do servidor web
Manifesto da Nova
Web
Competências do
“novo”
desenvolvedor web
Oportunidades e
desafios no novo
modelo

6. História
HTML estático
HTML dinâmico
Outlook Web
Access, XMLHttp
Request e AJAX
??

7. Tecnologias
.htm
CGI
PHP/ASP/Code
Fusion
Webforms, JSF
Ruby on Rails, ASP.NET
MVC, Play Framework
Sinatra, Nancy, ASP.NET
Web API
MeteorJS, NodeJS,
Vert.X,
scriptcs

8. Novo workflow de desenvolvimento
• Navegação:
– URI => HTML base
– URI => Javascript => Ação (HTML/Javascript/CSS)
• Que dado vou obter agora?
• Qual interface gráfica exibo agora?
• O usuário está logado?

9. Arquitetura da nova web
• Camadas no navegador (HTML, CSS e JS)
• Arquitetura no servidor

10. Frameworks para construção de SPA’s

11. Testando na nova web
• Servidor web: old news
• No browser:
– Jasmine
– Mocha
– QUnit
– Selenium
– Watin

12. describe "carrega cidades do servico e exibe no dropdown", ->
it "exibe as cidades no dropdown", ->
#arrange
setFixtures("<form>
<select id='UF' name='UF'><option
selected='selected'>Estado</option><option>RJ</option></select><select id='Cidade'
name='Cidade'><option selected='selected'>Cidade</option></select></form>")
url = ''
spyOn($, "ajax").andCallFake((options) ->
url = options.url
options.success(['Rio de Janeiro']))
#act
$('#UF').val('RJ').attr('selected','selected')
$('#UF').trigger('change')
#assert
expect(url).toEqual '/api/cadastro/UF/RJ/Cidades'
expect($('#Cidade option').length).toEqual(3)
expect($('#Cidade option:selected')[0].text).toEqual('Selecione uma cidade')
expect($('#Cidade option')[0].text).toEqual('Selecione uma cidade')
expect($('#Cidade option')[1].text).toEqual('Rio de Janeiro')
Jasmine

13. describe "carrega cidades do servico e exibe no dropdown", ->
it "exibe as cidades no dropdown", ->
#arrange
setFixtures("<form>
<select id='UF' name='UF'><option
selected='selected'>Estado</option><option>RJ</option></select><select id='Cidade'
name='Cidade'><option selected='selected'>Cidade</option></select></form>")
url = ''
spyOn($, "ajax").andCallFake((options) ->
url = options.url
options.success(['Rio de Janeiro']))
#act
$('#UF').val('RJ').attr('selected','selected')
$('#UF').trigger('change')
#assert
expect(url).toEqual '/api/cadastro/UF/RJ/Cidades'
expect($('#Cidade option').length).toEqual(3)
expect($('#Cidade option:selected')[0].text).toEqual('Selecione uma cidade')
expect($('#Cidade option')[0].text).toEqual('Selecione uma cidade')
expect($('#Cidade option')[1].text).toEqual('Rio de Janeiro')
Jasmine

14. describe "carrega cidades do servico e exibe no dropdown", ->
it "exibe as cidades no dropdown", ->
#arrange
setFixtures("<form>
<select id='UF' name='UF'><option
selected='selected'>Estado</option><option>RJ</option></select><select id='Cidade'
name='Cidade'><option selected='selected'>Cidade</option></select></form>")
url = ''
spyOn($, "ajax").andCallFake((options) ->
url = options.url
options.success(['Rio de Janeiro']))
#act
$('#UF').val('RJ').attr('selected','selected')
$('#UF').trigger('change')
#assert
expect(url).toEqual '/api/cadastro/UF/RJ/Cidades'
expect($('#Cidade option').length).toEqual(3)
expect($('#Cidade option:selected')[0].text).toEqual('Selecione uma cidade')
expect($('#Cidade option')[0].text).toEqual('Selecione uma cidade')
expect($('#Cidade option')[1].text).toEqual('Rio de Janeiro')
Jasmine

15. describe "carrega cidades do servico e exibe no dropdown", ->
it "exibe as cidades no dropdown", ->
#arrange
setFixtures("<form>
<select id='UF' name='UF'><option
selected='selected'>Estado</option><option>RJ</option></select><select id='Cidade'
name='Cidade'><option selected='selected'>Cidade</option></select></form>")
url = ''
spyOn($, "ajax").andCallFake((options) ->
url = options.url
options.success(['Rio de Janeiro']))
#act
$('#UF').val('RJ').attr('selected','selected')
$('#UF').trigger('change')
#assert
expect(url).toEqual '/api/cadastro/UF/RJ/Cidades'
expect($('#Cidade option').length).toEqual(3)
expect($('#Cidade option:selected')[0].text).toEqual('Selecione uma cidade')
expect($('#Cidade option')[0].text).toEqual('Selecione uma cidade')
expect($('#Cidade option')[1].text).toEqual('Rio de Janeiro')
Jasmine

16. Responsabilidades do servidor web
• Não precisa mais gerar HTML
• Não precisa mais manter estado
• Não precisa mais se conectar em todos os serviços que
atendem a aplicação
Quais suas novas responsabilidades?

17. Manifesto da Nova Web
• Menos C#/Ruby/Java/Python, mais Javascript (ou
CoffeeScript)
• Menos arrastar e soltar, mais HTML codificado à mão
• Menos poluição no HTML, mais CSS
• Menos uso do HTML para design, mais foco na semântica
• Mais Javascript, mais opções ao Javascript (Coffeescript)

18. Competências do “novo”
desenvolvedor web
• HTML5
• CSS3
• JavaScript / CoffeeScript
• HTTP 1.1
• Web Standards
• REST
• Linguagem do lado do servidor

19. Oportunidades no novo modelo
• Desenvolvimento mobile facilitado
• Consumo de conteúdo desconectado
– Local Storage
– Cache Manifest
– Sincronização
• Sensação de maior responsividade da aplicação
• SPAs
• Convergência tecnológica

20. Desafios do novo modelo
• Falta de conhecimento dos desenvolvedores
• Medo
• Ferramental ainda em evolução
• Segurança garantida no server side
• Código exposto no cliente

21. Você é desenvolvedor web?
Continuará sendo nos próximos
anos com o conhecimento atual?

23. Obrigado!
Giovanni Bassi
giovanni@lambda3.com.br
@giovannibassi
Victor Cavalcante
victor@cavalcante.net
@vcavalcante

24. www.lambda3.com.br
Days 2012