Nova web - DNAD 2012

1.742 visualizações

Publicada em

Palestra ministrada no DNAD 2012.

Publicada em: Tecnologia
1 comentário
0 gostaram
Estatísticas
Notas
  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide

Nova web - DNAD 2012

  1. 1. Days 2012A nova web Victor Cavalcante Giovanni Bassivictor@cavalcante.net giggio@giggio.net @vcavalcante @giovannibassi
  2. 2. @VCavalcante @GiovanniBassi
  3. 3. Agenda Novo workflow de História Tecnologias desenvolvimento Arquitetura da nova Testando na nova Responsabilidades web web do servidor web Competências do Oportunidades e Manifesto da Nova “novo” desafios no novo Web desenvolvedor web modelo
  4. 4. História ?? Outlook Web Access, XMLHttpRequest e AJAX HTML dinâmico HTML estático
  5. 5. Tecnologias Webforms, JSF MeteorJS, NodeJS? PHP/ASP/Code Fusion Sinatra, Nancy, ASP.NET Web API CGI Ruby on Rails, .htm ASP.NET MVC, Play Framework
  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 – QUnit – Selenium – Watin
  10. 10. Jasmine 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)
  11. 11. Jasmine 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)
  12. 12. Jasmine 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)
  13. 13. Jasmine 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)
  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çãoQuais 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• Impressão de 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• Código exposto no cliente
  19. 19. Você é desenvolvedor web?Continuará sendo nos próximosanos com o conhecimento atual?
  20. 20. Obrigado! Victor Cavalcante Giovanni Bassivictor@cavalcante.net giovanni@lambda3.com.br @vcavalcante @giovannibassi
  21. 21. www.lambda3.com.br Days 2012

×