SlideShare uma empresa Scribd logo
1 de 18
Baixar para ler offline
EmberJS - Primeiros Passos
por: Anderson de Castro
AGENDA
1. O que é?
2. Conceitos Básicos
3. Templates
4. Demo
EmberJS - Primeiros Passos!
“A framework for creating
ambitious web applications”
Responsáveis...
Conceitos Básicos
TEMPLATES
Onde ficará a interface da aplicação.
<script type=”text/x-handlebars” id=”application”>
Hello EmberJS!
{{outlet}}
</script>
ROUTER
Responsável por gerencia o estado do
aplicativo.
App.Router.map(function(){
this.resource(“usuarios”);
this.resource(“contato”);
});
http://minhaaplicacao.com/#/usuarios
http://minhaaplicacao.com/#/contato
COMPONENTS
Tag HTML customizada. Útil para criar
controles reutilizáveis na aplicação.
<script type=”text/x-handlebars” id=”components/twitter-foto”>
<img src=”http://www.gravatar.com/avatar/email_hexMD5?s=200”
alt=””>
</script>
Meu Avatar
{{twitter-foto}}
MODELS
Objeto que guarda o estado de persistência. É
apresentado para o usuário através dos
templates.
App.Pessoa = DS.Model.extend({
nome: DS.attr(‘string’),
email: DS.attr(‘string’)
});
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');
}
});
CONTROLLERS
Objeto que armazena o estado da aplicação.
Propriedades podem ser recuperadas e
transmitidas ao Template.
App.PessoaController = Ember.ObjectController.extend({
adicionar: function(){ console.log(“adicionando nova pessoa...”); },
editando: false
});
VIEWS
Obs.:
- Precisa sofisticar o tratamento de eventos de
usuário?
- Precisa criar componentes reutilizáveis?
Então, USEMOS uma View!
VIEWS
NO HTML:
<script type=”text/x-handlebars” id=”diga-ola”>
Como vai {{view.nome}}
</script>
NO JS:
var view = Ember.View.create({
templateName: ‘diga-ola’,
nome: ‘Maria Rita’
});
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!”);
}
});
DEMONSTRAÇÃO
- Aplicação que cadastre pessoas e suas
redes sociais.
- Apresentar listagem desses com seus
respectivos avatares e usuários de contas.
Referências:
Site Oficial: http://emberjs.com
Site brasileiro: http://emberjs.com.br
Grupo: https://www.fb.com/groups/EmberJS.Brasil
OBRIGADO!

Mais conteúdo relacionado

Semelhante a EmberJS - Primeiros Passos!

PHP e o Desenvolvimento Mobile Web - PHPhederal
PHP e o Desenvolvimento Mobile Web - PHPhederalPHP e o Desenvolvimento Mobile Web - PHPhederal
PHP e o Desenvolvimento Mobile Web - PHPhederalBruno Fernandes "PorKaria"
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Rodrigo Urubatan
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Wennder Santos
 
AngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IOAngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IODouglas Lira
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Frameworkelliando dias
 
Google Analytics Reporting API: Bebendo água direto da fonte
Google Analytics Reporting API: Bebendo água direto da fonteGoogle Analytics Reporting API: Bebendo água direto da fonte
Google Analytics Reporting API: Bebendo água direto da fonteJohann Vivot
 
Mini-curso RubyOnRails CESOL
Mini-curso RubyOnRails CESOLMini-curso RubyOnRails CESOL
Mini-curso RubyOnRails CESOLtarginosilveira
 
Desbravando o REST com Python
Desbravando o REST com PythonDesbravando o REST com Python
Desbravando o REST com PythonMatheus Fidelis
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-ptPedro Sousa
 
Jsf – Java Sever Faces
Jsf – Java Sever FacesJsf – Java Sever Faces
Jsf – Java Sever Facesbielgott
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Sérgio Vilar
 
Produtividade infinito e além com We.js
Produtividade infinito e além com We.jsProdutividade infinito e além com We.js
Produtividade infinito e além com We.jsAlberto Souza
 
Introdução ao framework CakePHP
Introdução ao framework CakePHPIntrodução ao framework CakePHP
Introdução ao framework CakePHPigorpimentel
 
Desenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-endDesenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-endGiovanny Valente
 
