TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
-
Upload
andre-baltieri -
Category
Technology
-
view
174 -
download
0
Transcript of TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
REAL-TIME WEB APPSCOM ANGULARJS E FIREBASE
• Microsoft MVP – ASP.NET/IIS• Trabalha com Desenvolvimento Web desde 2003• Experiência em projetos de grande porte nacionais e internacionais• Criador do aspnet{cast} – http://bity.ly/aspnetcast• Atualmente trabalha como consultor e ministra treinamentos• http://andrebaltieri.net/
Sobre
• Instagram feito com AngularJs e Firebase, utilizando autenticação com Facebook
Exemplo
• Antes de começar...• Como funciona uma aplicação convencional?• Como funcionam as aplicações conectadas?• Real-time no cenário SPA
Aplicações Conectadas?
• Sigla para Single Page Application• Aplicação carregada uma única vez• Faz requisições apenas dos dados• Gera o HTML no cliente• Fácil manipulação de DOM• Só HTML, CSS e JavaScript
SPA
• Backend• ASP.NET e SignalR• NodeJs e Socket.io• Firebase• Entre outros...
• Frontend• AngularJs• Backbone• EmberJs• Entre outros...
Alternativas
• Todo usuário estará conectado a minha aplicação?• E ao meu banco de dados?• Preciso de uma conexão para cada usuário?• Posso ter conteúdo Real Time sem SPA?
Então...
• NoSQL mantido pela Google• API integrada• Three-way Binding• Autenticação Integrada• Publicação da Aplicação• Pago
Firebase
• Só pode ser utilizado via “firebase.com”• Preço pode ser alto• Material ainda é pobre
Desvantagens do Firebase
• Framework MV* mantido pela Google• Possui quase todas as funcionalidades necessárias integradas• Muito material na internet
AngularJs
• Em aplicações grandes o bixo pega!!!• Não tem AMD por padrão• Renderização dos componentes na tela requer cuidado• AngularJs 2 será bem diferente!
Desvantagens do AngularJs
• Criando uma aplicação• Executando um POST• Executando um GET
DEMO: Iniciando com Firebase
• Criando a aplicação• Instalando os pacotes• Criando o Index.html
DEMO: Iniciando a aplicação
• Modularizando• Definindo as rotas• Configurando a aplicação
DEMO: Iniciando com AngularJs
• Autenticando com Facebook• Fazendo logout
DEMO: Autenticação
• Exibindo os posts na tela• Postando uma nova imagem• Recebendo notificações do servidor
DEMO: Trabalhando com Firebase
• firebase-tools e firebase init• Publicando a aplicação
DEMO: Publicacão
OBRIGADO!
• E-mail: [email protected]• Site: http://andrebaltieri.net
Treinamentos online ao vivo!Assinem o site
Contato