Con đường trở thành Lập trình viên Front-End chuyên nghiệp

Phần front-end của một trang web được hiểu là phần giao diện tương tác với người dùng gồm mọi thứ bạn nhìn thấy khi điều hướng trên Internet, từ các định dạng font chữ, màu sắc bố cục cho tới các menu và các thanh trượt, là một sự kết hợp của HTML, CSS, và JavaScript được điều khiển bởi trình duyệt máy tính của bạn.

Bắt đầu học lập trình Front-End như thế nào?

1. HTML

HTML cung cấp cấu trúc cho các trang của bạn, cũng giống như bộ xương người giữ bạn đứng được.

Để học HTML bạn cần chú ý:

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

Mục tiêu:

Hãy thử ngồi xây dựng một trang html bất kỳ mà bạn muốn. Tuy nó chưa đẹp nhưng quan trọng mà chúng ta hướng đến đó là cấu trúc bố cục. Và hãy cố gắng nhớ được thật nhiều các thẻ của HTML nhé.

2. CSS

Ta vừa học được cách xây dựng bộ khung xương cho trang web, bây giờ phải thêm da thịt, quần áo để cho nó đẹp lên.

CSS – Cascading stylesheets, sử dụng để làm đẹp trang web. Điều đầu tiên mà bạn sẽ phải làm là tìm hiểu về cú pháp CSS và tự thực hành với các thuộc tính CSS phổ biến.

Mục tiêu:

Một khi bạn có một số kiến thức cơ bản, điều tiếp theo mà bạn nên làm là xây dựng phong cách cho các trang HTML mà bạn đã thực hiện trong bước cuối cùng. Ở trên, sau khi tạo được khung cho trang web mà bạn muốn. Bạn hãy dùng css tiếp tục xây dựng để giống với những gì mà bạn đang làm theo.

3. Javascript

Javascript hay còn gọi là ngôn ngữ kịch bản, nó cho phép bạn làm cho các trang HTML của bạn tương tác với thao tác của người dùng hơn. Javascript rất là ảo diệu và gần như mọi website đều sử dụng nó.

Mục tiêu:

• Tìm hiểu cú pháp và cấu trúc cơ bản của ngôn ngữ.
• Tìm hiểu về DOM, cách thao tác DOM bằng JavaScript.
• Tìm hiểu cách gọi HTTP bằng XHR hoặc Ajax. Ajax là những gì cho phép bạn thực hiện một số hành động nhất định mà không cần tải lại trang.
• Sau khi bạn đã làm xong với điều đó thì tìm hiểu thêm theo các keyword như sau: Scopes, Closures, Hoisting và Event bubbling.

Đến đây, cơ bản chúng ta đã cảm thấy thú vị hơn rồi đúng không. Thông thường chỉ cần HTML, CSS và Javascript là đủ để xây dựng một website hoàn chỉnh rồi đấy.

4. jQuery

Thật sự là trước đây, khi mình code mà không có jQuery, mình cảm thấy thật sự thiếu thốn 1 cái gì đó có khả năng hỗ trợ mạnh mẽ cho mình. Nó là một thư viện mạnh mẽ của JavaScript và cho phép bạn thực hiện bất cứ điều gì tương thích với trình duyệt. Nhưng đã qua những ngày này lâu rồi, jQuery không được sử dụng nhiều cho các dự án mới nhưng vẫn có những người sử dụng nó. Bạn không cần phải học nó nhưng nó thực sự dễ dàng và nó sẽ có lợi cho bạn nếu bạn muốn tham khảo.

5. Package Managers

Theo wiki:

Package Manager (PM) hoặc package management system là một tập hợp các phần mềm dùng để quản lý và tự động hóa việc cài đặt, nâng cấp, gỡ bỏ các phần mềm/thư viện (package).

Giả sử bạn đang làm một dự án, cần sử dụng một số thư viện thay vì tự code. Bạn lên mạng tải thư viện đó về, link vào dự án và bắt đầu chạy. Cách làm này có một số vấn đề:

• Khi nhiều người cùng làm chung một dự án, đôi khi mỗi người sử dụng một phiên bản riêng, xung đột lẫn nhau. Code chạy được ở máy này, không chạy được ở máy khác.
• Khi commit code vào source control, ta phải commit cả thư viện vào, rất nhiều và nặng khi commit cũng như tải về.
• Khi deploy, ta phải copy luôn thư viện lên, rất chậm và mất thời gian.

Package Managers thực hiện điều này tránh rắc rối trong luồng công việc của bạn.

Chúng giúp bạn mang các thư viện và plugin bên ngoài vào các dự án của mình, để bạn không phải lo lắng về việc sao chép các thư viện theo cách thủ công hoặc gặp rắc rối khi cập nhật chúng khi chúng phát hành phiên bản mới.

6. Chọn một framework

Những frameworks thường được sử dụng hiện nay là React, Vue và Angular.

Ngày càng có nhiều nhu cầu về React.js. Vue.js thì đã trở thành một framework cực hot trong 2017 và 2018 dự kiến nó sẽ còn mạnh mẽ hơn nữa. Nếu bạn chọn React.js, bạn sẽ phải học Redux, còn với Vue.js bạn sẽ học Vuex. Với Angular bạn sẽ phải làm TypeScript và Rx.js cũng sẽ giúp bạn thoát khỏi các ứng dụng Angular của bạn.

7. Server Side Rendering

Các kỹ năng mà bạn đã có cho đến thời điểm này là đủ để giúp bạn có được vị trí cho bất kỳ vai trò “Kỹ thuật Front-end” nào. Nhưng đừng dừng ở đây vội!

Tìm hiểu về Server Side Rendering trong bất kỳ framework nào bạn đã chọn. Có các tùy chọn khác nhau, tùy thuộc vào framework bạn đang sử dụng.

Ví dụ: nếu bạn quyết định sử dụng React, các tùy chọn đáng chú ý nhất là Next.js và After.js. Đối với Angular, có Universal. Và đối với Vue.js có Nuxt.js.

Kết Luận

Có thể có những thứ vẫn còn thiếu trong lộ trình này nhưng đây là tất cả những gì bạn cần cho bất kỳ vai trò “Front-end Engineering”.

Và hãy nhớ điều quan trọng nhất để trở thành lập trình viên front-end là code nhiều nhất có thể. Mới đầu có thể sẽ gặp nhiều khó khăn, nhưng đừng nản. VTC Academy sẽ là môi trường tuyệt vời nhất, chuyên nghiệp nhất để chỉ cho bạn cách học như thế nào để ra trường có thể làm được việc ngay lập tức.

Chúc các bạn học lập trình web thành công!