SlideShare uma empresa Scribd logo
1 de 21
Dinamizando um site estático


             Musica.com.br
    Rapidez de um site cacheado e a
    interatividade de uma rede social.




                       
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?




                            
Poupando o servidor

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




                             
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()




                                  
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');
         }
         // ...
};
                                                          
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;
   }
   //...
}



                                              
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?




                            
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);




                                        
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




                                 
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”) });




                                  
Lidando com Facebook

head.js(”global.js”, ”artista.js”, function() {
      head.js(”facebook.js”).js(”twitter.js”);
});




                                     
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?




                            
Mantendo código limpo


     Backbone.js
     Underscore.js
     Jasmine



               
Backbone.js


    MVC no JavaScript
    Valeu a pena?
    Isolamento de views
    Bind de eventos




                       
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')});



                                    
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");
    });
                                     
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?




                               
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?




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




                                  
Dúvidas e comentários




              
Mantenha contato

timotta@gmail.com

@timotta

http://programandosemcafeina.blogspot.com




                      

Mais conteúdo relacionado

Mais procurados

Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017 Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017 Luis Gustavo Almeida
 
JavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamentoJavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamentoRicardo Valeriano
 
Como conectar programas em linguagem java a bases de dados
Como conectar programas em linguagem java  a bases de dadosComo conectar programas em linguagem java  a bases de dados
Como conectar programas em linguagem java a bases de dadosHenrique Fernandes
 
Manipulando Bancos de Dados com JDBC
Manipulando Bancos de Dados com JDBCManipulando Bancos de Dados com JDBC
Manipulando Bancos de Dados com JDBCAntonio Passos
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão GeralKaio Valente
 
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.Leonardo Soares
 
Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP Luis Gustavo Almeida
 
Minicurso: Desenvolvimento na velocidade da luz com Ruby on Rails
Minicurso: Desenvolvimento na velocidade da luz com Ruby on RailsMinicurso: Desenvolvimento na velocidade da luz com Ruby on Rails
Minicurso: Desenvolvimento na velocidade da luz com Ruby on RailsLuiz Carvalho
 
Dicas para Interfaces Performáticas no seu App Android
Dicas para Interfaces Performáticas no seu App AndroidDicas para Interfaces Performáticas no seu App Android
Dicas para Interfaces Performáticas no seu App AndroidUbiratan Soares
 
Programação web ii aulas 05 e 06
Programação web ii   aulas 05 e 06Programação web ii   aulas 05 e 06
Programação web ii aulas 05 e 06Yuri Bispo
 
Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webBackbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webHenrique Gogó
 
Acesso a banco de dados com JDBC
Acesso a banco de dados com JDBCAcesso a banco de dados com JDBC
Acesso a banco de dados com JDBCEduardo Mendes
 
DELPHI & MySQL - September 2004
DELPHI & MySQL - September 2004DELPHI & MySQL - September 2004
DELPHI & MySQL - September 2004Michel Alves
 
Aula 01 PHP+MySQL - LabMM4
Aula 01 PHP+MySQL - LabMM4Aula 01 PHP+MySQL - LabMM4
Aula 01 PHP+MySQL - LabMM4Carlos Santos
 
Desenvolvimento em .Net - A Framework e o Visual Studio
Desenvolvimento em .Net - A Framework e o Visual StudioDesenvolvimento em .Net - A Framework e o Visual Studio
Desenvolvimento em .Net - A Framework e o Visual StudioVitor Silva
 

Mais procurados (20)

Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017 Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017
 
JavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamentoJavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamento
 
Como conectar programas em linguagem java a bases de dados
Como conectar programas em linguagem java  a bases de dadosComo conectar programas em linguagem java  a bases de dados
Como conectar programas em linguagem java a bases de dados
 
Manipulando Bancos de Dados com JDBC
Manipulando Bancos de Dados com JDBCManipulando Bancos de Dados com JDBC
Manipulando Bancos de Dados com JDBC
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
 
Python e bancos NoSQL
Python e bancos NoSQLPython e bancos NoSQL
Python e bancos NoSQL
 
JDBC
JDBCJDBC
JDBC
 
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
 
Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP
 
Minicurso: Desenvolvimento na velocidade da luz com Ruby on Rails
Minicurso: Desenvolvimento na velocidade da luz com Ruby on RailsMinicurso: Desenvolvimento na velocidade da luz com Ruby on Rails
Minicurso: Desenvolvimento na velocidade da luz com Ruby on Rails
 
Dicas para Interfaces Performáticas no seu App Android
Dicas para Interfaces Performáticas no seu App AndroidDicas para Interfaces Performáticas no seu App Android
Dicas para Interfaces Performáticas no seu App Android
 
Programação web ii aulas 05 e 06
Programação web ii   aulas 05 e 06Programação web ii   aulas 05 e 06
Programação web ii aulas 05 e 06
 
Implementação de
Implementação de Implementação de
Implementação de
 
Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webBackbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações web
 
