Sigle Page Application - A nova Web

1.010 visualizações

Publicada em

Palestra apresentada no TDC2013SP.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.010
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Sigle Page Application - A nova Web

  1. 1. Single Page Applications A nova Web Giovanni Bassi giovanni@lambda3.com.br @giovannibassi Victor Cavalcante vcavalcante@lambda3.com.br @vcavalcante
  2. 2. @VCavalcante @GiovanniBassi
  3. 3. 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
  4. 4. História HTML estático HTML dinâmico Outlook Web Access, XMLHttp Request e AJAX ??
  5. 5. 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
  6. 6. 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?
  7. 7. Arquitetura da nova web • Camadas no navegador (HTML, CSS e JS) • Arquitetura no servidor
  8. 8. Frameworks para construção de SPA’s
  9. 9. Testando na nova web • Servidor web: old news • No browser: – Jasmine – Mocha – QUnit – Selenium – Watin
  10. 10. 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
  11. 11. 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
  12. 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. 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. 14. 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?
  15. 15. 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)
  16. 16. Competências do “novo” desenvolvedor web • HTML5 • CSS3 • JavaScript / CoffeeScript • HTTP 1.1 • Web Standards • REST • Linguagem do lado do servidor
  17. 17. 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
  18. 18. 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
  19. 19. Você é desenvolvedor web? Continuará sendo nos próximos anos com o conhecimento atual?
  20. 20. Obrigado! Giovanni Bassi giovanni@lambda3.com.br @giovannibassi Victor Cavalcante victor@cavalcante.net @vcavalcante
  21. 21. www.lambda3.com.br Days 2012

×