JS Experience 2017 - Armazenamentos offline. APIs para PWA (Progressive Web A...
JS Experience 2017 - Armazenamentos offline. APIs para PWA (Progressive Web A...JS Experience 2017 - Armazenamentos offline. APIs para PWA (Progressive Web A...
JS Experience 2017 - Armazenamentos offline. APIs para PWA (Progressive Web A...iMasters
 
Armazenamentos offline-ap is-para-pwa
Armazenamentos offline-ap is-para-pwaArmazenamentos offline-ap is-para-pwa
Armazenamentos offline-ap is-para-pwaEduardo Matos
 
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...Dextra Sistemas / Etec Itu
 
Desenvolvimento web ágil com python e web2py
Desenvolvimento web ágil com python e web2pyDesenvolvimento web ágil com python e web2py
Desenvolvimento web ágil com python e web2pyRelsi Maron
 

Semelhante a EmberJS - Primeiros Passos! (20)

PHP e o Desenvolvimento Mobile Web - PHPhederal
PHP e o Desenvolvimento Mobile Web - PHPhederalPHP e o Desenvolvimento Mobile Web - PHPhederal
PHP e o Desenvolvimento Mobile Web - PHPhederal
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_
 
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)Curso: Desenvolvimento de aplicativos híbridos (dia 2)
Curso: Desenvolvimento de aplicativos híbridos (dia 2)
 
AngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IOAngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IO
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
 
Google Analytics Reporting API: Bebendo água direto da fonte
Google Analytics Reporting API: Bebendo água direto da fonteGoogle Analytics Reporting API: Bebendo água direto da fonte
Google Analytics Reporting API: Bebendo água direto da fonte
 
Mini-curso RubyOnRails CESOL
Mini-curso RubyOnRails CESOLMini-curso RubyOnRails CESOL
Mini-curso RubyOnRails CESOL
 
Desbravando o REST com Python
Desbravando o REST com PythonDesbravando o REST com Python
Desbravando o REST com Python
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-pt
 
PHP e o Desenvolvimento Mobile Web
PHP e o Desenvolvimento Mobile WebPHP e o Desenvolvimento Mobile Web
PHP e o Desenvolvimento Mobile Web
 
Jsf – Java Sever Faces
Jsf – Java Sever FacesJsf – Java Sever Faces
Jsf – Java Sever Faces
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
Produtividade infinito e além com We.js
Produtividade infinito e além com We.jsProdutividade infinito e além com We.js
Produtividade infinito e além com We.js
 
Arquitetura de sistemas web
Arquitetura de sistemas webArquitetura de sistemas web
Arquitetura de sistemas web
 
Introdução ao framework CakePHP
Introdução ao framework CakePHPIntrodução ao framework CakePHP
Introdução ao framework CakePHP
 
Desenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-endDesenvolvendo aplicações com Angular e Laravel no Back-end
Desenvolvendo aplicações com Angular e Laravel no Back-end
 
JS Experience 2017 - Armazenamentos offline. APIs para PWA (Progressive Web A...
JS Experience 2017 - Armazenamentos offline. APIs para PWA (Progressive Web A...JS Experience 2017 - Armazenamentos offline. APIs para PWA (Progressive Web A...
JS Experience 2017 - Armazenamentos offline. APIs para PWA (Progressive Web A...
 
Armazenamentos offline-ap is-para-pwa
Armazenamentos offline-ap is-para-pwaArmazenamentos offline-ap is-para-pwa
Armazenamentos offline-ap is-para-pwa
 
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
 
Desenvolvimento web ágil com python e web2py
Desenvolvimento web ágil com python e web2pyDesenvolvimento web ágil com python e web2py
Desenvolvimento web ágil com python e web2py
 

EmberJS - Primeiros Passos!

  • 1. EmberJS - Primeiros Passos por: Anderson de Castro
  • 2. AGENDA 1. O que é? 2. Conceitos Básicos 3. Templates 4. Demo
  • 4. “A framework for creating ambitious web applications”
  • 7. TEMPLATES Onde ficará a interface da aplicação. <script type=”text/x-handlebars” id=”application”> Hello EmberJS! {{outlet}} </script>
  • 8. ROUTER Responsável por gerencia o estado do aplicativo. App.Router.map(function(){ this.resource(“usuarios”); this.resource(“contato”); }); http://minhaaplicacao.com/#/usuarios http://minhaaplicacao.com/#/contato
  • 9. COMPONENTS Tag HTML customizada. Útil para criar controles reutilizáveis na aplicação. <script type=”text/x-handlebars” id=”components/twitter-foto”> <img src=”http://www.gravatar.com/avatar/email_hexMD5?s=200” alt=””> </script> Meu Avatar {{twitter-foto}}
  • 10. MODELS Objeto que guarda o estado de persistência. É apresentado para o usuário através dos templates. App.Pessoa = DS.Model.extend({ nome: DS.attr(‘string’), email: DS.attr(‘string’) });
  • 11. 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'); } });
  • 12. CONTROLLERS Objeto que armazena o estado da aplicação. Propriedades podem ser recuperadas e transmitidas ao Template. App.PessoaController = Ember.ObjectController.extend({ adicionar: function(){ console.log(“adicionando nova pessoa...”); }, editando: false });
  • 13. VIEWS Obs.: - Precisa sofisticar o tratamento de eventos de usuário? - Precisa criar componentes reutilizáveis? Então, USEMOS uma View!
  • 14. VIEWS NO HTML: <script type=”text/x-handlebars” id=”diga-ola”> Como vai {{view.nome}} </script> NO JS: var view = Ember.View.create({ templateName: ‘diga-ola’, nome: ‘Maria Rita’ });
  • 15. 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!”); } });
  • 16. DEMONSTRAÇÃO - Aplicação que cadastre pessoas e suas redes sociais. - Apresentar listagem desses com seus respectivos avatares e usuários de contas.
  • 17. Referências: Site Oficial: http://emberjs.com Site brasileiro: http://emberjs.com.br Grupo: https://www.fb.com/groups/EmberJS.Brasil