Tôi sai ở đâu về dự án của mình và các Khung công tác Javascript này?


107

Trước hết, phần cốt lõi nhất của dự án mà tôi muốn tạo là một công cụ wiki được triển khai như một ứng dụng web một trang. Tôi dự định có một bộ tính năng có sẵn ngay từ đầu với nhiều tính năng bổ sung sau này.

Tính năng cơ bản

  • tạo trang (tạo cả bài viết wiki và diễn đàn thảo luận cho bài viết đó)
  • đánh dấu và WYSIWYG ala markitup
  • chuyển đổi nhanh chóng giữa markup / html / WYSIWYG
  • một thanh bên để điều hướng nhanh
  • thanh công cụ trên cùng để chọn chỉnh sửa / xem

Các tính năng tiên tiến

  • thanh bên có thể định cấu hình để điều hướng qua các phương pháp khác nhau
  • thanh công cụ có thể định cấu hình (có thể thêm ngôn ngữ đánh dấu mà bạn lựa chọn)
  • thẻ
  • việc làm có thể chỉnh sửa
  • kéo và thả các tệp tải lên và tệp đính kèm hình ảnh

Công cụ ban đầu sẽ bao gồm việc tạo trang, đánh dấu và chỉnh sửa WYSIWYG và lưu cơ bản nhất. Cuối cùng tôi muốn mở rộng công cụ cơ bản này với hỗ trợ kéo và thả hình ảnh, tải lên tệp, biểu đồ dữ liệu trực tiếp và thanh bên để tùy chỉnh chế độ xem.

Tôi đã thực hiện một cuộc tìm kiếm khá rộng rãi để tìm ra một dự án phù hợp để làm cơ sở cho dự án của mình, nhưng ngoài TiddlyWiki, dường như không có bất kỳ công cụ wiki dựa trên javascript nào tốt. Tôi cũng đã cân nhắc việc áp dụng Jquery trên các công cụ wiki hiện có nhưng tôi tin rằng dù sao thì cuối cùng tôi cũng sẽ viết lại nó (Thêm vào đó, nó thú vị hơn khi thêm các tính năng tôi muốn khi tôi sử dụng). Dù bằng cách nào thì tôi cũng đã thực hiện được con thú này với thư viện + khuôn khổ javascript.

Tôi biết rằng người ta không thể thực sự so sánh một số khuôn khổ này với nhau vì chúng rất không giống quả táo. Tôi đã cố gắng sắp xếp bất kỳ nhận xét / câu hỏi so sánh nào với các phần có thể so sánh của các khuôn khổ tương ứng nhưng tôi sẵn sàng được sửa chữa.

Vì vậy, chúng ta bắt đầu:

Dựa trên nghiên cứu và ý kiến ​​của riêng tôi, tôi đã thu hẹp danh sách xuống các mục bên dưới. Tôi cố tình bỏ đi những thứ như SproutCore, corMVC, YUI và những thứ khác vì tôi, với khả năng hạn chế của mình, nghĩ rằng những thứ bên dưới sẽ phù hợp hơn.

Tùy chọn của tôi


jquery / UI + backbonejs

Nhìn chung

Từ những gì tôi đã đọc, sự kết hợp này được nhiều người sử dụng và yêu thích và rất linh hoạt và có thể mở rộng. Mối quan tâm chính của tôi là sự kết hợp này đơn giản không phải là điểm khởi đầu tốt nhất để phát triển giao diện UI hướng đến máy tính để bàn hơn.

Giao diện người dùng

Mặc dù jQueryUI hoặc jqueryTools có thể cạnh tranh nhưng chắc chắn chúng dường như không ngang bằng với khả năng giao diện người dùng của các khung công tác khác. Cụ thể là chúng có vẻ nặng về các hiệu ứng nhưng thiếu hỗ trợ cắt bố cục tốt.

javascriptMVC

Nhìn chung

