SlideShare uma empresa Scribd logo

LambdaDay: Backbone.js

Palestra sobre Backbone.js ministrada no LambdaDay, evento da Lambda3. http://day.lambda3.com.br Código do exemplo em: https://github.com/Lambda3/lambdaday2013-backbonejs

1 de 35
Backbone.js nas trincheiras
                Giovanni Bassi              Osmar Landin
     giovanni@lambda3.com.br osmar.landin@lambda3.com.br
               @giovannibassi               @osmarlandin
Agenda
                 Porque
   O que é                   Estruturando o
              BackboneJS e
 BackboneJS                      projeto
                cenários



  Usando o    Testando o
                              Conclusões
 BackboneJS   BackboneJS
O que é Backbone.js
Backbone.js
• Componente Javascript
  – Pode ser usado com CoffeeScript ou TypeScript
• MV* - Separação de responsabilidades entre modelo,
  view, e roteador (mais ou menos um MVC)
• Um dos frameworks JS mais usados no mundo
• Bem documentado
• Open source (hospedado no github)
Porque Backbone.js?
Características do cenário
BackboneJS x <algum server>
• Prós
  –   Maior responsividade da aplicação
  –   Mais cara de aplicação, menos cara de site
  –   Código de interface concentrado mais perto do navegador
  –   Interfaces mais ricas
• Contras
  – Ferramental ainda em evolução
  – Curva de aprendizado
  – Hoje ainda é mais lento para desenvolver
Anúncio

Recomendados

Simplificando seu DevOps com o Azure DevOps Project
Simplificando seu DevOps com o Azure DevOps ProjectSimplificando seu DevOps com o Azure DevOps Project
Simplificando seu DevOps com o Azure DevOps ProjectResource IT
 
Iac & DevOps no Azure: Automatizando deployments
Iac & DevOps no Azure: Automatizando deploymentsIac & DevOps no Azure: Automatizando deployments
Iac & DevOps no Azure: Automatizando deploymentsRicardo Martins ☁
 
Construindo pipelines com Azure DevOps
Construindo pipelines com Azure DevOpsConstruindo pipelines com Azure DevOps
Construindo pipelines com Azure DevOpsCamila Carrera
 
Microsoft Azure
Microsoft AzureMicrosoft Azure
Microsoft AzureGeneXus
 
Aumentando a produtividade e Automatizando Processos com Jira
Aumentando a produtividade e Automatizando Processos com JiraAumentando a produtividade e Automatizando Processos com Jira
Aumentando a produtividade e Automatizando Processos com JiraLuís Cesar Teodoro
 
Principais novidades do Entity Framework 5.0
Principais novidades do Entity Framework 5.0Principais novidades do Entity Framework 5.0
Principais novidades do Entity Framework 5.0Fernando Henrique
 

Mais conteúdo relacionado

Mais procurados

Introdução à computação na nuvem e Windows Azure
Introdução à computação na nuvem e Windows AzureIntrodução à computação na nuvem e Windows Azure
Introdução à computação na nuvem e Windows AzureGiovanni Bassi
 
Automatize seu processo de entrega de software com CI/CD na AWS
Automatize seu processo de entrega de software com CI/CD na AWSAutomatize seu processo de entrega de software com CI/CD na AWS
Automatize seu processo de entrega de software com CI/CD na AWSAmazon Web Services LATAM
 
TDC Transformation 2021 - Certificação AZ-900 Azure Fundamental: Conceitos, d...
TDC Transformation 2021 - Certificação AZ-900 Azure Fundamental: Conceitos, d...TDC Transformation 2021 - Certificação AZ-900 Azure Fundamental: Conceitos, d...
TDC Transformation 2021 - Certificação AZ-900 Azure Fundamental: Conceitos, d...Walter Coan
 
Desenvolvendo aplicações móveis na Nuvem
Desenvolvendo aplicações móveis na NuvemDesenvolvendo aplicações móveis na Nuvem
Desenvolvendo aplicações móveis na NuvemJose Papo, MSc
 
