Giới thiệu
Vào ngày 7 tháng 8 năm 2010, deviantART tổ chức sinh nhật lần thứ 10 của mình. Chúng tôi đã tổ chức sinh nhật của mình bằng cách ra mắt công cụ vẽ HTML5 có tên deviantART muro. Bạn có thể sử dụng công cụ này như một ứng dụng web độc lập cũng như một công cụ vẽ nhẹ để thêm hình ảnh vào nhận xét trên diễn đàn.
Cộng đồng deviantART đã chào đón công cụ vẽ mới này với sự hào hứng tuyệt vời và bản thân công cụ này giờ đây cũng nhận thấy lưu lượng truy cập nhiều như một số thuộc tính web có quy mô khá. Kể từ khi ra mắt, cứ 5 giây một bản vẽ mới được gửi bằng deviantART muro. Đây chỉ là số lượng bản vẽ đã hoàn thành; nhiều bản vẽ khác đã được bắt đầu và chưa được lưu.
Bài viết sau cung cấp một số thông tin cơ bản về cách chúng tôi sử dụng HTML5, lý do chúng tôi chọn sử dụng các công nghệ đã thực hiện và những điều tôi đã khám phá ra khi viết một trong những ứng dụng HTML5 toàn diện đầu tiên cho một trang web lớn.
Lý lịch trích ngang của tôi
Cuối năm 2005, tôi là một trong những nhà phát triển chịu trách nhiệm về công cụ vẽ mà Draw here (Vẽ tại đây) sử dụng. Công cụ này là công cụ tạo vẽ graffiti trên web do một bookmarklet. Được dùng để vẽ hình trên bất kỳ trang web nào. Draw Here ban đầu được tạo bằng SVG (Firefox 1.5 beta vừa ra mắt; đây là một trong những trình duyệt đầu tiên hỗ trợ SVG).
Trên Internet Explorer, chúng tôi tạo SVG trong nền nhưng lại kết xuất bản vẽ bằng VML. WebKit không hỗ trợ SVG tại thời điểm đó, vì vậy tôi đã chuyển mã của chúng tôi để hiển thị SVG bằng canvas (đây là công nghệ mới chỉ có trong WebKit tại thời điểm đó). Tại một thời điểm, tôi thậm chí còn tạo một cổng để mã SVG có thể hiển thị trên các trình duyệt cũ hơn bằng cách sử dụng một loạt các phần tử div được dán lại với nhau. (Tất nhiên, đây chỉ là một trò đùa vui để thể hiện rằng việc này có thể thực hiện được và có tốc độ sử dụng rất chậm).
Trong thời hoàng kim, Draw Here được dùng để vẽ khoảng 100 bản vẽ mỗi ngày. Nó đã đủ hoàn thiện để có thể gọi chứ không chỉ là một thử nghiệm, mặc dù thử nghiệm chưa được hoàn thiện hơn so với một ứng dụng web lớn. Vào giữa năm 2006, dự án này đã bị bỏ dở, mặc dù cho đến ngày nay, trang web vẫn còn đi khập khiễng – chủ yếu chỉ để cười tươi.
Công nghệ được deviantART muro sử dụng
Do nền tảng của tôi đã sử dụng nhiều công nghệ HTML5 ngay từ những ngày đầu, tôi được giao nhiệm vụ làm nhà phát triển chính trên deviantART muro. Bất kỳ ai đang đọc bài viết này có thể hiểu lý do chúng tôi quyết định dùng HTML5 thay vì công nghệ dựa trên trình bổ trợ như Silverlight hoặc Flash. Chúng tôi muốn một thứ gì đó mạnh mẽ và cũng sử dụng các tiêu chuẩn mở.
Quyết định giữa Canvas và SVG
Chúng tôi quyết định thực hiện lớp vẽ bằng canvas. Một số người có thể thắc mắc khi nào nên sử dụng canvas và khi nào nên sử dụng SVG. Có rất nhiều điểm trùng lặp trong những việc có thể thực hiện với 2 công nghệ này – như Draw here đã chứng minh, cả hai công nghệ đều có thể được sử dụng để tạo một ứng dụng vẽ.
Tôi thấy rằng SVG là lựa chọn tuyệt vời nếu bạn muốn giữ tay cầm cho các đối tượng bạn đã vẽ. Ví dụ: nếu bạn muốn người dùng có thể vẽ một đường kẻ, sau đó có thể kéo các bit của đường kẻ để thay đổi hình dạng của nó, thì điều này khá đơn giản khi sử dụng SVG. Nhưng cùng một điều cũng rất bất tiện khi sử dụng canvas.
Khi sử dụng canvas, bạn đốt nội dung lên canvas và rồi bạn quên mất thành phần đó. Một canvas trống và một canvas được vẽ trong một giờ hoạt động y như nhau về mã và có cùng mức sử dụng bộ nhớ. Mặc dù chương trình vẽ đường quét thường hoạt động rất hiệu quả với ngọn lửa và công nghệ không thành công, nhưng nó làm cho một số việc khó khăn. Ví dụ: việc tạo một hàm huỷ nhanh trong canvas khó hơn nhiều so với trong SVG. Trong SVG, bạn chỉ cần giữ đối tượng ở vài dòng cuối cùng mà bạn đã đặt, còn việc huỷ thao tác chỉ là kéo các đối tượng đó ra. Với canvas, sau khi vẽ một đường kẻ, bạn sẽ không biết nội dung bên dưới là gì. Vì vậy, việc xoá đường kẻ sẽ yêu cầu bạn vẽ lại vùng chứa nó.
Sau khi nhấp vào dấu đầu dòng và quyết định rằng định dạng này sẽ sử dụng HTML5 cho canvas, chúng tôi đã quyết định sử dụng một vài phần nhỏ của các tính năng HTML5 thú vị khác. Ví dụ: cách chúng tôi sử dụng localStorage để theo dõi cài đặt bút vẽ của người dùng. Bằng cách này, sau khi thiết lập các bút vẽ khác nhau theo cách họ muốn, họ có thể quay lại các cài đặt đó vào lần tiếp theo sử dụng công cụ của chúng tôi. localStorage có nghĩa là chúng ta không phải sử dụng hết cookie hoặc thực hiện bất kỳ chuyến đi máy chủ nào để có được các tùy chọn đó.
Sử dụng Canvas
Canvas đã phát triển rất nhiều trong 5 năm qua. Với Draw here, chúng tôi thực sự không xuất bản cổng canvas vì hiệu suất không được tốt. Bây giờ, tôi cho rằng chiến dịch này có thể hoạt động hiệu quả hơn bạn tưởng tượng là điều an toàn. Việc dọn dẹp một phần lớn canvas và vẽ lại các hình dạng phức tạp thường có thể xảy ra với tốc độ nhanh hơn so với nhận thức của con người. Điều duy nhất mà đôi khi tôi thấy quá chậm là sử dụng getImageData() để lấy mẫu pixel. Tốc độ của thao tác rõ ràng phụ thuộc vào kích thước canvas, nhưng trên một canvas lớn, việc thực hiện getImageData() vào sai thời điểm có thể mất đủ lâu để người dùng cảm thấy ứng dụng phản hồi chậm.
Sau khi đọc các hướng dẫn khác nhau về canvas, ban đầu tôi có cảm giác rằng đây là một thứ nặng nề nên sử dụng một cách thận trọng, có thể là một hoặc hai lần trên một trang. Tôi không biết liệu mọi người có hiểu điều này không, nhưng tôi đã hiểu, vì vậy, tôi đã sử dụng nó một cách thận trọng khi lần đầu tiên bắt đầu lập trình deviantART muro. Tuy nhiên, sau một thời gian, tôi nhận thấy rằng có rất nhiều nơi nhỏ mà ảnh in trên vải canvas có thể giúp bạn tiết kiệm nhiều công sức. Ví dụ: bản minh hoạ cho ứng dụng của chúng tôi đã chỉ định rằng cần có một công cụ chọn màu gồm 2 hình tam giác chồng chéo hiển thị màu chính và màu phụ:
Bản năng đầu tiên của tôi là bắt đầu nghĩ cách tạo giao diện người dùng nhỏ này bằng HTML và CSS truyền thống. Những người giỏi trong việc tấn công CSS có thể chỉ ra cách thực hiện tất cả những việc này qua CSS, nhưng hình tam giác của hai phần thay đổi màu khiến nó không rõ ràng đến vậy.
Khi chỉ sử dụng canvas, tôi đã tạo tiện ích với một phần tử DOM duy nhất và một vài dòng JavaScript. deviantART muro sử dụng các nút canvas ở khắp nơi. Mỗi lớp là một canvas và việc thay đổi thứ tự lớp chỉ là việc chuyển đổi chỉ mục z. Bảng màu "navigation" thu phóng cho thấy khung hiển thị thu nhỏ của vùng vẽ chỉ là một canvas khác đôi khi gọi drawImage() bằng cách sử dụng canvas lớp làm hình ảnh nguồn. Ngay cả con trỏ vùng vẽ (hình tròn hai tông màu điều chỉnh kích thước tuỳ thuộc vào kích thước bút vẽ và mức thu phóng) cũng là một canvas nổi bên dưới chuột.
Lý do khiến chúng tôi sử dụng canvas thoải mái hơn so với các công nghệ HTML5 khác là vì thư viện ExplorerCanvas của Google giúp bạn có thể mô phỏng canvas trong Internet Explorer. Từ đó, tôi sẽ chuyển đến phần tiếp theo.
Internet Explorer (IE)
Lý do chính mà nhiều trang web lớn vẫn chưa sử dụng HTML5 là vì các trang web đó không muốn mất người dùng Internet Explorer. Tôi chắc chắn rằng câu hỏi đầu tiên trong tâm trí của hầu hết các nhà phát triển khi họ biết rằng deviantART tạo ra một ứng dụng vẽ HTML5 là "IE đã làm được những gì?"
Ngay từ đầu, chúng tôi quyết định rằng sẽ cố gắng hết sức để làm mọi thứ hoạt động trong Internet Explorer, nhưng chúng tôi phải thực hiện theo kiểu mẫu số ít phổ biến nhất là phát triển web. Vì cộng đồng web đã áp dụng phương pháp mà một trang web không thể khởi chạy cho đến khi trang web trông giống nhau trên mọi trình duyệt đã biết, người dùng không thể biết khi nào trình duyệt của họ bị thiếu. Đối với người dùng thông thường, các vấn đề về tốc độ là do kết nối Internet của họ và mỗi trang hiển thị ít nhiều giống nhau. Vì vậy, họ quyết định trình duyệt yêu thích dựa trên các yếu tố tùy ý trên giao diện người dùng, chẳng hạn như màu của nút quay lại.
Chúng tôi quyết định sẽ tạo bất kỳ tính năng thú vị nào mà nghĩ ra bằng cách sử dụng thông số HTML5, hãy thử làm cho tính năng này hoạt động trong Internet Explorer, và nếu nó không hoạt động, chúng tôi sẽ bật lên một cửa sổ giải thích rằng tính năng đó không có sẵn vì trình duyệt của họ chưa triển khai chuẩn web.
Ban đầu, chúng tôi cố gắng đảm bảo mọi thứ hoạt động với ExplorerCanvas (exCanvas) của Google. Thật đáng kinh ngạc trong việc bắt chước ảnh in trên vải canvas cho hầu hết mọi thứ. Tuy nhiên, điều này cũng có một nhược điểm. Mỗi nét vẽ trên canvas là một đối tượng DOM trong bản dịch VML cơ bản. Đối với hầu hết mọi thứ mà bạn có thể thử với canvas, thì điều này là bình thường, nhưng một số cọ vẽ của muro muro ART tạo ra các hình dạng bằng cách xếp nhiều nét vẽ lại với nhau. Khi Internet Explorer gặp phải VML có hàng nghìn nút trong đó - ngay cả trên một máy nhanh - VML sẽ bị ngã và chết. Do đó, đối với rất nhiều lệnh gọi vẽ, chúng tôi thực sự phải vào và lập trình trong VML thực tế, đồng thời sử dụng các thủ thuật trong đó chúng tôi nối các nút với nhau và sử dụng lệnh di chuyển để chỉ định vị trí cần có khoảng trống. Rất nhiều thành phần điều khiển nhỏ và thành phần điều khiển trong giao diện đều sử dụng thẻ canvas, vì các trường hợp sử dụng nhỏ này thường hoạt động tốt với exCanvas.
Ngoài việc thực hiện một số việc với exCanvas, chúng tôi đề xuất với người dùng rằng họ có thể tiếp tục sử dụng phiên bản Internet Explorer nếu họ đã cài đặt trình bổ trợ Google Chrome Frame. Google Chrome Frame là một trình bổ trợ nhúng công cụ kết xuất của Google Chrome trong Internet Explorer. Dưới góc độ của người dùng, họ vẫn đang sử dụng trình duyệt họ đã quen thuộc; nhưng, bên dưới lớp bìa, trang của chúng tôi được kết xuất với các tính năng HTML5 của Chrome và JavaScript nhanh hơn.
Tôi biết rằng lẽ ra sẽ dễ dàng chuyển mọi thứ để hoạt động với Chrome Frame, nhưng tôi không biết rằng nó đơn giản đến vậy. Bạn chỉ cần đặt thêm một thẻ meta và... thế là mọi thứ bắt đầu hoạt động trong IE.
Tóm tắt
Thật là một niềm vui khi làm việc với các công nghệ mới trong đặc tả HTML5 và tôi sẽ nói rằng mọi thứ mình đã sử dụng đều chắc chắn đã sẵn sàng để sử dụng. Ngay cả khi cần mọi thứ hoạt động hoàn hảo trên IE, bạn có thể kết hợp canvas và exCanvas để thực hiện vô số nội dung đáng kinh ngạc. Và việc viết một lớp dịch giữa SVG và VML cũng có thể thực hiện được một cách đáng kinh ngạc. Một khi bắt đầu sử dụng công nghệ này, bạn giống như bước vào một thế giới hoàn toàn mới.
Tài liệu tham khảo
- deviantART muro
- diễn đàn củadeviantART nơi bạn có thể vẽ (yêu cầu đăng nhập)
- ExplorerCanvas
- Google Chrome Frame