Your SlideShare is downloading. ×
Nova web - DNAD 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Nova web - DNAD 2012

1,497
views

Published on

Palestra ministrada no DNAD 2012.

Palestra ministrada no DNAD 2012.

Published in: Technology

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,497
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Days 2012A nova web Victor Cavalcante Giovanni Bassivictor@cavalcante.net giggio@giggio.net @vcavalcante @giovannibassi
  • 2. @VCavalcante @GiovanniBassi
  • 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. História ?? Outlook Web Access, XMLHttpRequest e AJAX HTML dinâmico HTML estático
  • 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. 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. Arquitetura da nova web• Camadas no navegador (HTML, CSS e JS)• Arquitetura no servidor
  • 8. Frameworks para construção de SPA’s
  • 9. Testando na nova web• Servidor web: old news• No browser: – Jasmine – QUnit – Selenium – Watin
  • 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. 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. 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. 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. 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. 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. Competências do “novo”desenvolvedor web• HTML5• CSS3• JavaScript / CoffeeScript• HTTP 1.1• Web Standards• REST• Linguagem do lado do servidor
  • 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. Desafios do novo modelo• Falta de conhecimento dos desenvolvedores• Medo• Ferramental ainda em evolução• Código exposto no cliente
  • 19. Você é desenvolvedor web?Continuará sendo nos próximosanos com o conhecimento atual?
  • 20. Obrigado! Victor Cavalcante Giovanni Bassivictor@cavalcante.net giovanni@lambda3.com.br @vcavalcante @giovannibassi
  • 21. www.lambda3.com.br Days 2012