Embed Size (px)
DESCRIPTION
Palestra apresentada no TDC2013SP.
Citation preview
Single Page Applications A nova Web
Giovanni [email protected]
@giovannibassi
Victor [email protected]
@vcavalcante
@VCavalcante
@GiovanniBassi
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
História
HTML estático
HTML dinâmico
Outlook Web Access, XMLHttpRequest e AJAX
??
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
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?
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("<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
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
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
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
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?
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)
Competências do “novo” desenvolvedor web
• HTML5• CSS3• JavaScript / CoffeeScript• HTTP 1.1• Web Standards• REST• Linguagem do lado do servidor
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
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
Você é desenvolvedor web? Continuará sendo nos próximos anos com o conhecimento atual?
Dúvidas?
