SlideShare a Scribd company logo
1 of 24
Days 2012
A nova web
     Victor Cavalcante    Giovanni Bassi
victor@cavalcante.net giggio@giggio.net
         @vcavalcante    @giovannibassi
@VCavalcante




          @GiovanniBassi
Nova web - DNAD 2012
Nova web - DNAD 2012
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
História
                                                               ??


                                       Outlook Web Access,
                                       XMLHttpRequest e AJAX



                       HTML dinâmico




       HTML estático
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
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
  –   QUnit
  –   Selenium
  –   Watin
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
 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')
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
• Impressão de responsividade da aplicação
• SPAs
• Convergência tecnológica
Desafios do novo modelo
•   Falta de conhecimento dos desenvolvedores
•   Medo
•   Ferramental ainda em evolução
•   Código exposto no cliente
Você é desenvolvedor web?
Continuará sendo nos próximos
anos com o conhecimento atual?
Nova web - DNAD 2012
Obrigado!


     Victor Cavalcante           Giovanni Bassi
victor@cavalcante.net giovanni@lambda3.com.br
         @vcavalcante           @giovannibassi
www.lambda3.com.br



              Days 2012

More Related Content

Similar to Nova web - DNAD 2012

QCon 2015 - Combinando AngularJS com Java EE
QCon 2015 - Combinando AngularJS com Java EEQCon 2015 - Combinando AngularJS com Java EE
QCon 2015 - Combinando AngularJS com Java EERodrigo Cândido da Silva
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseLuiz Duarte
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Julian Cesar
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.jsGiovanni Bassi
 
Repositório Social de Serviços Web
Repositório Social de Serviços WebRepositório Social de Serviços Web
Repositório Social de Serviços WebHenrique Dias
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Rodrigo Urubatan
 
Usando React Native & Multi Módulos para Escalar App Creditas
Usando React Native & Multi Módulos para Escalar App CreditasUsando React Native & Multi Módulos para Escalar App Creditas
Usando React Native & Multi Módulos para Escalar App CreditasJuliana Chahoud
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
 
Rails - EXATEC2009
Rails - EXATEC2009Rails - EXATEC2009
Rails - EXATEC2009Caue Guerra
 
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009Ramon Durães
 
Precisamos falar sobre MERN stack
Precisamos falar sobre MERN stackPrecisamos falar sobre MERN stack
Precisamos falar sobre MERN stackSidney Roberto
 
Nadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryNadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryReinaldo Junior
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasIntrodução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasGuilherme
 

Similar to Nova web - DNAD 2012 (20)

QCon 2015 - Combinando AngularJS com Java EE
QCon 2015 - Combinando AngularJS com Java EEQCon 2015 - Combinando AngularJS com Java EE
QCon 2015 - Combinando AngularJS com Java EE
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + Mongoose
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 
GUJavaSC - Combinando AngularJS com Java EE
GUJavaSC - Combinando AngularJS com Java EEGUJavaSC - Combinando AngularJS com Java EE
GUJavaSC - Combinando AngularJS com Java EE
 
introdução a ajax
introdução a ajaxintrodução a ajax
introdução a ajax
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.js
 
Phonegap
PhonegapPhonegap
Phonegap
 
Repositório Social de Serviços Web
Repositório Social de Serviços WebRepositório Social de Serviços Web
Repositório Social de Serviços Web
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_
 
Usando React Native & Multi Módulos para Escalar App Creditas
Usando React Native & Multi Módulos para Escalar App CreditasUsando React Native & Multi Módulos para Escalar App Creditas
Usando React Native & Multi Módulos para Escalar App Creditas
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
Rails - EXATEC2009
Rails - EXATEC2009Rails - EXATEC2009
Rails - EXATEC2009
 
Mini Curso Mashup Coreu
Mini Curso Mashup CoreuMini Curso Mashup Coreu
Mini Curso Mashup Coreu
 
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
 
Precisamos falar sobre MERN stack
Precisamos falar sobre MERN stackPrecisamos falar sobre MERN stack
Precisamos falar sobre MERN stack
 
Html5
Html5Html5
Html5
 
Nadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryNadando em Dinheiro com jQuery
Nadando em Dinheiro com jQuery
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Deck QCON SP 2018
Deck QCON SP 2018Deck QCON SP 2018
Deck QCON SP 2018
 
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasIntrodução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvas
 

More from Giovanni Bassi

O que aprendi montando a arquitetura de microsserviços
O que aprendi montando a arquitetura de microsserviçosO que aprendi montando a arquitetura de microsserviços
O que aprendi montando a arquitetura de microsserviçosGiovanni Bassi
 
Analisando dumps de memória de aplicações .NET
Analisando dumps de memória de aplicações .NETAnalisando dumps de memória de aplicações .NET
Analisando dumps de memória de aplicações .NETGiovanni Bassi
 
Async e await com JavaScript: entenda e use agora
Async e await com JavaScript: entenda e use agoraAsync e await com JavaScript: entenda e use agora
Async e await com JavaScript: entenda e use agoraGiovanni Bassi
 
Conhecendo o AKS, o azure container services com kubernetes
Conhecendo o AKS, o azure container services com kubernetesConhecendo o AKS, o azure container services com kubernetes
Conhecendo o AKS, o azure container services com kubernetesGiovanni Bassi
 
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1Giovanni Bassi
 
C#7, 7.1, 7.2, 7.3 e C# 8
C#7, 7.1, 7.2, 7.3 e C# 8C#7, 7.1, 7.2, 7.3 e C# 8
C#7, 7.1, 7.2, 7.3 e C# 8Giovanni Bassi
 
Engenharia ágil de ponta a ponta do clone ao deploy
Engenharia ágil de ponta a ponta do clone ao deployEngenharia ágil de ponta a ponta do clone ao deploy
Engenharia ágil de ponta a ponta do clone ao deployGiovanni Bassi
 
Entrega contínua fica mais fácil com contêineres
Entrega contínua fica mais fácil com contêineresEntrega contínua fica mais fácil com contêineres
Entrega contínua fica mais fácil com contêineresGiovanni Bassi
 
.NET Core, ASP.NET Core e .NET Standard 2
.NET Core, ASP.NET Core e .NET Standard 2.NET Core, ASP.NET Core e .NET Standard 2
.NET Core, ASP.NET Core e .NET Standard 2Giovanni Bassi
 
.NET com contêineres Windows e Linux
.NET com contêineres Windows e Linux.NET com contêineres Windows e Linux
.NET com contêineres Windows e LinuxGiovanni Bassi
 
Async e await com JavaScript: entenda e use agora
Async e await com JavaScript: entenda e use agoraAsync e await com JavaScript: entenda e use agora
Async e await com JavaScript: entenda e use agoraGiovanni Bassi
 
Compartilhando código entre frontend e backend com Node.js
Compartilhando código entre frontend e backend com Node.jsCompartilhando código entre frontend e backend com Node.js
Compartilhando código entre frontend e backend com Node.jsGiovanni Bassi
 
Construindo uma ferramenta CLI multiplataforma com Node.js
Construindo uma ferramenta CLI multiplataforma com Node.jsConstruindo uma ferramenta CLI multiplataforma com Node.js
Construindo uma ferramenta CLI multiplataforma com Node.jsGiovanni Bassi
 
Um mergulho nos containers windows
Um mergulho nos containers windowsUm mergulho nos containers windows
Um mergulho nos containers windowsGiovanni Bassi
 
Por dentro do .NET Core
Por dentro do .NET CorePor dentro do .NET Core
Por dentro do .NET CoreGiovanni Bassi
 
Build e release pipeline com docker
Build e release pipeline com dockerBuild e release pipeline com docker
Build e release pipeline com dockerGiovanni Bassi
 
Release contínuo de um microsserviço com Docker ASP.net core e Azure Containe...
Release contínuo de um microsserviço com Docker ASP.net core e Azure Containe...Release contínuo de um microsserviço com Docker ASP.net core e Azure Containe...
Release contínuo de um microsserviço com Docker ASP.net core e Azure Containe...Giovanni Bassi
 

More from Giovanni Bassi (20)

