2013 jco tipjs.com javascript mvc framework

제 13 회 한국자바개발자 컨퍼런스

HellotipJS JavaScript

MVCFramework

undefine:D 백승현


PAEK, Seung-Hyun

web developertipJS.com

@console.comKAUG(Korea AngularJS User Group) organizer


Obstacles with using JavaScript

the spaghetti sourcebrowser cache

processing of dynamic HTMLdebugging

benchmarkinginternationalization/i18n



the spaghetti source


Obstacles with using JavaScript - the spaghetti source

<script>functionA(){

}

functionB(){ …}

functionC(){ …}

ProcessBlock

functionBA()

functionBB()

functionCA()

functionCB()




}

functionB(){ …}

functionC(){ …}

tipJS.controller({ name:’controllerA’, invoke:function(){

}});

ProcessBlock

ProcessBlock

model.func-tionBA()model.func-tionBB()model.func-tionCA()

functionBA()

functionBB()

functionCA()

functionCB()

model.func-tionCB()




}

functionB(){ …}

functionC(){ …}

tipJS.controller({ name:’controllerA’, invoke:function(){

}});

tipJS.model({ name:’model’, functionBA:function(){

}, functionBB:function(){

}});

ProcessBlock

ProcessBlock

model.func-tionBA()model.func-tionBB()

Process-Block

tipJS.model({ name:’model’, functionCA:function(){

}, functionCB:function(){

}});

Process-Block

model.func-tionCA()

functionBA()

functionBB()

functionCA()

Process-Block

functionCB()

model.func-tionCB()

Process-Block



browser cache


Obstacles with using JavaScript - browser cache

<script src=‘…/js/scriptFile1.js’></script>





tipJS.define({ … noCache : true, noCacheParam : ‘ver’, noCacheVersion : 1.3, controllers : [ ‘someCtrl.js’ ], models : [ ‘someModel.js’ ], …});



tipJS.define({ … noCache : true, noCacheParam : ‘ver’, noCacheVersion : 1.3, controllers : [ ‘someCtrl.js’ ], models : [ ‘someModel.js’ ], …});

<script src=‘…/controllers/someCtrl.js?ver=1.3’></script>

<script src=‘…/models/someModel.js?ver=1.3’></script>



processing of dynamic HTML


Obstacles with using JavaScript - processing of dynamic HTML

tipJS.controller({ … var person = { name : ‘foo’, age : 20 };

var html = ‘’; html += ‘<div>’; html += ‘ <ul>’; for(var i=0; i<array.length; i++) { html += ‘ <li>name : ’ + person.name + ‘</li>’; html += ‘ <li>age : ’ + persion.age + ‘</li>’; } html += ‘ </ul>’; html += ‘</div>’;

$(‘#targetDiv’).html( html ); …});



tipJS.controller({ … var person = { name : ‘foo’, age : 20 }; var option = { url:’.../person.html’, renderTo : ‘personDiv’, data : [person, person] } var returnHTML = this.renderTemplate( option ); …});

<div> <ul> <@ for(var i=0; i<data.length; i++) { @> <li><@= data[i].name @></li> <li><@= data[i].age @></li> <@ } @> </ul></div>



debugging


Obstacles with using JavaScript - debugging

tipJS.config ({ … developmentHostList:[ 'localhost' ,'127.0.0.1‘ ,'tipjs.com ], …});


Obstacles with using JavaScript - debugging

tipJS.config ({ … developmentHostList:[ 'localhost' ,'127.0.0.1‘ ,'tipjs.com ], …});

tipJS.controller({ ... tipJS.debug(’varA is ’+ varA); tipJS.log(’varA is ’+ varA); tipJS.echo(someObject); ...});



benchmarking


Obstacles with using JavaScript - benchmarking

tipJS.benchmark.mark("point1");... tipJS.benchmark.mark("point2");…tipJS.benchmark.mark("point3");…


Obstacles with using JavaScript - benchmarking

tipJS.benchmark.mark("point1");... tipJS.benchmark.mark("point2");…tipJS.benchmark.mark("point3");…

tipJS.benchmark.elapsedTime("point1", "point2");





internationalization/i18n


Obstacles with using JavaScript - internationalization/i18n

tipJS.localSet({ "Save":"저장“ , "Load":"불러오기“});

tipJS.localSet({ "Save":"保存“ , "Load":"読み込み“});



tipJS.define({ name:"someApp", localSet:true, ...});






tipJS.controller({ … invoke:function(params){ alert( tipJS.msg("Load") ); // "불러오기 " }});






tipJS.controller({ … invoke:function(params){ alert( tipJS.msg("Load") ); // " 読み込み " }});




<script>...tipJS.lang = "ja"; // set to JapanesstipJS.loadApp(["someApp"]);...</script>


http://tipJS.com

QnA

http://tipjs.com/


undefined.kr

The END

2013 jco tipjs.com javascript mvc framework

Technology