SlideShare uma empresa Scribd logo

Apresentação sobre MVVMC

Apresentação sobre MVVMC

1 de 29
Baixar para ler offline
Dissecando Javascript
para Aplicações de
Internet Rica(RIA)
O que se espera de RIA?
- Interação
- Velocidade
- Workflow fluído
- O que há de melhor em aplicações
desktop
Atualmente, existem duas opções para
RIA:
• Desenvolver o comportamento em
uma tecnologia nativa(Javascript)
• Desenvolver o comportamento em
uma tecnologia externa(Flash,
Silverlight, JavaFX, etc)
RIA = Spaghetti?
Senso comum sobre Javascript:
•Limitada
•Desorganizada
•Difícil de testar
•Incompatível entre browsers
diferentes
Derrubando o mito
Orientação a Objetos(numa linguagem Orientada a Protótipos):
// objeto estático
var LATIDOS = {
"pastor alemão": "AUFF!",
"pincher": "AU!"
}
// classe pai
var Animal = function() {};
// classe filha
var Cachorro = function(raca) {
this.raca = raca; // Atributo
this.latir = function() { console.log(LATIDOS[raca]); }; // método
};
Cachorro.prototype = new Animal(); //Herança
var fido = new Cachorro("pastor alemão");
fido.latir(); //imprime "AUFF!"
Organização
-Cada classe pode residir num arquivo separado, basta criar um padrão para
a hierarquia de pastas(ex.: /models,/helpers,/lib,etc)
- Em produção, devido a uma limitação da web, browsers podem requisitar
de 1 a 4 arquivos no máximo por conexão.
- Solução: Em produção, juntar todos os arquivos em um só, se houver
necessidade.
lib/jquery.js
helpers/validations.js
models/animal.js
models/cachorro.js
application.js

Recomendados

JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no FrontendHenrique Gogó
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosHenrique Gogó
 
Persistência Java: Hibernate e JPA
Persistência Java: Hibernate e JPAPersistência Java: Hibernate e JPA
Persistência Java: Hibernate e JPACaelum
 

Mais conteúdo relacionado

Mais procurados

PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 
Javascript no SAPO e libsapojs
Javascript no SAPO e libsapojsJavascript no SAPO e libsapojs
Javascript no SAPO e libsapojscodebits
 
Desenvolvimento Agil Com Doctrine Orm
Desenvolvimento Agil Com Doctrine OrmDesenvolvimento Agil Com Doctrine Orm
Desenvolvimento Agil Com Doctrine OrmGuilherme Blanco
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryMarketing Digital ODIG
 
Javascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosJavascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosWesley Lemos
 
Novidades do Django 1.2
Novidades do Django 1.2Novidades do Django 1.2
Novidades do Django 1.2flavioamieiro
 
BRMS - Business Rules Management System
BRMS - Business Rules Management SystemBRMS - Business Rules Management System
BRMS - Business Rules Management SystemSamuel Tauil
 
55 New Things in Java 7 - Brazil
55 New Things in Java 7 - Brazil55 New Things in Java 7 - Brazil
55 New Things in Java 7 - BrazilStephen Chin
 
Javascript Orientado a Objetos - Fisl12
Javascript Orientado a Objetos - Fisl12Javascript Orientado a Objetos - Fisl12
Javascript Orientado a Objetos - Fisl12Emerson Macedo
 
Doctrine 2 camada de persistência para php
Doctrine 2   camada de persistência para phpDoctrine 2   camada de persistência para php
Doctrine 2 camada de persistência para phpFabio B. Silva
 
Abstração do banco de dados com PHP Doctrine
Abstração do banco de dados com PHP DoctrineAbstração do banco de dados com PHP Doctrine
Abstração do banco de dados com PHP DoctrineOtávio Calaça Xavier
 
Jurassic JavaScript Park - Rodando Offline até na ilha Nublar!
Jurassic JavaScript Park - Rodando Offline até na ilha Nublar!Jurassic JavaScript Park - Rodando Offline até na ilha Nublar!
Jurassic JavaScript Park - Rodando Offline até na ilha Nublar!Creditas
 
performance em jQuery apps
performance em jQuery appsperformance em jQuery apps
performance em jQuery appsDavidson Fellipe
 