JavascriptMVC đối với tôi có vẻ như về cơ bản nó là các tiện ích mở rộng jquery + MVC (jqueryMX), cùng với một số ứng dụng khác để tạo tài liệu (documentJS), kiểm tra chức năng (funcUnit), quản lý mã và phụ thuộc (steveJS). Ngoài những lợi ích của mô-đun bổ sung, tôi nghĩ rằng cuộc tranh luận về chức năng thực sự bắt nguồn từ backbonejs và jqueryMX Tôi có đúng về điều này không và có ai đã làm việc với hoặc so sánh cả hai chưa?

  • Các tính năng: tổng quan về các tính năng của jupiter (nhà sản xuất jMVC)
  • Liên kết đến jqueryMX

Giao diện người dùng

JavascriptMVC thêm các mục MXUI lên trên bất kỳ thứ gì có sẵn cho Jquery, vì vậy tôi nghĩ rằng ít nhất nó cũng là một chiến thắng nhẹ trong danh mục đó.

knockoutjs

Nhìn chung

Suy nghĩ và lo lắng của tôi về điều này về điều này rất giống với các bình luận jquery + backbone. Cả hai dường như cung cấp các tính năng tương tự nhưng chỉ từ một góc nhìn khác. Một nhược điểm được trích dẫn là knockoutjs kết hợp logic nghiệp vụ và cách trình bày quá chặt chẽ với data-bind và rằng phương thức ràng buộc này có thể bị hỏng đối với tương tác giao diện người dùng phức tạp nhưng tôi rất muốn biết lý do tại sao đó không phải là vấn đề.

Giao diện người dùng

Trống vào lúc này

Dojo & ExtJS

Nhìn chung

Tôi sẽ kết hợp thảo luận Dojo và ExtJS vì tôi biết ít nhất về họ và họ dường như chơi trong gần như cùng một không gian. Hầu hết thông tin trên stackoverflow về hai điều này dường như đã lỗi thời. Từ những gì tôi thấy là cả hai đều là những framework lớn tốt cho việc triển khai ứng dụng tầm cỡ trên máy tính để bàn. Dojo đã bị chỉ trích vì tài liệu kém nhưng điều đó dường như không còn đúng nữa. Tất nhiên ExtJS có giấy phép thương mại, nhưng nó thực sự hợp lý với những gì bạn nhận được và tôi sẽ không chống lại điều đó quá nhiều. Các widget trong ExtJS có vẻ được thực hiện chuyên nghiệp hơn một chút so với Dojo, nhưng tôi chắc chắn có thể được sửa chữa ở đó. Tôi muốn nghe từ bất kỳ ai có kinh nghiệm trong cả hai lĩnh vực này.

Giao diện người dùng

Dojo có thư viện giao diện người dùng dijit ExtJS có các tính năng giao diện người dùng nhưng chúng không có trong lõi Ext. Đây là tài liệu và đây là bản trình diễn của họ

Cappuccino

Nhìn chung

Và sau đó là Cappuccino. Không có CSS, không có html, nhưng cũng có thể khó sử dụng các thư viện javascript hiện có. Objective-J dường như không đáng sợ, đặc biệt là khi họ chào mời có thể viết javascript đơn giản. Các bản trình diễn rất ấn tượng và dường như tiếp cận chặt chẽ nhu cầu giao diện người dùng cho công cụ wiki. API dựa trên cacao có rất nhiều thứ cần thiết đối với những người không quen thuộc với nó, nhưng có lẽ nó rất đáng giá. Tôi đã nghe nói rằng layout engine không phải lúc nào cũng dễ làm việc nhưng một công nghệ trẻ và có thể đột phá như thế này chắc chắn sẽ có một số thiếu sót.

Giao diện người dùng

Trống vào lúc này

Tôi xin lỗi vì đã viết rất nhiều nhưng này, ít nhất câu hỏi không phải ax vs y vs z của nó, hy vọng có rất nhiều câu trả lời rẻ tiền. Vậy bạn nghĩ như thế nào? Điều gì sẽ là cơ sở cho máy tính để bàn của tôi như công cụ wiki, hy vọng sẽ trở nên phong phú hơn (đọc phức tạp) theo thời gian?


