6

Tìm hiểu Web APIs

ảnh www.acodez.inảnh www.acodez.in

Web APIs là gì?

Web APIs là tập hợp các chức năng giúp Browser có thể tương tác những thành phần chức năng của máy tính. 

Ví dụ như khi Web Audio API cung cấp những JavaScript constructs để thực hiện những chức năng trên audio như tăng/giảm âm lượng trên web browser. Bản chất ở phía dưới công việc này được thực thi những function viết bằng ngôn ngữ cấp thấp hướng hệ thống như C++ hoặc Rust và được trừu tượng hoá, expose thành những APIs (Browser APIs) để ngôn ngữ cấp cao như Javascript có thể sử dụng dễ dàng.

 ảnh từ developer.mozilla.org  ảnh từ developer.mozilla.org 
✧ ✧ ✧

Có rất nhiều Web APIs được liệt kê ở đây, trong phạm vi bài viết mình chỉ tìm hiểu những Web APIs mà chúng ta hay sử dụng nhiều nhất.

APIs thao tác trên documents

DOM, Document... cung cấp những chức năng để thao tác trên DOM ( Document Object Modal). 

simple DOM example (Mozilla)simple DOM example (Mozilla)

Thao tác ở đây có nghĩa là bạn có thể query, thêm, xoá, edit, bind event... trên DOM.

Ví dụ đổi title của trang web:

Tìm kiếm một element và chính sửa style, bind event trên element đó:

APIs fetch data từ server (Fetch API, XMLHttpRequest)

Cung cấp chức năng cho phép thực hiện một HTTP Request từ Web Browser. Chức năng này có ý nghĩa rất lớn đến việc đảm bảo hiệu năng của trang web, nhất là những ứng dụng web (Single Page Application).

Giả sử mình muốn update thêm bài viết từ server mà không cần phải reload lại trang.  Kịch bản là mình sẽ bind một event vào button khi click sẽ thực hiện HTTP Request để load thêm data, sau đó append data mới này vào DOM.

APIs  liên quan đến draw và graphic (Canvas, WebGL)

Bạn có thể vẽ những object 2D, 3D  trong thẻ <canvas> và render ra Browser dựa vào Canvas, WebGL API.

Vẽ một Object 2d bằng canvas :

Sử dụng WebGL để render ra Object 3D. Các bạn có thể tham khảo thêm tại đây:

Audio và Video APIs

HTMLElementMediaWeb Audio là những APIs cho phép bạn thực hiện chức năng trên các file âm thanh, videos: tăng giảm âm lượng, hiển thị subtitle trên một videos, seed tới một đoạn audio.

Device APIs

Device APIs cho phép browser có thể lấy được thông tin phần cứng, phần mềm đang chạy web.

Ví dụ thông qua Navigator API, mình có thể thấy được ngôn ngữ sử dụng của browser, thiết bị đang chạy, tốc độ mạng...

Navigator APINavigator API

Real Time Connect APIs

WebSocket, WebRTC là những API cho phép phía browser có thể thực hiện realtime connect đến server,peer-to-peer.

Có một dự án rất thú vị của các bạn Software Engineer trong team conclave sử dụng WebRTC, một text-editor peer-to-peer,  kiểu như các bạn sử dụng word/excel online và mở cho nhiều người cùng vào edit vậy á.

Ngoài ra còn những APIs khác cũng hay sử dụng như:

  • Storage APIs: những chức năng lưu trữ data trên phía browser như localStorage, sesstionStorage.
  • Web Workers: cho phép bạn chạy javasript trong một thread khác độc lập với main thread đang chạy ứng dụng web của bạn. Web Notifications thường được sử dụng với Web Workers để push notification cho browser.
  • Console APIs: quá quen thuộc với những bạn dev javascript hay sử dụng để debug trên javascript.
✧ ✧ ✧

Kết bài

Trong gần 2 năm làm việc với Javascript, những chức năng trên mình sử dụng rất nhiều. Lúc đó mình không biết nó là Web APIs đâu, cứ nghĩ nó là chức năng thông thường của Javascript thôi (nhìn từ khía cạnh lập trình thì cũng đúng chứ nhỉ )

Cho tới khi mình bắt đầu tìm hiểu sâu về V8 Engine trên Chromium, thì V8 sử dụng Web APIs ( setTimeout, fetch....) để thực hiện những task phía dưới background.

Bài viết mình tới đây hết rồi, nếu các bạn thấy hữu ích thì đăng kí tài khoản codefun và like + follow mình nha. Hy vọng một ngày nào đó sẽ thấy những chia sẽ của bạn trên Codefun <3.

Tham khảo

#web#javascript
6
0
...