Spring Boot - Uma app do 0 a Web em 30 minutos
Spring Boot - Uma app do 0 a Web em 30 minutosSpring Boot - Uma app do 0 a Web em 30 minutos
Spring Boot - Uma app do 0 a Web em 30 minutosphelypploch
 
Fim do Suporte do Windows Server 2008 e SQL Server 2008
Fim do Suporte do Windows Server 2008 e SQL Server 2008Fim do Suporte do Windows Server 2008 e SQL Server 2008
Fim do Suporte do Windows Server 2008 e SQL Server 2008Fabio Hara
 
Bibliotecas de interface rica no jsf 2
Bibliotecas de interface rica no jsf 2Bibliotecas de interface rica no jsf 2
Bibliotecas de interface rica no jsf 2Pablo Nóbrega
 
DevOps: desenvolvedores e sysadmins cooperando na prática
DevOps: desenvolvedores e sysadmins cooperando na práticaDevOps: desenvolvedores e sysadmins cooperando na prática
DevOps: desenvolvedores e sysadmins cooperando na práticaAri Stopassola Junior
 
6. apresentacao rp tec com 2018 igor rozani e felipe muniz
6. apresentacao rp tec com 2018 igor rozani e felipe muniz6. apresentacao rp tec com 2018 igor rozani e felipe muniz
6. apresentacao rp tec com 2018 igor rozani e felipe munizMatheus de Lara Calache
 
Atlassian Confluence pela 3layer Tecnologia
Atlassian Confluence pela 3layer TecnologiaAtlassian Confluence pela 3layer Tecnologia
Atlassian Confluence pela 3layer TecnologiaMarcelo Mrack
 
3. conectando o seu data center de forma segura na aws
3. conectando o seu data center de forma segura na aws3. conectando o seu data center de forma segura na aws
3. conectando o seu data center de forma segura na awsAmazon Web Services LATAM
 
Webinar: Como obter valor comercial com Big Data
Webinar: Como obter valor comercial com Big DataWebinar: Como obter valor comercial com Big Data
Webinar: Como obter valor comercial com Big DataAmazon Web Services LATAM
 
AWS SUMMIT São Paulo - DEV02 AWS e DevOps - Explore e aproveite o melhor dos ...
AWS SUMMIT São Paulo - DEV02 AWS e DevOps - Explore e aproveite o melhor dos ...AWS SUMMIT São Paulo - DEV02 AWS e DevOps - Explore e aproveite o melhor dos ...
AWS SUMMIT São Paulo - DEV02 AWS e DevOps - Explore e aproveite o melhor dos ...Dan El Pierre Rezende
 
Construindo aplicações Cloud Native em Go
Construindo aplicações Cloud Native em GoConstruindo aplicações Cloud Native em Go
Construindo aplicações Cloud Native em GoAlvaro Viebrantz
 
JHipster - Produtividade e Maturidade em suas mãos
JHipster - Produtividade e Maturidade em suas mãosJHipster - Produtividade e Maturidade em suas mãos
JHipster - Produtividade e Maturidade em suas mãosThiago Soares
 
Rio Cloud Computing Meetup 25/01/2017 - Lançamentos do AWS re:Invent 2016
Rio Cloud Computing Meetup 25/01/2017 - Lançamentos do AWS re:Invent 2016Rio Cloud Computing Meetup 25/01/2017 - Lançamentos do AWS re:Invent 2016
Rio Cloud Computing Meetup 25/01/2017 - Lançamentos do AWS re:Invent 2016Filipe Barretto
 
Conta gratuita do Azure
Conta gratuita do AzureConta gratuita do Azure
Conta gratuita do AzureFabio Hara
 
Microsoft Azure Fundamentals | Everis - Julho-2021
Microsoft Azure Fundamentals | Everis - Julho-2021Microsoft Azure Fundamentals | Everis - Julho-2021
Microsoft Azure Fundamentals | Everis - Julho-2021Renato Groffe
 

Mais procurados (20)

Introdução à computação na nuvem e Windows Azure
Introdução à computação na nuvem e Windows AzureIntrodução à computação na nuvem e Windows Azure
Introdução à computação na nuvem e Windows Azure
 
