대규모 자바스크립트 웹어플리케이션개발하기 with BackboneJS and RequireJS 넷스루개발 2 팀이병주

대규모 자바스크립트 웹어플리케이션개발하기 with BackboneJS and RequireJS 넷스루개발 2 팀이병주

웹사이트 웹어플리케이션

Mission

웹사이트처럼 개발하기에는 문제점이많다

Why?!

복잡하다 양이많다

예제를통해해결책을알아보자 http://pillarlee16.github.com/simpleapp/

복잡함을해결하자!! 다양한 MV* Framework BackboneJS, JavaScriptMVC, Spine.js, SproutCore, Ember.js, AngularJS, Knockout. js, Sammy.js, Sencha, YUI library

BackboneJS 를선택한이유 주된이유 가볍다 필요한요소들만있다 자유도가높다 부가적인이유 이해하기가제일쉬웠다 개발하고자하는프로젝트에잘어울렸다

Backbone.Model var Person = Backbone.Model.extend({ }); var person = new Person({name: 'Mr.Lee', age: 26}); person.get('name'); // Mr.Lee person.get('age'); // 26 person.set({part: 'Dev2'}); person.get('part'); // Dev2

Backbone.Collection var PersonList = Backbone.Collection.extend({ model: PersonList }); var personlist = new PersonList(); personlist.add(person1); personlist.add(person2); personlist.remove(person2); personlist.get(1); // person1

Backbone.Event var object = {}; _.extend(object, Backbone.Events); object.on("log", function (msg) { console.log("triggered " + msg); }); object.trigger("log", "an event"); // Triggered an event

Backbone.Event var object = {}; _.extend(object, Backbone.Events); object.on("log", function (msg) { console.log("triggered " + msg); }); object.trigger("log", "an event"); // Triggered an event

Backbone.View var DataInputView = Backbone.View.extend({ template: _.template($("#tmpl").html()) events: { "click input[type=button]": "addperson" } render: function () { this.$el.html(this.template()); return this; }, addperson: function () { /** todo sth ** } });

모듈화를통해코드를분리하자!! Javascript Module 을지원하기위한노력 CommonJS / Node.js AMD / Require.js ECMAScript Harmony / Module

AMD / Require.js // module definition wrapper define(['modulea', 'moduleb'], function (modulea, moduleb) { var module = {}; module.dosomething = function () { modulea(); moduleb(); } return module; } });

AMD / Require.js // top-level require call require(['module'], function (module) { module.dosomething(); });

AMD / Require.js RequireJS 의플러그인 r.js 옵션에따라다양한빌드가가능하다. AMD 의단점인많은 Http Request 문제를해결할수있다. // app.build.js ({ appdir: "some/path/", baseurl: "./", mainconfigfile: '../some/path/to/main.js', paths: { "foo.bar": "../scripts/foo/bar", "baz": "../another/path/baz" }, dir: "../some/path", modules: [ { name: "foo/bar/bip", exclude: ["foo/bar/bop"] } ], wrap: { start: "(function() {", end: "}());" }, fileexclusionregexp: /^\./ })

Referrence (1) http://backbonejs.org/ : BackboneJS 공식홈페이지. http://underscorejs.org/ : UnderscoreJS 공식홈페이지. http://requirejs.org/ : RequireJS 공식홈페이지 http://addyosmani.com/toolsforjqueryapparchitecture/ : Javascript 로프로젝트를진행하는데있어서사용되는다양한도구들을소개한다. 기존의 Java 프로젝트에서이런것들이됐었는데 Javascript 는어떤걸사용하면될까라는의문이들때보면좋다. https://speakerdeck.com/u/addyosmani/p/large-scale-javascript-applicationarchitecture : Javascript 웹어플리케이션아키텍쳐에대해설명한다. 모니터링콘솔의구조를잡는데많은도움을받았다. http://www.html5rocks.com/webappfieldguide/toc/index/ : 웹어플리케이션을만드는데잇어서기본적인지침을소개한다. https://github.com/addyosmani/backbone-fundamentals/ : Developing Backbone.js Applications 책의 ebook 을관리한다. 혹시 ebook 을읽는다면예제파일들이유용하다. https://github.com/addyosmani/backbone-aura : Publish/Subscribe 방식으로 Backbone 의모듈들을어떻게 Decoupling 시키고모듈간의통신을어떻게하는지참고할수있다.

Referrence (2) https://github.com/tbranyen/backbone-boilerplate : Backbone 프로젝트의가장기본적인구조를잘만들어놓았다. https://github.com/backbone-boilerplate/grunt-bbb : Backbone Boilerplate 를 Node.js 로실행시키는프로젝트이다. 자바스크립트로 Server-side 를어떻게구성해놓았는지볼수있다. http://addyosmani.github.com/todomvc/ : TodoMVC 는다양한 Javascript MV* 프레임워크로동일한예제어플리케이션을구현해놓았다. 모니터링콘솔에서사용한 Backbone 뿐만아니라 Ember, Spine, Angular 등다양한프레임워크가있으니실제로구현된웹어플리케이션의구조를엿볼수있다. http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html : Backbone 을 Jasmine 과 Sinon.js 를사용하여테스트하는방법에대한가이드이다. 1 편은기본적인 Backbone 에대한지식과테스트하는방법을소개한다. http://tinnedfruit.com/2011/03/25/testing-backbone-apps-with-jasmine-sinon-2.html : 위의가이드의 2 편이다. 2 편은 Backbone 의 Model 과 Collection 을테스트하는방법을소개한다. http://tinnedfruit.com/2011/04/26/testing-backbone-apps-with-jasmine-sinon-3. html : 위의가이드의 3 편이다. 3 편은 Backbone 의 Router 와 View 를테스트하는방법을소개한다.

Referrence (3) http://perka.github.com/backbone-ui/ : Backbone 을사용하여 UI Component 들을만들어놓았다. 직접사용하기에는부족한것같지만 UI Component 들을어떻게구성하고, 구현하였는지참고할수있다. http://backboneconf.com/ : 2012 년 5 월 30 일, 31 일보스턴에서열렸던 BackboneConf 의웹사이트이다. 컨퍼런스에서발표되었던슬라이드들을볼수있다. 슬라이드만보는것으로는내용을완전히이해할수는없지만한번쯤볼만하다.

One More Thing!

Yeoman.io

Yeoman.io Scaffolding (HTML5 Boilerplate, Twitter Bootstrap, AMD) Watch process Lint script Image Optimization & AppCache ECMAScript6 module Package Management PhantomJS Unit Testing

맺음말 웹어플리케이션개발방법들이공개되고있다 Best Practice 는아니다 키워드를알게되는것이라도도움이되었으면

Next Week 자바스크립트프로젝트의 단위테스트, 테스트커버리지그리고 CI

Q & A