Trabalhando com Single Page Application
description
Transcript of Trabalhando com Single Page Application
![Page 1: Trabalhando com Single Page Application](https://reader035.fdocuments.us/reader035/viewer/2022062811/56815f17550346895dcde23e/html5/thumbnails/1.jpg)
Trabalhando com Single Page ApplicationVictor Cavalcante
![Page 2: Trabalhando com Single Page Application](https://reader035.fdocuments.us/reader035/viewer/2022062811/56815f17550346895dcde23e/html5/thumbnails/2.jpg)
SPA Backbone JS
Conectando ao
ModeloCriando Views Rotas
![Page 4: Trabalhando com Single Page Application](https://reader035.fdocuments.us/reader035/viewer/2022062811/56815f17550346895dcde23e/html5/thumbnails/4.jpg)
SPA – SINGLE PAGE APPLICATION
![Page 7: Trabalhando com Single Page Application](https://reader035.fdocuments.us/reader035/viewer/2022062811/56815f17550346895dcde23e/html5/thumbnails/7.jpg)
JS com Produtividade Developer Tools jsFiddle
jQuery Underscore
CoffeeScript Grunt
Teste-Driven Development
![Page 8: Trabalhando com Single Page Application](https://reader035.fdocuments.us/reader035/viewer/2022062811/56815f17550346895dcde23e/html5/thumbnails/8.jpg)
JavaScript, qual o problema?
![Page 9: Trabalhando com Single Page Application](https://reader035.fdocuments.us/reader035/viewer/2022062811/56815f17550346895dcde23e/html5/thumbnails/9.jpg)
Single Page Applications
1 única página
Inteligência de apresentação no JS
Comunicação via Ajax RESTful
Server side
magrinho
Foco na experiência do usuário
![Page 10: Trabalhando com Single Page Application](https://reader035.fdocuments.us/reader035/viewer/2022062811/56815f17550346895dcde23e/html5/thumbnails/10.jpg)
Frameworks SPA
Backbone.JS
Ember.JS
Knockout
AngularJS Spine
Sproutcore
Cappuccino
Sammy.js
JavaScript MVC
Batman.js
![Page 11: Trabalhando com Single Page Application](https://reader035.fdocuments.us/reader035/viewer/2022062811/56815f17550346895dcde23e/html5/thumbnails/11.jpg)
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?
![Page 12: Trabalhando com Single Page Application](https://reader035.fdocuments.us/reader035/viewer/2022062811/56815f17550346895dcde23e/html5/thumbnails/12.jpg)
Manifesto da Nova Web• Menos C#/Ruby/Java/Python, mais Javascript• 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, muito mais javascript
![Page 13: Trabalhando com Single Page Application](https://reader035.fdocuments.us/reader035/viewer/2022062811/56815f17550346895dcde23e/html5/thumbnails/13.jpg)
Componentes do Backbone.js
Model
Sync
Collection History
Router Events
View
![Page 14: Trabalhando com Single Page Application](https://reader035.fdocuments.us/reader035/viewer/2022062811/56815f17550346895dcde23e/html5/thumbnails/14.jpg)
Como funciona?Model
View Collection
Router
DOM
<- Events
<- Events
Events -> E
vent
s->
![Page 15: Trabalhando com Single Page Application](https://reader035.fdocuments.us/reader035/viewer/2022062811/56815f17550346895dcde23e/html5/thumbnails/15.jpg)
DEMO
![Page 16: Trabalhando com Single Page Application](https://reader035.fdocuments.us/reader035/viewer/2022062811/56815f17550346895dcde23e/html5/thumbnails/16.jpg)
Fim!