Automatize seu processo de entrega de software com CI/CD na AWS
Automatize seu processo de entrega de software com CI/CD na AWSAutomatize seu processo de entrega de software com CI/CD na AWS
Automatize seu processo de entrega de software com CI/CD na AWS
 
TDC Transformation 2021 - Certificação AZ-900 Azure Fundamental: Conceitos, d...
TDC Transformation 2021 - Certificação AZ-900 Azure Fundamental: Conceitos, d...TDC Transformation 2021 - Certificação AZ-900 Azure Fundamental: Conceitos, d...
TDC Transformation 2021 - Certificação AZ-900 Azure Fundamental: Conceitos, d...
 
Desenvolvendo aplicações móveis na Nuvem
Desenvolvendo aplicações móveis na NuvemDesenvolvendo aplicações móveis na Nuvem
Desenvolvendo aplicações móveis na Nuvem
 
Spring Boot - Uma app do 0 a Web em 30 minutos
Spring Boot - Uma app do 0 a Web em 30 minutosSpring Boot - Uma app do 0 a Web em 30 minutos
Spring Boot - Uma app do 0 a Web em 30 minutos
 
Fim do Suporte do Windows Server 2008 e SQL Server 2008
Fim do Suporte do Windows Server 2008 e SQL Server 2008Fim do Suporte do Windows Server 2008 e SQL Server 2008
Fim do Suporte do Windows Server 2008 e SQL Server 2008
 
Bibliotecas de interface rica no jsf 2
Bibliotecas de interface rica no jsf 2Bibliotecas de interface rica no jsf 2
Bibliotecas de interface rica no jsf 2
 
DevOps: desenvolvedores e sysadmins cooperando na prática
DevOps: desenvolvedores e sysadmins cooperando na práticaDevOps: desenvolvedores e sysadmins cooperando na prática
DevOps: desenvolvedores e sysadmins cooperando na prática
 
6. apresentacao rp tec com 2018 igor rozani e felipe muniz
6. apresentacao rp tec com 2018 igor rozani e felipe muniz6. apresentacao rp tec com 2018 igor rozani e felipe muniz
6. apresentacao rp tec com 2018 igor rozani e felipe muniz
 
Atlassian Confluence pela 3layer Tecnologia
Atlassian Confluence pela 3layer TecnologiaAtlassian Confluence pela 3layer Tecnologia
Atlassian Confluence pela 3layer Tecnologia
 
ArcServe in the AWS Cloud - part II
ArcServe in the AWS Cloud - part IIArcServe in the AWS Cloud - part II
ArcServe in the AWS Cloud - part II
 
3. conectando o seu data center de forma segura na aws
3. conectando o seu data center de forma segura na aws3. conectando o seu data center de forma segura na aws
3. conectando o seu data center de forma segura na aws
 
Webinar: Como obter valor comercial com Big Data
Webinar: Como obter valor comercial com Big DataWebinar: Como obter valor comercial com Big Data
Webinar: Como obter valor comercial com Big Data
 
AWS SUMMIT São Paulo - DEV02 AWS e DevOps - Explore e aproveite o melhor dos ...
AWS SUMMIT São Paulo - DEV02 AWS e DevOps - Explore e aproveite o melhor dos ...AWS SUMMIT São Paulo - DEV02 AWS e DevOps - Explore e aproveite o melhor dos ...
AWS SUMMIT São Paulo - DEV02 AWS e DevOps - Explore e aproveite o melhor dos ...
 
Construindo aplicações Cloud Native em Go
Construindo aplicações Cloud Native em GoConstruindo aplicações Cloud Native em Go
Construindo aplicações Cloud Native em Go
 
JHipster - Produtividade e Maturidade em suas mãos
JHipster - Produtividade e Maturidade em suas mãosJHipster - Produtividade e Maturidade em suas mãos
JHipster - Produtividade e Maturidade em suas mãos
 
