Web đang phát triển nhanh hơn bao giờ hết, chủ yếu bởi sự phát triển và cải tiến của ngôn ngữ Javascript. Bên cạnh đó, dự án NodeJs đã có thể sử dụng Javascript ở phía Server, chứng minh JS là ngôn ngữ tuyệt vời – hoặc không tốt – như Php, Java hoặc Python. Nhưng khác với chúng, thực tế chúng ta có thể sử dụng Javascript ở cả phía client và server, biến JS thành ngôn ngữ thực sự đặc biệt, mà mang đến cho chúng ta khả năng tạo ra những thứ được gọi là các ứng dụng universal
Javascript ở phía client
Sử dụng Javascript trong trình duyệt là mục đích ban đầu để ngôn ngữ này tồn tại. Việc sử dụng nó đã phát triển từ việc có một vài dòng code để validate một số input text cho các ứng dụng thực sự phức tạp. Ngày nay, tất cả mọi người sử dụng một số ứng dụng RIA cho email, mạng xã hội, chia sẽ ảnh, vv…
Tóm lại, RIA hoạt động như sau:
- Trình duyệt tải về một file HTML. File này thường được tổ chức giống như:
- Phần <head> của HTML chứa tất cả code css cần thiết để tạo kiểu cho các phần tử DOM của ứng dụng
- thẻ <body> hầu hết không chứa phần tử DOM (những phần tử này được sinh ra tự động bởi JS code).
- Cuối cùng thẻ <script> bao gồm tất cả các code javascript do ứng dụng của chúng ta yêu cầu.
- Tại điểm này client, trình duyệt, chứa tất cả các code cần thiết để hoạt động. Javascript được tải trong thẻ <script> có trách nhiệm thêm hoặc xoá các phần tử DOM mới ( như cách thức trên Window, menu, danh sách các item…), tải dữ liệu bất đồng bộ từ server, xác thực, vv…
Ưu điểm và nhược điểm của các ứng dụng RIA
RIA có ý nghĩa như là bước đi quan trọng trong bối cảnh các ứng dụng dựa trên nền web. Tôi nhớ rằng khi Gmail xuất hiện và UX của nó tốt hơn nhiều so với các đối thủ cạnh tranh như thế nào. Trong Gmail ứng dụng được tải một lần và bất kỳ thay đổi hay dữ liệu đang được tải về đều được xử lý bất đồng bộ, mà không cần tải lại trang. Đây có lẽ là điểm quan trọng nhất về các ứng dụng RIA, điểm tương đồng giữa chúng và các ứng dụng native.
Nhưng thực tế luôn dạy chúng ta điều gì đó và sự thật là các ứng dụng RIA có vấn đề. Hãy kiểm tra flow của các ứng dụng RIA
- Đầu tiên bạn phải truy cập đến URL và đợi cho đến khi ứng dụng được tải
- Sau đó, ứng dụng sẽ lấy một số dữ liệu bất đồng bộ và người dùng phải đợi cho đến khi nó được tải về và được thêm vào trang.
Bạn có thể thấy, với flow này người dùng cần đợi gấp đôi thời gian để lấy được nội dung ban đầu của ứng dụng
Javascript ở phía Server
Có một số lựa chọn thay thế để chạy Javascript ở phía Server, nhưng một trong số đó đã đánh bại tất cả chúng đó là dự án NodeJs
Dựa trên engine Javascript 8 của Google, NodeJS cho phép chạy Javascript code ở phía Server. Do đặc tính của Javascript, việc tạo các ứng dụng even-driven bất đồng bộ là đặc biệt dễ dàng, dễ phát triển hơn các ứng dụng chạy đồng thời truyền thống
Làm việc với Javascript ở phía server giống như bất kỳ ngôn ngữ và công nghệ nào khác
- Các client tạo request đến server
- Server xử lý dữ liệu đến, tính toán và truy vấn bất kỳ giá trị cần thiết nào, xây dựng một trang HTML dưới dạng respone và trả về phía client
- Client biên dịch trang HTML được trả về, tải bất kỳ image, css hay đoạn Javascript nào được bao gồm
Đây là ví dụ, cách hoạt động của các mail client cũ mà mỗi hành động (click vào một link hay button) bao hàm một cuộc gọi đến URL khác nhau trên Server và người dùng phải đợi cho đến khi server hoàn thành code HTML mới và trả về nó phía trình duyệt.
Ưu điểm và nhược điểm các ứng dụng phía Server
Thời gian trôi qua và mọi người nghĩ rằng phát triển các ứng dụng Web ở phía Server là lựa chọn tồi, vì cần phải đợi response của server trên mỗi hoạt động của client.
Đúng rồi, nhưng sự thật là các ứng dụng ở phía server là rất tốt trong một số khía cạnh: Chúng có thể trả về các trang có nội dung, tức là khi bạn request một số URL, bạn sẽ thu được trang web với nội dung mà bạn mong muốn.
Thực tế này là điều làm cho việc xử lý ở phía server quan trọng khi xây dựng các ứng dụng universal. Chúng ta cần tăng tốc độ ứng dụng và cải tiến UX trả lại nội dung càng nhiều càng tốt khi người dùng truy cập URL
Ứng dụng universal
Ứng dụng universal là pha trộn giữa ứng dụng phía client và phía server. Ý tưởng là lần đầu tiên chúng ta truy cập trang web trả về toàn bộ code và nội dung mà người dùng mong muốn, ví dụ, trong trang web thương mại điện tử truy cập đầu tiên có thể bao gồm 20 mặt hàng ban đầu và sau đó cho phép người dùng tiếp tục tải thêm bất đồng bộ
Cách thức này chúng ta có thể làm được với bất kỳ ngôn ngữ và công nghệ nào. Ví dụ, chúng ta có thể có một Tomcat Server sử dụng Java+JSP mà trả về code HTML khởi đầu bao gồm một số gói Javascript với code cần thiết để làm việc với ứng dụng phía client. Đó có thể hiệu quả nhưng đó không phải là ứng dụng universal
Để là app universal ứng dụng của chúng ta phải sử dụng code giống nhau ở cả 2 phía client và server để hiển thị các thành phần của ứng dụng. Điều này nghĩa là, trong ví dụ trước về trang web thương mại điện tử, khi truy cập lần đầu tiên code được server sử dụng để yêu cầu lấy các mặt hàng bằng API và hiển thị chúng (biến đổi thành các phần tử DOM) phải giống như code được client sử dụng khi người dùng muốn tải thêm các mặt hàng. Bằng cách này, code Javascript của ứng dụng chúng ta là universal vì có thể chạy ở mọi nơi.
Flow thực thi
Tôi đã miêu tả cho các bạn các ứng dụng universal hoạt động như thế nào nhưng hình ảnh sẽ thay cho hàng nghìn từ
- Request: Brower request lên server. Đây là khởi đầu và reuqest chính bởi vì nó có nhiệm vụ trả về một trang web trỏ đến các gói code Javascript và css, bên cạnh đó với nhiều nội dung nhất có thể ( được bao gồm dưới dạng các phần tử DOM của trang web) cho request từ người dùng.
- Process and render: Server xử lý các request. Server phải truy xuất được hướng người dùng đang request đến (trang chủ, giới thiệu, chi tiết sản phẩm…), phải truy vấn lấy các dữ liệu cần thiết để hiển thị các phần tử trang HTML
- Response: Server trả về trang HTML được xây dựng trước đấy về cho client. Client tải về các image được bao gồm trong Document cùng với các file css và javascript.
- Interaction: Client đã có tất cả các code cần thiết để hoạt động như một ứng dụng RIA. Nội dung ban đầu của trang web được server hiển thị, mang đến UX tốt hơn cho người dùng và từ bây giờ ứng dụng có trách nhiệm reuqest nội dung mới bất đồng bộ, không cần phải reload lại trang web.
Nhớ rằng code bạn tạo phải làm việc được cả 2 phía client và server, một số ví dụ:
- Code cần thiết để lấy được đường dẫn hiện tại và hiển thị đúng phần. Đưa ra một ứng dụng với 3 tab: main, help và about. Nếu bạn có thể truy cập vào URL tuyệt đối của phần about trong trình duyệt, chúng ta mong đợi phần about sẽ được hiển thị. Sau đó, lập tức ứng dụng được tải trong trình duyệt. Nếu chúng ta chuyển sang phần help, các thành phần phải được cập nhập. Trong cả 2 trường hợp, code mà nhận biết được đường dẫn đang truy cập và hiển thị các phần tử trang web phải giống nhau.
- Code cần thiết để truy xuất được dữ liệu. Vì dữ liệu có thể được truy xuất bởi server. Nhưng cũng từ client ngay lập tức ứng dụng được tải về trong trình duyệt, code bạn sử dụng để lấy dữ liệu phải làm việc ở cả 2 phía. Do đó, thông thường, các ứng dụng universal request dữ liệu đến API server.
