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