Exploring JavaScript MV Frameworks Part 1 – Hello Backbonejs

Exploring JavaScript MV Frameworks Part 1 – Hello Backbonejs

JavaScript는 웹에서 가장 인기 있는 프로그래밍 언어 중 하나가 되었습니다. 처음에 개발자들은 단순히 서버 측 프로그래밍을 위한 것이 아니었기 때문에 심각하게 받아들이지 않았습니다.

14min read

JavaScript는 웹에서 가장 인기 있는 프로그래밍 언어 중 하나가 되었습니다. 처음에 개발자들은 단순히 서버 측 프로그래밍을 위한 것이 아니었기 때문에 심각하게 받아들이지 않았습니다.

전문 개발자들 사이에서는 이 언어가 사용자 인터페이스에만 초점을 맞추기 때문에 "아마추어"를 위한 것이라는 일반적인 오해가 있었습니다. JavaScript는 Ajax의 사용이 밝혀지고 전문 프로그래머가 페이지의 응답성을 중요하게 생각했을 때 주목을 받았습니다. 그러나 이제 사용자 경험이 웹 개발의 핵심 부분이 됨에 따라 이 언어가 그 어느 때보다 인기를 얻고 있습니다. 웹 액세스는 브라우저에만 국한되지 않습니다 – 동일한 콘텐츠에 액세스하는 다양한 화면 크기를 가진 많은 장치가 있습니다. HTML5와 CSS3의 등장으로 웹은 그 어느 때보다 적응력과 반응성이 높아질 것이며 JavaScript는 여기에서 중요한 역할을 합니다. 또한 NodeJS 프레임워크에 의해 가능해진 서버 측 프로그래밍에서도 인기를 얻었습니다.

최신 애플리케이션에서 JavaScript 사용이 증가함에 따라 개발자는 유지 관리 가능한 코드를 작성하고, 문제를 분리하고, 테스트 용이성을 개선해야 합니다. JavaScript는 "클래스"가 적은 언어이며 객체 지향 프로그래밍을 지원하도록 설계되지 않았지만 해결 방법을 통해 유사한 결과를 얻을 수 있습니다. 따라서 객체 지향 프로그래밍 세계의 개발자라면 익숙해 질 때까지 어려움을 겪을 것입니다. HTML의 클라이언트 측 스크립팅을 단순화하는 jQuery와 같은 일부 DOM 조작 라이브러리가 있지만 실제로는 관심사 분리를 효과적으로 처리하는 문제를 해결하지 못합니다. HTML, JavaScript 및 서버에서 가져온 데이터 간의 데이터를 동기화하기 위해 많은 jQuery 선택기와 콜백을 작성하게 될 것이며 여전히 스파게티 코드에 갇혀 있습니다.

다행히도 구출할 수 있는 몇 가지 라이브러리와 프레임워크가 있습니다. JavaScript 응용 프로그램을 구조화하는 데 도움이 되는 몇 가지 개념과 라이브러리를 살펴보겠습니다!

이 게시물은 JavaScript 프레임워크 및 라이브러리에 대한 블로그 시리즈의 첫 번째 부분이며 여기에서 BackboneJS를 탐색할 것입니다. 다른 사람들을 위해 계속 지켜봐 주십시오!

MV*란 무엇입니까?

모든 프레임 워크는 다소 MVC가되려고하지만 반드시 패턴을 엄격하게 따르는 것은 아닙니다. 모든 패턴의 아이디어는 Controller인 두 개를 연결하는 Model, View 및 Logic을 분리하는 것입니다. 그러나 BackboneJS는 분리를 효율적으로 유지하지만 뷰 자체에 컨트롤러 로직을 포함합니다. 다른 한편으로는 MVP (Model-View-Presenter) 및 MVVM (Model-View-ViewModel) 패턴을 구현하는 다른 라이브러리가 있습니다. 이러한 이유로 이러한 프레임워크를 MV* 구현이라고 합니다.

MVC란 무엇입니까?

모델 – 뷰 – 컨트롤러는 오랫동안 사용되어 왔으며 서버 측 프로그래밍에 널리 사용되는 아키텍처 패턴입니다. ASP.net MVC, Ruby on Rails 등과 같은 몇 가지 프레임 워크가있어 웹 개발자가 쉽게 프로그래밍 할 수 있습니다.

모델(Model) – 응용 프로그램 데이터 및 비즈니스 규칙을 나타냅니다. (일명 도메인 모델, 엔티티)

