BackboneJS - Speaker Deck

Slide 1

Slide 1 text

@renanvalentin

Slide 2

Slide 2 text

Aplicações complexas...

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

E agora, Arnaldo?

Slide 5

Slide 5 text

Let’s BREAK your code into small pieces!

Slide 6

Slide 6 text

model – view – (controller, presenter, etc.)

Slide 7

Slide 7 text

Como o Backbone funciona?

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Backbone.Model • Representa uma entidade retornada pelo servidor. • Responsável pelas conversões, validações, propriedades computadas, controles de acesso. • Acesso as propriedades através de get/set.

Slide 11

Slide 11 text

Criando Model Usando ele

Slide 12

Slide 12 text

Backbone.Collection • Uma coleção de modelos. • Você pode ser notificado quando novos itens são adicionados ou removidos da lista através dos eventos “add”, “remove”, “reset”. • Recuperar uma coleção de dados do servidor através do método .fetch(). • Acesso aos métodos do underscore, ex: collection.sortBy.

Slide 13

Slide 13 text

Criando Collection Usando collection

Slide 14

Slide 14 text

Backbone.View • Não contém marcação HTML da sua aplicação e sim a lógica de apresentação entre os dados do modelo para o usuário. • Pode ser usado com qualquer template engine(underscore, mustache, etc.). • Você pode se inscrever no evento “change” do modelo, para atualizar a view sempre que o mesmo sofrer alterações.

Slide 15

Slide 15 text

Criando View

Slide 16

Slide 16 text

Templates

Slide 17

Slide 17 text

NOOOOOOOOOOOOOOOOOOOOOOOOOOO!

Slide 18

Slide 18 text

Templates

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Backbone.Router • Suporte History API do HTML5 com fallback para hashes (#/home). • Permite disparar eventos na aplicação sem alterar url.

Slide 21

Slide 21 text

Backbone.Router

Slide 22

Slide 22 text

Backbone.Events • Funciona como inversão de controle. Ao invés de ter funções injetadas dentro das chamadas dos métodos, você pode classes observando determinados eventos.

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Backbone.Events

Slide 25

Slide 25 text

Testes • Garantir que os retornos dos métodos estejam de acordo com as expectativas. • Isso permite que os desenvolvedores alterem o código com mais confiança, reduzindo a preocupação de quebrar algo em produção.

Slide 26

Slide 26 text

Tools

Slide 27

Slide 27 text

Exemplos

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Vale a pena conferir:

Slide 34

Slide 34 text

Links: • http://backbonejs.org/ • http://addyosmani.github.io/backbone-fundamentals/ • http://www.anselmeit.com/2011/05/o-que-e-teste-unitario.html

Slide 35

Slide 35 text

MUITO OBRIGADO !!! @renanvalentin | [email protected]