JavaScript Sexy com jQuery, Underscore e Backbone

JavaScript Sexy comjQuery, Underscore & BackBone Leo Balter - Rio.JS

jQueryA biblioteca que todos já conhecem mas parece que falta algo...

jQuery

jQuery• Manipulação de Dom• Ajax• Animações• Eventos• Faz tudo isso de forma simples e rápida

Apenas uma biblioteca

Inversão deControle

Uma biblioteca não teminversão de controle!

Mas o jQuery...

Mas o jQuery...• Não cria estrutura para suas aplicações JS (não é um framework)

Mas o jQuery...• Não cria estrutura para suas aplicações JS (não é um framework)• Isso é ótimo para ‘scripts’ pequenos

Mas o jQuery...• Não cria estrutura para suas aplicações JS (não é um framework)• Isso é ótimo para ‘scripts’ pequenos• A estrutura frontend pode precisar escalar e

Mas o jQuery...• Não cria estrutura para suas aplicações JS (não é um framework)• Isso é ótimo para ‘scripts’ pequenos• A estrutura frontend pode precisar escalar e• “omg! uma sopa de seletores e callbacks???”

O que o jQuery não faz

O que o jQuery não faz• Estrutura do seu código JavaScript

O que o jQuery não faz• Estrutura do seu código JavaScript• Sistema de templates (jQuery Template é um addon)

O que o jQuery não faz• Estrutura do seu código JavaScript• Sistema de templates (jQuery Template é um addon)• CRUD

O que o jQuery não faz• Estrutura do seu código JavaScript• Sistema de templates (jQuery Template é um addon)• CRUD• Estrutura de comunicação

O que o jQuery não faz• Estrutura do seu código JavaScript• Sistema de templates (jQuery Template é um addon)• CRUD• Estrutura de comunicação• ... tudo que um framework deveria fazer...

Underscore O seu cinto de utilidades JS

Underscore ou _

Underscore ou _• _ < 4KB

Underscore ou _• _ < 4KB• Também não é um framework

Underscore ou _• _ < 4KB• Também não é um framework• Trás ao JavaScript várias funcionalidades (60 métodos)

Underscore ou _• _ < 4KB• Também não é um framework• Trás ao JavaScript várias funcionalidades (60 métodos)• Sem extender objetos nativos (vide Prototype.js) e sem aumentar o escopo global

_ é flexível

_ é flexível• Você pode utilizar ele com qualquer outra biblioteca JS

_ é flexível• Você pode utilizar ele com qualquer outra biblioteca JS• Pode estilizar seu código em formas funcionais ou orientadas a objetos

_ é flexível• Você pode utilizar ele com qualquer outra biblioteca JS• Pode estilizar seu código em formas funcionais ou orientadas a objetos• Pode criar corrente de métodos (ou não)

O retorno é: [2, 4, 6]

No modo OO podemosutilizar corrente de métodos com o .chain()

Corrente(não é de email)

Corrente(não é de email) O value encerra a corrente retornando o valor ﬁnal

Além do _.map

Além do _.map• Coleções: _.each, _.select, _.reduce, _.detect, _.reject, _.sortBy, _.include, _.groupBy ...

Além do _.map• Coleções: _.each, _.select, _.reduce, _.detect, _.reject, _.sortBy, _.include, _.groupBy ...• Utilitários de funções: _.bind, _.bindAll, _.delay, _.memoize, _.defer, _.once, _.after ...

Além do _.map• Coleções: _.each, _.select, • Utilitários de objetos: _.reduce, _.detect, _.reject, _.keys, _.values, _.extend, _.sortBy, _.include, _.defaults, _.clone, _.tap ... _.groupBy ...• Utilitários de funções: _.bind, _.bindAll, _.delay, _.memoize, _.defer, _.once, _.after ...

Além do _.map• Coleções: _.each, _.select, • Utilitários de objetos: _.reduce, _.detect, _.reject, _.keys, _.values, _.extend, _.sortBy, _.include, _.defaults, _.clone, _.tap ... _.groupBy ... • Tipos e valores: _.isEmpty,• Utilitários de funções: _.isFunction, _.isString, _.bind, _.bindAll, _.delay, _.isNaN, _.isRegExp ... _.memoize, _.defer, _.once, _.after ...

