Làn sóng Web 2.0 và AJAX - cưỡi ngựa xem hoa

wasabi
14-07-06, 03:19
Các bác chắc ai vào web thì đều đã được nghe qua Web 2.0. Em sẽ giới thiệu cho cả nhà các tiềm năng và hứa hẹn cùng một số điểm về kỹ thuật của web 2.0 thật dễ hiểu theo đúng với tinh thần của tiêu đề là chỉ cưỡi ngựa xem hoa. Bên cạnh đó còn một số bài (sẽ không nhiều) khá sâu về kỹ thuật mà không biết có thực hiện nổi hay không.

---

Đây có vẻ giống một phong trào nhà nhà web 2.0 người người web 2 hơn là một sự cải tiến gì rõ nét hay đột phá về công nghệ. Mà thật ra cái biểu hiện của nó cũng rất khó đóan, chả qua là một cách nói để đánh bóng cái trang web và một ít cải tiến làm cho web thân thiện hơn vậy thôi.

Web 2.0 có thể mang lại cái gì tốt hơn cho các bác?

- Ứng dụng trên web giờ đây cũng mạnh gần tương đương với ứng dụng chạy trên desktop. Các bác có thể soạn thảo văn bản cùng đồng nghiệp với www.Writely.com, làm bảng tính với Google Spreadsheet, làm việc nhóm với ActiveCollab, làm trình diễn với www.empressr.com IM với www.koolmessenger.com email và chat với www.gmail.com ... và rất nhiều thứ nữa. Có nghĩa là web 2.0 mang lại những gì mình tưởng chỉ có ứng dụng được chạy cài trên máy mới có thể đảm đương.

Trang web cũng nhanh hơn nhiều so với trước kia do áp dụng các công nghệ và hỗ trợ mới nhất từ các trình duyệt tân kỳ.

- Nội dung trên web 2 là của các bác - cùng với độ tương tác khá cao. Các bác có thể cá nhân hóa trang web thành của mình (như www.google.com/ig/ ) , và thậm chí sửa cả của người khác dạng www.wikipedia.com . Cùng với sự ra đời của thuật ngữ là tag (xem www.flickr.com ), làm cho việc tìm kiếm nội dung trên trang web chuẩn xác và đơn giản.

- Thiết kế được đơn giản hóa - 'chú trọng vào chức năng'. Trang web sẽ có nút ấn to hơn, rõ ràng hơn, nội dung ít hơn. Các bác không phải mất thời gian lần mò nữa mà tất cả đều bày sẵn trước mặt.
Nhìn trang web 2 cũng thấy có một số thứ đập vào mắt, đó là các nút trông bóng lộn, bóng phản chiếu, nền sọc chéo, hoặc cái knob xoay xoay.

