O documento discute como dinamizar um site estático usando localStorage, Kizzy e Head.js para armazenar dados do usuário localmente, carregar scripts de forma assíncrona e manter o código limpo usando MVC e isolamento de views com Backbone.js.

1. Dinamizando um site estático
Musica.com.br
Rapidez de um site cacheado e a
interatividade de uma rede social.

2. Questões
Como implementar uma rede social com baixo custo?
Como entregar o conteúdo principal em 1o lugar?
Como manter um código limpo nessas condições?

3. Poupando o servidor
localStorage para encantar o usuário
Escopos Sessão e Lan-house
Kizzy para abstrair
Exemplos: Tornar-se fã, responder quiz...

4. localStorage e Kizzy
localStorage.setItem('nome', 'valor')
localStorage.getItem('nome')
kizzy('namespace').set('nome', 'valor')
kizzy('namespace').get('nome')
kizzy('namespace').set('nome', 'valor', 10*60*1000)
kizzy('namespace').clearExpireds()

5. Exemplo: Escopo de sessão
var Sessao = { function SessaoLista(nome) {
expire: 6*60*60*1000, this.nome = nome;
}
set:function(nome,valor) { SessaoLista.prototype = {
this.store().set(nome + '-' + all:function() {
this.cookie(), valor, this.expire); return Sessao.get(this.nome) || [];
}, },
get:function(nome) { add:function(valor) {
return this.store().get(nome + '-' + var todos = this.all();
this.cookie()) todos.push(valor);
}, Sessao.set(this.nome,todos);
cookie:function() { }
return $.cookie(sessionCookieName); // ...
}, }
store:function() {
if (!this.cookie())
return NullStore;
return kizzy('sessao');
}
// ...
};

6. Exemplo: Perguntas do quiz
function ListaQuiz(disponiveis) {
this.respondidos = new SessaoLista('quiz');
this.disponiveis = disponiveis;
}
ListaQuiz.prototype = {
addRespondido:function(id) {
this.respondidos.add(id);
},
proximo:function(){
var naoRespondidos = _.difference(this.disponiveis,
this.respondidos.all());
if( naoRespondidos.length > 0 ) {
return naoRespondidos[0];
}
return null;
}
//...
}

7. Questões
Como implementar uma rede social com baixo custo?
Como entregar o conteúdo principal em 1o lugar?
Como manter um código limpo nessas condições?

8. JavaScript assíncrono
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'meu-script.js'
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')
[0]).appendChild(script);

9. JS Realmente assíncrono
Head.js(”script1.js”, ”script2.js”)
Baixando scripts em paralelo, executando em ordem
Lidando com botões que dependem de scripts
Conteúdo principal em primeiro lugar

10. Head.js
head.js(”script.js”, function() { console.log(”carregou”) }
head.js(”s1.js”, ”s2.js”, function() { console.log(”carregou s1 e
s2 em paralelo e executou na ordem”) });
head.js(”s1.js”).js(”s2.js”);
head.ready(function() { console.log(”carregou s1 e s2 em
paralelo e executou em paralelo”) });

11. Lidando com Facebook
head.js(”global.js”, ”artista.js”, function() {
head.js(”facebook.js”).js(”twitter.js”);
});

12. Questões
Como implementar uma rede social com baixo custo?
Como entregar o conteúdo principal em 1o lugar?
Como manter um código limpo nessas condições?

13. Mantendo código limpo
Backbone.js
Underscore.js
Jasmine

14. Backbone.js
MVC no JavaScript
Valeu a pena?
Isolamento de views
Bind de eventos

15. Isolamento de views
var AlbunsRelacionadosView = Backbone.View.extend({
events: {
"click li.left": ”cliqueAlbumEsquerdo",
"click li.right": "cliqueAlbumDireito",
"click .setas-navegacao .prev": "cliqueSetaEsquerda",
"click .setas-navegacao .next": "cliqueSetaDireita",
"click li.middle": "visitarAlbum"
},
// …
});
new AlbunsRelacionadosView({el: $('.albuns-relacionados')});

16. Bind de Eventos
var Login = {
entrou:function() {
//..
this.trigger('entrou');
}
}
_.extend(Login, Backbone.Events);
Login.on('entrou',function(){
console.log("Usuario acabou de se logar");
});
Login.on('atualizado',function(){
console.log("Dados do usuario foram atualizados");
});

17. Questões
Como economizar hardware em uma rede social?
Como entregar o conteúdo principal em 1o lugar?
Como manter um código limpo nessas condições?
O que mais o Head.js me oferece?

18. Questões
Como implementar uma rede social com baixo custo?
Como entregar o conteúdo principal em 1o lugar?
Como manter um código limpo nessas condições?
O que mais o Head.js me oferece?

19. Mais do head.js
Classes CSS por funcionalidade:
webkit root-section js gradient rgba opacity textshadow
multiplebgs boxshadow borderimage borderradius
cssreflections csstransforms csstransitions
fontface domloaded w-1300 lt-1280 lt-1440 lt-1680 lt-1920
Habilita tags HTML5 em todos os browsers:
Article, footer, aside...

20. Dúvidas e comentários

21. Mantenha contato
timotta@gmail.com
@timotta
http://programandosemcafeina.blogspot.com