Các khung JavaScript để tạo các ứng dụng trang đơn [đã đóng]


101

Mục tiêu của tôi là chuyển một ứng dụng web hiện có sang một ứng dụng trang RESTful (SPA). Hiện tại, tôi đang đánh giá một số khuôn khổ ứng dụng web Javascript.


Yêu cầu của tôi như sau:

  • Lớp dữ liệu RESTful (như dữ liệu ember)
  • MV * -cấu trúc
  • Các tuyến đường động
  • Hỗ trợ kiểm tra
  • Mã hóa theo quy ước
  • Hỗ trợ SEO
  • Lịch sử trình duyệt-Hỗ trợ
  • Tài liệu (API-) tốt
  • Sẵn sàng sản xuất
  • Cộng đồng sống

Xương sống

Ứng dụng hiện tại đang sử dụng backbone.js. Nhìn chung, backbone.jslà một dự án tốt, nhưng tôi đang thiếu các cấu trúc được xác định rõ ràng để xác định điều gì sẽ xảy ra và mọi thứ phải được thực hiện như thế nào. Làm việc trong một nhóm lớn hơn với các nhà phát triển thay đổi, điều này dẫn đến một số loại mã không có cấu trúc, khó bảo trì và khó hiểu. Đây là lý do tại sao bây giờ tôi đang tìm kiếm một khuôn khổ, đã xác định tất cả những thứ này.

Ember

Tôi đã nhìn vào ember.jsnhững ngày cuối cùng. Cách tiếp cận có vẻ rất hứa hẹn với tôi. Nhưng, thật không may, mã thay đổi gần như hàng ngày. Vì vậy, tôi sẽ không gọi nó là sẵn sàng sản xuất. Và, thật không may, chúng tôi không thể chờ đợi nó là phiên bản 1.0. Nhưng tôi thực sự thích ý tưởng đằng sau khuôn khổ này.

Angular

Angular.jscũng là một khuôn khổ phổ biến rộng rãi, được duy trì bởi Google. Nhưng tôi không thể làm quen với góc cạnh. Đối với tôi, cấu trúc có vẻ không rõ ràng, thiếu các giải thích về trách nhiệm tổng thể của từng phần trong khuôn khổ và việc triển khai cảm thấy mạch lạc. Xin nói thẳng: đây chỉ là ấn tượng cá nhân của tôi và có thể dựa trên kiến ​​thức còn thiếu.

Người dơisao băng

Như tôi đã hiểu, cả hai framework đều cần một phần máy chủ. Và vì chúng tôi chỉ muốn một chương trình phụ trợ RESTful - bất kể ngôn ngữ, kỹ thuật hay phần mềm nào, đây không phải là những gì chúng tôi muốn. Hơn nữa, API phụ trợ đã tồn tại (RoR).

Knockout , CanJSSpine

Tôi không đi sâu hơn vào ba ứng cử viên này. Có lẽ đây sẽ là bước tiếp theo của tôi.


Vì vậy, câu hỏi của tôi bây giờ:

  • Tôi có thiếu bất kỳ khuôn khổ SPA tốt nào không?
  • Bạn sẽ đề xuất / giới thiệu khuôn khổ nào?
  • Bạn có tránh bất kỳ khuôn khổ nào đã đề cập không?
  • Kinh nghiệm của bạn trong các ứng dụng SP lớn hơn là gì?

Tái bút: Tôi muốn giới thiệu một bài đăng blog tuyệt vời từ Steven Anderson (nhà phát triển cốt lõi của Knockout.js) về hội nghị "Throne of JS" (từ năm 2012) và các khuôn khổ javascript nói chung.

Tái bút: Vâng, tôi biết đã có một số câu hỏi trên SO. Nhưng vì sự phát triển quá nhanh và nhanh chóng của các SPA, nên hầu hết chúng đều đã lỗi thời.


Kiểm tra khuôn khổ SPA dựa trên loại trực tiếp mà tôi vừa mở nguồn: knockout-spa github.com/onlyurei/knockout-spa
onlyurei

Câu trả lời:


81