TDC 2010: Ambiente de Integração Contínua
TDC 2010: Ambiente de Integração ContínuaTDC 2010: Ambiente de Integração Contínua
TDC 2010: Ambiente de Integração ContínuaHelder da Rocha
 
Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webBackbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webHenrique Gogó
 
Conexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxConexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxHelder da Rocha
 
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSDesenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSRomulo Fagundes
 
Java Web 4 - Servlets e JSP 2
Java Web 4 - Servlets e JSP 2Java Web 4 - Servlets e JSP 2
Java Web 4 - Servlets e JSP 2Eduardo Mendes
 

Mais procurados (20)

PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 
Javascript no SAPO e libsapojs
Javascript no SAPO e libsapojsJavascript no SAPO e libsapojs
Javascript no SAPO e libsapojs
 
Desenvolvimento Agil Com Doctrine Orm
Desenvolvimento Agil Com Doctrine OrmDesenvolvimento Agil Com Doctrine Orm
Desenvolvimento Agil Com Doctrine Orm
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
 
Javascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosJavascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - Conceitos
 
Novidades do Django 1.2
Novidades do Django 1.2Novidades do Django 1.2
Novidades do Django 1.2
 
BRMS - Business Rules Management System
BRMS - Business Rules Management SystemBRMS - Business Rules Management System
BRMS - Business Rules Management System
 
55 New Things in Java 7 - Brazil
55 New Things in Java 7 - Brazil55 New Things in Java 7 - Brazil
55 New Things in Java 7 - Brazil
 
Mashups: Criando Valor na Web 2.0
Mashups: Criando Valor na Web 2.0Mashups: Criando Valor na Web 2.0
Mashups: Criando Valor na Web 2.0
 
Javascript Orientado a Objetos - Fisl12
Javascript Orientado a Objetos - Fisl12Javascript Orientado a Objetos - Fisl12
Javascript Orientado a Objetos - Fisl12
 
Doctrine 2 camada de persistência para php
Doctrine 2   camada de persistência para phpDoctrine 2   camada de persistência para php
Doctrine 2 camada de persistência para php
 
Abstração do banco de dados com PHP Doctrine
Abstração do banco de dados com PHP DoctrineAbstração do banco de dados com PHP Doctrine
Abstração do banco de dados com PHP Doctrine
 
Jurassic JavaScript Park - Rodando Offline até na ilha Nublar!
Jurassic JavaScript Park - Rodando Offline até na ilha Nublar!Jurassic JavaScript Park - Rodando Offline até na ilha Nublar!
Jurassic JavaScript Park - Rodando Offline até na ilha Nublar!
 
performance em jQuery apps
performance em jQuery appsperformance em jQuery apps
performance em jQuery apps
 
TDC 2010: Ambiente de Integração Contínua
TDC 2010: Ambiente de Integração ContínuaTDC 2010: Ambiente de Integração Contínua
TDC 2010: Ambiente de Integração Contínua
 
Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webBackbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações web
 
Conexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxConexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao Ajax
 
Ajax em java
Ajax em javaAjax em java
Ajax em java
 
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSDesenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
 
Java Web 4 - Servlets e JSP 2
Java Web 4 - Servlets e JSP 2Java Web 4 - Servlets e JSP 2
Java Web 4 - Servlets e JSP 2
 

Semelhante a Apresentação sobre MVVMC

XML Free Programming - Brazil
XML Free Programming - BrazilXML Free Programming - Brazil
XML Free Programming - BrazilStephen Chin
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.jsGiovanni Bassi
 
PhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha CamaradaPhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha CamaradaHenrique Gogó
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersHarlley Oliveira
 
AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!Lucas Brasilino
 
Javaone Brazil 2012: Integrando Ext JS 4 com Java EE
Javaone Brazil 2012: Integrando Ext JS 4 com Java EEJavaone Brazil 2012: Integrando Ext JS 4 com Java EE
Javaone Brazil 2012: Integrando Ext JS 4 com Java EELoiane Groner
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com AjaxAdler Medrado
 
Como escolher o Framework Java para web?
Como escolher o Framework Java para web?Como escolher o Framework Java para web?
Como escolher o Framework Java para web?Anderson Araújo
 
