Backbone.js로 만든 10 개의 웹 앱 [사례 연구]

스파게티 코드에 얽힌 적이 있습니까? 앱을 건강하게 먹일 것입니까? 그렇다면 Backbone.js로 수행 할 수있는 작업을 살펴보십시오.. 등뼈 Model-View-Controller 디자인 패턴을 기반으로하는 자바 스크립트 라이브러리이지만 컨트롤러 요소가 부족하므로 MV * 프레임 워크라고 부르는 것이 좋습니다.

그것은 당신이 구축하는 데 도움이됩니다. 빠르고 매끄럽고 데이터가 풍부한 단일 페이지 웹 앱은 사용자 인터페이스와 별도의 데이터 로직, 데이터를 DOM에 묶지 않아도됩니다. 앱이 커질수록 확장. Backbone은 기본적으로 RESTful API와 동기화되므로 RESTful JSON 인터페이스를 통해 클라이언트 측 앱을 기존 서버 측 API에 쉽게 연결할 수 있습니다.

이 게시물에서는 Backbone 라이브러리의 기능을 활용하는 10 개의 웹 앱을 연구하여 Backbone.js가 미래의 웹 앱 프로젝트를 위해 가질 수있는 잠재력을 파악하는 데 도움을 드릴 것입니다..

1. 트레일

트레일 프로젝트를 보드, 체크리스트, 카드, 카드 목록으로 구성하고 팀 구성원 간의 의사 소통을위한 대화와 같은 도구를 제공하는 온라인 공동 작업 및 프로젝트 관리 응용 프로그램입니다.

Trello는 처음부터 Backbone.js로 지어졌습니다. Backbone은 HTML5 History API 및 프론트 엔드에서 Mustache 로직리스 템플리트 언어와 함께 작동합니다. Trello Tech Stack의 모든 요소는 업데이트를 쉽게 처리 할 수있는 유지 관리가 용이 ​​한 클라이언트, 과 서버와 동적으로 다시 동기화 DOM 이벤트가 트리거 될 때마다.

Trello는 카드 또는 회원과 같은 객체에 대해 백본 모델 및 뷰를 사용하고 관련 모델에 대한 백본 컬렉션 (예 : 목록의 카드)을 사용합니다. 개발자들도 자체 클라이언트 측 모델 캐시 내장 ...에 대한 더 빠른 업데이트 그리고 더 효율적인 코드 재사용.

2. 정사각형

당신이 이미 들었을 가능성이 큽니다. 정사각형, 전 세계의 친구들과 장소를 공유 할 수있게 해주는 인기있는 위치 기반 소셜 네트워킹 앱.

Foursquare의 핵심 자바 스크립트 API는 백본 모델 (Backbone Models)을 기반으로합니다. Foursquare API의 모델 클래스 (예 : 사용자, 장소 및 체크인)은 백본 모델 클래스의 하위 클래스이며 메소드와 속성을 상속받습니다..

코드의 구현은 다음과 같이 스케치 할 수 있습니다. fourSq.api.models.Venue = fourSq.api.models.Model.extend (...); 예, 맞습니다. Backbone을 사용하면 멋진 객체 지향 JavaScript 작성.

백본 뷰 (Backbone Views)는 Foursquare 앱에서도 역할을합니다. 홈페이지 맵 및 목록. Backbone 외에도 Foursquare의 JavaScript API는 jQuery, Underscore.js (백본의 유일한 의존성)과 클로저 컴파일러.

3.베이스 캠프 일정

베이스 캠프, 인기있는 프로젝트 관리 앱은 캘린더 기능으로 Backbone.js를 사용합니다..

Basecamp Calendar의 주요 디자인 목표는 다음을 만드는 대화식 인터페이스를 만드는 것이 었습니다. 직관적 인 그룹 스케줄링 가능하다, 그리고 밀리 초 단위로 업데이트. In Basecamp Calendar 백본은 모델 (클라이언트 측 데이터)이 업데이트 될 때마다 ECO (Embedded CoffeeScript) 템플릿으로 뷰를 렌더링합니다..

개발자 팀이 전체 Basecamp를 Backbone.js의 주요 사용 사례 인 단일 페이지 응용 프로그램으로 만들지는 않았지만 실제로는 장점을 활용할 수있는 캘린더 기능에서만 라이브러리를 활용했습니다. 백본 (Backbone)으로 전체 단일 페이지 앱을 제작할 필요가 없다는 것을 보여 주기만하면됩니다. 그것이 적용될 수있는 곳을 신중히 생각하는 것이 낫다..

