Days 2012A nova web     Victor Cavalcante    Giovanni Bassivictor@cavalcante.net giggio@giggio.net         @vcavalcante   ...
@VCavalcante          @GiovanniBassi
Agenda                                             Novo workflow de        História            Tecnologias                ...
História                                                               ??                                       Outlook We...
Tecnologias                             Webforms, JSF                              MeteorJS, NodeJS?              PHP/ASP/...
Novo workflow de desenvolvimento• Navegação:   – URI => HTML base   – URI => Javascript => Ação (HTML/Javascript/CSS)• Que...
Arquitetura da nova web• Camadas no navegador (HTML, CSS e JS)• Arquitetura no servidor
Frameworks para construção de SPA’s
Testando na nova web• Servidor web: old news• No browser:  –   Jasmine  –   QUnit  –   Selenium  –   Watin
Jasmine describe "carrega cidades do servico e exibe no dropdown", ->   it "exibe as cidades no dropdown", ->     #arrange...
Jasmine describe "carrega cidades do servico e exibe no dropdown", ->   it "exibe as cidades no dropdown", ->     #arrange...
Jasmine describe "carrega cidades do servico e exibe no dropdown", ->   it "exibe as cidades no dropdown", ->     #arrange...
Jasmine describe "carrega cidades do servico e exibe no dropdown", ->   it "exibe as cidades no dropdown", ->     #arrange...
Responsabilidades do servidor web• Não precisa mais gerar HTML• Não precisa mais manter estado• Não precisa mais se conect...
Manifesto da Nova Web• Menos C#/Ruby/Java/Python, mais Javascript (ou  CoffeeScript)• Menos arrastar e soltar, mais HTML c...
Competências do “novo”desenvolvedor web•   HTML5•   CSS3•   JavaScript / CoffeeScript•   HTTP 1.1•   Web Standards•   REST...
Oportunidades no novo modelo• Desenvolvimento mobile facilitado• Consumo de conteúdo desconectado   – Local Storage   – Ca...
Desafios do novo modelo•   Falta de conhecimento dos desenvolvedores•   Medo•   Ferramental ainda em evolução•   Código ex...
Você é desenvolvedor web?Continuará sendo nos próximosanos com o conhecimento atual?
Obrigado!     Victor Cavalcante           Giovanni Bassivictor@cavalcante.net giovanni@lambda3.com.br         @vcavalcante...
www.lambda3.com.br              Days 2012
Nova web - DNAD 2012
Nova web - DNAD 2012
Nova web - DNAD 2012
Upcoming SlideShare
Loading in …5
×

Nova web - DNAD 2012

1,772 views

Published on

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,772
On SlideShare
0
From Embeds
0
Number of Embeds
189
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

No notes for 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

×