Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2013 JCO tipJS.com JavaScript MVC framework

1,083 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

2013 JCO tipJS.com JavaScript MVC framework

  1. 1. 제13회 한국자바개발자 컨퍼런스 HellotipJS JavaScript MVC Frameworkundefine:D 백승현
  2. 2. 제13회 한국자바개발자 컨퍼런스 PAEK, Seung-Hyun web developer tipJS.com @console.comKAUG(Korea AngularJS User Group) organizer
  3. 3. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript the spaghetti source browser cache processing of dynamic HTML debugging benchmarking internationalization/i18n
  4. 4. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript the spaghetti source browser cache processing of dynamic HTML debugging benchmarking internationalization/i18n
  5. 5. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript the spaghetti source
  6. 6. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - the spaghetti source <script> functionA(){ ProcessBlock functionBA() functionBB() functionCA() functionCB() } functionB(){ … } functionC(){ … }
  7. 7. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - the spaghetti source <script> tipJS.controller({ functionA(){ name:’controllerA’, ProcessBlock invoke:function(){ functionBA() ProcessBlock functionBB() model.functionBA() functionCA() model.functionBB() functionCB() model.functionCA() } model.functionCB() functionB(){ } … }); } functionC(){ … }
  8. 8. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - the spaghetti source <script> tipJS.model({ tipJS.controller({ name:’model’, functionA(){ name:’controllerA’, functionBA:function(){ ProcessBlock ProcessBlock invoke:function(){ functionBA() }, ProcessBlock functionBB:function(){ functionBB() model.functionBA() ProcessBlock functionCA() model.functionBB() } }); functionCB() model.functionCA() tipJS.model({ name:’model’, } model.functionCB() functionCA:function(){ ProcessBlock functionB(){ } … }, }); functionCB:function(){ } ProcessBlock functionC(){ … } }); }
  9. 9. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript browser cache
  10. 10. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - browser cache <script src=‘…/js/scriptFile1.js’></script> <script src=‘…/js/scriptFile2.js’></script> <script src=‘…/js/scriptFile3.js’></script>
  11. 11. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - browser cache <script src=‘…/js/scriptFile1.js?ver=1.3’></script> <script src=‘…/js/scriptFile2.js?ver=1.3’></script> <script src=‘…/js/scriptFile3.js?ver=1.3’></script>
  12. 12. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - browser cache tipJS.define({ … noCache : true, noCacheParam : ‘ver’, noCacheVersion : 1.3, controllers : [ ‘someCtrl.js’ ], models : [ ‘someModel.js’ ], … });
  13. 13. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - browser cache 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>
  14. 14. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript processing of dynamic HTML
  15. 15. 제13회 한국자바개발자 컨퍼런스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 ); … });
  16. 16. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - processing of dynamic HTML <div> <ul> <@ for(var i=0; i<data.length; i++) { @> <li><@= data[i].name @></li> <li><@= data[i].age @></li> <@ } @> </ul> </div>
  17. 17. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - processing of dynamic HTML <div> <ul> <@ for(var i=0; i<data.length; i++) { @> <li><@= data[i].name @></li> <li><@= data[i].age @></li> <@ } @> </ul> </div> tipJS.controller({ … var person = { name : ‘foo’, age : 20 }; var option = { url:’.../person.html’, renderTo : ‘personDiv’, data : [person, person] } var returnHTML = this.renderTemplate( option ); … });
  18. 18. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript debugging
  19. 19. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - debugging tipJS.config ({ … developmentHostList:[ localhost ,127.0.0.1‘ ,tipjs.com ], … });
  20. 20. 제13회 한국자바개발자 컨퍼런스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); ... });
  21. 21. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript benchmarking
  22. 22. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - benchmarking tipJS.benchmark.mark("point1"); ... tipJS.benchmark.mark("point2"); … tipJS.benchmark.mark("point3"); …
  23. 23. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - benchmarking tipJS.benchmark.mark("point1"); ... tipJS.benchmark.mark("point2"); … tipJS.benchmark.mark("point3"); … tipJS.benchmark.elapsedTime("point1", "point2"); tipJS.benchmark.elapsedTime("point2", "point3"); tipJS.benchmark.elapsedTime("point1", "point3");
  24. 24. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript internationalization/i18n
  25. 25. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - internationalization/i18n tipJS.localSet({ "Save":"저장“, "Load":"불러오기“ }); tipJS.localSet({ "Save":"保存“, "Load":"読み込み“ });
  26. 26. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - internationalization/i18n tipJS.localSet({ tipJS.define({ "Save":"저장“, name:"someApp", "Load":"불러오기“ localSet:true, }); ... }); tipJS.localSet({ "Save":"保存“, "Load":"読み込み“ });
  27. 27. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - internationalization/i18n tipJS.localSet({ tipJS.define({ "Save":"저장“, name:"someApp", "Load":"불러오기“ localSet:true, }); ... }); tipJS.localSet({ tipJS.controller({ "Save":"保存“, … "Load":"読み込み“ invoke:function(params){ }); alert( tipJS.msg("Load") ); // "불러오기" } });
  28. 28. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - internationalization/i18n tipJS.localSet({ tipJS.define({ "Save":"저장“, name:"someApp", "Load":"불러오기“ localSet:true, }); ... }); tipJS.localSet({ tipJS.controller({ "Save":"保存“, … "Load":"読み込み“ invoke:function(params){ }); alert( tipJS.msg("Load") ); // "불러오기" } }); <script> ... tipJS.lang = "ja"; // set to Japaness tipJS.loadApp(["someApp"]); ... </script>
  29. 29. 제13회 한국자바개발자 컨퍼런스Obstacles with using JavaScript - internationalization/i18n tipJS.localSet({ tipJS.define({ "Save":"저장“, name:"someApp", "Load":"불러오기“ localSet:true, }); ... }); tipJS.localSet({ tipJS.controller({ "Save":"保存“, … "Load":"読み込み“ invoke:function(params){ }); alert( tipJS.msg("Load") ); // "불러오기" } }); <script> tipJS.controller({ ... … tipJS.lang = "ja"; // set to Japaness invoke:function(params){ tipJS.loadApp(["someApp"]); ... alert( tipJS.msg("Load") ); // " 読み込み" </script> } });
  30. 30. 제13회 한국자바개발자 컨퍼런스http://tipJS.com QnA
  31. 31. 제13회 한국자바개발자 컨퍼런스undefined.krThe END

×