2011-01-05 30 views
12

Tôi đã làm việc như một nhà phát triển linh hoạt trong nhiều năm, xây dựng các ứng dụng thực sự phức tạp. Với tất cả các quảng cáo gần đây, tôi quan tâm đến việc học HTML5.Các khuôn khổ HTML5 cho Nhà phát triển Flex bị mê hoặc

Điều tôi thích về khung công tác Flex là một ngăn xếp hoàn chỉnh, nhất quán, hoàn chỉnh để xây dựng RIA. Tôi thích rằng nó có một tập hợp rộng các thành phần out-of-the-box, và một khuôn khổ để mở rộng và xây dựng thực sự phức tạp, tùy chỉnh rất nhiều các thành phần da &.

Có khung tương tự trong không gian HTML5 không?

Từ tìm kiếm tôi đã thực hiện, tôi thấy có rất nhiều tập lệnh hữu ích .js ngoài đó cung cấp các thành phần, hiệu ứng tiện lợi, v.v. Tuy nhiên, tôi không thể tìm thấy khung công tác vững chắc với kiến ​​trúc trưởng thành và được kiến ​​trúc thư viện thành phần.

Điều này làm tôi lo ngại khi xây dựng một ứng dụng phức tạp, tôi có thể sẽ viết nhiều mã ống dẫn nước để nối các thành phần khác nhau với nhau.

Tôi biết rằng HTML5 vẫn còn trong giai đoạn trứng nước, vì vậy nếu có khung triển vọng mà tôi nên theo dõi, tôi muốn biết về chúng.

danh sách mua sắm của tôi về yêu cầu khuôn khổ lý tưởng sẽ như sau:

  • kiến ​​trúc thành phần rắn (bao gồm các sự kiện vòng đời)
  • Extensible
  • nhà quản lý Layout
  • trình duyệt bất khả tri
  • Hỗ trợ cho dữ liệu ràng buộc
  • Hỗ trợ cho Skinning phức tạp
  • trừu tượng của các lớp dịch vụ & giao thức (ví dụ., SOAP/JSON/dịch vụ XML là tất cả một loại IRemoteService)

Cùng với khung giao diện người dùng riêng của mình, những gì các khuôn khổ tồn tại trong không gian Javascript cho

  • kiến ​​trúc MVC. (Tương tự như Parsley, hoặc Maté trong thế giới Flex)
  • Dependency Injection
  • Đơn vị kiểm tra

Trả lời

4

Nếu bạn là nhà phát triển Flex, có thể quan tâm đến việc kiểm tra cả phiên bản dành cho máy tính để bàn và di động của Sencha Frameworks (công ty của tôi): Ext JS cho ứng dụng dành cho máy tính để bàn và Sencha Touch cho ứng dụng di động/máy tính bảng. Ext JS tập trung vào các ứng dụng web trên máy tính để bàn có thể hoạt động ngược trở lại IE6, vì vậy không có nhiều chỗ để là "HTML5" mặc dù chúng tôi có thể ở đâu (công cụ biểu đồ mới của chúng tôi sử dụng Canvas, SVG hoặc VML tùy thuộc vào trình duyệt mà nó tự tìm thấy).

Sencha Touch tập trung vào các trình duyệt di động Android, iOS, Blackberry và IE9 (?), Vì vậy chúng tôi có thể sử dụng tất cả CSS3, localStorage, v.v. để bạn có thể lắc một thanh. Nếu bạn đang tìm kiếm một trường hợp thử nghiệm của những gì bạn có thể làm khi bạn bắt đầu với một giả định của một trình duyệt hiện đại thì đây là nó.

Mở JS & Sencha Touch là thành phần tất cả các con đường xuống. Tổng quan tốt nhất của cả hai thành phần và bố cục là this article được viết cho Ext JS 2, mặc dù mô hình thành phần và bố cục không thay đổi nhiều cho Ext JS 3. Bố cục được viết lại cho Ext JS 4 - sẽ có bản beta đầu tiên tháng này - để làm cho chúng giống hệ thống bố cục CSS3 flexbox hơn.

Khả năng mở rộng là sự phát triển vượt bậc của việc có mô hình thành phần phù hợp. Ext JS có một loạt các thành phần mở rộng người dùng có thể được trộn lẫn và kết hợp. Một ví dụ điển hình về thành phần chuyên nghiệp sau thị trường là Ext Scheduler. Ngoài ra còn có good tutorial on how to create components.

Ràng buộc dữ liệu: Các thành phần giao diện người dùng bị ràng buộc với các cửa hàng, vì vậy nhiều phần tử giao diện người dùng được cập nhật với dữ liệu mới khi thay đổi. Bạn có thể đọc số store API reference để biết cách hoạt động của nó.

skinning Complex - Sencha Touch một excellent theming system đang được chuyển đến Ext JS 4 - nhưng Ext JS 3 và 2 là một chút tham gia nhiều hơn đến chủ đề do yêu cầu tương thích IE6 (bạn phải tạo ra hình ảnh)

Các lớp dịch vụ được tóm tắt với data proxy, which is extended for JSON, Http, XML etc.

Sencha Touch và Ext JS 4 có kiến ​​trúc MVC (đơn giản). Ext JS 3 trở xuống thì không.

Dưới đây là a good write-up on dependency injection in Ext JS (nhưng nó phải khái quát để Chạm)