Além do _.map• Coleções: _.each, _.select, • Utilitários de objetos: _.reduce, _.detect, _.reject, _.keys, _.values, _.extend, _.sortBy, _.include, _.defaults, _.clone, _.tap ... _.groupBy ... • Tipos e valores: _.isEmpty,• Utilitários de funções: _.isFunction, _.isString, _.bind, _.bindAll, _.delay, _.isNaN, _.isRegExp ... _.memoize, _.defer, _.once, _.after ... • Utilitários: _.times, _.template, _.noConﬂict...

_.template

Backbone.JS Além do Jardim de Infância

Agora sim um Framework!

Agora sim um Framework!• Estrutura MVC

Agora sim um Framework!• Estrutura MVC• Backbone tem < 4KB!

Agora sim um Framework!• Estrutura MVC• Backbone tem < 4KB!• RESTful CRUD

Agora sim um Framework!• Estrutura MVC• Backbone tem < 4KB!• RESTful CRUD• Aplicativos em uma única página! (gmail fastfood)

Agora sim um Framework!• Estrutura MVC• Backbone tem < 4KB!• RESTful CRUD• Aplicativos em uma única página! (gmail fastfood)• Requer Underscore.js e se integra com o jQuery (e JSON2)

MVC do Backbone

MVC do Backbone• Model

MVC do Backbone• Model• View

MVC do Backbone• Model• View• Router

MVC do Backbone• Model• View• Router• Collections

Backbone.Model

Backbone.View

Backbone.Router

Backbone.Collections

Além da estrutura

Backbone.events

Backbone.events• Manipula eventos customizados anexados a um objeto

Backbone.events• Manipula eventos customizados anexados a um objeto• “all” se aplica a qualquer evento (marcados com essa classe

Backbone.sync

Backbone.sync• Classe para gravação e sincronismo com o servidor

Backbone.sync• Classe para gravação e sincronismo com o servidor• Baseado nos modelos deﬁnidos

Backbone.sync• Classe para gravação e sincronismo com o servidor• Baseado nos modelos deﬁnidos• CRUD pronto

Backbone.sync• Classe para gravação e sincronismo com o servidor• Baseado nos modelos deﬁnidos• CRUD pronto• Envio e Recebimento com estrutura JSON por Ajax

Exemplos:http://documentcloud.github.com/backbone/examples/todos/index.html ou apenas: http://minim.in/PG

Vantagens de umJavascript Sexy

• totalmente agnóstico em relação à linguagem do servidor (whatever como todo bom Frontend deve se comportar).

• totalmente agnóstico em relação à linguagem do servidor (whatever como todo bom Frontend deve se comportar).• bem documentado

• totalmente agnóstico em relação à linguagem do servidor (whatever como todo bom Frontend deve se comportar).• bem documentado• menos spaghetti code

• totalmente agnóstico em relação à linguagem do servidor (whatever como todo bom Frontend deve se comportar).• bem documentado• menos spaghetti code• menor carga nos servidores sem montar um frontend pesadão

Códigos• http://jquery.com• http://documentcloud.github.com/underscore/• http://documentcloud.github.com/backbone/#• https://github.com/douglascrockford/JSON-js

Referências e Fontes• @documentcloud• http://backbonetutorials.com/• https://groups.google.com/forum/#!forum/ backbonejs• http://ryandotsmith.heroku.com/2010/10/a- backbone-js-demo-app-sinatra-backend.html

Alguns Exemplos Utilizados aqui http://minim.in/PH

Muito Obrigado! @leobalter leonardo.balter@gmail.com

JavaScript Sexy com jQuery, Underscore e Backbone

by Leonardo Balter

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 6

Statistics

JavaScript Sexy com jQuery, Underscore e Backbone Presentation Transcript

http://paper.li	3
https://twitter.com	2
http://us-w1.rockmelt.com	1