- Nội dung luôn mới mẻ hấp dẫn, ý tưởng sáng tạo rất nhiều ( http://del.icio.us và www.digg.com ).

- Nội dung mở, ai cũng có thể cho vào và lấy ra (khai thác) dễ dàng.

- Thường có lượng người dùng cực kỳ đông đảo, ba đại diện tiêu biểu là www.youtube.com và www.flickr.com cùng với www.digg.com (video, ảnh và tin công nghệ lần lượt)

Hiệu ứng

Web 2.0 nổ ra đã cùng lúc đi kèm với thứ gọi là blog kéo cả em nhỏ cụ già theo không ai là không blog. Công bằng mà xét, blog là thứ rất là del.icio.us, phải nói là tuyệt vời khi mà ai giờ đây cũng có thể trở thành nhà văn nhà báo: Rất chi là dân chủ. Thực ra xu hướng của web 2.0 và blog đã được tiên đoán từ lâu, nhưng điểm khá bất ngờ là sự bùng nổ quá nhanh của nó. Đến 1 năm trước thì em còn nhớ lúc em dùng Ajax (sẽ bàn đến sau) thì trên mạng lúc đó em search chỉ có chừng vài trăm bài nói đến từ "XMLHTTP" hoặc "AJAX". Vậy mà đến bây giờ thì nhan nhản hàng triệu bài viết và kết quả.

Và mặt trái của tấm huy chương

Rất nhiều công ty cũng muốn được kéo theo làn sóng 2.0 hóa - để bắt nhịp với thời đại nhưng thực ra cái điều mà thằng web developer nào cũng hiểu chỉ có vài người không hỉêu là việc: suy nghĩ của bọn web developer và administrator thì có thể có khác, nhưng đa số dân ngoại đạo thì không care đến chuyện đó, vấn đề là nó có đủ sức hấp dẫn hay không. Mà sức hấp dẫn thi đâu chỉ nằm trong khía cạnh công nghệ và thiết kế? Một điều nữa cũng đặt ra dấu hỏi là phần lớn những trang web sớm nở này liệu tối có tàn hay không? Vì cảm giác khi người ta duyệt web cảm thấy yêu mến trang web (như TL nhà mình chẳng hạn) sẽ là việc nó giúp ích gì được cho người ta, người ta thu lượm được gì từ đó. Chứ không phải là việc đảo qua rồi nghĩ trong đầu "It's cool" và đó là tất cả người ta ấn tượng về trang web đó.

Kinh nghiệm của em cho thấy, mặc dù Web 2.0 có dễ dàng hơn cho mọi người nhưng nó cũng gây không ít phiền phức với các vấn đề như trình duyệt hay flash player. Như vậy là nếu trình duyệt không tương thích (IE 5 với Win98 chẳng hạn là khả năng "ngọng" sẽ rất lớn) thì đó là một rào cản đối với trang web 2 này: hóa ra nó không làm dễ dàng cho người dùng mà đôi khi nó còn làm khó người ta nữa. Hơn nữa, một trang web mà cần thiết hay hớm cho một người thì dù nó thiết kể dở ẹc người ta cũng vẫn cứ mò mẫm (chân thành).

Có thể nói, web 2 đóng góp một phần vào sự thành công của trang web chứ không phải là lý do chính làm cho một trang web trở nên thành công. Thành công hay không hấp dẫn hay không vẫn chính là sự có ích của nó. Slashdot.com hay Thăng Long hay deviantart.com cùng đa số các trang tin tức vẫn là những trang web 1 mà thực tế vẫn rất nhiều người vào vì có rất nhiều thông tin hay ho. Và như thế thì các công ty trừ khi có lượng người dùng rất lớn và cần độ tương tác cao mới cần đến những khả năng chủ chốt của web 2 còn không thì việc duy trì web 2 là một việc khá tốn thời gian công sức cùng tiền bạc.

(còn tiếp - bài sau sẽ nói về công nghệ)
wasabi
14-07-06, 03:30
Nhân tiện đây em cũng xin được repost trước một bài em viết chừng mấy tháng trước, hòan toàn liên quan đến kỹ thuật và em nghĩ sẽ khá thú vị cho bác nào (nhất là các bác SV) đang nghiên cứu về ajax. Chân thành mà nói, tức là không khoe khoang gì cả, em đã phát hiện cái này từ khá lâu chừng nửa năm trước nhưng ngại viết, mấy tháng trước trong một đêm thức đã viết nên có thể lời lẽ còn hơi bị thách thức và lằng nhằng.


GMAIL: CÓ PHẢI LÀ CÔNG NGHỆ AJAX?

Một điều rất dễ nhận thấy về mặt kỹ thuật của Gmail là việc nạp trang nhanh chóng chi trong nháy mắt. Từ khi gmail ra đời thì việc ứng dụng cơ chế AJAX (Asynchorus Javascript And Xml) đã trở nên rộng rãi và tạo thành một làn sóng mới trên web. Nhưng hẳn nhiều người sẽ bất ngờ khi tôi nói rằng: Sức mạnh thực sự của cơ chế Gmail không nằm ở AJAX!

1. Gmail có dùng AJAX hay không?

Để bắt đầu cho vấn đề thú vị này, tôi xin được nêu ra hai câu hỏi đã và đang làm đau đầu những người nghiên cứu về AJAX:
1. Dùng AJAX, làm sao để submit file field trong form?
2. Dùng AJAX, làm sao có thể thực hiện được nút back và forward trên trình duyệt?

Thực ra, việc thực hiện những việc đó bằng AJAX là hầu như không tưởng*. Thực tế chúng ta thấy gmail thực hiện những việc này rất dễ dàng và không gặp trở ngại nào cả. Như vậy, một nghi vấn tiềm tàng là: Gmail có dùng AJAX để thực hiện hay không?

Để hiểu được vấn đề này, ta đặt ngược vấn đề: AJAX để làm gì? Câu trả lời không khó, AJAX có khả năng tận dụng khả năng của đường truyền, ta chỉ cần nạp lại những phần cần nạp. Nhưng AJAX khó thực hiện và khó kiểm soát lỗi. Còn có cách nào khác để làm việc này hay không?

2. “Hack” Gmail như thế nào?

Để có thể có được cái nhìn tổng thể về cơ chế của gmail, ta cần làm một số thao tác để “hack” và nhìn sâu vào bên trong mã của Gmail. Để làm được điều này cần có một phiên bản Firefox bất kỳ: Firefox có chức năng “View frame source” sẽ hỗ trợ rất tốt cho việc nghiên cứu mã clientside của Gmail trong những bước tiếp theo đây. Tiếp tục ta cần áp dụng một “chiến thuật” hack cấu hình Firefox để nó hiển thị Frame resize border (viền frame) cho các website dùng frame. Gõ vào trình duyệt địa chỉ “about:config”. Bảng cấu hình hiện ra, ta tìm đến khoá “layout.frames.force_resizability”, ấn đôi vào đó sẽ đổi giá trị mặc định false thành true, rồi đăng nhập gmail như bình thường.


http://IMG30.imageshack.us/IMG30/8376/gmailcodungajax10sp.png
H1. Tweak Firefox để hiển thị viền frame.

Khi đăng nhập gmail xong, ta sẽ thấy điểm “bí mật” được hé lộ ra một chút khi thấy có một viền frame rất “khả nghi” ở dưới cùng ngay trên Status bar. Để hiểu rõ tại sao Gmail có một frame ở phía dưới, ta ấn phải vào trang mail, chọn View Page Source, sẽ thấy đoạn mã sau:

Mã:

if (wfs()) {
document.write('<frameset onload=lj() rows="100%,*" border=0><frame name=main src="?view=page&amp;name=loading&amp;ver=d202237fbf0582fa" frameborder=0 noresize scrolling=no><frame name=js src="?view=page&amp;name=loading&amp;ver=d202237fbf0582fa" frameborder=0 noresize></frameset>');
}

Nếu hàm wfs() trả về true, gmail sẽ khởi tạo 2 frames để tiếp tục tải nội dung chương trình phía máy khách

Hàm wfs() đã được định nghĩa để kiểm tra xem browser có hỗ trợ các control XMLHTTP và nếu là IE thì có cho phép tạo ActiveX control không. Ý nghĩa của đoạn mã trên: Nếu browser hỗ trợ thì Gmail sẽ tạo ra trong trang đoạn mã để nạp 2 frame, một frame tên là main và một frame tên là js. Thực ra Gmail đã rất khéo léo khi “giấu” hoàn toàn frame js đi bằng cách đặt cho frame main chiếm 100% chiều cao vì vậy trong điều kiện bình thường ta hoàn toàn không thấy nó.

Ta có thể kéo viền phân cách 2 frame lên, sẽ thấy Gmail đã để tất cả mã tạo trình bày trang và chức năng của gmail ở frame js phía dưới. Bạn sẽ thấy điều này bằng cách ấn phải vào frame bên dưới chọn This frame => View frame source.


http://IMG45.imageshack.us/IMG45/5256/gmailcodungajax21zp.png
H2. Sau khi kéo frame resize border lên, hãy xem Gmail có gì.

Và khi gmail nạp một trang mới, như trang Inbox thì sao? Nội dung của Frame main được hoàn toàn thay đổi bằng cách gọi một url mới ở frame main. Gmail sẽ không nạp lại phần trình bày bằng cách gọi các hàm trình bày và các hàm phục vụ đã được cache từ trước và cố định ở frame js. Bạn chuyển sang một trang mới, như Sent thì frame main thực chất đã được thay đổi địa chỉ URL khác và nội dung mã khác. Cái hay của Gmail chính là việc nó đã khéo léo dùng frame js cố định phía dưới để tăng tốc rất lớn cho việc gọi các hàm từ frame main phía trên – nếu view frame source của frame main bạn sẽ chỉ thấy toàn bộ mã được đặt trong các tag <script> để gọi hàm ở frame js.

Mã:

D=(top.js&&top.js.init)?function(d){top.js.P(window,d)}:function(){};
D(["cla",[]]);
D(["ppd",1629]);
D(["cou","VN"]);

Một đoạn mã nhỏ minh hoạ ở frame main. Hàm D() đã được định nghĩa phía trước, là shortcut cho việc gọi hàm ở frame js.

Bạn có thể tự mình khám phá các mã của gmail bằng cách view frame source và có thể dễ dàng đi đến cùng kết luận giống tôi: Thực sự Gmail chỉ dùng AJAX để phục vụ các công việc nhỏ, ví dụ như đánh dấu sao cho mail, chuyển mail từ thư mục này sang thư mục khác, nhưng với các việc “lớn hơn”, như gửi thư, thì gmail vẫn dùng các phương pháp “truyền thống”: là post form cả form và nạp lại cả trang.

3. Ưu và nhược điểm của cơ chế gmail.

Cơ chế này của gmail giải quyết được hầu hết các vấn đề “nổi cộm” khi lập trình viên phải xử lý rất nặng javascript ở clientside nếu muốn dùng AJAX: Giờ đây các thao tác POST form, back, next tự thân nó sẽ hoạt động một cách bình thường mà không cần một thủ thuật “hack” trình duyệt đặc biệt nào do thực tế các trang thực sự đã thay đổi URL - trình duyệt có thể dễ dàng xử lý các thao tác back-next trong 1 frame. Thao tác Post trong AJAX vốn trước đây thực hiện khá phức tạp và không thể gửi nội dung file do cơ chế bảo mật của JS thì giờ đây nó đã trở thành một thao tác dễ dàng và chính xác không gây lỗi do nó sử dụng cơ chế post form của trình duyệt. Hơn nữa, việc lập trình AJAX luôn tiềm tàng khả năng lỗi và nếu có lỗi, rất có thể tất cả các script trong trang sẽ “đứng ỳ” không chịu chạy dòng mã tiếp theo, thì với gmail, lỗi chỉ giới hạn cục bộ ở 1 trang nhất định.

Tuy nhiên không phải tất cả đều dễ dàng. Với cơ chế này, ta luôn phải bắt ép frame js nạp trước rồi mới đến lượt frame main nạp để tránh tình trạng frame main gọi hàm khi mà js chưa nạp xong. Điểm hạn chế thứ hai cũng rất lớn là frame main luôn cần frame js để hoạt động vì thế cần có cơ chế để “check” xem frame js có tồn tại ở nền không. Điều thứ ba cũng cần quan tâm là địa chỉ của trang hiện trên thanh địa chỉ của trình duyệt cũng không thể thay đổi được. Vì thế cần phải khéo léo khi xử lý vấn đề này. Có nhiều cách để khắc phục, nhưng khuôn khổ bài viết không thể cho phép tôi trình bày phương pháp này.

Cá nhân tôi cũng đã mày mò và tìm ra một số phương pháp để giải quyết gần như triệt để vấn đề này và áp dụng cho website của mình. Nếu cần biết thêm chi tiết, bạn có thể email cho tôi để cùng trao đổi. (It turned out that my workaround is exactly or very close to what gmail did :) )


Tháng 5-2006
tuananh247
18-07-06, 13:55
Ajax đúng là ngon của nó, tớ thì chẳng thấy có gì bất tiện cả, là end-user chỉ thấy tiện lợi hơn. Từ ngày có Gmail mình ít dùng Outlook hẳn :D.
newnick
17-01-07, 12:15
Nhận xét chút về bài cu Bi:
Về web 2.0: tựa như 1 bài báo phân tích của 1 chuyên gia và có hơi hướng của sự cóp nhặt.
Về Ajax: Chưa nói được gì nhiều! Ngoài tìm hiểu xem gmail có xài Ajax không. Thủ thuật nhuần và thạo FireFox ra phết. Giờ anh mới biết cái command about: config trong thằng FF này đấy.

Giáo sư Bi nên tiếp tục đi sâu vào chuyên môn thêm vài bài nữa!

Nhân đây, nếu ai muốn Hack gmail thì vào đây VỌC chơi:
http://www.ush.it/team/ascii/hack-gmail/gmail-hack.htm


http://maximumpc.com/2006/12/how_to_hack_gma.html

Hướng dẫn cực tỉ mỉ!