Rio Cloud Computing Meetup 25/01/2017 - Lançamentos do AWS re:Invent 2016
Rio Cloud Computing Meetup 25/01/2017 - Lançamentos do AWS re:Invent 2016Rio Cloud Computing Meetup 25/01/2017 - Lançamentos do AWS re:Invent 2016
Rio Cloud Computing Meetup 25/01/2017 - Lançamentos do AWS re:Invent 2016
 
Conta gratuita do Azure
Conta gratuita do AzureConta gratuita do Azure
Conta gratuita do Azure
 
Microsoft Azure Fundamentals | Everis - Julho-2021
Microsoft Azure Fundamentals | Everis - Julho-2021Microsoft Azure Fundamentals | Everis - Julho-2021
Microsoft Azure Fundamentals | Everis - Julho-2021
 
Macro Arquitetura de Software
Macro Arquitetura de SoftwareMacro Arquitetura de Software
Macro Arquitetura de Software
 

Destaque

I Reubzaet Cinop Oeb 2009v1
I Reubzaet Cinop Oeb 2009v1I Reubzaet Cinop Oeb 2009v1
I Reubzaet Cinop Oeb 2009v1Ireubzaet
 
Has Anyone Asked a Customer?
Has Anyone Asked a Customer?Has Anyone Asked a Customer?
Has Anyone Asked a Customer?Dan Armstrong
 
T Vs Everywhere Telco Asia 2010
T Vs Everywhere Telco Asia 2010T Vs Everywhere Telco Asia 2010
T Vs Everywhere Telco Asia 2010miguelvinagre
 
Most Contagious 2008
Most Contagious 2008Most Contagious 2008
Most Contagious 2008Daniel Simon
 
Univ Aizu week10 about computer
Univ Aizu week10 about  computerUniv Aizu week10 about  computer
Univ Aizu week10 about computerI M
 
Introdução ao Windows Azure - Sessão 2 (mais prática)
Introdução ao Windows Azure - Sessão 2 (mais prática)Introdução ao Windows Azure - Sessão 2 (mais prática)
Introdução ao Windows Azure - Sessão 2 (mais prática)Giovanni Bassi
 
TIC CONFIDENTIAL
TIC CONFIDENTIALTIC CONFIDENTIAL
TIC CONFIDENTIALpac4
 
MVC and Entity Framework 4
MVC and Entity Framework 4MVC and Entity Framework 4
MVC and Entity Framework 4James Johnson
 
Ceramic teapots -PMI Loyalty Program for Red Rose Te and Dare Biscuit
Ceramic teapots -PMI Loyalty Program for Red Rose Te and Dare BiscuitCeramic teapots -PMI Loyalty Program for Red Rose Te and Dare Biscuit
Ceramic teapots -PMI Loyalty Program for Red Rose Te and Dare BiscuitPMI Inc
 
Stochastic Neural Network Model: Part 1
Stochastic Neural Network Model: Part 1Stochastic Neural Network Model: Part 1
Stochastic Neural Network Model: Part 1Abhranil Das
 
Social Network
Social NetworkSocial Network
Social NetworkSaLaPaO
 
Being the best journalist is not good enough
Being the best journalist is not good enoughBeing the best journalist is not good enough
Being the best journalist is not good enoughBart Brouwers
 
Bedrijfspresentatie Inno2gether
Bedrijfspresentatie Inno2getherBedrijfspresentatie Inno2gether
Bedrijfspresentatie Inno2gethertsjopper
 

Destaque (20)

I Reubzaet Cinop Oeb 2009v1
I Reubzaet Cinop Oeb 2009v1I Reubzaet Cinop Oeb 2009v1
I Reubzaet Cinop Oeb 2009v1
 
Has Anyone Asked a Customer?
Has Anyone Asked a Customer?Has Anyone Asked a Customer?
Has Anyone Asked a Customer?
 
Term 4, Week 3, 2010
Term 4, Week 3, 2010Term 4, Week 3, 2010
Term 4, Week 3, 2010
 
T Vs Everywhere Telco Asia 2010
T Vs Everywhere Telco Asia 2010T Vs Everywhere Telco Asia 2010
T Vs Everywhere Telco Asia 2010
 
