EmberJS + SPA

27
EmberJS + SPA Rodolfo Fadino

description

Apresentação sobre EmberJS e Single Pages Applications (SPA)

Transcript of EmberJS + SPA

Page 1: EmberJS + SPA

EmberJS + SPARodolfo Fadino

Page 2: EmberJS + SPA
Page 3: EmberJS + SPA

Single Page Aplication

Page 4: EmberJS + SPA

Single Page Aplication

Page 5: EmberJS + SPA

Single Page Aplication

Page 6: EmberJS + SPA

Aplicações com uma grande interação client-side (Html5, CSS3 e JavaScript)

Navegação sem refresh Logica da aplicação client-site Carregar dados sobre demanda

Single Page Aplication

Page 7: EmberJS + SPA

Arquitetura

Page 8: EmberJS + SPA

Microsoft◦ Web API◦ Templates◦ Padrões Web => Windows◦ TypeScript◦ Node.JS

ASP.NET Single Page Application

Page 9: EmberJS + SPA

Demo

Page 10: EmberJS + SPA
Page 11: EmberJS + SPA

Biblioteca MVC pattern Core:

◦ TEMPLATES◦ VIEWS◦ CONTROLLERS◦ MODELS◦ ROUTER

Ember.js

Page 12: EmberJS + SPA

Template◦ Handlebars templating language◦ Application user interface.

Model ◦ Application data that it gets from the server

Controller ◦ Stores application state.◦ Present model data to the corresponding templates.

View◦ Translates primitive events from the application◦ and passes these to the controller.

Router ◦ Manages application state◦ URLs and templates in sync.

Ember.js

Page 13: EmberJS + SPA

Scripts em oito camadas:◦webapi_adapter.js, webapi_serializer.js:◦Scripts/helpers.js:◦Scripts/app.js:◦Scripts/app/models/*.js◦Scripts/app/views/*.js◦Scripts/app/controllers/*.js◦Scripts/app/routes, Scripts/app/router.js◦Templates/*.html

Ember.js SPA Template

Page 14: EmberJS + SPA

Models

Page 15: EmberJS + SPA

Models

Page 16: EmberJS + SPA

Models

Page 17: EmberJS + SPA

Models

Page 18: EmberJS + SPA

Views

Page 19: EmberJS + SPA

Controllers

Page 20: EmberJS + SPA

Controllers

Page 21: EmberJS + SPA

Routes

Page 22: EmberJS + SPA

Routes

Page 23: EmberJS + SPA

Templates

Page 24: EmberJS + SPA

Templates

Page 25: EmberJS + SPA

Templates

Page 26: EmberJS + SPA

Demo

Page 27: EmberJS + SPA

have a nice

CODE