O documento discute as mudanças na web com o surgimento de novas tecnologias como HTML5, CSS3 e JavaScript, que permitem o desenvolvimento de aplicações web mais ricas e responsivas diretamente no navegador. As principais responsabilidades do servidor web passam a ser fornecer dados em formato JSON/XML ao invés de HTML pronto, testar aplicações usando ferramentas como Jasmine no navegador, e os desafios de adaptação para desenvolvedores.
5. 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
6. História
??
Outlook Web Access,
XMLHttpRequest e AJAX
HTML dinâmico
HTML estático
7. 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
8. 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?
9. Arquitetura da nova web
• Camadas no navegador (HTML, CSS e JS)
• Arquitetura no servidor
11. Testando na nova web
• Servidor web: old news
• No browser:
– Jasmine
– QUnit
– Selenium
– Watin
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. 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')
15. 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')
16. 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?
17. 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)
18. Competências do “novo”
desenvolvedor web
• HTML5
• CSS3
• JavaScript / CoffeeScript
• HTTP 1.1
• Web Standards
• REST
• Linguagem do lado do servidor
19. 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
20. Desafios do novo modelo
• Falta de conhecimento dos desenvolvedores
• Medo
• Ferramental ainda em evolução
• Código exposto no cliente
21. Você é desenvolvedor web?
Continuará sendo nos próximos
anos com o conhecimento atual?
23. Obrigado!
Victor Cavalcante Giovanni Bassi
victor@cavalcante.net giovanni@lambda3.com.br
@vcavalcante @giovannibassi