Most Contagious 2008
Most Contagious 2008Most Contagious 2008
Most Contagious 2008
 
Kic Box Pp
Kic Box PpKic Box Pp
Kic Box Pp
 
Reptiles
ReptilesReptiles
Reptiles
 
Univ Aizu week10 about computer
Univ Aizu week10 about  computerUniv Aizu week10 about  computer
Univ Aizu week10 about computer
 
Introdução ao Windows Azure - Sessão 2 (mais prática)
Introdução ao Windows Azure - Sessão 2 (mais prática)Introdução ao Windows Azure - Sessão 2 (mais prática)
Introdução ao Windows Azure - Sessão 2 (mais prática)
 
TIC CONFIDENTIAL
TIC CONFIDENTIALTIC CONFIDENTIAL
TIC CONFIDENTIAL
 
MVC and Entity Framework 4
MVC and Entity Framework 4MVC and Entity Framework 4
MVC and Entity Framework 4
 
Ceramic teapots -PMI Loyalty Program for Red Rose Te and Dare Biscuit
Ceramic teapots -PMI Loyalty Program for Red Rose Te and Dare BiscuitCeramic teapots -PMI Loyalty Program for Red Rose Te and Dare Biscuit
Ceramic teapots -PMI Loyalty Program for Red Rose Te and Dare Biscuit
 
Stochastic Neural Network Model: Part 1
Stochastic Neural Network Model: Part 1Stochastic Neural Network Model: Part 1
Stochastic Neural Network Model: Part 1
 
Social Network
Social NetworkSocial Network
Social Network
 
Being the best journalist is not good enough
Being the best journalist is not good enoughBeing the best journalist is not good enough
Being the best journalist is not good enough
 
Bedrijfspresentatie Inno2gether
Bedrijfspresentatie Inno2getherBedrijfspresentatie Inno2gether
Bedrijfspresentatie Inno2gether
 
Laura Devlin
Laura DevlinLaura Devlin
Laura Devlin
 
01 September 2010
01 September 201001 September 2010
01 September 2010
 
que lindo dia
que lindo diaque lindo dia
que lindo dia
 
IPTV Challenges
IPTV ChallengesIPTV Challenges
IPTV Challenges
 

Semelhante a LambdaDay: Backbone.js

Backbone.js nas trincheiras
Backbone.js nas trincheirasBackbone.js nas trincheiras
Backbone.js nas trincheirasLambda 3
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosHenrique Gogó
 
JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no FrontendHenrique Gogó
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseLuiz Duarte
 
KnockoutJS com ASP.NET MVC3: Utilização na vida real
KnockoutJS com ASP.NET MVC3: Utilização na vida realKnockoutJS com ASP.NET MVC3: Utilização na vida real
KnockoutJS com ASP.NET MVC3: Utilização na vida realComunidade NetPonto
 
TechDay - Sistemas WEB em Java - Rogério N. Jr.
TechDay - Sistemas WEB em Java - Rogério N. Jr.TechDay - Sistemas WEB em Java - Rogério N. Jr.
TechDay - Sistemas WEB em Java - Rogério N. Jr.Rogério Napoleão Jr.
 
Desenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-endDesenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-endGiovanny Valente
 
Meu projeto final - Neobase 2.0
Meu projeto final - Neobase 2.0Meu projeto final - Neobase 2.0
Meu projeto final - Neobase 2.0Saulo Vallory
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontMichel Ribeiro
 
Workshop Mundo Senai - Hello, Angular.js
Workshop Mundo Senai - Hello, Angular.jsWorkshop Mundo Senai - Hello, Angular.js
Workshop Mundo Senai - Hello, Angular.jsFábio Elísio
 
Apache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesApache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesCI&T
 
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)Carlos Duarte do Nascimento
 
Desenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App EngineDesenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App EngineCampus Party Brasil
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)Zeno Rocha
 