Gần đây tôi cũng phải quyết định về một khung JavaScript SPA cho một dự án.

  • Ember

    Nhìn vào Ember từ rất sớm và có suy nghĩ tương tự như bạn về nó - tôi thực sự thích nó nhưng có vẻ như vẫn còn quá sớm để sử dụng ... khoảng một nửa số hướng dẫn mà tôi đã đọc không hoạt động với phiên bản hiện tại vì có điều gì đó gần đây đã thay đổi về cách thức hoạt động của khuôn mẫu.

  • Xương sống

    Backbone là khuôn khổ đầu tiên chúng tôi nghiêm túc xem xét. Tôi không chắc tôi hiểu tại sao bạn nghĩ rằng nó không có "cấu trúc được xác định rõ"? Backbone khá rõ ràng về cách phân chia mã Model và View. Có thể ý bạn là không có một số loại mẫu ứng dụng? Dù sao, Backbone dường như thực sự tập trung vào phần ràng buộc mô hình / REST, nhưng không thực sự quy định bất cứ điều gì cho ràng buộc chế độ xem. Nếu mô hình ràng buộc quan trọng đối với bạn và bạn đang sử dụng Rails thì việc này sẽ trở nên dễ dàng. Thật không may, các dịch vụ web cho ứng dụng của tôi không thực sự phù hợp và tôi phải viết các phương pháp .syncvà cách .parsethức của riêng mình cho mọi thứ. Việc tách mã Model và View rất hay, nhưng vì chúng tôi phải viết tất cả các ràng buộc của mình từ đầu nên điều đó không đáng.

  • Hạ gục

    Knockout giống như Âm Dương của Xương sống. Trong đó Backbone tập trung vào Mô hình, Knockout là một khung MVVM và tập trung vào Chế độ xem. Nó có các observabletrình bao bọc cho các thuộc tính đối tượng JavaScript và sử dụng một data-bindthuộc tính để liên kết các thuộc tính với HTML của bạn. Cuối cùng, chúng tôi đã sử dụng Knockout vì liên kết chế độ xem chủ yếu là những gì chúng tôi cần cho ứng dụng của mình. (... cộng với những thứ khác, như sẽ thảo luận ở phần sau ...) Nếu bạn thích ràng buộc khung nhìn của Knockout và ràng buộc mô hình của Backbone, thì cũng có KnockBack kết hợp cả hai khung.

  • Angular

    Nhìn vào điều này sau khi Knockout - tiếc là tất cả chúng tôi đều có vẻ khá hài lòng với cách Knockout thực hiện ràng buộc lượt xem. Nó có vẻ phức tạp và khó tham gia hơn rất nhiều so với Knockout. Và nó sử dụng một loạt các thuộc tính HTML tùy chỉnh để thực hiện các liên kết, điều mà tôi không chắc mình thích ... Tôi có thể xem xét lại Angular sau, bởi vì tôi đã gặp nhiều người thực sự thích framework - có lẽ chúng tôi chỉ nhìn vào nó quá muộn cho dự án này.

  • Người dơi , Sao băng , CanJS , Cột sống

    Không thực sự xem xét quá kỹ bất kỳ cái nào trong số này. Mặc dù tôi biết Spine là một khuôn khổ tương tự như Backbone với các đối tượng Controller rõ ràng và được viết bằng CoffeeScript.

  • Lời bạt

    Như tôi đã đề cập, chúng tôi đã kết thúc sử dụng Knockout vì đối với dự án của chúng tôi, việc tập trung vào ràng buộc chế độ xem quan trọng hơn. Chúng tôi cũng đã kết thúc việc sử dụng RequestJS để mô-đun hóa, đường ngangHasher để xử lý định tuyến và lịch sử, Jasmine để thử nghiệm, cũng như JQuery , Twitter BootstrapUnderscore.js (và có lẽ nhiều thư viện khác mà tôi đang quên vào lúc này).

    Phát triển ứng dụng Javascript giống như hệ sinh thái Java hơn là hệ sinh thái Rails. Rails cung cấp một phần cốt lõi vững chắc mà bạn sẽ sử dụng cho mọi ứng dụng (Rails framework) và cộng đồng cung cấp rất nhiều tùy chỉnh trên đó (gems). Java cung cấp ... một ngôn ngữ. Và sau đó bạn có thể chọn Java EE hoặc Spring hoặc Play hoặc Struts hoặc Tapestry. Và chọn JDBC hoặc Hibernate hoặc TopLink hoặc Ibatis để nói chuyện với cơ sở dữ liệu. Và sau đó bạn có thể sử dụng Ant hoặc Maven hoặc Gradle để xây dựng nó. Và chọn Tomcat hoặc Jetty hoặc JBoss hoặc WebLogin để chạy nó. Vì vậy, cần nhấn mạnh hơn vào việc chọn những gì bạn cần và những gì hoạt động cùng nhau hơn là chọn THE framework để sử dụng.


Cảm ơn bạn rất nhiều cho câu trả lời chi tiết của bạn. Một số câu hỏi liên quan đến knockout.js: 1) Nó có cung cấp một số loại lớp dữ liệu để đồng bộ hóa mô hình trong giao diện người dùng / phụ trợ không? 2) Hỗ trợ như thế nào để đưa một mẫu này vào một mẫu khác (có thể là cùng với requestJS)? 3) Có dễ dàng đặt tất cả các tệp (mô hình, chế độ xem, bộ điều khiển, trình trợ giúp, v.v.) riêng biệt và trong các thư mục khác nhau không? Bên cạnh những câu hỏi này, tôi đặt câu trả lời của bạn là chấp nhận, vì bạn đã cung cấp rất nhiều thông tin.
Christopher Will

@ChristopherWill Cảm ơn! 1.) Giống như Backbone giao nó cho bạn để ràng buộc chế độ xem, Knockout để nó cho bạn đối với REST-> Liên kết mô hình. Có một số ví dụ trong tài liệu - knockoutjs.com/documentation/json-data.html hoặc bạn có thể sử dụng KnockBack để kết hợp dân số REST-> Model của Backbone.
Nate

