Single Page Applications
A nova Web
Giovanni Bassi
giovanni@lambda3.com.br
@giovannibassi
Victor Cavalcante
vcavalcante@la...
@VCavalcante
@GiovanniBassi
Agenda
História Tecnologias
Novo workflow de
desenvolvimento
Arquitetura da nova
web
Testando na nova
web
Responsabilidade...
História
HTML estático
HTML dinâmico
Outlook Web
Access, XMLHttp
Request e AJAX
??
Tecnologias
.htm
CGI
PHP/ASP/Code
Fusion
Webforms, JSF
Ruby on Rails, ASP.NET
MVC, Play Framework
Sinatra, Nancy, ASP.NET
...
Novo workflow de desenvolvimento
• Navegação:
– URI => HTML base
– URI => Javascript => Ação (HTML/Javascript/CSS)
• Que d...
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
– Mocha
– QUnit
– Selenium
– Watin
describe "carrega cidades do servico e exibe no dropdown", ->
it "exibe as cidades no dropdown", ->
#arrange
setFixtures("...
describe "carrega cidades do servico e exibe no dropdown", ->
it "exibe as cidades no dropdown", ->
#arrange
setFixtures("...
describe "carrega cidades do servico e exibe no dropdown", ->
it "exibe as cidades no dropdown", ->
#arrange
setFixtures("...
describe "carrega cidades do servico e exibe no dropdown", ->
it "exibe as cidades no dropdown", ->
#arrange
setFixtures("...
Responsabilidades do servidor web
• Não precisa mais gerar HTML
• Não precisa mais manter estado
• Não precisa mais se con...
Manifesto da Nova Web
• Menos C#/Ruby/Java/Python, mais Javascript (ou
CoffeeScript)
• Menos arrastar e soltar, mais HTML ...
Competências do “novo”
desenvolvedor web
• HTML5
• CSS3
• JavaScript / CoffeeScript
• HTTP 1.1
• Web Standards
• REST
• Li...
Oportunidades no novo modelo
• Desenvolvimento mobile facilitado
• Consumo de conteúdo desconectado
– Local Storage
– Cach...
Desafios do novo modelo
• Falta de conhecimento dos desenvolvedores
• Medo
• Ferramental ainda em evolução
• Segurança gar...
Você é desenvolvedor web?
Continuará sendo nos próximos
anos com o conhecimento atual?
Obrigado!
Giovanni Bassi
giovanni@lambda3.com.br
@giovannibassi
Victor Cavalcante
victor@cavalcante.net
@vcavalcante
www.lambda3.com.br
Days 2012
Sigle Page Application - A nova Web
Sigle Page Application - A nova Web
Sigle Page Application - A nova Web
Upcoming SlideShare
Loading in …5
×

Sigle Page Application - A nova Web

1,041 views

Published on

Palestra apresentada no TDC2013SP.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×