Embed Size (px)
DESCRIPTION
Visão geral sobre frameworks javascript populares e o uso para desenvolvimento de aplicações web ricas.
Citation preview
WebApps e Frameworks
Javascript
por Henrique Netto
Javascript
JavascriptAprenda
em 10 dias.
Funcional,Prototipado,
e outras coisas
function Account(name) {this.id = this.generateId();this.name = name;
}
construtor
function Account(name) {this.id = this.generateId();this.name = name;
}
function Account(name) {this.id = this.generateId();this.name = name;
}
Account.prototype.generateId = function () {return parseInt(Math.random() * 100
);};
construtor
function Account(name) {this.id = this.generateId();this.name = name;
}
Account.prototype.generateId = function () {return parseInt(Math.random() * 100
);}; métodos da classe
construtor
function Account(name) {this.id = this.generateId();this.name = name;
}
Account.prototype.generateId = function () {return parseInt(Math.random() * 100
);};
var account = new Account('Netto');
métodos da classe
construtor
A WEB evoluiu.
Normalizaçãopor código
Normalizaçãopor código
Bibliotecas Javascript
AccDCAJSAllyAmple SDKAmplifyJSAngularJSArtisan JSBanana Banana JSBackbone.jsBlackbirdCappuccinoClean AJAXcufónCupQD3jsDatejsDHTMLXDojo ToolkitDraw2DEmber.jsEaselJSEchoEnyoExt JSFlotFly.js
Foobar.jsFUELFuncJSGlowGoogle Closure LibraryGoogle Web ToolkitiX FrameworkJellyJoosejQueryjQuery UIjQWidgetsJayDatajsDraw2DjsPHPJuiceUIJWee JavaScriptToolkitKendo UIKnockoutList.jsLively KernellocalStorageDBMicrosoft's Ajax librarymidoriMochikit
MooToolsMy LibraryNanoNode.jsPdf.jsPlotKitPlum.jsPottisJSProcessing.jsPrototypeProtovisPUREQfoxqooxdooQuipoJSRaphaëlRialto ToolkitRicoRSencescaleAppScript.aculo.usSmartClientSocket.ioSoundManager 2SparkSproutCore
Spry frameworkSylvesterSWFObjectTaffy DBThree.jstypeface.jsUnderscore.jsUize uize.comWakanda FrameworkWijmoX LibraryYUI LibraryZeleos web toolkitZreshk
Complexidade
Model View Controller(1978)
Model View Presenter(1990)
Model View ControllerWeb
<HTML>
Model View ViewModel(2006)
Model View *
{"id": 25,"name": "James","state": "active"
}
{"id": 25,"name": "James","state": "active"
}
<div id="user-25" class="active"><span class="name">James</span>
</div>
{"id": 25,"name": "James","state": "active"
}
<div id="user-25" class="active"><span class="name">James</span>
</div>
{"id": 25,"name": "James","state": "active"
}
<div id="user-25" class="active"><span class="name">James</span>
</div>
{"id": 25,"name": "James","state": "active"
}
<div id="user-25" class="active"><span class="name">James</span>
</div>
{"id": 25,"name": "James","state": "active"
}
<div id="user-25" class="active"><span class="name">James</span>
</div>
Quando usar?
URL
URL
Controle de Histórico
app#view
app/view (html5)
URL
create POST
read GET
update PUT
delete DELETE
Spine
Knockback.js
Reflexão
Spine
Como escolher?
TodoMVC
Quais pontos analisar?
Capacidades
Usado em Produção
Documentação
Comunidade
Não-intrusivo
Aplicações WEB são a soma de
pequenos componentes.
140byt.es
microjs
Usar MVC client-side gera 2 code bases
Common JS
NodeJS
Meteor
É saudávelessa quantidade de
frameworks?
Obrigado
