Tăng cường tiến bộ so với các ứng dụng trang đơn

Tôi vừa trở về từ một hội nghị ở Boston có tên là An Event Apart .

Một chủ đề thực sự phổ biến giữa các diễn giả là ý tưởng tăng cường tiến bộ - nội dung của một trang web phải có trong HTML và JavaScript chỉ nên được sử dụng để nâng cao hành vi.

Các lập luận mà các diễn giả đưa ra để tăng cường tiến bộ là rất hấp dẫn. Đây không chỉ là một mô hình vững chắc để hỗ trợ các trình duyệt cũ hơn và các thiết bị trên mạng có băng thông thấp, mà HTML còn thất bại hơn nhiều so với JavaScript (tức là việc đánh dấu không được hỗ trợ sẽ bị bỏ qua, trong khi nếu trình duyệt ném ngoại lệ trong khi thực thi kịch bản - bạn đang hosed).

Jeremy Keith đã có một cuộc nói chuyện đặc biệt sâu sắc về điều này.

Nhưng những gì về các ứng dụng web trang đơn như Backbone và Angular? Toàn bộ thiết kế đằng sau các khung này dường như đẩy nhà phát triển hướng tới việc chuyển nội dung ra khỏi HTML và vào một cái gì đó giống như API JSON.

Tôi dường như không thể tạo ra hai mẫu thiết kế này: cải tiến lũy tiến so với các ứng dụng web trang đơn. Có những trường hợp khi cái này tốt hơn cái kia không? Hay chúng thậm chí không phải là công nghệ đối kháng, và tôi đang thiếu một cái gì đó ở đây với mô hình tinh thần của tôi?

Dường như với tôi rằng các ứng dụng một trang vẽ ra một dòng trong sự cải tiến tiến bộ. Trường hợp trước khi chúng ta có thể cố gắng giải quyết vấn đề triển khai và tính năng khác nhau giữa các trình duyệt trong nhiều thập kỷ, các SPA cho rằng có một cơ sở nhất định mà chúng ta có thể đồng ý một cách hợp lý hầu hết khách truy cập của một trang web nhất định sẽ đáp ứng. Tôi không nghĩ hai người đang bất hòa. Bạn vẫn có thể tiếp tục tăng cường dần dần sau khi bắt đầu SPA, như bắt đầu bằng một <video>thẻ, sau đó xếp lớp trình phát giàu tính năng của riêng bạn lên trên đó.

Sau đó, có những khách truy cập với kịch bản bị vô hiệu hóa, nhưng họ biết những gì họ đang tham gia. Tôi không thấy lý do tại sao các nhà phát triển nên cúi xuống về phía sau cho những khách truy cập đó, ngoài ghi chú "Bạn cần kịch bản cho trang web này". Nếu chúng tôi cho phép điều đó, tại sao không phục vụ cho khách truy cập bị vô hiệu hóa CSS? Làm thế nào về hình ảnh bị vô hiệu hóa? Đây là những công nghệ web cốt lõi. Họ không nên mong đợi có trải nghiệm web đầy đủ chức năng khi họ đi chọn và chọn các mảnh.

Để đảm bảo tôi không đi xa mà không có sự tương tự xe hơi, tôi không nên hy vọng chiếc xe của mình hoạt động nếu tôi quyết định tôi không thích một số tính năng nhất định. Tôi có thể nói với các kỹ sư dân sự, "Tôi đã tắt đèn pha của mình, vì vậy hãy đảm bảo lắp đặt đèn đường mỗi 125 feet ở mọi nơi tôi có thể ghé thăm." Không có đèn pha, xe của tôi sẽ hoạt động rất nhiều thời gian, nhưng một số nơi tôi sẽ không thể đến thăm.

SPA có lợi nhất nếu bạn đang tạo một ứng dụng không phù hợp với mô hình trang yêu cầu / phản hồi cổ điển. Có một xu hướng gần đây khi các trang web thông thường được viết là một SPA ngay cả khi chúng phù hợp với chu kỳ yêu cầu / phản hồi của web, IMHO những gì họ đang làm là những nỗ lực ngu ngốc. Những gì các trang web này đang làm là thực hiện kém trình duyệt web với nhiều lỗi hơn và ít tính năng hơn.

Ý tưởng về tăng cường tiến bộ và SPA không loại trừ lẫn nhau cho các trang web ứng dụng một trang ngu ngốc này. Bạn chỉ cần javascript để thực hiện một số đàm phán nội dung (tức là Chấp nhận tiêu đề) để họ nhận được tài nguyên JSON mà Javascript trên SPA có thể tự hiển thị thay vì các trang HTML được kết xuất sẵn. Các vấn đề với loại trang web SPA này là rõ ràng, bạn phải thực hiện trùng lặp việc hiển thị trang web trên cả máy chủ và trên máy khách.

Đối với các ứng dụng web thực sự, tức là một ứng dụng thực sự phải là một SPA vì chúng không phù hợp với mẫu yêu cầu / phản hồi tiêu chuẩn; cải tiến lũy tiến khó khăn hơn nhiều đối với các ứng dụng thực sự bởi vì chúng thực sự chỉ sử dụng trình duyệt như một nền tảng công nghệ để viết một ứng dụng một cách hợp lý. Ngôn ngữ kịch bản là một phần thiết yếu của một ứng dụng web thực sự, không chỉ là một ngôn ngữ có thể được tùy chọn bắt vít để cải tiến. Một số kỹ thuật cải tiến lũy tiến vẫn có thể hoạt động (ví dụ: thay thế video / âm thanh flash bằng <video>/ <audio>tag) nhưng các ứng dụng web thực sự sẽ yêu cầu javascript làm đường cơ sở.