9
+1 cho một câu hỏi cực kỳ chi tiết và được suy nghĩ kỹ lưỡng!
Sean Vieira

8
Không chắc chắn về dòng thời gian và tài nguyên của bạn, nhưng khi tôi đang cố gắng quyết định giữa nhiều khuôn khổ / môi trường, tôi chỉ cần tiếp tục và cố gắng nhanh chóng xây dựng một nguyên mẫu. Ngay cả khi nó chỉ là một hoặc hai chức năng chính, tôi thấy rằng tất cả các nghiên cứu và tài liệu trên thế giới sẽ không bao giờ khớp với việc thực sự cố gắng xây dựng một cái gì đó bằng các công cụ. Tôi nói hãy dành một ngày cho mỗi cái và xem bạn đi được bao xa. Điều đó sẽ cung cấp cho bạn một dấu hiệu khá tốt về công cụ nào phù hợp với nhiệm vụ và cảm thấy thoải mái nhất cho bạn.
Brian Flanagan

1
@Brian Flanagan Chuyển đến một câu trả lời - ngay cả khi "meta".

1
Bạn đã xem xét tiddlywiki.com , tôi nghĩ đó là một tự chứa wiki tinh khiết thực hiện trong JavaScript
Bernhard

Vâng, tôi đã xem tiddlywiki. Theo nhiều cách, nó là nguồn cảm hứng cho dự án này nhưng tôi có cơ sở và hướng đi riêng cho dự án này.
funkyeah

Câu trả lời:


4

Trước tiên, tôi khuyên bạn nên đưa ra các yêu cầu cụ thể về giao diện người dùng cho dự án của bạn. Bạn đã thử sử dụng framework nào trong số các framework nào chưa?

Cá nhân tôi tham gia phát triển ExtJS vì các dự án tôi làm việc yêu cầu rất nhiều tùy chỉnh của các điều khiển / widget. ExtJS có rất nhiều thứ trong số đó ngay lập tức và luôn có thể được mở rộng, kết hợp hoặc trộn lẫn vào bất kỳ thứ gì quái dị mà doanh nghiệp của bạn yêu cầu.

ExtJS 4 cũng cho phép bạn "lột xác" giao diện người dùng của mình để tùy chỉnh thêm giao diện.

Nếu bạn chưa quen với JavaScript và cảm thấy thoải mái với Java, bạn thậm chí có thể xem xét một giải pháp phía máy chủ như GWT , JSF hoặc thậm chí Vaadin


19

Không chắc chắn về dòng thời gian và tài nguyên của bạn, nhưng khi tôi đang cố gắng quyết định giữa nhiều khuôn khổ / môi trường, tôi chỉ cần tiếp tục và cố gắng nhanh chóng xây dựng một nguyên mẫu. Ngay cả khi nó chỉ là một hoặc hai chức năng chính, tôi thấy rằng tất cả các nghiên cứu và tài liệu trên thế giới sẽ không bao giờ khớp với việc thực sự cố gắng xây dựng một cái gì đó bằng các công cụ. Tôi nói hãy dành một ngày cho mỗi cái và xem bạn đi được bao xa. Điều đó sẽ cung cấp cho bạn một dấu hiệu khá tốt về công cụ nào phù hợp với nhiệm vụ và cảm thấy thoải mái nhất cho bạn.


6

