Làm cho ứng dụng Backbone.js trên máy chủ VÀ máy khách

Question

Giả sử tôi có một ứng dụng web được xây dựng bằng Backbone.js và Handlebars. Là máy chủ tôi đang sử dụng Node.js. Bây giờ tôi muốn làm hiển thị trên cả hai đầu, tức là trên máy chủ và máy khách.

Khi tuyến đường được yêu cầu lần đầu tiên, máy chủ sẽ thực hiện hiển thị (chủ yếu là do lý do hiệu suất). Sau đó, tất cả các hành động sau sẽ dẫn đến hiển thị phía máy khách.

Điều này có nghĩa là tôi phải có khả năng hiển thị bất kỳ trang nào trên máy khách và trên máy chủ, cả hai lần theo cách hoàn toàn giống nhau. Cả hai đầu đều phải hỗ trợ cùng một loại tuyến đường.

Làm cách nào để hoàn thành tác vụ này?

Hiện tại, tôi đã xem xét dự án rendr của AirBnb, nhưng điều này chắc chắn ràng buộc tôi với Backbone.js (Tôi không chắc chắn liệu mình có muốn liên kết với Backbone.js mọi lúc) hay không chưa hoàn thành xong. Ít nhất, AirBnb không khuyến cáo sử dụng nó cho mục đích sản xuất.

Bất kỳ ý tưởng nào khác về cách thực hiện việc này?

Là câu hỏi phụ, tôi cũng có thể hỏi: Cách ưa thích để chia sẻ mã JavaScript giữa máy chủ và máy khách là gì? Đối với điều này, tôi cũng biết piler, nhưng tôi có thể tưởng tượng rằng có thể có các giải pháp tốt hơn có sẵn.

Bất kỳ gợi ý nào?

Answer 1

Vâng, tôi đang xây dựng một ứng dụng thực hiện việc này. Nếu bạn không muốn sử dụng rendr, bạn sẽ phải mã các phiên bản của riêng bạn về một số thứ mà họ quan tâm. AFAIK tại thời điểm sự lựa chọn của bạn là rendr hoặc nhà phát triển. Dưới đây là một số mẹo vặt.

• Chúng tôi sử dụng cheerio cho các hoạt động DOM phía máy chủ, vì vậy khi chế độ xem hiển thị trên máy chủ, this.$el là phiên bản phần tử cổ vũ. Trong trình duyệt, đó là jQuery.
• Bạn không cần ủy quyền sự kiện và ràng buộc ở phía máy chủ. Mã của chúng tôi về mặt kỹ thuật thực hiện điều này vào lúc này, nhưng nó là vô nghĩa và một giải pháp sạch hơn sẽ tránh nó trên máy chủ
• Khi bạn có HTML được hiển thị trên máy chủ trong trình duyệt, bạn cần có cách cho các phần tử tương ứng của chúng trong cây DOM lồng nhau lớn. Chúng tôi có giải pháp được trồng tại nhà cho điều này, nhưng Backbone.View.setElement là cốt lõi và bạn cần phải viết một số mã để thực hiện điều này xảy ra
• Hiện tại, chúng tôi đang hiển thị lại trên trình duyệt mặc dù có thể một trường hợp khung nhìn, cung cấp cho nó một số tùy chọn trong hàm dựng bao gồm nút DOM được kết xuất trước và nhận các thứ được kết nối đúng cách mà không cần hiển thị lại. Đó là một bài tập cho người đọc mặc dù. :-)
• Chúng tôi cũng gửi dữ liệu thô mà chúng tôi cần dưới dạng một thẻ <script> để chúng tôi có cả HTML được máy chủ cung cấp (cho hiệu suất nhận thức) và dữ liệu thô có sẵn dưới dạng JSON. khởi tạo và hoạt động. Một lần nữa, bạn sẽ phải đưa ra một số mã để quản lý tình trạng này.
• Chúng tôi sử dụng browserify để nhóm và chia sẻ mã giữa máy chủ và trình duyệt. Tất cả JavaScript của chúng tôi được mã hóa thành các mô-đun CommonJS.
• Chúng tôi có chức năng cơ bản isBrowser() trong lớp cha mẹ của chúng tôi để chúng tôi biết khi nào mã trình duyệt chỉ chạy cho các kết buộc sự kiện, v.v.

Dù sao thì, với những gì đáng giá, sau khi làm việc theo cách này trong nhiều tháng, tôi không nghĩ xương sống hoạt động tốt với mô hình này. Nhiều khái niệm cốt lõi từ xương sống là tốt, nhưng nó không cho vay chính nó để ánh xạ các thể hiện khung nhìn tới các nút DOM được kết xuất trước. Các mô hình và bộ sưu tập Bootstrapping từ JSON dễ dàng hơn, nhưng lớp xem có thể cần một cái nĩa quan trọng để hoạt động một cách sạch sẽ theo kiểu này.