NộI Dung
- Từ đầu
- Mở rộng web
- 01. Lớp trình bày
- 02. Lớp hành vi
- Mô hình đối tượng tài liệu
- JQuery, AJAX và hơn thế nữa
- JavaScript ăn mòn web
- Nguyên tắc ít quyền lực nhất
Lịch sử của trình duyệt web rất quan trọng để trả lời các câu hỏi về thiết kế web hiện đại. Trong bài viết này, chúng ta sẽ khám phá câu trả lời cho câu hỏi: bạn có thể thiết kế các trang web có khả năng phục hồi tốt như chính world wide web không? Chúng tôi đi sâu vào lịch sử của world wide web để tìm hiểu.
Thật tuyệt vời, bạn có thể duyệt các trang web được tạo ngày hôm nay trên một trình duyệt đã được tạo ra cách đây ba thập kỷ. Sẽ không có bất kỳ kiểu dáng nào. Sẽ không có bất kỳ kịch bản nào. Cả CSS và JavaScript đều không tồn tại khi web khai sinh và chắc chắn chúng không sử dụng các công cụ thiết kế web tốt nhất hiện nay. Nhưng nếu một trang web đã được xây dựng một cách mạnh mẽ (có thể bằng cách sử dụng một trình xây dựng trang web hàng đầu), thì nó vẫn có ý nghĩa ngay cả khi được xem trong một trình duyệt web cổ.
Từ đầu
Vào ngày 12 tháng 3 năm 1989, một nhà khoa học máy tính trẻ tuổi tên là Tim Berners-Lee đã xuất bản một bản ghi nhớ. Anh ấy đang làm việc tại CERN, Tổ chức Nghiên cứu Hạt nhân Châu Âu. Hàng nghìn nhà khoa học làm việc ở đó cần một cách hợp tác qua internet. Berners-Lee đã có một giải pháp tiềm năng. Ông đã xuất bản ý tưởng của mình với tiêu đề Quản lý thông tin: Một đề xuất.
Nó hoàn toàn không phải là một trình lật trang và các sơ đồ hoàn toàn không thể hiểu được. Nhưng có đủ ở đó để bắt đầu dự án. Dự án này đã trở thành web trên toàn thế giới. Trong vòng một năm kể từ khi xuất bản đề xuất ban đầu của mình, Berners-Lee đã tạo ra phiên bản đầu tiên của HTML, máy chủ web đầu tiên và trình duyệt web đầu tiên. Trình duyệt được đặt tên hơi khó hiểu là WorldWideWeb.
Ba mươi năm sau đề xuất ban đầu cho world wide web, một nhóm các nhà thiết kế và nhà phát triển đã tập hợp lại trong một tuần tại CERN để tạo lại trải nghiệm sử dụng trình duyệt web đầu tiên đó. Bạn có thể xem kết quả cuối cùng tại đây.
Mở rộng web
Hợp tác khoa học là trường hợp sử dụng đầu tiên cho world wide web nhưng dự án không được thiết kế để giới hạn trong việc sử dụng đó. Berners-Lee biết rằng ông không thể đoán trước được cách sử dụng web trong tương lai. Do đó, ông đã thiết kế nó để có thể mở rộng.
Phiên bản đầu tiên của Ngôn ngữ đánh dấu siêu văn bản chỉ có một số yếu tố. Nhưng ngôn ngữ HTML mở cho các phần tử mới được thêm vào. Theo thời gian, chúng tôi có nhiều trường biểu mẫu hơn, nhiều yếu tố cấu trúc hơn như phần và bài viết và thậm chí nhiều phương tiện hơn như âm thanh, video và hình ảnh đáp ứng. Không có sự bổ sung nào trong số này đưa ra những thay đổi đột phá. Đó là do mô hình xử lý lỗi của HTML.
Khi trình duyệt web gặp một phần tử HTML mà nó không hiểu, nó sẽ hiển thị bất cứ thứ gì nằm giữa thẻ mở và thẻ đóng. Nó hiển thị nội dung trong khi bỏ qua các thẻ mà nó không hiểu. Điều thú vị ở đây là những gì trình duyệt không làm. Trình duyệt không gặp lỗi. Trình duyệt không ngừng phân tích cú pháp HTML ngay khi nó gặp một phần tử mà nó không hiểu.
Kiểu xử lý lỗi lỏng lẻo này là một ví dụ về nguyên tắc thiết kế được gọi là Nguyên tắc mạnh mẽ hoặc Luật Postel: "Hãy thận trọng trong những gì bạn gửi. Hãy tự do trong những gì bạn chấp nhận."
Các trình duyệt rất tự do trong những gì họ chấp nhận khi nói đến HTML. Mặt khác, điều này có thể khá khó chịu nếu bạn là nhà phát triển đang cố gắng cô lập lỗi trong HTML của mình. Mặt khác, sự lỏng lẻo này đã cho phép HTML phát triển theo thời gian mà không bị phá vỡ trong các trình duyệt cũ hơn.
Trong thập kỷ đầu tiên ra đời của web, HTML đã chứng kiến sự phát triển bùng nổ. Các yếu tố và thuộc tính mới đã được thêm vào ngôn ngữ. Một số bổ sung đó đã thêm chi tiết ngữ nghĩa mới nhưng một số hoàn toàn không liên quan gì đến ngữ nghĩa. Các yếu tố và thuộc tính để chỉ định kích thước phông chữ, màu sắc và đường viền đã được giới thiệu. HTML, vốn được dùng để xác định cấu trúc tài liệu, đang có nguy cơ bị lấp đầy bởi các hướng dẫn trình bày. Giải pháp là tách cấu trúc và trình bày thành hai ngôn ngữ khác nhau.
01. Lớp trình bày
Håkon Wium Lie và Bert Bos đã hợp tác để làm việc trên Cascading Style Sheets. Bằng cách sử dụng CSS, các nhà phát triển có thể thêm thông tin trình bày mà không cần xen kẽ với HTML.
Với sự xuất hiện của CSS, HTML có thể trở lại làm những gì nó làm tốt nhất: mô tả cấu trúc của nội dung tài liệu. Sự tách biệt mới về các mối quan tâm có những lợi ích khác. Một tệp CSS đơn lẻ có thể chịu trách nhiệm cho một tài liệu HTML hoặc nó có thể chịu trách nhiệm cho nhiều tài liệu HTML: 10, 20, 100 trang HTML đều có thể tham chiếu cùng một biểu định kiểu. Việc điều chỉnh phong cách trực quan của 100 trang khác nhau đó không còn liên quan đến việc thay đổi từng trang. Thay đổi một tệp CSS đơn lẻ là đủ.
Nhưng CSS vẫn cần một số cách để hiểu nó phải được tạo kiểu cho những phần nào của HTML. Nó có một loại 'mô hình tinh thần' về cách các phần của HTML có thể được nhắm mục tiêu để tạo kiểu. Mô hình này được biểu diễn dưới dạng các bộ chọn. Sử dụng từ vựng bộ chọn của CSS, nhà phát triển có thể nhắm mục tiêu các phần tử có tên thẻ, tên lớp hoặc ID cụ thể. Bạn có thể coi cách mô hình hóa tài liệu này giống như một mô hình bộ chọn tài liệu.
Điều quan trọng, CSS đã sử dụng mô hình xử lý lỗi tương tự như HTML. Nếu bạn sử dụng một bộ chọn mà trình duyệt web không hiểu, nó sẽ bỏ qua các khai báo kèm theo và chuyển sang bộ chọn tiếp theo. Trình duyệt web sẽ không gặp lỗi. Tại thời điểm đó, nó sẽ không ngừng phân tích cú pháp tệp CSS và từ chối tiếp tục.
Tương tự như vậy, nếu bạn sử dụng một thuộc tính hoặc giá trị mà trình duyệt không hiểu, trình duyệt sẽ bỏ qua nó và chuyển sang phần khai báo tiếp theo. Điều này đã cho phép vốn từ vựng về CSS phát triển theo thời gian mà không cần đợi đến sự hỗ trợ của trình duyệt phổ quát. Bạn có thể sử dụng bộ chọn, thuộc tính và giá trị mới ngay cả khi chúng không có sẵn trong mọi trình duyệt. Các trình duyệt không hỗ trợ bỏ qua những gì họ chưa hiểu. Họ tự do trong những gì họ chấp nhận, điều này hy vọng có nghĩa là ít phụ thuộc hơn vào các dịch vụ kỹ thuật của dịch vụ lưu trữ web của bạn.
02. Lớp hành vi
Mô tả cấu trúc và cách trình bày của một tài liệu là trao quyền nhưng nó có giới hạn của nó. Sử dụng HTML và CSS, bạn có thể tạo ra các trang web đẹp, dễ tiếp cận, có ngữ nghĩa nhưng chúng ở trạng thái tĩnh. Tương tác bị ràng buộc bởi từ vựng của HTML. Các trường liên kết và biểu mẫu có tính tương tác theo mặc định nhưng nếu bạn muốn mở rộng tính tương tác của HTML, bạn cần có ngôn ngữ kịch bản.
Trong những ngày đầu của web, một kỹ sư trẻ tên là Brendan Eich đã tạo ra một ngôn ngữ kịch bản cho các trình duyệt web. Bộ phận tiếp thị tại công ty của ông, Netscape, đặt tên nó là JavaScript. Đó là một cái tên khủng khiếp. Có vẻ như JavaScript có liên quan gì đó đến ngôn ngữ lập trình Java. Nó không. Tuy nhiên, hồi đó, Java đã sẵn sàng tiếp quản thế giới. Đặt tên cho ngôn ngữ mới này là JavaScript đã khiến nó trở nên thú vị.
HTML và CSS là ngôn ngữ khai báo. Thay vì đưa ra hướng dẫn từng bước, bạn mô tả kết quả bạn muốn bằng cách sử dụng từ vựng của ngôn ngữ (các phần tử và thuộc tính trong HTML, bộ chọn, thuộc tính và giá trị trong CSS). Mặt tích cực, các ngôn ngữ khai báo này có khả năng xử lý lỗi lỏng lẻo khiến chúng tương đối dễ bắt đầu. Tuy nhiên, mặt trái của nó, bạn sẽ luôn bị giới hạn bởi vốn từ vựng của ngôn ngữ đó.
Một ngôn ngữ kịch bản mạnh mẽ hơn. Nó cho phép bạn xác định chính xác những gì bạn muốn xảy ra. Nhưng sức mạnh và độ chính xác đó phải trả giá. Một ngôn ngữ kịch bản không thể có khả năng xử lý lỗi lỏng lẻo giống như một ngôn ngữ khai báo. Nếu bạn viết một số JavaScript mà trình duyệt không hiểu, trình duyệt sẽ báo lỗi. Nó sẽ ngừng phân tích tập lệnh tại thời điểm đó và từ chối phân tích cú pháp thêm nữa. Luật Postel không đúng ở đây. Các trình duyệt hoàn toàn không tự do trong những gì họ chấp nhận khi nói đến JavaScript.
Việc xử lý lỗi chặt chẽ hơn của JavaScript có nghĩa là các nhà phát triển cần phải cẩn thận hơn khi viết nó. Nếu có một API trình duyệt cụ thể có sẵn trong JavaScript, bạn cần suy nghĩ về điều gì sẽ xảy ra trong một trình duyệt chưa chuyển giao API đó.Trình duyệt đó sẽ không đơn giản bỏ qua bất kỳ phần nào của mã sử dụng tính năng mới. Thay vào đó, bạn sẽ cần kiểm tra sự tồn tại của API. Loại 'phát hiện tính năng' này không cần thiết trong các ngôn ngữ khai báo của HTML và CSS nhưng nó là một phần cần thiết để viết JavaScript có trách nhiệm.
Mô hình đối tượng tài liệu
CSS có một cách để 'nhìn thấy' một trang HTML - một loại mô hình bộ chọn tài liệu. JavaScript có một cách khác để thể hiện cấu trúc của tài liệu HTML. Ngôn ngữ JavaScript sử dụng khái niệm lập trình của các đối tượng để hiển thị các API. Ví dụ: trình duyệt cung cấp một đối tượng cửa sổ cho JavaScript mô tả cửa sổ trình duyệt hiện tại. Trang HTML bên trong cửa sổ đó được hiển thị thông qua một đối tượng khác được gọi là đối tượng tài liệu. Không giống như CSS, với từ vựng về bộ chọn, JavaScript 'nhìn thấy' một trang HTML thông qua Mô hình đối tượng tài liệu hoặc DOM.
Trong những ngày tồi tệ của cuộc chiến trình duyệt vào những năm 1990, khi JavaScript lần đầu tiên xuất hiện, các trình duyệt có các từ vựng DOM xung đột. Netscape Navigator có một cách để mô tả một tài liệu - document.layers - trong khi Internet Explorer của Microsoft được sử dụng document.all thay thế. Các nhà phát triển đã phải phân nhánh mã của họ, sử dụng tính năng phát hiện để tìm ra mã nào cần gửi đến trình duyệt nào. Nó không thể chịu đựng được.
Cuối cùng, các trình duyệt đã hội tụ vào một từ vựng được chuẩn hóa cho DOM scripting. Các phương pháp như document.getElementsByTagName và document.getElementById là tương đương JavaScript của bộ chọn phần tử và bộ chọn ID trong CSS.
Bằng cách sử dụng JavaScript và DOM, các nhà phát triển có thể thêm tương tác bổ sung vào các trang tĩnh của họ. Để bắt đầu, các tương tác khá cơ bản. Đảo ngược hình ảnh rất phổ biến: khi người dùng di chuyển con trỏ qua hình ảnh, JavaScript có thể hoán đổi hình ảnh. Xác thực biểu mẫu là một cách sử dụng phổ biến khác của JavaScript và DOM. Tập lệnh có thể 'lắng nghe' các sự kiện - như khi người dùng gửi biểu mẫu - và thực thi mã để kiểm tra xem đầu vào có tuân theo các tiêu chí nhất định hay không.
Điều thú vị là cả hai trường hợp sử dụng đó hiện có thể được thực hiện mà không cần JavaScript (có nghĩa là có thể sử dụng nhiều loại nội dung hơn và bạn sẽ cần bộ nhớ đám mây hàng đầu để lưu trữ chúng). Nếu bạn muốn thay đổi giao diện của một phần tử khi người dùng di chuột vào nó, bạn có thể sử dụng :bay lượn trong CSS. Nếu bạn muốn các trường biểu mẫu chỉ cho phép một số loại giá trị nhất định, bạn có thể sử dụng các loại đầu vào HTML5 như email, URL và số. Những trường hợp sử dụng phổ biến này đã chuyển từ lớp mô tả mạnh mẽ - nhưng mỏng manh sang lớp khai báo dễ tha thứ hơn - nhưng ít mạnh mẽ hơn.
JQuery, AJAX và hơn thế nữa
Hầu hết các mẫu kịch bản DOM - như cuộn qua hình ảnh và xác thực biểu mẫu - liên quan đến việc tìm kiếm một phần cụ thể của tài liệu và sau đó thực thi mã khi một sự kiện cụ thể được kích hoạt. Bạn có thể tóm tắt các mô hình này là: 'Tìm nội dung và thực hiện công việc đó'.
Để 'tìm nội dung', bạn cần sử dụng các phương thức DOM. Tuy nhiên, vào giữa những năm 2000, John Resig đã tạo ra một thư viện JavaScript để giúp các nhà phát triển tạo kịch bản DOM dễ dàng hơn. Anh ấy gọi nó là jQuery.
Có rất nhiều thư viện JavaScript khác vào thời điểm đó - script.aculo.us, MooTools và hơn thế nữa. Điểm khác biệt của jQuery là nó cho phép bạn 'tìm nội dung' bằng cách sử dụng cú pháp bộ chọn của CSS. Nếu bạn đã biết CSS, bạn không còn phải học một từ vựng riêng để tương tác với HTML. Điều này mang lại sức mạnh to lớn cho các nhà thiết kế và nhà phát triển, những người hiểu HTML và CSS nhưng bị đe dọa bởi đường cong học tập của JavaScript dốc hơn. jQuery phổ biến đến mức nó ảnh hưởng đến thiết kế từ vựng của DOM. Bây giờ bạn có thể sử dụng document.querySelector phương pháp 'tìm nội dung' trong tài liệu HTML bằng bộ chọn CSS.
Với sự nổi lên của jQuery, web đã chứng kiến sự gia tăng của các widget tương tác. Băng chuyền, cửa sổ phương thức và menu bay ra đã trở nên phổ biến. Cùng lúc đó, mạng lưới đang bị cơn sốt Ajax càn quét. Ajax là một kỹ thuật JavaScript cho phép tài liệu hiện đang được tải trong cửa sổ trình duyệt gửi và nhận dữ liệu từ máy chủ web mà không cần làm mới toàn bộ trang. Bây giờ web là một phương tiện hữu hiệu cho các ứng dụng. Gmail và Google Maps đã dẫn đầu, chứng minh rằng - nhờ JavaScript - mọi thứ đều có thể thực hiện được trên web.
JavaScript ăn mòn web
Khi các ứng dụng web ngày càng trở nên phức tạp hơn, các thư viện JavaScript đã mở rộng phạm vi. Angular đầu tiên và sau đó là React mã hóa một cách tiếp cận mới. Thay vì coi JavaScript như một lớp tương tác riêng biệt nằm trên đầu tài liệu HTML hiện có, cách tiếp cận hiện đại lật ngược mô hình đó lên trên đầu của nó. JavaScript trở thành trung tâm. DOM không còn được tạo từ HTML hiện tại nữa - thay vào đó, DOM được tạo bởi JavaScript. JavaScript đưa đánh dấu vào một trang trống. Bạn thậm chí có thể sử dụng JavaScript để đưa CSS thẳng vào DOM trong thời gian chạy. Nơi từng có sự tách biệt giữa các mối quan tâm - cấu trúc, cách trình bày và hành vi - bây giờ bạn có thể làm mọi thứ bằng một ngôn ngữ.
Sức mạnh này phải trả giá. Nếu nội dung của một trang web đang được chèn JavaScript, thì tập lệnh phải được tải xuống, phân tích cú pháp và thực thi trước khi người dùng nhìn thấy bất kỳ thứ gì. Các trình duyệt được tối ưu hóa để phát trực tuyến HTML, ngay cả khi nó chưa hoàn chỉnh. Đó không phải là một tùy chọn với JavaScript. Hiệu suất bị ảnh hưởng và cùng với đó là trải nghiệm của người dùng.
Việc xử lý lỗi chặt chẽ hơn của JavaScript cũng làm cho nó trở nên nguy hiểm. Nếu chỉ có một lỗi trong mã của bạn hoặc nếu không có đủ tính năng phát hiện để xử lý các trình duyệt cũ hơn, người dùng sẽ chỉ nhìn chằm chằm vào màn hình trống.
Nguyên tắc ít quyền lực nhất
Khi Tim Berners-Lee thực hiện dự án web trên toàn thế giới của mình, ông đã áp dụng một số nguyên tắc thiết kế: đơn giản, dung sai (dưới dạng Định luật Postel), thiết kế mô-đun và nguyên tắc ít quyền lực nhất: "Chọn ngôn ngữ ít mạnh mẽ nhất phù hợp cho một mục đích nhất định ”. Xem nó ở đây.
Về mặt nó, đây có vẻ như là một lời khuyên bất thường nhưng hãy nhớ rằng những ngôn ngữ mạnh mẽ đi kèm với một cái giá: sự mong manh. Các ngôn ngữ kém mạnh mẽ hơn được tha thứ hơn và phổ biến hơn.
Chúng ta có thể áp dụng nguyên tắc ít năng lượng nhất khi chúng ta tạo ra sản phẩm
và các dịch vụ trên web. Như chuyên gia về khả năng truy cập web Derek Featherstone đã nói: "Trong ngăn xếp front-end web - HTML, CSS, JavaScript và ARIA - nếu bạn có thể giải quyết một vấn đề với một giải pháp đơn giản hơn trong ngăn xếp, bạn nên làm. Nó ít mong manh hơn, dễ đánh lừa hơn . Nó chỉ hoạt động. "
JavaScript, Ajax và DOM là những công cụ mạnh mẽ. Sử dụng chúng một cách có trách nhiệm.
