2013 JCO tipJS.com JavaScript MVC framework

958 views
884 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
958
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×