보기– 사용자가 보는 것! (웹 브라우저의 HTML 페이지)

컨트롤러– 둘 사이의 중재자. 사용자 상호 작용에 따라 모델을 조작합니다. 모든 logic를 처리합니다.

MVC-Process

Image Source: Wikipedia

MVC In JavaScript?

JavaScript를 사용하여 단일 페이지 애플리케이션을 구축하는 것이 요즘 인기를 얻고 있으며 GMail 및 Google Docs가 그 좋은 예입니다. 이러한 유형의 응용 프로그램을 구축하기 시작하면 MV* 코딩 패러다임을 구성하는 많은 부분을 발명하게 될 것입니다. 따라서 대신 BackboneJS,​ ​KnockoutJS,​ ​AngularJS,​ ​EmberJS와 같은 유명한 라이브러리를 사용할 수 있습니다. BackboneJS부터 시작하여 이러한 프레임워크를 자세히 살펴보겠습니다.

프레임워크 아니면 그냥 라이브러리?

특정 JavaScript 프레임워크 또는 라이브러리에서 작업하기 전에 둘 사이의 차이점을 이해하는 것이 중요합니다. 라이브러리는 기존 아키텍처에 적합하고 특정 기능을 추가하는 반면 프레임워크는 아키텍처를 제공하므로 규칙을 따라야 합니다. 더 간단하게 하기 위해 Backbone과 Knockout은 JavaScript 라이브러리이고 Ember와 AngularJS는 프레임워크입니다. 우리가 그것들을 탐구하면서 당신은 분명한 차이를 보게 될 것입니다.

Hello Backbone

Backbone_logo_horizontal

Backbone은 CoffeeScript 로도 알려진 Jeremy Ashkenas가 만든 경량 JavaScript 라이브러리입니다. 단일 페이지 웹 응용 프로그램을 지원하도록 설계되었으며 일반적인 JavaScript 작업을 위한 유틸리티 기능을 제공하는 UnderscoreJS 라이브러리에 종속되어 있습니다.

Backbone을 사용하면 데이터가 모델로 표시되며, 이를 생성, 검증 및 서버에 저장할 수 있습니다. 뷰는 모델의 상태를 표시하며 UI 상호 작용으로 인해 모델에서 변경이 트리거될 때("변경" 이벤트를 통해) 다시 렌더링됩니다. 이러한 방식으로 Backbone은 데이터를 HTML UI와 동기화된 상태로 유지하는 구조화된 접근 방식을 제공합니다.

Backbone을 사용한 주요 웹사이트로는 USA Today, LinkedIn Mobile, Hulu, WordPress, Foursquare, Bitbucket, Khan Academy​ ​등이 있습니다.

Backbone 시작하기

Script Dependency

Backbone은 유틸리티 기능을 위해 UnderscoreJS 또는 Lo-Dash에 의존하며 DOM 조작을 위해 jQuery 또는 Zepto에 의존합니다. 따라서 페이지에 추가해야 합니다.

<script type="text/javascript" src="../common/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../common/lodash.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>

Backbone.Model

$(function(){
      var Person = Backbone.Model.extend({});
      var person = new Person({name: "James", age: 51});
      var name = person.get("name");
      var age = person.get("age");
      console.log(name + ":" + age);
});

사용자 고유의 Model 클래스를 만들려면 Backbone.Model을 확장하고 JavaScript 개체를 생성자에 전달하고 속성을 설정합니다.  그런 다음 get 함수에서 값을 쉽게 검색할 수 있습니다. 또는 set 함수를 사용하여 속성을 설정할 수 있습니다.

Backbone.View

Set a template first:

<script type="text/template" id="person-template">
    <div class="view">
        <p>Name: <input type="text" value="<%- name%>"/></p>
        <p>Age: <input type="text" value="<%- age%>"/></p>
    </div>
</script>

렌더링을 위한 컨테이너 설정:

<div id="container">Your content will load in a bit..</div>

Define a view in the script:

//define view
var AppView = Backbone.View.extend({
el: '#container',
model: person,
template: _.template($("#person-template").html()),
initialize: function(){this.render();},
render: function(){this.$el.html(this.template(this.model.toJSON()));}
});
// initialize view
new AppView();

Backbone의 뷰는 코드라기보다는 거의 관례에 가깝기 때문에 UI를 더 깔끔하게 분리하려면 Underscore 템플릿 또는 Mustache.js와 같은 JavaScript 템플릿 라이브러리에 의존해야 합니다. 위의 예에서는 Underscore의 템플릿 솔루션을 사용하여 분리를 달성했습니다.