đang là cơn thịnh nộ hiện nay ( khung JavaScript full-stack được đánh dấu sao nhiều nhất trên GitHubMeteorpedia là một công cụ wiki được viết bằng Meteor.

Video ra mắt sẽ giúp bạn hấp dẫn trước 1:28.

Đó là thuyết bất khả tri liên quan đến giao diện người dùng, và đã được thử nghiệm rộng rãi với Bootstrap và Famo.us . Nó cũng tạo các ứng dụng di động từ cùng một cơ sở mã.


1
Và có những tích hợp với React nhưng điều đó chỉ dành cho những người 100% thành công. Cũng không có vấn đề gì khi sử dụng các plugin jquery và thư viện bản vẽ svg / canvas với nhiều kiến ​​thức về Meteor.
imslavko

1

Lựa chọn khung của bạn có thể không hạn chế các lựa chọn giao diện người dùng của bạn nhiều như bạn có thể tưởng tượng. Bài viết gần đây của Henri Bergius về quản lý nội dung tách rời minh họa điểm tốt hơn nhiều so với những gì tôi có thể làm - và tình cờ, các liên kết đến một trình soạn thảo nội dung tại chỗ thuần JavaScript (không phụ thuộc vào khung) trông khá hấp dẫn .


Tôi chắc chắn đang đào trình chỉnh sửa aloha cho WYSIWYG. Tôi chắc chắn sẽ gắn nó ở đầu màn hình và thêm các tab để xem vùng văn bản ở dạng đánh dấu của một số định dạng. Tùy chọn chính khác của tôi sẽ là một số hương vị của markItUp .
funkyeah

1

Mày không đơn độc!

VanillaJSAmpersand .. là những ví dụ tuyệt vời về động lực nghiêm túc cho JavaScript đơn giản hơn, mô-đun hơn.

Thậm chí còn có một cuốn sách về nó.

Sự đơn giản đang được thúc đẩy bởi một tính năng es6 bị đánh giá thấp: Mô-đun và tiêu chuẩn triển khai SystemJS . Nó thậm chí có thể được sử dụng trên các hệ thống không phải es6.

Thật tuyệt làm sao!


1

Tôi có thể nói rằng bạn đã sai trong sự lựa chọn tổng thể của mình về các ứng cử viên vì bạn đang bỏ qua AngularEmber, cả hai đều phù hợp hơn bất kỳ khung nào khác được liệt kê.

Nhìn chung, tôi muốn nói Angular.js là khuôn khổ cho cái này.

Nhấn mạnh vào Định tuyến

Phần lớn những gì bạn đang nói đến (một số thanh bên để điều hướng, một ứng dụng trang duy nhất) là các chức năng của định tuyến hoặc cách giao diện người dùng diễn giải văn bản trong thanh điều hướng URL của bạn.

Cả Angular.js và Ember đều có bộ định tuyến tuyệt vời cho phép bạn hoàn thành mọi thứ bạn yêu cầu mà không cần mã bổ sung.

Vì lợi ích của bạn, đây là bảng phân tích nhanh các tính năng trong Angular có thể được sử dụng để tạo wiki trang đơn của bạn

Cấu trúc của chính trang web

Angular có một thư viện tuyệt vời được gọi là bộ định tuyến giao diện người dùng cho phép bạn tạo điều hướng tùy chỉnh và thiết lập cấu trúc thân thiện với SEO để tiết lộ nội dung của bạn. Nhiều chế độ xem cũng sẽ cho phép một thanh công cụ trên cùng.

Hướng dẫn về bộ định tuyến Ui: http://cacodaemon.de/index.php?id=57

Trình chỉnh sửa WYSIWYG

Angular được xây dựng dựa trên ràng buộc hai chiều trực tiếp (khi bạn thay đổi thứ gì đó ở đâu đó, nó sẽ tự động thay đổi ở mọi nơi khác.) Do đó, nó được đóng gói với rất nhiều tính năng hoạt động tốt với loại trình soạn thảo này. Một vài cái hay đã được thực hiện và bạn chỉ cần thực hiện chúng.

http://textangular.com/

Đồ thị và các thứ gọn gàng khác

Các chỉ thị góc được thiết kế để làm những việc như tạo các thành phần Biểu đồ có thể sử dụng lại. Chúng không hoàn toàn khác với Wordpress Widget. Nhiều trong số này đã được phát triển và có thể được đưa vào dự án Angular của bạn.

http://www.sitepoint.com/creating-charting-directives-using-angularjs-d3-js/

Về Ember, tôi không biết nhiều về nó vì vậy tôi không thể nói về các tính năng cụ thể của nó.


0

Một gợi ý về Backbone, nếu bạn quyết định sử dụng nó, bạn nên chọn Marionnete vì nó là Backbone nhưng có cấu trúc kiến ​​trúc tốt hơn và cứng rắn hơn (cá nhân tôi cảm thấy rằng Backbone không đặt ra bất kỳ nguyên tắc nào và điều đó giống như một nhược điểm trong các ứng dụng lớn) .

Tôi đã làm việc với nó trong vài tháng kết hợp các js libs khác nhau và không cản trở bạn như các khung công tác khác và đường dẫn thông báo là một cách thực sự tốt để kết nối các thành phần thông qua ứng dụng nhưng giữ chúng tách rời nhau.

Đây là bạn có một cuộc nói chuyện tuyệt vời khiến tôi quyết định chọn nó: https://www.youtube.com/watch?v=qWr7x9wk6_c

Và ở đây bạn có một nguyên mẫu demo cũng có phần tử kéo và thả cộng với các js lib khác được kết nối. Rất muốn biết bạn nghĩ gì về mã của tôi vì tôi đã có 1,5 năm làm việc về phát triển web ... tôi vẫn là một người mới: https://github.com/Drasky-Vanderhoff/marionette-demo/

Về Knockout, thực sự tốt nếu bạn muốn tương tác với nội dung bạn đã có và bạn sẽ không kết nối liên tục với phần phụ trợ. Tôi đã làm việc với nó trong 6 tháng và cuối cùng tôi cần phải sử dụng rất nhiều js lib khác để định tuyến; cộng với việc tôi lặp lại rất nhiều cấu trúc mà Backbone và các Framework JS khác có. Những gì tôi sẽ nói là nó sẽ không cản trở bạn chút nào và là một công cụ hơn là một hạn chế. Ngoài ra, điều này đã được gần một năm trước nên một vài điều đã thay đổi.

Có điều, nếu bạn thấy Knockback (Knockout + Backbone) ... thì hãy tránh nhé, tài liệu không được như ý và bạn sẽ mất nhiều thời gian hơn để tìm hiểu nó. Nếu bạn muốn sử dụng nó, hãy tạo một nguyên mẫu nhanh trước để xem có phải là thứ bạn muốn không.


Đã một năm kể từ khi bạn đăng bài này. Khi tôi đang tìm cách bắt đầu phát triển mới, Marionette có còn là lựa chọn hàng đầu của bạn để phát triển Javascript không?
AlVaz

Không hề, ngay bây giờ tốt hơn là với Angular.js hoặc React.js (bạn có thể kết hợp cả hai nếu muốn). Nếu bạn muốn cả phiên bản di động và phiên bản web cho một ứng dụng, tôi thực sự khuyên bạn nên sử dụng React.js vì React Native đang được sử dụng để tạo ứng dụng gốc iOS và Android. Cả hai React.js và chia sẻ bản địa cùng một khái niệm, cấu trúc và mô hình (được Tìm hiểu một lần, sử dụng ở khắp mọi nơi, Biết React.js == Phản ứng Native, yeah Tôi không sử dụng bằng ba: P)
DraskyVanderhoff

Ngoài ra, có Web Components sử dụng Polymer mà tôi thực sự khuyên bạn nên kiểm tra nó nếu muốn làm việc với có thể sẽ là framework hot nhất trong năm tới. Cuối cùng, Meteor là một lựa chọn tuyệt vời nếu bạn cần đồng bộ hóa dữ liệu thời gian thực 100% / liên kết dữ liệu ba chiều, đặc biệt vì nếu bạn viết trình xác thực cho các tham số, nó sẽ chạy cùng một trình xác thực cả trong phần phụ trợ và giao diện người dùng, tránh cần phải có 2 mã các cơ sở giống nhau.
DraskyVanderhoff

Một điều cần làm rõ, tôi chưa bao giờ nói rằng Marionette là lựa chọn hàng đầu của tôi (thực sự là Angular vào thời điểm đó) những gì tôi đã nói là NẾU bạn định sử dụng Backbone.js HỌ hãy sử dụng Marionette.js để thay thế.
DraskyVanderhoff
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.