Search…

Phong Cách Làm Việc Với Front-end Thời Hiện Đại

10/08/20204 min read
Phát triển web Front-end cần biết những gì? Các công cụ nào cần cập nhật để trở thành front-end developer?

Kiến thức cơ bản về HTML

HTML xây dựng cấu trúc cho website, giống như khung xương của website. Nên tập trung vào hai việc sau:

  • Tìm hiểu những điều cơ bản và cách viết HTML.
  • Hiểu cách chia trang thành các phần và cấu trúc DOM đúng cách.

Tìm hiểu CSS

Tiếp sau bộ khung cho trang web, phải thêm một chút style để làm đẹp và tạo phong cách cho website. CSS - Cascading stylesheet dùng để tút lại phong cách cho các trang HTML thô sơ.

  • Điều đầu tiên cần làm là tìm hiểu cú pháp và làm quen với các thuộc tính CSS phổ biến.
  • Tìm hiểu về mô hình box và dựng bố cục bằng Grid và Flexbox.
  • Tìm hiểu responsive cho trang web với media query.

Nghiên cứu JavaScript

JavaScript làm cho các trang HTML có tính tương tác. Ví dụ như các thanh trượt, cửa sổ popup và notification và Ajax- kỹ thuật cho phép cập nhật lại các phần tử của web mà không cần phải tải lại web, tất cả đều được thực hiện bằng JavaScript. Trong bước này, tìm hiểu những điều cơ bản về JavaScript.

  • Tìm hiểu cú pháp và các cấu trúc cơ bản của ngôn ngữ.
  • Tìm hiểu cách thao tác DOM với JavaScript, ví dụ: cách xóa một số phần tử khỏi trang, cách thêm một số phần tử, thêm và xóa các lớp, áp dụng các kiểu CSS, ... bằng JavaScript.
  • Tìm hiểu các chủ đề như scopes, closures, hoisting và event bubbling, ...
  • Tìm hiểu cách gọi HTTP bằng XHR hoặc Ajax.

Có nên học jQuery?

jQuery là một thư viện mạnh mẽ cung cấp wrapper cho JavaScript và giúp thực hiện nhiều thao tác với DOM theo cách tương thích với trình duyệt. Nhưng giờ thì không được sử dụng nhiều nhưng vẫn còn người sử dụng. Không nhất thiết phải học jQuery nhưng nó khá dễ và sẽ có ích cho sau này. 

Package manager

Trước đây, nếu cần sử dụng một số thư viện bên ngoài thì phải tải xuống các file JavaScript và CSS thủ công và đưa chúng vào project, khi các thư viện hoặc plugin đó phát hành các phiên bản mới, phải tải xuống các tệp mới hơn và đưa chúng vào project một lần nữa.

Package manager giải quyết những phiền phức này và tiết kiệm thời gian khi làm việc. Chúng tự động tải các thư viện và plugin phiên bản ổn định mới nhất và import vào project - giải quyết khó khăn khi phải sao chép thư viện thủ công hoặc khi cập nhật nếu có phiên bản mới.

CSS preprocessor

CSS preprocessor bổ sung CSS với các chức năng không có khả năng mặc định. Có nhiều lựa chọn khác nhau như Sass, Less, Stylus, v.v ... Chúng giúp tiết kiệm thời gian và tăng năng suất làm việc, giúp code nhìn tinh gọn và dễ hiểu hơn.

Tổ chức CSS

Khi ứng dụng phát triển, CSS sẽ trở nên lộn xộn và khó để bảo trì. Có nhiều cách để cấu trúc CSS tốt hơn giúp mở rộng sau này, ví dụ như OOCSS, SMACSS, SUITCSS và BEM.

Các công cụ hỗ trợ

Các công cụ giúp xây dựng / đóng gói và phát triển các ứng dụng JavaScript như bao gồm linters, task runners và bundlers. 

Đối với task runners, có nhiều lựa chọn khác nhau như npm, gulp, grunt, ... để tự động hóa các tác vụ. 

Đối với linters, có thể kể đến như ESLint, JSLint, JSHint và JSCS.

Đối với các module bundlers, một số sự lựa chọn bao gồm Parcel, Webpack, Rollup, Browserify, v.v ...

Chọn một framework

Các framework được sử dụng nhiều là React, Vue và Angular.

Khi mới bắt đầu, Angular sẽ dễ dàng một chút vì hỗ trợ hầu hết mọi thứ, ví dụ: router hỗ trợ lazy loading, client HTTP có hỗ trợ interceptor, dependency injection, đóng gói CSS , ... mà không phải lo về việc chọn thư viện bên ngoài.

Khi đã lựa framework, có một số chắc chắn phải học nếu đã theo framework đó. Ví dụ như React; phải học Redux hoặc Mobx để quản lý trạng thái, tùy thuộc vào kích thước ứng dụng. Mobx phù hợp cho các ứng dụng vừa và nhỏ, Redux phù hợp hơn cho các ứng dụng quy mô lớn hơn.

Nếu chọn Angular, sẽ phải học TypeScript và Rx.js cũng sẽ có lợi cho các ứng dụng Angular của bạn, Rx.js là một thư viện tốt và phù hợp cho lập trình hướng chức năng.

Và nếu chọn Vue.js, phải học Vuex tương tự như Redux.

Kiểm thử ứng dụng

Có thể kể đến như Jest, Mocha, Karma và Enzyme. Sẽ tốt hơn nếu tìm hiểu từng loại khác nhau, xem xét tất cả các tùy chọn có sẵn và sử dụng các tùy chọn phù hợp nhất cho nhu cầu.

SSR (Server-side rendering)

Tìm hiểu về SSR với bất kỳ framework chọn. Có nhiều lựa chọn tùy thuộc vào framework đang sử dụng. React có Next.js và After.js. Angular có Universal. Vue.js thì có Nuxt.js.

@Medium

 

IO Stream

IO Stream Co., Ltd

30 Trinh Dinh Thao, Hoa Thanh ward, Tan Phu district, Ho Chi Minh city, Vietnam
+84 28 22 00 11 12
developer@iostream.co

383/1 Quang Trung, ward 10, Go Vap district, Ho Chi Minh city
Business license number: 0311563559 issued by the Department of Planning and Investment of Ho Chi Minh City on February 23, 2012

©IO Stream, 2013 - 2024