sigle page application - a nova web
DESCRIPTION
Palestra apresentada no TDC2013SP.TRANSCRIPT
![Page 1: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/1.jpg)
Single Page Applications A nova Web
Giovanni [email protected]
@giovannibassi
Victor [email protected]
@vcavalcante
![Page 2: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/2.jpg)
@VCavalcante
@GiovanniBassi
![Page 3: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/3.jpg)
![Page 4: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/4.jpg)
![Page 5: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/5.jpg)
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
![Page 6: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/6.jpg)
História
HTML estático
HTML dinâmico
Outlook Web Access, XMLHttpRequest e AJAX
??
![Page 7: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/7.jpg)
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
![Page 8: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/8.jpg)
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?
![Page 9: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/9.jpg)
Arquitetura da nova web• Camadas no navegador (HTML, CSS e JS)• Arquitetura no servidor
![Page 10: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/10.jpg)
Frameworks para construção de SPA’s
![Page 11: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/11.jpg)
Testando na nova web• Servidor web: old news• No browser:
– Jasmine– Mocha– QUnit– Selenium– Watin
![Page 12: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/12.jpg)
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
![Page 13: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/13.jpg)
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
![Page 14: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/14.jpg)
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
![Page 15: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/15.jpg)
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
![Page 16: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/16.jpg)
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?
![Page 17: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/17.jpg)
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)
![Page 18: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/18.jpg)
Competências do “novo” desenvolvedor web
• HTML5• CSS3• JavaScript / CoffeeScript• HTTP 1.1• Web Standards• REST• Linguagem do lado do servidor
![Page 19: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/19.jpg)
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
![Page 20: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/20.jpg)
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
![Page 21: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/21.jpg)
Você é desenvolvedor web? Continuará sendo nos próximos anos com o conhecimento atual?
![Page 22: Sigle Page Application - A nova Web](https://reader034.vdocuments.net/reader034/viewer/2022052507/558fc4491a28ab83318b45f1/html5/thumbnails/22.jpg)
Dúvidas?