Backbone.js nas trincheiras
Backbone.js nas trincheirasBackbone.js nas trincheiras
Backbone.js nas trincheirasLambda 3
 
Curso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como ProgramarCurso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como ProgramarTiago Antônio da Silva
 
T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)Carlos Santos
 
Linguagem de Programação Java para Iniciantes
Linguagem de Programação Java para IniciantesLinguagem de Programação Java para Iniciantes
Linguagem de Programação Java para IniciantesOziel Moreira Neto
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JSRodrigo Urubatan
 
TDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direitoTDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direitoCezinha Anjos
 

Semelhante a Apresentação sobre MVVMC (20)

XML Free Programming - Brazil
XML Free Programming - BrazilXML Free Programming - Brazil
XML Free Programming - Brazil
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.js
 
PhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha CamaradaPhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha Camarada
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 
AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!
 
Javaone Brazil 2012: Integrando Ext JS 4 com Java EE
Javaone Brazil 2012: Integrando Ext JS 4 com Java EEJavaone Brazil 2012: Integrando Ext JS 4 com Java EE
Javaone Brazil 2012: Integrando Ext JS 4 com Java EE
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
 
Java Web Fácil com VRaptor
Java Web Fácil com VRaptorJava Web Fácil com VRaptor
Java Web Fácil com VRaptor
 
Como escolher o Framework Java para web?
Como escolher o Framework Java para web?Como escolher o Framework Java para web?
Como escolher o Framework Java para web?
 
Backbone.js nas trincheiras
Backbone.js nas trincheirasBackbone.js nas trincheiras
Backbone.js nas trincheiras
 
Curso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como ProgramarCurso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como Programar
 
T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)T11_LM3: Subalgoritmose colisões (2013-2014)
T11_LM3: Subalgoritmose colisões (2013-2014)
 
Linguagem de Programação Java para Iniciantes
Linguagem de Programação Java para IniciantesLinguagem de Programação Java para Iniciantes
Linguagem de Programação Java para Iniciantes
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
 
Rest Teoria E Pratica
Rest Teoria E PraticaRest Teoria E Pratica
Rest Teoria E Pratica
 
TDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direitoTDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direito
 
Java script
Java scriptJava script
Java script
 

Último

MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxMAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxjosecarlos413721
 
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docxATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx2m Assessoria
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxjosecarlos413721
 
Aula 01 - Desenvolvimento web - A internet.pptx
Aula 01 - Desenvolvimento web - A internet.pptxAula 01 - Desenvolvimento web - A internet.pptx
Aula 01 - Desenvolvimento web - A internet.pptxHugoHoch2
 
ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...
ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...
ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...2m Assessoria
 
ATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docxATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docx2m Assessoria
 
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docxMAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx2m Assessoria
 
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docxATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docxjosecarlos413721
 
Apresentação bichinhos da TI: o que é esse arquiteto de software
Apresentação bichinhos da TI: o que é esse arquiteto de softwareApresentação bichinhos da TI: o que é esse arquiteto de software
Apresentação bichinhos da TI: o que é esse arquiteto de softwareAleatório .
 
MAPA - DESENHO TÉCNICO - 51-2024.docx
MAPA   -   DESENHO TÉCNICO - 51-2024.docxMAPA   -   DESENHO TÉCNICO - 51-2024.docx
MAPA - DESENHO TÉCNICO - 51-2024.docx2m Assessoria
 
Uniagil - LACP - Lean Agile Coach Professional 2024.pdf
Uniagil - LACP - Lean Agile Coach Professional 2024.pdfUniagil - LACP - Lean Agile Coach Professional 2024.pdf
Uniagil - LACP - Lean Agile Coach Professional 2024.pdfPatriciaAraujo658854
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx2m Assessoria
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxjosecarlos413721
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx2m Assessoria
 
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docxMAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx2m Assessoria
 
ATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docx
ATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docxATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docx
ATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docx2m Assessoria
 
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docxATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx2m Assessoria
 

Último (17)

MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxMAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
 
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docxATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
Aula 01 - Desenvolvimento web - A internet.pptx
Aula 01 - Desenvolvimento web - A internet.pptxAula 01 - Desenvolvimento web - A internet.pptx
Aula 01 - Desenvolvimento web - A internet.pptx
 
ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...
ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...
ATIVIDADE 1 - GFIN - FLUXO DE CAIXA E ADMINISTRAÇÃO DE CAPITAL DE GIRO - 5120...
 
ATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docxATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1- TEORIAS DA ADMINISTRAÇÃO - 512024.docx
 
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docxMAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
 
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docxATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
 
Apresentação bichinhos da TI: o que é esse arquiteto de software
Apresentação bichinhos da TI: o que é esse arquiteto de softwareApresentação bichinhos da TI: o que é esse arquiteto de software
Apresentação bichinhos da TI: o que é esse arquiteto de software
 
MAPA - DESENHO TÉCNICO - 51-2024.docx
MAPA   -   DESENHO TÉCNICO - 51-2024.docxMAPA   -   DESENHO TÉCNICO - 51-2024.docx
MAPA - DESENHO TÉCNICO - 51-2024.docx
 
Uniagil - LACP - Lean Agile Coach Professional 2024.pdf
Uniagil - LACP - Lean Agile Coach Professional 2024.pdfUniagil - LACP - Lean Agile Coach Professional 2024.pdf
Uniagil - LACP - Lean Agile Coach Professional 2024.pdf
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docxMAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
 
ATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docx
ATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docxATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docx
ATIVIDADE 1 - CCONT - ESTRUTURAS DAS DEMONSTRAÇÕES CONTÁBEIS - 512024.docx
 
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docxATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
 

Apresentação sobre MVVMC

  • 2. O que se espera de RIA? - Interação - Velocidade - Workflow fluído - O que há de melhor em aplicações desktop
  • 3. Atualmente, existem duas opções para RIA: • Desenvolver o comportamento em uma tecnologia nativa(Javascript) • Desenvolver o comportamento em uma tecnologia externa(Flash, Silverlight, JavaFX, etc)
  • 4. RIA = Spaghetti? Senso comum sobre Javascript: •Limitada •Desorganizada •Difícil de testar •Incompatível entre browsers diferentes
  • 5. Derrubando o mito Orientação a Objetos(numa linguagem Orientada a Protótipos): // objeto estático var LATIDOS = { "pastor alemão": "AUFF!", "pincher": "AU!" } // classe pai var Animal = function() {}; // classe filha var Cachorro = function(raca) { this.raca = raca; // Atributo this.latir = function() { console.log(LATIDOS[raca]); }; // método }; Cachorro.prototype = new Animal(); //Herança var fido = new Cachorro("pastor alemão"); fido.latir(); //imprime "AUFF!"
  • 6. Organização -Cada classe pode residir num arquivo separado, basta criar um padrão para a hierarquia de pastas(ex.: /models,/helpers,/lib,etc) - Em produção, devido a uma limitação da web, browsers podem requisitar de 1 a 4 arquivos no máximo por conexão. - Solução: Em produção, juntar todos os arquivos em um só, se houver necessidade. lib/jquery.js helpers/validations.js models/animal.js models/cachorro.js application.js
  • 7. Documentação - Desenvolvedores detestam escrever ”manual do sistema” - Mal necessário? - Comentários de código são suficientes - Padrão JAVADOC - JSDoc-toolkit
  • 8. JAVADOC /** * Classe que segue o design pattern IdentityMap, útil para guardar um cache local de objetos. * @name IdentityMap * @class */ var IdentityMap = function() { function I() {}; I.prototype = new Array(); /** * Comparação entre objetos pelo valor. * @name IdentityMap#find * @param id Um id único para o objeto da request * @param params Objeto contendo os parâmetros da request * @function */ I.prototype.find = function(id,params) { return $.grep(this,function(d) { return d.id === id && ko.utils.stringifyJson(d.params) === ko.utils.stringifyJson(params); })[0]; }; return new I(); };
  • 10. Como testar Javascript - Desde que haja uma separação clara do comportamento da página e dos elementos da página, testes unitários são uma excelente opção. Conheça a biblioteca qUnit: test("Este teste deve ser positivo", function() { ok(true, "Teste ok"); }); test("Este teste deve quebrar", function() { ok(false, "Teste quebrado"); });
  • 12. Incompatibilidades -A especificação do Javascript(e do HTML e CSS) é regida pelo W3C, mas cada browser implementa diferente. -Como resolver os conflitos? - jQuery salva o dia!
  • 13. jQuery = Simplicidade + Elegância - Simplifica o acesso ao DOM - Minimiza conflitos entre browsers diferentes
  • 14. JS puro x jQuery O que você prefere? JS - document.getElementById("example") ou jQuery - $(“#example”) JS – var d = document.getElementById("example"); d.setAttribute('type', 'text'); d.setAttribute('name','maildrop[]'); d.setAttribute('autocomplete','off'); Ou jQuery - $(“#example”).text(“type”).attr(“name”,”maildrop[]”).attr(“autocomplete”,”off”); Ou ainda jQuery - $(“#example”).attr({text:’type’,name:’maildrop[]’,autocomplete:’off’});
  • 15. Por que jQuery? -Velocidade de prototipagem - Compatibilidade - Padronização - Melhores práticas
  • 16. Então você passa a usar jQuery... ...e descobre que: -As alterações manuais de conteúdo continuam - Continua difícil mapear as dependências de alterações - $() pra todo lado
  • 17. Case real Fale Conosco UMC Aluno - Com jQuery(+- 330 linhas) - Manutenção HELL
  • 18. Por que tantas linhas? -Ocultação manual de conteúdo - Revelação manual de conteúdo - Adição manual de conteúdo - Subtração manual de conteúdo
  • 19. O que outros fazem? Existem dois tipos de framework web: - Os que mantém o estado(stateful) Ex.: JSF, Wicket, etc. - Os que não mantém o estado(stateless) Ex.: Struts, Play!, VRaptor, etc. Ambos com vantagens e desvantagens para alcançar o mesmo objetivo.
  • 20. Caminhando no meio Solução híbrida: MVVMC(Modelo-View-View Model-Controller) - Isola-se totalmente a View de seu comportamento(View Model) - O comportamento torna-se facilmente testável - O Controller emagrece em responsabilidades
  • 21. Buscando o dream team da web - Lingua franca da web(HTML/CSS/JS) - Formatos padrões de dados na web(XML/JSON) - Comunicação padrão com o servidor(AJAX) - Se os padrões forem respeitados, tanto faz o backend
  • 22. Conheça Knockout.js - Biblioteca javascript para MVVMC - Atualização automática de elementos vinculados a variáveis - Busca automática de dependências
  • 23. Exemplo de uso Código HTML: <p>Nome: <input data-bind="value: nome" /></p> <p>Sobrenome: <input data-bind="value: sobrenome" /></p> <h2>Oi, <span data-bind="text: nomeCompleto"> </span>!</h2> Código JS: var viewModel = { nome : ko.observable(“Hello"), sobrenome : ko.observable(“World") }; viewModel.nomeCompleto = ko.dependentObservable(function () { return viewModel.nome() + " " + viewModel.sobrenome(); }); ko.applyBindings(viewModel);
  • 25. Case real Fale Conosco UMC Externo - Com jQuery e Knockout(- de 200 linhas) - Fácil manutenção, dependências rastreadas automaticamente, fácil de testar.
  • 26. Separação de Responsabilidades - O que o MVVMC conseguiu: - Emagrecer o Controller. Agora ele autoriza e observa o Modelo. - Permite utilizar a camada de persistência que você achar melhor, sem se preocupar com problemas em outras partes do sistema. - Permite utilizar a linguagem que você achar melhor, sem se preocupar com problemas em outras partes do sistema.
  • 27. Fluxo VIEW VIEW MODEL MODEL CONTROLLER JSON Camada de Persistência que você preferir HTML/CSS JS Gerenciador de Sessão que você preferir
  • 28. Resumo da ópera -O comportamento do sistema está no lado cliente(View + View Model), onde a interação ocorre(HTML/CSS/JS(jQuery + Knockout). - O Modelo contém as regras de negócio. - O Controller autoriza interações e observa o Modelo. FIM
  • 29. Bibliografia RIA: http://pt.wikipedia.org/wiki/Internet_rica Javascript: https://developer.mozilla.org/en/JavaScript/Guide jQuery: http://www.jquery.com Knockout: http://www.knockoutjs.com MVVM: http://en.wikipedia.org/wiki/Model_View_ViewModel JSON: http://www.json.org/ Jsdoc-toolkit: http://code.google.com/p/jsdoc-toolkit/