2.) Điều đó phụ thuộc vào ý bạn - Knockout có liên kết dữ liệu tích hợp cho phép bạn lấy một bộ sưu tập từ mô hình, liên kết với thẻ danh sách hoặc thẻ bảng và cho mỗi thẻ hiển thị một mẫu cụ thể. Đối với những thứ quy mô lớn, chẳng hạn như cách bạn xây dựng các chế độ xem tổng thể của mình và hoán đổi chúng - điều đó vẫn hơi thủ công (ít nhất là cách tôi đang làm, vẫn đang học hỏi) - RequiJS w / plugin văn bản làm cho việc này dễ dàng hơn một chút, nhưng bạn vẫn phải chỉ định logic và hoán đổi các div - tôi chỉ làm điều này trong các phương thức đáp ứng các tuyến của tôi. Tuy nhiên, bạn có thể sắp xếp các sự kiện Knockout để làm điều này.
Nate

3.) Yêu cầuJS là những gì cho phép bạn làm điều này.
Nate

Cảm ơn Nate. Tôi nghĩ tôi sẽ thử KnockBack .. nghe có vẻ đầy hứa hẹn. Và, tất nhiên, với các thư viện nêu bạn cũng (requireJS, ngã tư vv)
Christopher Will

8

Đã một năm kể từ khi chúng tôi bắt đầu phát triển dự án Dịch vụ đám mây của mình với nhiều SPA, vì vậy đó là một quyết định lớn, đó là sử dụng khung javascript nào cho giao diện người dùng của chúng tôi để đáp ứng nhu cầu kiến ​​trúc RESTful của chúng tôi. và sau rất nhiều nghiên cứu, chúng tôi đã kết thúc sử dụng Dojo framework .

các tính năng chính bạn sẽ thích:

  1. cộng đồng giáo dục và một nhóm đã đưa ra một mẫu thiết kế hoàn hảo. các quy ước tuyệt vời và kiến ​​trúc mô-đun / hướng đối tượng. với thái độ lập trình CrossBrowser :)
  2. Cấu trúc MV *. xây dựng các tiện ích giao diện người dùng với các mẫu .htm bên ngoài và để sản xuất, hãy xây dựng tất cả javascript & mẫu của bạn thành một .js duy nhất, được rút gọn và nhỏ
  3. xây dựng các lớp với sự kế thừa. bộ thiết lập tài sản, rất nhiều công cụ chức năng.
  4. cơ chế pub / sub (các chủ đề được đặt tên trong dojo)
  5. rất nhiều điều khiển giao diện người dùng, từ điều khiển biểu mẫu xác thực, hộp thoại / chú giải công cụ đến giải pháp biểu đồ & lưới dữ liệu có tính năng đặc trưng cao, có thể tùy chỉnh cao (nhưng nhẹ).
  6. một hệ thống kiểm tra đơn vị tốt có tên DOH. nó cũng có một robot để tái tạo các hành động của chuột / bàn phím.
  7. một công cụ truy vấn (như JQuery) có tên NodeList với tất cả các tính năng jquery và thậm chí rất nhiều plugin của nó.
  8. và phần tốt nhưng không quá hoàn chỉnh. nó có một mô-đun JsonRest để sử dụng với các dịch vụ REST của bạn. nó là một công cụ tiện dụng nhưng nó thiếu rất nhiều tính năng.

để khắc phục những vấn đề này, chúng tôi đã phát triển một giải pháp thăm dò ý kiến ​​AJAX, xử lý lỗi và phổ biến, tải & thông báo. chúng tôi đã làm điều đó rất dễ dàng bằng cách sử dụng các quy ước và cấu trúc khung dojo. nếu bạn không muốn làm điều đó, có lẽ bạn phải sử dụng một khuôn khổ khác cho phần này.

nhìn vào các SPA tuyệt vời trên web, bạn sẽ thấy tất cả chúng đều được tùy chỉnh và sử dụng nhiều khuôn khổ. nhưng trải nghiệm của chúng tôi với Dojo một mình đã là tuyệt vời. và do đó tôi khuyên bạn không nên nghĩ về bất kỳ khuôn khổ nào khác vì tất cả chúng đều không hoàn chỉnh cho một SPA. nhưng cuối cùng bạn cũng có một tùy chọn khác (mà tôi không đề xuất và không có thông tin chi tiết về). sử dụng khung JAVA có khả năng xây dựng các SPA bằng cách tự động tạo giao diện người dùng và javascript.


Xin chào! Bạn có sử dụng Dojo bây giờ không? Bạn đã viết blog về Dojo chưa?
Dunaevsky Maxim

Chào! Có, chúng tôi vẫn sử dụng nó cho cùng một sản phẩm và chúng tôi duy trì nó. ngoài khuôn khổ nội bộ được viết trên đầu trang của võ đường, và chúng tôi đang thêm vào nó mỗi ngày .. không, tôi không có blog cho điều đó. nếu bạn định bắt đầu với nó thì ngày nay nó được coi là một công cụ cũ. Họ vẫn đang làm việc trên Dojo 2.0 nhưng hiện tại có thể tốt hơn nếu sử dụng các tùy chọn khác. chúng ta có React / Angular ở đầu danh sách.
Unicornist
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.