Tôi tin rằng các ứng dụng web đơn và cải tiến lũy tiến gần như là đối kháng. Nếu html được tính toán trên máy khách từ dữ liệu được lấy từ một api json, nó khó có thể xuống cấp một cách duyên dáng. Tuy nhiên, nó có thể cung cấp một giao diện người dùng phong phú và dễ chịu hơn.

Bạn có thể thiết lập một bot sẽ thu thập dữ liệu ứng dụng của bạn và lưu phiên bản tĩnh. Kỹ thuật này có thể được sử dụng để phục vụ HTML cho các trình duyệt mà không cần javascript (được sử dụng bởi người mù hoặc bot công cụ tìm kiếm). Đây là một khoản đầu tư, vì vậy nó thực sự đi vào yêu cầu của bạn.

Bạn đang làm một ứng dụng web quản lý nhân sự cho một compagny cụ thể? Bạn không cần xuống cấp duyên dáng, và một SPA có thể đơn giản hơn để xây dựng. Công ty có thể thực thi việc sử dụng một trình duyệt cụ thể, do đó bạn có thể có ít bài kiểm tra hơn để làm.

Bạn đang làm một trang web công cộng cho một hiệp hội với các yêu cầu về khả năng truy cập và nhu cầu hiển thị của công cụ tìm kiếm? Sau đó xem xét việc xây dựng HTML trên máy chủ của bạn. Hoặc tạo một SPA với phiên bản tĩnh, tùy thuộc vào ngân sách của bạn.

Tôi nghĩ nó phụ thuộc vào việc bạn muốn đi bao xa với Tăng cường Tiến bộ - đó là một mô hình thiết kế chứ không phải là một bộ quy tắc khó và nhanh.

Nếu bạn đang sử dụng khung SPA, tôi nghĩ việc cho phép Javascript là một điều nhất định. Tuy nhiên, Javascript bạn viết để cải thiện trang của bạn phải đủ thông minh để đối phó với bất kỳ HTML nào mà khung có thể tạo.

Bạn cũng có thể hưởng lợi từ các kỹ thuật PE khác như tận dụng các tính năng CSS mới nhất cho bản phát hành trình duyệt gần đây hoặc xuống cấp từ HTML5 sang HTML4.

Tăng cường tiến bộ và một ứng dụng trang đơn có thể cùng tồn tại. Hai đối số hấp dẫn nhất tôi từng nghe để xây dựng ứng dụng theo cách này là:

• Khả năng chịu lỗi trong các tình huống tải xuống tệp HTML đầy đủ nhưng tập lệnh được tham chiếu không thể tải xuống hoàn toàn nhờ kết nối mạng rơi vào và ra (có thể trên mạng di động)
• Tiềm năng cải thiện hiệu suất nhận thức khi tải trang ban đầu (bằng cách giảm thời gian Bắt đầu kết xuất)

Kết xuất phía máy chủ (cái này dành cho người dùng, không chỉ vì lý do SEO) và cắt mù tạt là hai kỹ thuật có thể giúp xây dựng Ứng dụng trang đơn được cải tiến dần dần với khung công tác JS phía máy khách hiện đại.

Một số khung công tác JS phía máy khách dễ dàng hoạt động với kết xuất phía máy chủ hơn các khung công tác khác ( hãy cẩn thận một số giải pháp kết xuất phía máy chủ và kết hợp khung không tạo ra các SPA hoạt động vì trang kết xuất máy chủ chỉ dành cho tiêu thụ công cụ tìm kiếm, không kết thúc người dùng ).

Tại thời điểm viết bài, React.js và Ember (với FastBoot sắp tới) là hai cái tôi biết về điều đó đã hoặc đang cố gắng biến phía máy chủ trở thành công dân hạng nhất; trang kết xuất phía máy chủ vẫn là một SPA hoạt động khi được phân tích cú pháp trên trình duyệt máy khách.

Tôi cho rằng tải trang giảm có lẽ là khá tốt cho các máy chủ và mạng. Tôi muốn thấy nhiều SPA được sử dụng một cách chính xác.

Tôi không quan điểm mặc dù điều này đòi hỏi hai điều:

1) thiết lập tất cả các liên kết của bạn dưới dạng liên kết yêu cầu / phản hồi tiêu chuẩn khi tải ban đầu, hãy để khung / thư viện SPA của bạn thay thế các liên kết này bằng phiên bản cập nhật (tương tác) sau khi trình duyệt tải và công cụ JS xác định rằng có hỗ trợ SPA. Đây thực sự là tăng cường progresive; JS được tải trên đầu trang web html hiện có và điều này tốt hơn cho các công cụ tìm kiếm, công nghệ hỗ trợ và các trình duyệt cũ hơn.

và

2) Máy chủ cần phản ứng nhanh với các tuyến như / foo / bar / json và foo / bar bằng cách phục vụ đúng định dạng; thực tế nếu bạn đang gói mọi thứ trong bố cục và các phần để có được trang đầu tiên, bạn cũng có thể nhận được mọi thứ thông qua bố cục và các phần cho trang thứ 2 và các trang tiếp theo.

Có một chút công việc ở đây; thừa nhận, nhưng nếu bạn có quyền kiểm soát toàn bộ ngăn xếp thì nó sẽ cân bằng hai công nghệ.