O que aprendi montando a arquitetura de microsserviços
O que aprendi montando a arquitetura de microsserviçosO que aprendi montando a arquitetura de microsserviços
O que aprendi montando a arquitetura de microsserviços
 
Sendo ágil com git
Sendo ágil com gitSendo ágil com git
Sendo ágil com git
 
Analisando dumps de memória de aplicações .NET
Analisando dumps de memória de aplicações .NETAnalisando dumps de memória de aplicações .NET
Analisando dumps de memória de aplicações .NET
 
Novidades do c# 7 e 8
Novidades do c# 7 e 8Novidades do c# 7 e 8
Novidades do c# 7 e 8
 
Async e await com JavaScript: entenda e use agora
Async e await com JavaScript: entenda e use agoraAsync e await com JavaScript: entenda e use agora
Async e await com JavaScript: entenda e use agora
 
Conhecendo o AKS, o azure container services com kubernetes
Conhecendo o AKS, o azure container services com kubernetesConhecendo o AKS, o azure container services com kubernetes
Conhecendo o AKS, o azure container services com kubernetes
 
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
Novidades do .NET Core 2.1 e do ASP.NET Core 2.1
 
C#7, 7.1, 7.2, 7.3 e C# 8
C#7, 7.1, 7.2, 7.3 e C# 8C#7, 7.1, 7.2, 7.3 e C# 8
C#7, 7.1, 7.2, 7.3 e C# 8
 
Engenharia ágil de ponta a ponta do clone ao deploy
Engenharia ágil de ponta a ponta do clone ao deployEngenharia ágil de ponta a ponta do clone ao deploy
Engenharia ágil de ponta a ponta do clone ao deploy
 
Entrega contínua fica mais fácil com contêineres
Entrega contínua fica mais fácil com contêineresEntrega contínua fica mais fácil com contêineres
Entrega contínua fica mais fácil com contêineres
 
.NET Core, ASP.NET Core e .NET Standard 2
.NET Core, ASP.NET Core e .NET Standard 2.NET Core, ASP.NET Core e .NET Standard 2
.NET Core, ASP.NET Core e .NET Standard 2
 
.NET com contêineres Windows e Linux
.NET com contêineres Windows e Linux.NET com contêineres Windows e Linux
.NET com contêineres Windows e Linux
 
Async e await com JavaScript: entenda e use agora
Async e await com JavaScript: entenda e use agoraAsync e await com JavaScript: entenda e use agora
Async e await com JavaScript: entenda e use agora
 
Compartilhando código entre frontend e backend com Node.js
Compartilhando código entre frontend e backend com Node.jsCompartilhando código entre frontend e backend com Node.js
Compartilhando código entre frontend e backend com Node.js
 
Construindo uma ferramenta CLI multiplataforma com Node.js
Construindo uma ferramenta CLI multiplataforma com Node.jsConstruindo uma ferramenta CLI multiplataforma com Node.js
Construindo uma ferramenta CLI multiplataforma com Node.js
 
O Futuro do C#: C#8
O Futuro do C#: C#8O Futuro do C#: C#8
O Futuro do C#: C#8
 
Um mergulho nos containers windows
Um mergulho nos containers windowsUm mergulho nos containers windows
Um mergulho nos containers windows
 
Por dentro do .NET Core
Por dentro do .NET CorePor dentro do .NET Core
Por dentro do .NET Core
 
Build e release pipeline com docker
Build e release pipeline com dockerBuild e release pipeline com docker
Build e release pipeline com docker
 
Release contínuo de um microsserviço com Docker ASP.net core e Azure Containe...
Release contínuo de um microsserviço com Docker ASP.net core e Azure Containe...Release contínuo de um microsserviço com Docker ASP.net core e Azure Containe...
Release contínuo de um microsserviço com Docker ASP.net core e Azure Containe...
 

Nova web - DNAD 2012

  • 1. Days 2012 A nova web Victor Cavalcante Giovanni Bassi victor@cavalcante.net giggio@giggio.net @vcavalcante @giovannibassi
  • 2. @VCavalcante @GiovanniBassi
  • 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
  • 24. www.lambda3.com.br Days 2012