Backbone.js - Desenvolvimento de Sistemas Corporativos - UFPB - Campus IV
Backbone.js - Desenvolvimento de Sistemas Corporativos - UFPB - Campus IVBackbone.js - Desenvolvimento de Sistemas Corporativos - UFPB - Campus IV
Backbone.js - Desenvolvimento de Sistemas Corporativos - UFPB - Campus IVJoão Helis Bernardo
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryMarketing Digital ODIG
 
365on Lab Asp.Net MVC Fundamentos 01 Overview
365on Lab Asp.Net MVC Fundamentos 01 Overview365on Lab Asp.Net MVC Fundamentos 01 Overview
365on Lab Asp.Net MVC Fundamentos 01 OverviewAlexsandro Almeida
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfGabrielaMota46
 

Semelhante a LambdaDay: Backbone.js (20)

Backbone.js nas trincheiras
Backbone.js nas trincheirasBackbone.js nas trincheiras
Backbone.js nas trincheiras
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
 
JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no Frontend
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + Mongoose
 
KnockoutJS com ASP.NET MVC3: Utilização na vida real
KnockoutJS com ASP.NET MVC3: Utilização na vida realKnockoutJS com ASP.NET MVC3: Utilização na vida real
KnockoutJS com ASP.NET MVC3: Utilização na vida real
 
TechDay - Sistemas WEB em Java - Rogério N. Jr.
TechDay - Sistemas WEB em Java - Rogério N. Jr.TechDay - Sistemas WEB em Java - Rogério N. Jr.
TechDay - Sistemas WEB em Java - Rogério N. Jr.
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
 
Desenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-endDesenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-end
 
Meu projeto final - Neobase 2.0
Meu projeto final - Neobase 2.0Meu projeto final - Neobase 2.0
Meu projeto final - Neobase 2.0
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de Front
 
Workshop Mundo Senai - Hello, Angular.js
Workshop Mundo Senai - Hello, Angular.jsWorkshop Mundo Senai - Hello, Angular.js
Workshop Mundo Senai - Hello, Angular.js
 
Apache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesApache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentes
 
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
 
Desenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App EngineDesenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App Engine
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
 
Backbone.js - Desenvolvimento de Sistemas Corporativos - UFPB - Campus IV
Backbone.js - Desenvolvimento de Sistemas Corporativos - UFPB - Campus IVBackbone.js - Desenvolvimento de Sistemas Corporativos - UFPB - Campus IV
Backbone.js - Desenvolvimento de Sistemas Corporativos - UFPB - Campus IV
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
 
365on Lab Asp.Net MVC Fundamentos 01 Overview
365on Lab Asp.Net MVC Fundamentos 01 Overview365on Lab Asp.Net MVC Fundamentos 01 Overview
365on Lab Asp.Net MVC Fundamentos 01 Overview
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
 
Java e Cloud Computing
Java e Cloud ComputingJava e Cloud Computing
Java e Cloud Computing
 

Mais de 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
 

Mais de 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...
 