Backbone 안티 패턴에 대해 자세히 읽고 전체 앱에 백본이 필요한지 여부를 결정하십시오..

4. Flowdock

Flowdock 그룹 채팅, 팀받은 편지함 및 실시간 워크 플로와 같은 기능을 제공하는 실시간 팀 커뮤니케이션 앱입니다.

Flowdock은 처음부터 Backbone.js 위에 구축되었습니다. 개발팀의 주요 과제는 실시간 메시지와 워크 플로우를 가능하게하는 것이 었습니다. 기본적으로 Backbone.js는 실시간 데이터 흐름을 가능하게하지 않는 RESTful 인터페이스를 통해 서버 측에 연결합니다. 따라서 개발자 Socket.io 실시간 엔진을 통해 메시지를 저장하기로 결정했습니다. REST API 대신.

이를 달성하기 위해 사용자 지정 메서드를 작성했습니다. 전화 한 Backbone.sync. Socket.io는 자바 스크립트 라이브러리이기 때문에 자바 스크립트 기반 프론트 엔드와 백엔드 (Node.js) 간의 원활한 통신을 가능하게합니다. Flowdock은 주로 서버 측의 레일즈 애플리케이션이지만 Socket.io 연결을 처리하는 별도의 Node.js 백엔드를 가지고 있습니다.

Flowdock 실시간 사용자 경험 향상 Bacon.js는 기능적 반응 형 프로그래밍을 가능하게하는 편리한 JavaScript 라이브러리입니다. 의 EventStreams 기능 Bacon.js Flowdock이 백본 모델 및 컬렉션을 최신으로 유지하는 데 도움.

5. 칵테일 검색

칵테일 검색 는 매우 간단한 Backbone.js 구현 코드를 살펴볼 수있는 오픈 소스 앱입니다. 백엔드는 파이썬으로 구동되지만, 우리에게 흥미로운 점은 앱의 script.js 파일.

코드를 살펴보면 Model-View- * 프레임 워크의 아주 기본적인 구조를 볼 수 있습니다 : 모델 에 정의 된 칵테일 Backbone.Model 부모 클래스의 기본 설정을 변경하지 않는 클래스 백본 컬렉션 검색 결과 및 3 개의 백본보기에 각각 새로운 메소드가 추가됩니다. 백본.보기 부모 클래스.

index.html 파일을 살펴보면 개발자가 Backbone.js 및 그 종속성을 어떻게 추가했는지 확인할 수 있습니다, 언더 코어 .js 과 jQuery 머리 부분에. Underscore.js는 jQuery가 필요한 동안 Backbone의 유일한 의존성입니다. Backbone Views를 사용하여 DOM을 조작하려는 경우 (칵테일 검색 앱의 경우).

6. 비트 버켓

비트 버켓 Github와 유사한 소스 코드 호스팅 및 코드 관리 앱입니다. JIRA의 상업용 이슈 추적 소프트웨어에서 Backbone을 사용하는 Atlassian, 다른 주요 제품들.

그들의 애플 리케이션에서 Backbone.js의 철저한 활용 동안, 개발 팀은 백본에서 놓친 몇 가지를 발견했습니다. 그들은 만났다. Backbone.js의 느슨한 정의 규칙에 의한 많은 침묵의 실패. 이것은 기본적으로 모델, 컬렉션 및 뷰를 의미합니다. 그들이 노출하는 커스텀 이벤트를 반드시 정의 할 필요는 없다.. 그것이 충분하지 않다면, 모델은 항상 속성들 그들이 폭로하다.

이 허용 성격은 Atlassian 팀이 아닌 많은 개발자들에게 사랑받는 기능이므로 Backbone.Brace라는 자체 백본 확장을 개발했습니다. mixins 및 자체 문서화 된 속성 및 이벤트를 라이브러리에 추가합니다..

똑같은 것에 짜증이 난다면 Bitbucket 자체에서 호스팅되는 오픈 소스 프로젝트이므로 Backbone.Brace를 자신의 응용 프로그램에 추가 할 수 있습니다. BitBucket은 Trello와 마찬가지로 Mustache 템플릿 언어를 사용하여 프론트 엔드에서 백본보기를 렌더링합니다..

7. SoundCloud