Backbone.View.extend를 사용하여 사용자 정의 뷰를 만들 수 있습니다. View를 설정하기 위해 알고 있어야 하는 몇 가지 기본 속성이 있습니다.

  • 엘–뷰가 렌더링될 DOM 요소입니다. 이 경우 ID가 "container"인 <div> 요소입니다.
  • $el –뷰의 요소에 대한 캐시 된 jQuery (또는 Zepto) 객체
  • model –Backbone.Model을 사용하여 생성된 모델 데이터를 설정합니다.
  • 템플렛–Backbone은 선호하는 HTML 템플릿 방법과 관련하여 불가지론적입니다.  이 경우 Underscore의 템플릿 함수를 사용하여 "person-template"에 정의된 템플릿을 설정합니다
  • 초기화 –이 함수는 뷰를 생성할 때 Backbone에 의해 호출됩니다.
  • render –이 기능은 뷰 템플릿과 데이터가 있는 요소를 렌더링하는 데 사용됩니다. 이 경우 "container"의 값을 모델의 데이터로 구성된 템플릿 뷰로 바꿉니다

Backbone의 설명서에서 언급했듯이 View 클래스는 UI에서 발생하는 이벤트를 전달하는 일종의 컨트롤러로 생각할 수 있으며 HTML 템플릿은 실제 뷰로 사용됩니다. 이것은 Backbone이 실제 MVC 원칙을 따르는지 여부에 대한 논쟁으로 이어집니다. 그러나 MVC 라이브러리로 배우지 않고 관심사를 분리하는 방식을 중요하게 생각하면 괜찮을 것입니다.

얼마 전에 Backbone에는 자체 Backbone.Controller 기능이 있었지만 이 구성 요소의 이름이 사용하도록 설정된 방식에서 의미가 없었기 때문에 Router로 이름이 변경되었습니다.

파일 크기, 다운로드 및 기타 유용한 링크

파일 크기 : 6.3Kb – 축소 및 56kb (전체 소스 및 주석 포함).

Download: Backbone website

Annotated Source: http://backbonejs.org/docs/backbone.html

CDN: cdnjs, jsdelivr

누가 그것을 사용하고 있습니까?: 그들의 예제 섹션을 확인하십시오

지켜

그래서 BackboneJS에 대한 간략한 소개와 일반적으로 JavaScript 프레임 워크에 대한 설명이었습니다. 다음 게시물에서는 Ember, Knockout 및 Angular도 소개될 것입니다. 그러니 계속 지켜봐 주세요!

If you have any questions write to me nish@infragistics.com or find me on twitter @nishanil

IgniteUI_Banner_300x250_a2

이 글에서는 여러분이 저와 같은 프로그래머이고 디자인이 우주 바로 바깥의 행성이라고 가정합니다. 당신이 디자인 행성에서 왔다면, 당신도 계속 읽을 수 있습니다. 당신에게도 뭔가가 있을지도 모릅니다!

CSS를 작성하는 것은 웹사이트가 페이지와 복잡한 레이아웃으로 뚱뚱해지기 전까지는 재미있고 흥미롭고 쉽습니다. 그러한 페이지에서 레이아웃을 수정하려고 시도한 적이 있다면 – 내가 의미하는 바를 알 것입니다. 레이아웃 수정에 대해 이야기 했나요? 아, 네, 모든 브라우저 덕분입니다.

CSS를 작성하는 동안 많은 경우 스타일을 지정하는 것보다 프로그래밍 방식으로 더 많이 작성할 수 있기를 바랐습니다. 예를 들어 CSS가 변수 선언을 허용했다면 단순히 변수에 값을 유지하고 몇 가지 작업을 수행하고 속성에서 다시 사용할 수 있습니다. 그러나 스타일링만 해야 하는 스타일시트 언어에서 요구하는 것은 너무 많습니다!

다행히도 CSS를 멋지게 확장하고 프로그래머가 원했던 모든 것을 추가하는 Sass & LESS와 같은 몇 가지 전처리기가 있습니다. 몇 가지 연구를 한 후 나는 그것이 어떻게 작동하는지 확인하기 위해 LESS를 선택했습니다. 나는 LESS로 내 데모 중 일부를 다시 스타일링하는 데 몇 시간을 보냈고 나는이 언어에 깊은 인상을 받았다고 말해야합니다. 그래서 여기서 LESS에 대해 설명하겠습니다.

