emberjs - primeiros passos!

Download EmberJS - Primeiros Passos!

Post on 28-Nov-2014

531 views

Category:

Software

5 download

Embed Size (px)

DESCRIPTION

Palestra de introdução ao EmberJS. Objetivo de serem realizadas em especial, nas faculdades de Computação e Sistemas.

TRANSCRIPT

  • 1. EmberJS - Primeiros Passos por: Anderson de Castro
  • 2. AGENDA 1. O que ? 2. Conceitos Bsicos 3. Templates 4. Demo
  • 3. A framework for creating ambitious web applications
  • 4. Responsveis...
  • 5. Conceitos Bsicos
  • 6. TEMPLATES Onde ficar a interface da aplicao.
  • 7. ROUTER Responsvel por gerencia o estado do aplicativo. App.Router.map(function(){ this.resource(usuarios); this.resource(contato); }); http://minhaaplicacao.com/#/usuarios http://minhaaplicacao.com/#/contato
  • 8. COMPONENTS Tag HTML customizada. til para criar controles reutilizveis na aplicao. Meu Avatar {{twitter-foto}}
  • 9. MODELS Objeto que guarda o estado de persistncia. apresentado para o usurio atravs dos templates. App.Pessoa = DS.Model.extend({ nome: DS.attr(string), email: DS.attr(string) });
  • 10. ROUTE um objeto que diz ao Template qual objeto ser apresentado. App.IndexRoute = Ember.Route.extend({ model: function(){ return $.getJSON(https://api.github.com/repos/emberjs/ember.js/pulls'); } });
  • 11. CONTROLLERS Objeto que armazena o estado da aplicao. Propriedades podem ser recuperadas e transmitidas ao Template. App.PessoaController = Ember.ObjectController.extend({ adicionar: function(){ console.log(adicionando nova pessoa...); }, editando: false });
  • 12. VIEWS Obs.: - Precisa sofisticar o tratamento de eventos de usurio? - Precisa criar componentes reutilizveis? Ento, USEMOS uma View!
  • 13. VIEWS NO HTML: NO JS: var view = Ember.View.create({ templateName: diga-ola, nome: Maria Rita });
  • 14. VIEWS No HBS {{#view App.Clicavel}} Pode clicar aqui! {{/view}} No JS App.Clicavel = Ember.View.extend({ click: function(evt){ alert(Voc acabou de clicar aqui!); } });
  • 15. DEMONSTRAO - Aplicao que cadastre pessoas e suas redes sociais. - Apresentar listagem desses com seus respectivos avatares e usurios de contas.
  • 16. Referncias: Site Oficial: http://emberjs.com Site brasileiro: http://emberjs.com.br Grupo: https://www.fb.com/groups/EmberJS.Brasil
  • 17. OBRIGADO!