Đối với kiểm tra đơn vị, chúng tôi khuyên Jasmine - mà bước ra khỏi Pivotal Labs. Mở rộng JS và Sencha Touch được sử dụng khá rộng rãi - Ext JS chủ yếu cho các ứng dụng của công ty, nhưng có rất nhiều công ty lớn sử dụng nó như Salesforce, Marketo và nhiều hơn nữa cho người dùng tập trung bên ngoài. Sencha Touch có a nice gallery of apps from our latest dev contest, bạn nên kiểm tra.

Nếu bạn quan tâm đến dụng cụ, chúng tôi cũng có một kéo GUI và thả thiết kế và một công cụ CSS3 hoạt hình (sau này trong Developer Preview)

1

HTML5 Boilerplate có thể thú vị cho bạn. http://html5boilerplate.com/

Tôi không chắc chắn về JS framework cho MVC hoặc Dependency, nhưng đối với đơn vị kiểm tra Dojo's Harness (do hạn chế người dùng mới, tôi không thể đăng liên kết thứ hai, nhưng nó sẽ dễ tìm) . Tôi sẽ xem xét thêm về các công cụ của Dojo khi họ thực hiện một số công việc khá thú vị với JS

+0

Đồng ý html5 như tinh khiết và javascript (oh xin lỗi đó không phải là tinh khiết là nó) nó cũng là nhận được tốt hơn như những người khác cân nhắc với những đóng góp. – PurplePilot

+0

Lò hơi là quá mức cần thiết! – rxgx

1

Sproutcore là một khung ứng dụng javascript. Nó hoàn toàn là MVC với cơ sở hạ tầng quan trọng/giá trị quan trọng, làm giảm số lượng mã ống nước bạn cần phải viết, nếu bạn sử dụng nó đúng cách.Nó hỗ trợ hầu hết các yêu cầu của bạn:

"Kiến trúc thành phần vững chắc (bao gồm cả các sự kiện vòng đời)" - mỗi chế độ xem đều có một loạt các sự kiện vòng đời.

"Mở rộng" - Sproutcore hỗ trợ mixin và có 'chuyển đổi nguyên mẫu chuyển đổi' thành công cụ kế thừa cổ điển để bạn cảm thấy như đang tạo các lớp trong JS.

"Trình quản lý bố cục" - Bạn đặt ra chế độ xem của riêng mình, vị trí của chúng, chúng lớn đến cỡ nào. Có SplitViews mà bạn có thể thay đổi kích thước, và tổ, nhưng điều này có thể là một khu vực mà SC không đáp ứng yêu cầu của bạn (mặc dù bạn có thể dễ dàng thực hiện thay đổi kích thước xem qua quan sát)

"Browser thuyết bất khả tri" - nó là trình duyệt khá thuyết bất khả tri , giống như bất kỳ khung công tác JS nào khác.

"Hỗ trợ ràng buộc dữ liệu" - cơ sở hạ tầng ràng buộc rất rộng. Nếu bạn liên kết trường xem với trường mô hình, trường sẽ cập nhật khi mô hình được thay đổi.

"Hỗ trợ cho Skinning phức tạp" - skinned qua css giống như bất kỳ ứng dụng web nào khác nếu bạn không thích chủ đề mặc định.

"Kiểm tra đơn vị" - SC đi kèm với một dây nịt thử nghiệm qunit tại chỗ. Khi bạn sử dụng công cụ dòng lệnh SC để tạo một lớp (có thể là M, V, hoặc C), công cụ tạo ra một bài kiểm tra cho bạn.

'HTML5' - một khái niệm mơ hồ để bắt đầu. SC chắc chắn hỗ trợ tạo tệp kê khai ứng dụng html5 trong công cụ xây dựng. Có các khung có sẵn để ghi vào bộ nhớ cục bộ của trình duyệt. Tôi nghĩ rằng nhiều khả năng html5 sẽ đến trực tuyến trong tương lai gần.

Ứng dụng NPR trên cửa hàng ứng dụng Chrome và ứng dụng sudoku này là cả hai ứng dụng SC.

+0

bạn có thể mở rộng nhận xét của mình "... giảm số lượng mã ống nước bạn cần phải viết hay không, _if bạn có sử dụng đúng không?" Có lẽ một liên kết trên những gì "được sử dụng một cách chính xác" trông như thế nào? – datico

+0

@ datico, tôi ước rằng đã được ghi lại. Cách tốt nhất để tìm hiểu về nó là xem xét một số ứng dụng mã nguồn mở, như OtherInbox (có sẵn trên github) – hvgotcodes

0

Tôi đang ở thuyền giống như bạn. Tất cả các khuôn khổ js tôi tìm thấy đòi hỏi rất nhiều CSS để làm cho chúng một nửa tốt như flex bản địa. Hầu hết các khung công tác js mới hơn đều từ bỏ trên các trình duyệt cũ hơn.

Trình diễn tài trợ và bản trình diễn thú vị có thể khiến thiên thạch trở thành người chiến thắng khung dài hạn js.

Tôi thích sự đơn giản của angularJs

đây là một so sánh tốt của một số những người nổi tiếng

http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/

+0

Gần đây tôi đã chấp nhận AngularJS. Cho đến nay, tôi thực sự thích quá trình này. –

Các vấn đề liên quan