So LESS

LESS는 CSS를 확장하고 변수, 믹스인, 연산 및 함수와 같은 멋진 기능을 추가하는 동적 스타일시트 언어입니다. 더 중요한 것은 개발자가 복잡한 CSS를 작성하고 놀라운 웹 사이트를 정말 빠르게 구축하는 데 더 적은 노력이 필요하다는 것입니다.  LESS는 학습을 쉽게 해주는 기존 CSS 구문을 사용하며 언제든지 CSS로 돌아갈 수 있습니다.

LESS의 첫 번째 버전은 Ruby로 작성되었으며 컴파일 시 CSS를 내보내는 서버 측 언어로 사용되었습니다. 그러나 이후 버전에서는 Ruby의 사용이 더 이상 사용되지 않고 JavaScript로 대체되었습니다. HTML 페이지에 JavaScript 파일을 추가하면 LESS.js 브라우저 내에서 실시간으로 컴파일할 수 있습니다. 또한 Node.js의 도움으로 서버 측 컴파일을 지원하므로 개발자가 둘 중 하나를 더 쉽게 선택할 수 있습니다.

Adding Less.js – Client-Side Usage

모든 LESS 파일의 확장자는 ".less"여야 하며 웹 서버의 CSS 디렉토리 아래에 있을 수 있습니다.

HTML 페이지에 다음 코드 줄을 추가하여 브라우저에서 CSS의 사전 컴파일이 수행되도록 합니다.

<link rel="stylesheet/less" type="text/css" href="css/style.less"/>
<script src="js/less-1.3.3.min.js"></script>

참고: 로컬 파일 시스템에서 작업하는 경우, 즉 Chrome 또는 IE에서 "file:///"를 사용하여 페이지에 액세스하는 경우 각각 "교차 출처 요청은 HTTP에 대해서만 지원됩니다" 또는 "액세스 거부" 오류가 발생할 수 있습니다. 이것들은 몇 가지 보안 관련 오류이며 제거 할 방법을 찾지 못했습니다. 개발 서버에서 호스팅하면 이것이 사라지는 것을 볼 수 있습니다. 그러나 Mozilla Firefox에서 문제를 찾지 못했습니다.

Server Side Usage

성능이 마음에 든다면 서버 측에서 이러한 파일을 컴파일하는 방법을 살펴볼 수 있습니다. 먼저 Node.js 다운로드하여 설치 한 다음 npm을 사용하여 less 컴파일러 (lessc.cmd)를 다운로드하십시오.

컴파일하려면 다음 명령을 사용하십시오.

lessc styles.less > styles.css

CSS 축소와 같은 더 많은 옵션을 보려면 매개 변수 없이 lessc를 실행합니다.

이 파일을 실시간으로 컴파일 할 수있는 멋진 편집기는 거의 없습니다. 예를 들어 나는 타이핑할 때 CSS로 LESS를 멋지게 컴파일하는 WebStorm을 사용합니다. 대규모 프로젝트를 진행 중이고 대부분의 개발자가 LESS에 익숙하다면 빌드 작업에 서버 측 컴파일 단계를 추가 할 수 있습니다.

이제 ".less" 파일을 만들고 CSS로 컴파일하는 방법을 알았으므로 이 언어를 자세히 살펴보겠습니다.

변수

앞서 언급했듯이 변수는 스타일 시트에 있는 좋은 기능 중 하나입니다. LESS를 사용하면 @ 기호의 도움으로 변수를 추가하고 속성에 사용할 수 있습니다. 변수를 사용하여 본문의 background-color와 color를 설정하는 예를 아래에서 찾으십시오.

@backgroundColor: #333;
@color: #fff;

body {
  background-color: @backgroundColor;
  color: @color;
  border-top: solid 10px #000;
  font-size: .85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
}

이제 이러한 변수를 코드의 나머지 부분에서 다시 사용할 수 있으며 색상에 대한 변경 사항은 모든 코드에 적용됩니다. CSS 코드는 LESS와 공존할 수 있습니다 – 속성 중 두 개만 변수에 의해 설정되고 나머지는 CSS입니다.

작업

이제 스타일시트에서 변수가 가능하다는 것을 알았으므로 변수에 대해 작업을 수행할 수 있다는 사실을 알게 되어 기쁩니다. 쉬워요! 이를 수행하는 방법의 예는 다음과 같습니다.