Ecommerce, mais simples do que parece
Ecommerce, mais simples do que pareceEcommerce, mais simples do que parece
Ecommerce, mais simples do que parece
 
Acesso a banco de dados com JDBC
Acesso a banco de dados com JDBCAcesso a banco de dados com JDBC
Acesso a banco de dados com JDBC
 
DELPHI & MySQL - September 2004
DELPHI & MySQL - September 2004DELPHI & MySQL - September 2004
DELPHI & MySQL - September 2004
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
Aula 01 PHP+MySQL - LabMM4
Aula 01 PHP+MySQL - LabMM4Aula 01 PHP+MySQL - LabMM4
Aula 01 PHP+MySQL - LabMM4
 
Desenvolvimento em .Net - A Framework e o Visual Studio
Desenvolvimento em .Net - A Framework e o Visual StudioDesenvolvimento em .Net - A Framework e o Visual Studio
Desenvolvimento em .Net - A Framework e o Visual Studio
 

Semelhante a Dinamizando um site estático com JavaScript

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ó
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o JavascriptMichel Ribeiro
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.jsGiovanni Bassi
 
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
 
JS Experience 2017 - Javascript Funcional
JS Experience 2017 - Javascript FuncionalJS Experience 2017 - Javascript Funcional
JS Experience 2017 - Javascript FuncionaliMasters
 
Java - Introdução a banco de dados
Java - Introdução a banco de dadosJava - Introdução a banco de dados
Java - Introdução a banco de dadosSérgio Souza Costa
 
Grails parte 1 - introdução
Grails   parte 1 - introduçãoGrails   parte 1 - introdução
Grails parte 1 - introduçãoJosino Rodrigues
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfGabrielaMota46
 
Programação funcional em JavaScript: como e por quê?
Programação funcional em JavaScript: como e por quê?Programação funcional em JavaScript: como e por quê?
Programação funcional em JavaScript: como e por quê?Arthur Xavier
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersHarlley Oliveira
 
Evoluindo a experiência web no SporTV Play com React
Evoluindo a experiência web no SporTV Play com ReactEvoluindo a experiência web no SporTV Play com React
Evoluindo a experiência web no SporTV Play com ReactGuilherme Garnier
 
Desvendando as ferramentas e serviços para o desenvolvedor Android
Desvendando as ferramentas e serviços para o desenvolvedor AndroidDesvendando as ferramentas e serviços para o desenvolvedor Android
Desvendando as ferramentas e serviços para o desenvolvedor Androidjoaobmonteiro
 
Simplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na práticaSimplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na práticaMarianna Cruz Teixeira
 
Html5 storage api
Html5 storage apiHtml5 storage api
Html5 storage apiSuissa
 

Semelhante a Dinamizando um site estático com JavaScript (20)

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
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
 
Introdução ao JQuery e AJAX
Introdução ao JQuery e AJAXIntrodução ao JQuery e AJAX
Introdução ao JQuery e AJAX
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.js
 
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
 
JS Experience 2017 - Javascript Funcional
JS Experience 2017 - Javascript FuncionalJS Experience 2017 - Javascript Funcional
JS Experience 2017 - Javascript Funcional
 
Wicket 2008
Wicket 2008Wicket 2008
Wicket 2008
 
Java - Introdução a banco de dados
Java - Introdução a banco de dadosJava - Introdução a banco de dados
Java - Introdução a banco de dados
 
Grails parte 1 - introdução
Grails   parte 1 - introduçãoGrails   parte 1 - introdução
Grails parte 1 - introdução
 
Java e Cloud Computing
Java e Cloud ComputingJava e Cloud Computing
Java e Cloud Computing
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
 
Programação funcional em JavaScript: como e por quê?
Programação funcional em JavaScript: como e por quê?Programação funcional em JavaScript: como e por quê?
Programação funcional em JavaScript: como e por quê?
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 
Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
 
Realtime com node.js e socket.io
Realtime com node.js e socket.ioRealtime com node.js e socket.io
Realtime com node.js e socket.io
 
Evoluindo a experiência web no SporTV Play com React
Evoluindo a experiência web no SporTV Play com ReactEvoluindo a experiência web no SporTV Play com React
Evoluindo a experiência web no SporTV Play com React
 
Desvendando as ferramentas e serviços para o desenvolvedor Android
Desvendando as ferramentas e serviços para o desenvolvedor AndroidDesvendando as ferramentas e serviços para o desenvolvedor Android
Desvendando as ferramentas e serviços para o desenvolvedor Android
 
Simplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na práticaSimplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na prática
 
Html5 storage api
Html5 storage apiHtml5 storage api
Html5 storage api
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
 

Mais de Tiago Albineli Motta

Challenges and research for a real-time recommendation at OLX
Challenges and research for a real-time recommendation at OLXChallenges and research for a real-time recommendation at OLX
Challenges and research for a real-time recommendation at OLXTiago Albineli Motta
 
