Escolar Documentos
Profissional Documentos
Cultura Documentos
JailsOFrameworkeaArquiteturadoJavascriptTableless
MENU
FRUM
PARA INICIANTES
UX & DESIGN
JAVASCRIPT
Introduo ao
AMD com
Require.js
Fluxo de
execuo
assncrono em
JavaScript
Promises
POR JAVIANI
CSS
JQUERY
HTML
RESPONSIVE
BACK-END
DeployBot faz o
build e deploy do
seu projeto para
produo
17 DE JUNHO DE 2015
SASS
Como funciona a
Internet e a World
Wide Web
Fluxo de
execuo
assncrono em
JavaScript
Callbacks
38 comentrios
Jails O Framework
e a Arquitetura do
Javascript
Eu escrevi meu prprio framework por que estava
insatisfeito com os oferecidos no mercado. E foi
timo!
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
1/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
2/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
3/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
CONCLUSO
O fato de ter estudado cada uma delas me deu um conhecimento que
eu no tinha, tive algumas idias Este aprendizado era o que
precisava para olhar para todos os problemas que havia passado no
projeto e imaginar qual seria a soluo. Na hora, me veio na cabea um
projeto antigo que eu tinha, havia colocado o nome Jails, no tinha
nada haver com o Rails, o nome surgiu de uma brincadeira. Era um
MVC na poca, mas seria reformulado.
A PROPOSTA.
A idia era desenvolver um framework leve, pequeno o bastante para
gastar o menor tempo possvel refatorando e fazendo atualizaes,
assim eu tambm minimizaria as falhas. Que ajudasse nas tarefas
repetitivas e como organizar melhor as funes de uma aplicao seja
ela complexa ou no e garantir um fluxo mais previsvel. E seria
modular, deveria crescer de acordo com a comunidade, assim como o
Rails.
JAILS, A FILOSOFIA.
Basicamente o Jails abstrai sua aplicao em 4 partes.
Components
Controllers
Apps
Modules
Um componente resolve um determinado problema, mais genrico,
escuta e ouve eventos, manipula o dom, no sabe da existncia de
outros elementos e classes.
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
4/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
5/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
TEST DRIVE
Existem duas formas de trabalhar com o Jails, uma usando de forma
asscrona, bom pra prototipar e subir uma aplicao rpidamente, e
outra compilando o JavaScript pra uma sada s minificado. Vou
mostrar apenas a primeira que utiliza mdulos/componentes do
repositrio do Jails.
+ assets/js/
index.htm
1.npminstallgulpjails
1.npminstallgulp
6/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
1.require('gulpjails')();
1.varglobal={page:'apps/myapp'};
1.gulpjails/confignglobal.page
1.require.config({
2.baseUrl:'assets/js/',
3.deps:['jquery','jails',global.page],
4.paths:{
5.jails:'//rawgit.com/Javiani/Jails/master/source/jails.min',
6.mods:'//rawgit.com/jailsorg/Modules/master',
7.comps:'//rawgit.com/jailsorg/Components/master',
8.jquery:'//code.jquery.com/jquery2.1.1.min'
9.},
10.callback:function(jquery,jails){
11.jails.start({base:jquery});
12.}
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
7/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
13.});
1.gulpjails/appnmyapp
myapp.js
1.define([
2.'jails'
3.],
4.function(jails){
5.jails.app('myapp',function(html,data){
6.this.init=function(){};
7.});
8.});
1.<bodydataapp="myapp">
1.define(['jails'],function(jails){
2.jails.component('mycomponent',function(html,anno){
3.varcp=this,buttons;
4.
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
8/21
23/12/2015
4.
JailsOFrameworkeaArquiteturadoJavascriptTableless
5.this.init=function(){
6.buttons=html.find('input[type=radio]');
7.html.append('Meucomponente!!');
8.buttons.on('change',emit);
9.};
10.
11.functionemit(){
12.cp.emit('choose',this.value);
13.}
14.});
15.});
1.define([
2.'jails',
3.'components/mycomponent',
4.'comps/helloworld/helloworld'
5.],function(jails){
6.
7.jails.app('myapp',function(html,data){
8.
9.varapp=this,cp,hello_world;
10.
11.cp=app.x('[datacomponent*=mycomponent]');
12.hello_world=app.x('[datacomponent*=helloworld]');
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
9/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
12.hello_world=app.x('[datacomponent*=helloworld]');
13.
14.this.init=function(){
15.hello_world('greetings');
16.this.listen('mycomponent:choose',action);
17.};
18.
19.functionaction(e,value){
20.hello_world('answer',value);
21.}
22.});
23.});
=).
10/21
23/12/2015
1.
2.<divdatacomponent="helloworld"></div>
3.
4.<formdatacomponent="mycomponent">
5.
6.<label>Howareyou?</label>
7.<inputtype="radio"name="question"value="how"/>
8.
9.<br/>
10.<label>Whatdayistoday?</label>
11.<inputtype="radio"name="question"value="today"/>
12.
13.<br/>
14.<label>WhereshouldIstartfrom?</label>
15.<inputtype="radio"name="question"value="start"/>
16.
17.<br/>
18.<label>Bye</label>
19.<inputtype="radio"name="question"value="bye"/>
20.
21.<br/>
22.<label>Nothingtosay</label>
23.<inputtype="radio"name="question"value="nothing"/>
24.</form>
25.
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
11/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
Screencast : http://jails-org.github.io/Jails/docs/#/video-components
Repositrio: https://github.com/Jails-org/
Framework: https://github.com/jails-org/Jails
Tweetar
Compartilhar
102
JAVIANI
Entusiasta em Programao
Veja mais artigos deste autor
38Comentrios
Recommend 5
Tableless
Compartilhar
Entrar
OrdenarporMaisrecente
Participedadiscusso...
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
12/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
Matheus 5mesesatrs
issoangularjscombackbone,poremutilelegal
1
Responder Compartilhar
EduardoOttaviani>Matheus 5mesesatrs
Jamaisconseguiriafazerummicroframeworkde3kbquefaaas
mesmascoisasqueestesdoisframeworksmonstros..rsrsrs.Nope..
bemdiferentedosdois...Muitodifcilpraeuconseguirexplicarisso,s
usandooJailsparanotarexatamenteoquodiferenteeledosdois=D.
1
Responder Compartilhar
lucasfontesgaspareto 6mesesatrs
Javianiquetrabalhoexcelente,euadorei!
1
Responder Compartilhar
EduardoOttaviani 6mesesatrs
Fizumscreencastmostrandoosetupinicialpraajudartambm,porldaprater
umaidiamelhordecomoiniciarecomofazerobuilddaaplicao.
vermais
Responder Compartilhar
DiegoNeitzel 6mesesatrs
Mandoubemdemais,Aragorn!!
Tudomuitosimplesebemexplicado.
Sucesso,meuquerido!
Abrao
1
Responder Compartilhar
EduardoOttaviani>DiegoNeitzel
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
6mesesatrs
13/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
EduardoOttaviani>DiegoNeitzel 6mesesatrs
GrandeDiegonnnn,valeumuleque!Umabraocara!
Responder Compartilhar
CssioAlmeida 6mesesatrs
Cara,essaideiadasannotationsficousensacional.Voutestar,podetercerteza.
Parabns.
1
Responder Compartilhar
EduardoOttaviani>CssioAlmeida 6mesesatrs
ValeuCssio!Euacheiatqueamaiorianoiriacurtirisso,pelofatode
sernoscomentrios,masumaformadedizerqueaquilosuma
configurao...Valeumesmo!
Responder Compartilhar
IgorAPA 6mesesatrs
Boamano!Continuesempreassim!
1
Responder Compartilhar
EduardoOttaviani>IgorAPA 6mesesatrs
ValeuIgor!Souseufctligado..
1
Responder Compartilhar
WeslleyAraujo 6mesesatrs
BoaArago,
Parabnspelainiciativameubrother!
1
Responder Compartilhar
EduardoOttaviani>WeslleyAraujo 6mesesatrs
ValeuCenouraMonstro!
Responder Compartilhar
FellipeAzambuja(femontanha) 6mesesatrs
Grandemestre,mestredoJS!
Independentedesermaisumframeworkouno,obrigadoporcompartilharseu
conhecimentoedemonstraroseuinteresseemnosensinarsempreumpouco
mais!
Abraocara
3
Responder Compartilhar
EduardoOttaviani>FellipeAzambuja(femontanha) 6mesesatrs
ValeuAzamba!Abraomestre!
Responder Compartilhar
Avatar
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
14/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
Avatar Estecomentriofoiapagado.
WillianMartins>Guest 6mesesatrs
MedesculpeAmigo,masseucomentrioalmdebabaca,egostae
inconsistentecomacomunidadedeFrontEnd.
Precisamosdepessoasquefaamacomunidadecrescere
amadurecer.Infelizmentevocerroufeionessecomentrio.
2
Responder Compartilhar
MauricioSoares>Guest 6mesesatrs
Interessantevocfalardeatitudeidiota,egostaeinconsistente,sem
nemapresentarnenhumargumentoparaisso.
Oquevcachadeparardesermaisumhaterpanacadainternet,edar
suaopiniodeverdade?afinaldecontasocriadordoJails(eeu
tambm)iriaadorarsaberoporquevocchegounessaconcluso,para
queelepossamelhoraraatitude"idiota,egoistaeinconsistente".
3
Responder Compartilhar
leualemax>MauricioSoares 6mesesatrs
sinceraminhaopiniocara,noqueroserhaterno,seele
fosseumamigomeu,iafalarexatamentedamesmaforma,como
jfizemumcasoexatamenteigual.chegueicomumamigomeu
efalei:"cara,tutasendoidiotaeegosta."
Responder Compartilhar
leualemax>MauricioSoares 6mesesatrs
desculpasenomeexpliquei,acheiqueestavaclarocomogua,
inconsistente,porquesegundoele"estavainsatisfeito"poremo
frameworkdelenotemnadadenovo,require.js+angularfazem
exatamenteisso,egoistaporqueelepodiaestarajudandooutro
frameworkquejfazexatamenteissoamelhoraraoinvsde
fazerumoutroeidiotaporqueeleperdeutempoatoa.
Responder Compartilhar
EmilioAiolfi>leualemax 4mesesatrs
@leualemaxnofiquecominveja.Paredeperderseu
tempofazendocriticasburrasesemfundamentos.Vai
soltarpipa(papagaio)emcimadelaje,assimvoc
aproveitarmelhoroseutempo.
Responder Compartilhar
CssioAlmeida>leualemax 6mesesatrs
Semdvidasdegentecomovocqueacomunidade
precisa.Quenotentanadanovo.Parabns.(palmas)
1
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
Responder Compartilhar
15/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
Responder Compartilhar
IgorAPA>leualemax 6mesesatrs
Oporquedanecessidadedessaabordagem?Apostoque
noconheceocaraenemsabedasboasvontadesque
eletem.Pormaisqueocaraerreouacerte,aideia
ajudarapontandoerroseacertosediscutiremuma
melhoria,dessaformatodosconseguemevoluir.
Pormaisqueexistaounoexistaalgo,aideiapraticar,
copiar,refazer,adaptarporquenofinalointuito
aprender.
Entendendoquevocdevanotergostadodealgum
coisa,masnoassimquesetrataalgum!Eseachar
quenodevaajudardealgumaforma,fechaaabaev
paraalgoquesteagrade.
Talvezvocnoqueira,masdesejoumagrandeevoluo
nasuavidaecarreira.
1
Responder Compartilhar
MauricioSoares>leualemax 6mesesatrs
Voctemquesermaismenteabertacara...
OAngulartemumaporradadefeaturesquevoc
provavelmentenuncavaiusaremumprojetomenor,esse
seriaumbomcaseparaoJailsqueextremamenteleve
(3kbminvs126kbmin)
Outra,setodomundotivesseessamentalidadede"ajudar
outroframework",provavelmenteessesframeworks
novosqueestobombandonuncateriamnascido.
Edesculpa,masasuaafirmaomaisinfelizfoia"perca
detempo",umprogramadornuncaperdetempo
desenvolvendoalgonovo,porqueeleaprendecomo
projetoqueeletrabalhou.Hojeocaraadquiriuumputa
conhecimentodepadresemetodologiasporcontado
Jails,coisaquemuitoprogramadordeveriafazer.
6
Responder Compartilhar
AndrCampos>leualemax 6mesesatrs
Entoquerdizerquesporqueexistemsupostas
soluesparaosproblemasnomercado,devamosnos
algemaraestassolues,eaindainvestironossotempo
ajudandoestassolues?Umacomunidade
colaborativa,no'obrigativa'.
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
16/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
Comooprprioautorexplicounopost(vocleu?),a
soluodelefoiaplicadanaempresaquetrabalha(que
suponhoserumecommercenacionaldegrandeporte).
Logo:elenoperdeutempoatoa.Ele,diferenteda
'comunidade',ganhoudinheirocomasoluo.Melhor
ainda?Elecompartilhoucomacomunidadeacriaodele
(horaalgumaeleobrigadoaisto,e,aindaporcima,
poderialucrarmaisainda,casoelequisesse).
Pessoascomoele,quefazemporonde,enoapenas
copiamecolam(equidigitamalgumas10linhasde
cdigo),quefazemadiferenanomercado.
Achoquedeveramosreveroidiotaeegostaporaqui.
3
Responder Compartilhar
Kazz>AndrCampos 6mesesatrs
Dandoumarpidapassadapeloperfildocaradapra
sacaronveldoscomentriosde"dio"queele
dissemina.Tpicocritico,maisfcilnemdarbola.
3
Responder Compartilhar
LuizJunior 6mesesatrs
BelaIniciativa!
Sempretiveaideiadequevocsdominaumaferramenta,processo,
frameworkoumetodologiaquandovocsabeahoracertadeuslos,jque,
nemsempre,oframeworkdamodanomercadovaiseroidealparaoseu
projeto/problema.
Parabns!
2
Responder Compartilhar
EduardoOttaviani>LuizJunior 6mesesatrs
ValeuBrbara=).Exatamente!Eupensodamesmaforma...
1
Responder Compartilhar
PedroAraujo 6mesesatrs
Poxa,bemlegal.Adoreiaideiadousodosannotations.
Parabns
1
Responder Compartilhar
EduardoOttaviani>PedroAraujo 6mesesatrs
ValeuPedro!
Nossacara,euvouconfessarquegostotambm,masqueriaquefosse
opcional,muitagentedevefazercarafeiapraissoarsrsrs,oque
completamenteaceitvel...
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
17/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
Responder Compartilhar
LuisRudge 6mesesatrs
>euaindanomeacostumeicomaidiademisturarhtmleconstruode
markupviaJavaScript
Talvezsejahoradeolharproreactdenovo.Nohtml.umafuno.Sevoc
pensarnojsxcomoumanovasintaxe,aoinvsdepensarquetmisturando
algo,tudofazsentido.Comcertezafazmaissentidodoquecriarumframework
novo.
1
Responder Compartilhar
EduardoOttaviani>LuisRudge 6mesesatrs
Talvezfaa,masa"mistura"dojscomohtmlapenasumaopinio
pessoalmesmo,noeraanicamotivao,secolocssemosoreactno
projetonoresolveramososproblemasquepassamos,emboraficasse
maisorganizado.
1
Responder Compartilhar
Iconic 6mesesatrs
Parecemuyinteressante,achamquevaleapenainvestir?
1
Responder Compartilhar
NOSSA NEWSLETTER
EmailAddress
FirstName
Subscribe
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
18/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
MAIS VISUALIZADOS
Diga ol ao TypeScript e adeus ao
JavaScript
Centralizando um objeto na Horizontal
e Vertical com CSS
Criando um Menu Horizontal com CSS
Criando uma aplicao simples com
AngularJS
Design Responsivo na prtica 2: do
layout ao HTML
MAIS RECENTES
Diga ol ao TypeScript e adeus ao
JavaScript
Uma viso detalhada sobre
instanciao de variaveis no
JavaScript
WP Rest API O futuro do WordPress
Como automatizar a criao de Virtual
Hosts
O novo software que substitui o Flash
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
19/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
JavaScript
Diga ol ao TypeScript e adeus ao JavaScript
Uma viso detalhada sobre instanciao de variaveis no JavaScript
Detectando navegadores com Bowser
ES2015 Babel 6 com Browserify e Babelify
Introduo ao Electron
CSS
Como usar variveis no CSS de forma nativa
Acessibilidade na web: Como tornar seu site acessvel.
Use as facilidades do CSS 4 hoje
Afinal, como usar herana no CSS?
Centralizando contedo na vertical e horizontal com CSS Flexbox
Tcnicas e Prticas
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
20/21
23/12/2015
JailsOFrameworkeaArquiteturadoJavascriptTableless
Tcnicas e Prticas
http://tableless.com.br/jailsoframeworkearquiteturajavascript/
21/21