@baseColor: #000;
@backgroundColor: (@baseColor + #333);
@color: (@backgroundColor / 3);
@font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
@font-Size: 1em;
#body {
  background-color: @backgroundColor;
  color: @color;
  border-top: solid 10px @baseColor;
  font-size: (@font-Size - .15em);
  font-family: @font-family;
}

​@backgroundColor, @color 및 font-size가 연산에서 계산된 값을 가져오는 방법을 살펴보십시오. 생성되는 출력을 아래에서 찾으십시오.

Output:

#body {
  background-color: #333333;
  color: #111111;
  border-top: solid 10px #000000;
  font-size: 0.85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

Mixins

Mixin은 한 규칙 집합의 모든 속성을 다른 규칙 집합으로 재사용하는 데 도움이 됩니다. 예를 들면 다음과 같습니다.

@baseColor: #000;
@font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
@font-Size: 1em;

.gradients {
  /*local scoped variables*/
  @gradientStartColor: #eaeaea;
  @gradientEndColor: #cccccc;
  background: @baseColor; /* variable from global scope */
  background: linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -o-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -ms-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -moz-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -webkit-linear-gradient(top, @gradientStartColor, @gradientEndColor);
}

#body {
 .gradients;
  border-top: solid 10px @baseColor;
  font-size: (@font-Size - .15em);
  font-family: @font-family;
}

위의 코드에서 how.gradients 규칙 집합이 #body로 재사용되는 것을 볼 수 있습니다. 꽤 좋은 기능이니, 지금 작성해야 하는 코드가 얼마나 적은지 생각해 보세요!

변수 범위 지정

다른 모든 프로그래밍 언어와 마찬가지로 LESS는 변수 범위 지정도 제공합니다. 변수는 먼저 로컬에서 조회되고 발견되지 않으면 전역으로 검색됩니다. 위의 예에서 @baseColor가.gradients 및 #body 모두에서 사용되고 있음을 알 수 있습니다. 다음과 같은 로컬 범위의 변수가 있는 경우 @gradientStartColor 및 @gradientEndColor 혼합되지 않는 한 범위 외부에서 액세스할 수 없습니다. 위의 예에서 #body 내부에서 해당 변수에 액세스 할 수 있습니다.​​

자세한 내용은 범위를 확인하세요.

Parametric Mixins

이것은 같은 클래스에서 혼합될 수 있지만 매개변수를 허용하는 특별한 유형의 규칙 세트입니다. 다음은 다른 브라우저에 대해 border-radius를 설정하는 예입니다.

.border-radius (@radius: 4px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#body {
 .gradients;
  .border-radius;
  border-top: solid 10px @baseColor;
}
#sidebar{
  .border-radius(25px);
  background: #eee;
}

보시다시피 #body 매개변수 없이 호출하는데, 이는 LESS가 매개변수의 기본값을 설정할 수 있기 때문이며, 이 경우 4px 입니다. 매개 변수가있는 호출 #sidebar 확인하십시오. 여러 매개 변수를 설정할 수도 있으며 자세한 내용은 여기를 확인하십시오.

기능

LESS는 색상 변환, 문자열 조작 및 수학 수행을 위한 몇 가지 도우미 함수를 제공합니다. 아래에서 백분율을 사용하여 0.5에서 50으로 변환하고 기본 색상의 채도를 5% 증가시킨 다음 배경색을 25% 밝아지고 8도 회전하는 색상으로 설정하는 LESS 문서의 예를 찾으십시오.

#sidebar{
  width: percentage(0.5);
  color: saturate(@baseColor, 5);
  background-color: spin(lighten(#ff0000, 25%), 8);
}

자세한 내용은 Function Reference를 확인하십시오.

요약

지금쯤이면 LESS가 테이블에 무엇을 가져다주는지 잘 알고 계실 것입니다. 그러나 LESS가 유일한 CSS 전처리기는 아닙니다. Syntactically Awesome Stylesheets의 약자인 Sass와 다른 것들이 있지만 인기가 없습니다. 둘 사이의 좋은 비교를 알려줄 다양한 블로그가 있습니다. 나는 당신이 둘 다 시도하고 당신이 좋아하는 구문을 고수하는 것이 좋습니다! 결국 그들은 CSS를 방출합니다.Smile

피드백이 있으신가요? 트위터에서 나를 찾아줘 @nishanil

0640.IgniteUI_Banner_728x90_b

어떻게
데모 요청