Code chạy ở đâu — trình duyệt, server và ứng dụng điện thoại

Bài viết này nói về code bạn viết ra chạy ở đâu.

Nơi nó chạy có 3 chỗ: trong trình duyệt, trong server và trong ứng dụng đã cài vào điện thoại.

Code của ứng dụng web chạy ở 2 nơi: trình duyệt và server

Phần mềm đọc HTML trên thiết bị của người dùng và vẽ ra màn hình là trình duyệt (browser), còn máy tính được dựng sẵn để lúc nào cũng tiếp nhận được yêu cầu là server.

Các trình duyệt tiêu biểu là Chrome, Safari, Edge và Firefox.

Ngôn ngữ mà trình duyệt đọc và chạy trực tiếp được là JavaScript.

my-app gồm 4 file, trong đó 2 file lo màn hình là frontend, còn server.js nhận đặt chỗ là backend.

Khi người dùng mở URL, chỉ 2 file của màn hình đến được thiết bị.

Vẫn là các file của cùng một my-app, nhưng nơi chúng chạy tách thành 2 khung.

Thứ đến được thiết bị chỉ có index.html và app.js, và sau đó thứ đi lại giữa 2 khung chỉ là dữ liệu.

Trong 3 dòng sau, dòng giữa là chức năng chỉ có bên trong trình duyệt, dòng cuối là chức năng chỉ có bên trong môi trường chạy của server.

console.log("Đặt chỗ");
console.log(navigator.language);
console.log(process.version);

Chạy 3 dòng này bên trong trình duyệt thì kết quả tách ra như sau.

Code của ứng dụng web tách ra 2 nơi

index.html và app.js dựng nên màn hình sẽ đến thiết bị của người dùng và chạy bên trong trình duyệt.

server.js nhận đặt chỗ thì không ra khỏi server công khai, nên những đoạn chữ không cho người khác thấy được viết ở phía này.

Cách dùng được trên điện thoại: giữ nguyên ứng dụng web, hoặc làm ứng dụng native

Điện thoại cũng có trình duyệt.

my-app mở URL trên trình duyệt điện thoại là chạy được ngay.

Đó là cách thứ nhất, và bạn không cần làm lại code.

Phần mềm quản lý việc khởi động ứng dụng, màn hình, kết nối và file bên trong thiết bị là OS (Operating System), với điện thoại thì đó là iOS hoặc Android.

Cách thứ hai là ứng dụng native (native app, ứng dụng cài thẳng lên OS rồi chạy ở đó), bạn làm riêng bản cho iPhone và bản cho Android rồi đưa đến người dùng qua App Store và Google Play.

Việc đặt ứng dụng vào thiết bị để OS khởi động được nó gọi là cài đặt (install).

Đúng như sơ đồ, ứng dụng native nằm trên OS, còn ứng dụng web chạy trên trình duyệt có trong chính OS đó.

Chương trình hoặc thiết bị gửi yêu cầu đến server được gọi là client, và phía chạy trên thiết bị còn gọi là client-side, phía chạy trên server gọi là server-side.

Chọn cách nào thì bạn xếp các điểm mạnh và điểm yếu ra để quyết định.

Từ trình duyệt bạn chỉ dùng được đến những chức năng mà trình duyệt có sẵn, còn khi muốn dùng chức năng thiết bị rộng hơn thế thì mới làm ứng dụng native.

Muốn được tìm thấy từ ô tìm kiếm của store cũng vậy, còn nếu không rơi vào trường hợp nào trong hai cái đó thì bạn giữ nguyên ứng dụng web.

Cũng có cơ chế làm ứng dụng cho nhiều OS từ một bộ mã nguồn, tên gọi của nó được nói đến trong bài tiếp theo.

Cách đưa đến người dùng có đổi thì server.js vẫn dùng chung

Nếu giữ nguyên ứng dụng web, chỉ cần mở URL trên trình duyệt điện thoại là chạy được.

Ứng dụng native thì bạn làm riêng bản cho iPhone và bản cho Android rồi để người dùng cài từ store, nhưng chọn cách nào thì server.js và reserve.db vẫn nằm nguyên trên server công khai.

Chạy trên máy của bạn và chạy sau khi công khai khác nhau ở chỗ nào

my-app bạn vừa làm thì hiện giờ mới chỉ mở được từ máy tính của bạn.

Bên trong máy tính của bạn, xét như một nơi để chạy code, được gọi là local.

Con số ở cuối http://localhost:3000 mà bạn mở tại máy là để phân biệt bên nhận trong cùng một máy tính, và nó được nói đến trong bài "Nhập URL vào thì chuyện gì xảy ra" của khóa này.

Bên trong khung là một chiếc máy tính của bạn, và trình duyệt, server.js lẫn reserve.db đều nằm trong đó.

Sau khi công khai, những thứ trong một máy này tách ra 2 nơi, nhưng ai đảm nhận vai trò nào thì vẫn thế.

Tên các file đang chạy thì ở local hay sau khi công khai cũng như nhau.

Việc chuyển cả 4 file ra server công khai bên ngoài máy tính của bạn chính là deploy.

4 file chuyển sang server công khai, thứ còn lại trên máy tính của bạn chỉ là trình duyệt.

Mở cùng example.com từ thiết bị nào thì cùng một màn hình hiện ra.

Cứ để nguyên ở local thì nó không tiếp nhận yêu cầu đến từ bên ngoài, nên thiết bị của người khác không dùng được.

localhost:3000 chỉ về chính thiết bị bạn gõ nó, nên dù gõ từ điện thoại của đồng nghiệp cũng không tới được máy tính của bạn.

Nội dung của việc công khai được nói đến trong bài "Deploy và biến môi trường — Từ chạy được ở máy bạn đến khi công khai" của khóa này.

Đổi nơi đặt thì đổi luôn ai dùng được

my-app chạy được theo các bước trong sách nhập môn thì chỉ mở được từ bên trong máy tính của bạn, tức là từ local.

Chuyển 4 file sang server công khai thì thiết bị của người khác cũng mở được, và việc đó chính là deploy.