JS Thần công quyển 1 - từ BackEnd tới FrontEnd

FrontEnd và BackEnd là gì ?

Lược sử Bách Tông và Phần Tông

Từ thuở xưa, khi nhân sĩ và tông môn các phái còn lưa thưa, vị trí độc bá của mảng web vẫn luôn bị 3 ông lớn là dotNet, Java và PHP độc chiếm. Nhân sĩ giang hồ lúc đấy hầu như vẫn kiêm tu luôn cả mảng Bách Công (BackEnd) và Phần Công (FrontEnd), viết các đoạn script xử lý, truy vấn dữ liệu và cho hiển thị thông tin ra trang html.

Phần Tông trỗi dậy

Thế sự luôn biến đổi, Nodejs ra đời, kéo theo 1 loạt những công pháp khác như Bootstrap, Angular, React, Vue... hay các bản cải tiến công pháp như ECMAScript (ES5) hay Less, Sass ra đời, làm cho Phần Tông quật khởi, nhân sĩ đầu nhập nhiều như lá mùa thu.

Vậy nó là cái chi chi ??

Chúng ta có thể hiểu đại khái Backend là phần xử lý đằng sau của 1 ứng dụng (web), ví dụ bạn thực hiện 1 giao dịch rút tiền thì giao dịch đó sẽ được thực thi ở phần backend, hoặc là những hành động tính toán thông tin khách hàng để đưa ra sản phẩm hợp lý bla bla. Còn Frontend thì là phần hiển thị nội dung cho người dùng, chính là phần giao diện mà chúng ta tương tác trên trình duyệt web hoặc trên các app build bằng các framework js như React Native....

Học Javascript như nào ?

Tôi cũng xuất phát như những dev backend bình thường khác, học C# và Java để làm app, và web , sau đó kết hợp đôi chút HTML và CSS để đổ dữ liệu ra, nếu lên trình 1 chút thì sẽ dùng JQuery vào thế là đã đủ. Nhưng nếu đi làm, nhất là những bạn chưa làm với frontend, thứ hai là làm mảng outsourcing web, thì thế là chưa đủ, nên ta cần 1 số sau đây:

Debugging

Đầu tiên là về gỡ lỗi - debug rồi, cái mà làm có khi còn nhiều hơn cả thời gian code. Để debug (gỡ lỗi) hồi còn cùi bắp ngồi làm đồ án viết đôi chút AJAX, thì tôi xài alert() để đổ cái mình cần ra. Nhưng hiện tại có 1 cách hiệu quả hơn đó là gõ debugger; vào chỗ cần debug, khi mở F12 thì trình duyệt chạy đến đó nó sẽ dừng lại. Debug bằng chrome Chúng ta cũng có thể debug bằng bug ở từng dòng cụ thể trong tab source của chrome. Và cần thiết thì dùng hàm console.log() để viết lại nội dung cần kiểm tra. Debug bằng chrome

Học thêm nhiều thứ.

Các bạn có thể học thêm về JS, đặc biệt là ES6 có nhiều thứ hay ho chẳng hạn như:

  • Arrow function : Ví dụ:
onClick = "((e) => console.log(e))";
  • Khai báo hằng, biến theo scope khác nhau let, var, const
  • Học thêm 1 framework : angular, react, vue đều là sự lựa chọn không tồi.

Note: JS thông thường mình đọc từ nguồn chất lượng nhất là MDN, vẫn có bản dịch tiếng Việt nhưng chưa hoàn toàn.

Cuối cùng

Code, code và code, hãy code để nâng trình độ :3. Hãy làm 1 vài dự án nho nhỏ cho bản thân bạn, áp dụng những điều hay ho trên vào.

Kiên Đinh

Bần đạo là Kiên Đinh, một Developer. Ta viết blog này với mục đích chia sẻ những kinh nghiệm của bản thân đối với coding chi đạo.