Inteligência Artificial: Da ciência da computação à ciência de dados
Inteligência Artificial: Da ciência da computação à ciência de dadosInteligência Artificial: Da ciência da computação à ciência de dados
Inteligência Artificial: Da ciência da computação à ciência de dadosTiago Albineli Motta
 
Machine Learning no dia a dia do desenvolvedor (Atualizado)
Machine Learning no dia a dia do desenvolvedor (Atualizado)Machine Learning no dia a dia do desenvolvedor (Atualizado)
Machine Learning no dia a dia do desenvolvedor (Atualizado)Tiago Albineli Motta
 
Machine Learning no dia a dia do desenvolvedor
Machine Learning no dia a dia do desenvolvedorMachine Learning no dia a dia do desenvolvedor
Machine Learning no dia a dia do desenvolvedorTiago Albineli Motta
 
Machine Learning e experimentos online para evitar o cancelamento no GloboPlay
Machine Learning e experimentos online para evitar o cancelamento no GloboPlayMachine Learning e experimentos online para evitar o cancelamento no GloboPlay
Machine Learning e experimentos online para evitar o cancelamento no GloboPlayTiago Albineli Motta
 
A ciência de dados por traz de sistemas de recomendação
A ciência de dados por traz de sistemas de recomendaçãoA ciência de dados por traz de sistemas de recomendação
A ciência de dados por traz de sistemas de recomendaçãoTiago Albineli Motta
 
Recomendação de ponta a ponta na Globo.com
Recomendação de ponta a ponta na Globo.comRecomendação de ponta a ponta na Globo.com
Recomendação de ponta a ponta na Globo.comTiago Albineli Motta
 
Testes unitários e de integração: Quando e Porque
Testes unitários e de integração: Quando e PorqueTestes unitários e de integração: Quando e Porque
Testes unitários e de integração: Quando e PorqueTiago Albineli Motta
 

Mais de Tiago Albineli Motta (18)

Multi Armed Bandit
Multi Armed BanditMulti Armed Bandit
Multi Armed Bandit
 
Challenges and research for a real-time recommendation at OLX
Challenges and research for a real-time recommendation at OLXChallenges and research for a real-time recommendation at OLX
Challenges and research for a real-time recommendation at OLX
 
Inteligência Artificial: Da ciência da computação à ciência de dados
Inteligência Artificial: Da ciência da computação à ciência de dadosInteligência Artificial: Da ciência da computação à ciência de dados
Inteligência Artificial: Da ciência da computação à ciência de dados
 
Machine Learning no dia a dia do desenvolvedor (Atualizado)
Machine Learning no dia a dia do desenvolvedor (Atualizado)Machine Learning no dia a dia do desenvolvedor (Atualizado)
Machine Learning no dia a dia do desenvolvedor (Atualizado)
 
Machine Learning no dia a dia do desenvolvedor
Machine Learning no dia a dia do desenvolvedorMachine Learning no dia a dia do desenvolvedor
Machine Learning no dia a dia do desenvolvedor
 
Experimentation anti patterns
Experimentation anti patternsExperimentation anti patterns
Experimentation anti patterns
 
Machine Learning e experimentos online para evitar o cancelamento no GloboPlay
Machine Learning e experimentos online para evitar o cancelamento no GloboPlayMachine Learning e experimentos online para evitar o cancelamento no GloboPlay
Machine Learning e experimentos online para evitar o cancelamento no GloboPlay
 
A ciência de dados por traz de sistemas de recomendação
A ciência de dados por traz de sistemas de recomendaçãoA ciência de dados por traz de sistemas de recomendação
A ciência de dados por traz de sistemas de recomendação
 
xCLiMF
xCLiMFxCLiMF
xCLiMF
 
Rastros digitais
Rastros digitaisRastros digitais
Rastros digitais
 
Big data
Big dataBig data
Big data
 
Recomendação de ponta a ponta na Globo.com
Recomendação de ponta a ponta na Globo.comRecomendação de ponta a ponta na Globo.com
Recomendação de ponta a ponta na Globo.com
 
Recomendação na Globo.com
Recomendação na Globo.comRecomendação na Globo.com
Recomendação na Globo.com
 
Otimizando seu projeto Rails
Otimizando seu projeto RailsOtimizando seu projeto Rails
Otimizando seu projeto Rails
 
Meta-programacao em python
Meta-programacao em pythonMeta-programacao em python
Meta-programacao em python
 
Testes unitários e de integração: Quando e Porque
Testes unitários e de integração: Quando e PorqueTestes unitários e de integração: Quando e Porque
Testes unitários e de integração: Quando e Porque
 
Redis na Prática
Redis na PráticaRedis na Prática
Redis na Prática
 
Escalando Sites com Nginx
Escalando Sites com NginxEscalando Sites com Nginx
Escalando Sites com Nginx
 

Dinamizando um site estático com JavaScript

  • 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...