10 ứng dụng web được tạo bằng Backbone.js [Nghiên cứu trường hợp]
Bạn đã bao giờ bị vướng vào mã spaghetti? Bạn có muốn cho ứng dụng của bạn một cái gì đó lành mạnh hơn? Nếu vậy, hãy xem qua những gì có thể được thực hiện với Backbone.js. Xương sống là một thư viện JavaScript dựa trên mẫu thiết kế Model-View-Controller một cách lỏng lẻo nhưng vì nó thiếu phần tử Trình điều khiển, tốt hơn nên gọi nó là khung MV *.
Nó giúp bạn xây dựng nhanh, kiểu dáng đẹp và giàu dữ liệu ứng dụng web một trang, giữ cho bạn logic dữ liệu tách biệt với giao diện người dùng của bạn, lưu bạn khỏi việc buộc dữ liệu của bạn vào DOM và quy mô khi ứng dụng của bạn phát triển. Vì Backbone đồng bộ hóa với bất kỳ API RESTful nào theo mặc định, bạn có thể dễ dàng kết nối ứng dụng phía máy khách của mình với API phía máy chủ hiện tại thông qua giao diện RESTful JSON.
Trong bài đăng này, chúng tôi sẽ nghiên cứu 10 ứng dụng web sử dụng các tính năng của thư viện Backbone để giúp bạn nắm bắt Backbone.js tiềm năng cho các dự án ứng dụng web trong tương lai của bạn.
1. Trello
Trello là một ứng dụng quản lý dự án và cộng tác trực tuyến giúp bạn sắp xếp các dự án của mình thành Bảng, Danh sách kiểm tra, Thẻ, Danh sách thẻ và cung cấp cho bạn các công cụ như Cuộc trò chuyện để liên lạc với thành viên trong nhóm.
Trello được xây dựng từ đầu với Backbone.js. Xương sống hoạt động cùng với API Lịch sử HTML5 và ngôn ngữ tạo khuôn mẫu không logic logic trên giao diện. Tất cả các yếu tố của Trello Tech Stack được thiết kế theo cách dẫn đến một khách hàng duy trì dễ dàng xử lý cập nhật, và tự động đồng bộ lại với máy chủ Bất cứ khi nào một sự kiện DOM được kích hoạt.
Trello sử dụng Mô hình xương sống và Chế độ xem cho các đối tượng của nó như Thẻ hoặc Thành viên và Bộ sưu tập xương sống cho các Mô hình có liên quan - ví dụ Thẻ trong danh sách. Các nhà phát triển cũng xây dựng bộ đệm Mô hình phía máy khách của riêng họ cho cập nhật nhanh hơn và hơn thế nữa tái sử dụng mã hiệu quả.
2.
Rất có thể bạn đã nghe nói về Foursquare, ứng dụng mạng xã hội dựa trên vị trí phổ biến cho phép bạn chia sẻ địa điểm với bạn bè trên khắp thế giới.
API JavaScript cốt lõi của Foursquare được xây dựng xung quanh Mô hình xương sống, nơi Các lớp mô hình của API API (chẳng hạn như Người dùng, Địa điểm và Đăng ký) là các lớp con của các lớp Mô hình xương sống và kế thừa phương thức và tính chất của chúng.
Việc thực thi mã có thể được phác thảo như thế này: FourSq.api.models.Venue = FourSq.api.models.Model.extend (lỗi); Vâng, đúng vậy, Backbone cho phép các nhà phát triển viết JavaScript hướng đối tượng đẹp.
Khung nhìn xương sống cũng có vai trò của họ trong ứng dụng Foursquare, vì chúng nâng cao trải nghiệm người dùng với các tính năng như bản đồ và danh sách trang chủ. Khác với Backbone, API JavaScript của Foursquare cũng sử dụng jQuery, Underscore.js (vốn chỉ phụ thuộc cứng của Backbone) và Trình biên dịch đóng.
3. Lịch Basecamp
Căn cứ, ứng dụng quản lý dự án phổ biến sử dụng Backbone.js cho tính năng Lịch của nó.
Mục tiêu thiết kế chính của Lịch Basecamp là tạo ra một giao diện tương tác tạo nên lập kế hoạch nhóm trực quan có thể, và cập nhật chính nó trong một phần nghìn giây. Trong Basecamp Lịch xương sống kết xuất Chế độ xem thành các mẫu ECO (Embedded CoffeeScript) bất cứ khi nào Mô hình (dữ liệu phía máy khách) được cập nhật.
Thật thú vị khi lưu ý rằng nhóm nhà phát triển đã không biến toàn bộ Basecamp thành một ứng dụng một trang, là trường hợp sử dụng chính của Backbone.js, mà chỉ sử dụng thư viện trong tính năng Lịch nơi họ thực sự có thể sử dụng các lợi thế của nó. Chỉ cần cho thấy rằng bạn không nhất thiết phải xây dựng một ứng dụng một trang đầy đủ với Backbone; tốt hơn hết là suy nghĩ kỹ xem nó có thể được áp dụng ở đâu.
Đọc thêm về các mô hình xương sống để quyết định xem bạn có cần xương sống cho toàn bộ ứng dụng của mình hay không.
4. Lưu lượng
Lưu lượng là một ứng dụng giao tiếp nhóm thời gian thực cung cấp cho bạn các tính năng như trò chuyện nhóm, hộp thư đến nhóm và quy trình làm việc trong thời gian thực
Flowdock được xây dựng từ đầu lên trên Backbone.js. Thách thức chính của nhóm phát triển là kích hoạt các thông điệp và quy trình làm việc trong thời gian thực. Theo mặc định, Backbone.js kết nối với phía máy chủ qua giao diện RESTful, điều này không tạo ra luồng dữ liệu thời gian thực. Do đó các nhà phát triển quyết định lưu tin nhắn qua công cụ thời gian thực của Socket.io thay vì API REST.
Để đạt được điều này họ đã viết một phương thức tùy chỉnh gọi là Xương sống.sync. Vì Socket.io cũng là một thư viện JavaScript, nó làm cho giao tiếp giữa giao diện điều khiển JavaScript và phụ trợ (Node.js) liền mạch. Flowdock chủ yếu là một ứng dụng Rails ở phía máy chủ, nhưng chúng có một phụ trợ Node.js riêng biệt xử lý các kết nối Socket.io.
Lưu lượng nâng cao trải nghiệm người dùng thời gian thực thậm chí nhiều hơn với Bacon.js, một thư viện JavaScript tiện dụng cho phép lập trình phản ứng chức năng. Tính năng EventStreams của Bacon.js giúp Flowdock giữ cho Mô hình xương sống và Bộ sưu tập của mình được cập nhật.
5. Tìm kiếm cocktail
Tìm kiếm cocktail là một ứng dụng mã nguồn mở cung cấp cho bạn cơ hội để xem mã của việc triển khai Backbone.js rất đơn giản. Phần cuối được cung cấp bởi Python, nhưng điều thú vị đối với chúng tôi là tập tin script.js của ứng dụng.
Nếu bạn kiểm tra mã, bạn có thể thấy cấu trúc rất cơ bản của khung Model-View- *: nó chứa một cấu trúc Mô hình được định nghĩa trong Cocktail lớp không thay đổi cài đặt mặc định của lớp cha mẹ Backbone.Model, một lớp Bộ sưu tập xương sống cho kết quả tìm kiếm và 3 Chế độ xem xương sống, mỗi lần thêm phương thức mới vào Xương sống. Xem lớp phụ huynh.
Nếu bạn xem tệp index.html, bạn có thể khám phá cách nhà phát triển thêm Backbone.js và các phụ thuộc của nó, Underscore.js và jQuery trong phần đầu. Underscore.js là sự phụ thuộc cứng duy nhất của Backbone trong khi jQuery là cần thiết nếu bạn muốn thao tác DOM với sự trợ giúp của Khung nhìn xương sống (đó là trường hợp của ứng dụng Tìm kiếm Cocktail).
6. Bitbucket
Cai Xô nhỏ là một ứng dụng lưu trữ mã nguồn và quản lý mã tương tự như Github. Atlassian, công ty đằng sau nó sử dụng Backbone trong phần mềm theo dõi vấn đề thương mại JIRA, sản phẩm chính khác của họ cũng vậy.
Trong quá trình sử dụng triệt để Backbone.js trong ứng dụng của họ, nhóm phát triển đã tìm thấy một vài điều mà họ đã bỏ lỡ từ Backbone. Họ gặp phải nhiều thất bại thầm lặng gây ra bởi các quy ước định nghĩa lỏng lẻo của Backbone.js. Điều này về cơ bản có nghĩa là Mô hình, Bộ sưu tập và Chế độ xem không nhất thiết phải xác định các sự kiện tùy chỉnh mà họ phơi bày. Và nếu điều đó không đủ, Mô hình thậm chí không luôn xác định thuộc tính họ phơi bày.
Bản chất dễ dãi này là một tính năng được nhiều nhà phát triển yêu thích nhưng không phải bởi nhóm Atlassian nên họ đã phát triển phần mở rộng Backbone của riêng mình được gọi là Backbone.Brace thêm mixin và các thuộc tính và sự kiện tự ghi vào thư viện.
Nếu bạn cảm thấy khó chịu vì điều tương tự, bạn có thể thêm Backbone.Brace vào ứng dụng của riêng mình, vì đó là một dự án nguồn mở được lưu trữ trên chính Bitbucket. BitBucket sử dụng ngôn ngữ tạo khuôn Mustache giống như Trello để hiển thị Chế độ xem xương sống trên giao diện.
7. SoundCloud
SoundCloud là một nền tảng phân phối âm thanh phổ biến nơi bạn có thể ghi âm, tải lên và chia sẻ âm thanh của riêng mình hoặc nghe nhạc miễn phí.
Các nhà phát triển của SoundCloud trước tiên đã sử dụng Backbone.js làm khung giao diện của ứng dụng di động của họ, nhưng họ thích nó đến mức họ cũng sử dụng nó ở phía máy khách của trang web máy tính để bàn của họ. Trong Blog hậu trường của họ, họ giải thích sự lựa chọn khung của họ với khả năng của Backbone cung cấp một cơ sở cấu trúc vững chắc trong khi vẫn linh hoạt.
Thu nhỏ là mối quan tâm chính đối với một ứng dụng truyền phát âm thanh và SoundCloud thừa nhận rằng nó “có liên quan nhiều đến tổ chức hơn là thực hiện” Điều này làm cho Backbone được tổ chức tốt nhưng gọn nhẹ là một lựa chọn lý tưởng cho họ.
SoundCloud sử dụng hệ thống tạo khuôn mẫu ngữ nghĩa của Tay cầm để hiển thị Chế độ xem Đường trục trên giao diện.
8. AirBnB
AirBnB là một thị trường cộng đồng cực kỳ thành công, nơi bạn có thể tìm và đặt các loại phòng khác nhau ở gần 200 quốc gia trên toàn thế giới
AirBnB lần đầu tiên sử dụng Backbone.js trong ứng dụng di động của mình giống như SoundCloud, nhưng sau đó đã sử dụng nó ngày càng nhiều hơn trong các tính năng ứng dụng web của mình như Wishlists, Match, Search, Communations và Payments. AirBnB yêu thích Backbone rất nhiều đến nỗi họ không chỉ giải quyết việc sử dụng nó trên frontend mà còn muốn làm cho nó có thể chạy thư viện trên phần phụ trợ.
Họ sau đã tạo thư viện Backbone phía máy chủ của họ, Rendr, nguồn mở và có sẵn trên trang Github của họ. Rendr được viết bằng Node.js và nó tuân theo triết lý của “áp đặt cấu trúc tối thiểu, cho phép nhà phát triển sử dụng thư viện theo cách thích hợp nhất cho ứng dụng của họ” giống như xương sống
Nếu bạn quan tâm nhiều hơn đến kho công nghệ của AirBnB, hãy đọc bài đăng trên blog của họ về hành trình của họ từ một phụ trợ Rails đến Chén Thánh của sử dụng đồng thời xương sống cả ở phía máy khách và máy chủ.
9. Hulu
Hulu là một ứng dụng phát video cho phép bạn xem các chương trình truyền hình và phim miễn phí, nếu bạn ở Hoa Kỳ.
Hulu đã sử dụng Backbone.js để xây dựng trải nghiệm người dùng liền mạch và nhanh chóng cho những người yêu thích phim. Giao diện cho phép bạn di chuyển nhanh chóng thông qua ứng dụng với các chuyển tiếp nhẹ nhàng khi bạn điều hướng. Xương sống tiết kiệm băng thông cho người dùng dưới dạng tập lệnh và video được nhúng không được tải lại mọi lúc.
Hulu chạy một công cụ Rails trên phần phụ trợ và nếu bạn thích những cuộc nói chuyện thú vị nhưng đầy thông tin, bạn có thể đọc về Làm thế nào để nhóm phát triển vướng vào jQuery trước khi quyết định đổi sang khung xương sống có tổ chức hơn.
Backbone.js cho phép Hulu tăng dần chuyển đổi kết xuất của chúng từ phía máy chủ sang phía máy khách thay vì viết lại rủi ro về phụ trợ Rails hiện có của họ.
10. Đếm
Đếm là một ứng dụng phân tích di động thời gian thực cho phép bạn theo dõi hiệu suất của ứng dụng iPhone, Android hoặc Windows Phone ngay từ cửa sổ trình duyệt.
Hãy xem danh sách đáng chú ý của phần mềm nguồn mở được sử dụng để phát triển nền tảng, bao gồm các siêu sao của những năm gần đây: Nginx, MongoDB, Node.js cho phía máy chủ và tất nhiên là Backbone.js cho frontend.
Countly sử dụng thư viện khuôn mẫu ngữ nghĩa của Handbars để hiển thị Chế độ xem xương sống hiển thị dữ liệu được chuẩn bị và tải với Mô hình xương sống. Countly là một ứng dụng thân thiện với nhà phát triển: nó không chỉ dễ dàng mở rộng mà tài liệu của nó còn cung cấp cho các nhà phát triển các hướng dẫn như thế này trên Làm thế nào để xây dựng các plugin tùy chỉnh trên đầu máy khách Backbone cốt lõi.
Ghi chú của biên tập viên: Điều này được viết bởi Anna Monus cho Hongkiat.com. Anna là một nhà phát triển web và viết mã với mối quan tâm về khoa học, trí tuệ nhân tạo và các công nghệ đột phá.