LambdaDay: Backbone.js

  • 1. Backbone.js nas trincheiras Giovanni Bassi Osmar Landin giovanni@lambda3.com.br osmar.landin@lambda3.com.br @giovannibassi @osmarlandin
  • 2. Agenda Porque O que é Estruturando o BackboneJS e BackboneJS projeto cenários Usando o Testando o Conclusões BackboneJS BackboneJS
  • 3. O que é Backbone.js
  • 4. Backbone.js • Componente Javascript – Pode ser usado com CoffeeScript ou TypeScript • MV* - Separação de responsabilidades entre modelo, view, e roteador (mais ou menos um MVC) • Um dos frameworks JS mais usados no mundo • Bem documentado • Open source (hospedado no github)
  • 6. BackboneJS x <algum server> • Prós – Maior responsividade da aplicação – Mais cara de aplicação, menos cara de site – Código de interface concentrado mais perto do navegador – Interfaces mais ricas • Contras – Ferramental ainda em evolução – Curva de aprendizado – Hoje ainda é mais lento para desenvolver
  • 7. Cenário • Maior responsividade da aplicação • Testabilidade • Documentação dos componentes • Estabilidade dos componentes • Rodar na internet e na intranet • Navegadores modernos • Milhares de usuários
  • 9. Separação da IG e comportamento • Uso do Backbone.js e Mustache.js, depois substituído por Handlebars (uma extensão do Mustache) • Backbone.js provê a ideia de views e templates, facilitando a manipulação da view
  • 10. View define [ 'Backbone' 'Handlebars' 'text!views/templates/AppViewTemplate.html' ], (Backbone, Handlebars, Template) -> class AppView extends Backbone.View template: Template render: -> @$el.html Handlebars.compile(@template)
  • 11. Template <section id="eventosApp"> <header>Eventos</header> </section>
  • 12. Consumidor da view require [ 'views/AppView' ], (AppView) -> appView = new AppView el:$("#app-container") appView.render()
  • 13. Separação do código da app e das bibliotecas • Uso de RequireJS para modularização (usando AMD) • Separação das pastas da aplicação entre: – Bibliotecas – Aplicação – Testes
  • 14. Estrutura de diretórios • Aplicação – Scripts (bibliotecas) – App (código da aplicação) • Models • Views – Templates • Router – AppTestes • Models • Views
  • 15. RequireJS (html) <!DOCTYPE html> <html> <head> <script data-main="App/bootstrap.js" src="Scripts/require.js"></script> </head> <body> <section id="app-container"></section> </body> </html>
  • 16. RequireJS (Bootstrap) require.config paths: jquery: '../Scripts/jquery-1.9.1' jQueryUI: '../Scripts/jquery-ui-1.10.0' Underscore: '../Scripts/underscore' Backbone: '../Scripts/backbone' Handlebars: '../Scripts/handlebars' TwitterBootstrap: '../Scripts/bootstrap' text: '../Scripts/text' shim: 'jQueryUI': deps: ['jquery'] 'Handlebars': deps: ['jquery'] exports: 'Handlebars'
  • 17. RequireJS (módulo) define [ 'Backbone' 'Handlebars' ], (Backbone, Handlebars) ->
  • 19. Backbone.js não existe sozinho • Dependência direta do Underscore (ou Lo-Dash) • Para manipulação da view utiliza jQuery (ou Zepto) – Recomendamos também o Handlebars para templates
  • 20. Roteadores (Backbone.Router) • Intercepta as urls e encaminha para um método • Cuida do histórico (back, forward, etc) • Geralmente só há um roteador na app (grande potencial para problemas se você ignorar essa regra) • Pode ficar bem grande • Geralmente passa o controle para alguma view
  • 21. http://localhost/#novo define ['jquery‘, 'Backbone‘, 'views/AppView‘, 'views/ListaEventosView‘,'views/CadastroEventoView'], ($, Backbone, AppView, ListaEventosView, CadastroEventoView) -> class router extends Backbone.Router routes: '':'home' 'novo':'criarEvento' initialize: -> appView = new AppView el:$("#app-container") appView.render() Backbone.history.start() home: -> listaEventosView = new ListaEventosView { el:$("#app-content") } listaEventosView.render() criarEvento: -> cadastroView = new CadastroEventoView el:$("#app-content") cadastroView.render()
  • 22. Views • Não é bem uma view, é mais ou menos um controller • Em geral busca os dados em algum model ou collection, e renderiza o html (com um template ou não) • Intercepta os eventos do html e se comunica com o model ou collection, que por sua vez, falam com o servidor
  • 23. View define ['jquery','Backbone','Handlebars','models/EventosCollection', 'views/ListaEventosItemView','text!views/templates/ListaEventosViewTemplate.html'], ($, Backbone, Handlebars, EventosCollection, ListaEventosItemView, Template) -> class ListaEventosView extends Backbone.View template: Template events: -> 'click #incluir-evento':'criarEvento' initialize: (options) -> @el = options.el @collection = new EventosCollection() render: -> @$el.empty() @$el.html Handlebars.compile @template @collection.fetch success: => @renderizarEventos() renderizarEventos: -> @collection.each (item) => itemView = new ListaEventosItemView {el:$("#listaEventos tbody"), model:item} itemView.render() criarEvento: -> window.location ='#novo'
  • 24. Template <tr> <td>{{Id}}</td> <td>{{Nome}}</td> <td>{{{formataData Data}}}</td> <td>{{QuantidadeVagas}}</td> </tr>
  • 25. Modelos (Backbone.Model) • Representam o modelo de negócio, e também os dados a serem exibidos/editados • Tem conexão direta com o servidor, um modelo sabe se recuperar no server • Representam uma única entidade
  • 26. Model define [ 'Backbone' ], (Backbone) -> class EventoModel extends Backbone.Model idAttribute: "Id" urlRoot:"api/eventos"
  • 27. Coleções (Backbone.Collection) • Representam uma coleção de entidades do modelo • Permitem obter diversas entidades de uma única vez, com ou sem filtros na consulta • Permite criar, excluir, atualizar entidades
  • 28. Collection define [ 'Backbone' 'models/EventoModel' ], (Backbone, EventoModel) -> class BackboneCollection extends Backbone.Collection url: '/api/eventos' model: EventoModel
  • 30. Backbone é bastante testável • Testes de unidade com diversos frameworks possíveis, como QUnit, Jasmine e outros (usamos Jasmine com Jasmine-JQuery) • Os testes não batem no server, não há necessidade de rodar o lado do servidor para os testes passarem • Faça testes de unidade! • Faça também testes de integração dirigindo o browser
  • 31. Testando a renderização da view define ['views/ListaEventosItemView'], (ListaEventosItemView) -> element = $("<div></div>") subject = null model = new Backbone.Model() model.set "Id":7 "Nome":"Evento 1" "Data":"2013-03-14T12:56:59.0934901-03:00" "QuantidadeVagas":100 describe 'Lista Eventos Item View', -> beforeEach -> subject = new ListaEventosItemView { el:element, model:model } describe 'Ao renderizar', -> beforeEach -> subject.render() it 'deve exibir o id do evento', -> expect(subject.$el.html()).toContain('7') it 'deve exibir o nome do evento', -> expect(subject.$el.html()).toContain('Evento 1') it 'deve exibir a data do evento já formatada', -> expect(subject.$el.html()).toContain('3/14/2013')
  • 32. Mockando Ajax describe 'Ao salvar o modelo com sucesso', -> beforeEach -> spyOn($, "ajax").andCallFake (parametros) -> parametros.success Id:1 Nome:"Evento 1" Data:"2013-03-14T12:56:59.0934901-03:00" QuantidadeVagas:100 it 'deve redirecionar para a listagem de eventos', -> $("#salvar", subject.el).click() expect(subject.exibirLista).toHaveBeenCalled()
  • 33. Dúvidas? Giovanni Bassi Osmar Landin giovanni@lambda3.com.br osmar.landin@lambda3.com.br @giovannibassi @osmarlandin
  • 34. Obrigado! Giovanni Bassi Osmar Landin giovanni@lambda3.com.br osmar.landin@lambda3.com.br @giovannibassi @osmarlandin

Notas do Editor

  1. $el = Um objeto Jquery (ou Zepto) cacheado para o elemento da view. Uma referência à mão para não precisar pesquisar o elemento no DOM toda hora
  2. AMD - Asynchronous Module DefinitionEspecifica um mecanismo para definição de módulos, de forma que esses módulos e suas referências possam ser carregadas assincronamente.O AMD veio do desejo de ter um formato que fosse melhor que “escrever um monte de tags script com dependências implícitas onde você precisa manualmente pedir”.
  3. O atributo data-main é um atributo especial que o RequireJS checará para iniciar o carregamento dos scripts.
  4. O jQuery não está especificado no shim porque o jQuery suporta AMD (existe a definição do módulo no arquivo jQury.js)
  5. Jasmine-Jquery = é uma extensão do Jasmine (facilita osasserts e a manioulação do HTML, CSS
  6. Um SPY faz um mock de qualquer função e rastreia as chamadas a elas e todos os parâmetros/argumentos enviados