SoundCloud 자신의 오디오를 녹음, 업로드 및 공유하거나 무료로 음악을들을 수있는 인기있는 오디오 배포 플랫폼입니다..

SoundCloud의 개발자는 Backbone.js를 모바일 앱의 프론트 엔드 프레임 워크로 사용했지만 데스크톱 웹 사이트의 클라이언트 측에서도 사용하기를 너무 좋아했습니다. Backstage 블로그에서는 Backbone의 능력에 맞는 프레임 워크 선택 방법을 설명합니다. 유연하면서도 견고한 구조적 기반을 제공한다..

스케일링은 오디오 스트리밍 앱의 주된 관심사이며 SoundCloud는 “구현보다는 조직과 더 관련이있다.” 잘 조직 된 가벼운 Backbone을 이상적인 선택으로 만듭니다..

SoundCloud는 프론트 엔드에서 백본 뷰를 렌더링하기 위해 핸들러 의미 론적 템플릿 시스템을 사용합니다..

8. AirBnB

AirBnB 은 전세계에서 거의 200 개국에서 다양한 유형의 숙박 시설을 찾고 예약 할 수있는 미친 듯이 성공한 커뮤니티 마켓 플레이스입니다.

AirBnB는 SoundCloud처럼 모바일 앱에서 Backbone.js를 사용했지만 Wishlists, Match, Search, Communities 및 Payments와 같은 웹 앱 기능에서 점점 더 활용했습니다. AirBnB는 Backbone을 너무 좋아해서 프론트 엔드에서 사용하기 위해 정착했을뿐만 아니라 백엔드에서 라이브러리를 실행할 수있게하려고했습니다..

그들은 나중에 그들의 서버 측 백본 라이브러리, Rendr, 오픈 소스를 만들었습니다. Github 페이지에서 사용할 수 있습니다. Rendr은 Node.js로 작성되었으며 다음과 같은 철학을 따릅니다. “최소한의 구조 만 부과하여 개발자가 응용 프로그램에 가장 적합한 방식으로 라이브러리를 사용할 수있게합니다.” 백본 자체와 마찬가지로

AirBnB의 기술 스택에 더 관심이 있다면 Rails 백엔드에서 성배로가는 여행에 대한 블로그 게시물을 읽어보십시오. 클라이언트 측과 서버 측에서 백본의 동시 사용.

9. 훌루

훌루 미국에 거주하는 경우 TV 프로그램 및 영화를 무료로 시청할 수있는 동영상 스트리밍 앱입니다..

Hulu는 Backbone.js를 사용하여 영화 애호가를위한 원활하고 빠른 사용자 환경을 구축했습니다. 인터페이스를 사용하면 이동하면서 부드럽게 전환하여 앱을 빠르게 이동할 수 있습니다. 등뼈 사용자의 대역폭 절약 스크립트 및 삽입 된 비디오로 다시로드하지 마라. 항상.

Hulu는 백엔드에서 Rails 엔진을 실행합니다. 재미 있고 유익한 대화가 마음에 들면 개발자 팀과 jQuery의 관계 마침내 더 조직 된 백본 프레임 워크.

Backbone.js는 Hulu에게 렌더링을 서버 측에서 클라이언트 측으로 점진적으로 변환 기존 Rails 백엔드를 위험한 방식으로 다시 작성하는 대신.

10. 백작

백작 브라우저 창에서 바로 iPhone, Android 또는 Windows Phone 앱의 성능을 추적 할 수있는 실시간 모바일 분석 앱입니다..

최근 수퍼 스타 인 Nginx, MongoDB, 서버 측 Node.js, 프론트 엔드 용 Backbone.js를 포함하여 플랫폼 개발에 사용 된 주목할만한 오픈 소스 소프트웨어 목록을 살펴보십시오..

Handlebars 의미 템플릿 라이브러리를 사용하여 백본 모델로 준비되고로드 된 데이터를 표시하는 백본 뷰를 렌더링합니다. Countly는 개발자 친화적 인 앱입니다. 쉽게 확장 할 수있을뿐 아니라 문서에서도 이와 같은 자습서를 개발자에게 제공합니다. 코어 백본 클라이언트 상단에 맞춤 플러그인을 빌드하는 방법.

편집자 주 : 이것은 Anna Monus가 Hongkiat.com에 쓴 것입니다. Anna는 과학, 인공 지능 및 파괴 기술에 관심이있는 웹 개발자이자 코드 작성자입니다..