NỘI DUNG BÀI VIẾT
Bài viết này là một phần của series “Hướng dẫn lập trình web cho người mới bắt đầu”. Bạn có thể xem Phần 2: Backend | Hướng dẫn lập trình web cho người mới bắt đầu, Phần 3: Nền tảng và công cụ | Hướng dẫn lập trình web cho người mới bắt đầu
Đối với người mới bắt đầu, thật dễ dàng để bắt đầu lập trình web vì có nhiều ngôn ngữ lập trình để tiếp cận, nhiều công cụ mã nguồn mở miễn phí và nhiều framework giúp đơn giản hóa việc lập trình web.
Phần khó khăn khi lập trình là bạn cần kết hợp nhiều thành phần với nhau để ứng dụng của bạn hoạt động. Chọn framework nào để phát triển giao diện người dùng? Lưu trữ dữ liệu của bạn ở đâu? PHP, Python, Ruby hay những thứ khác? Làm thế nào để triển khai ứng dụng của bạn?
Mình hy vọng bài viết này sẽ làm sáng tỏ điều này và giúp bạn tìm ra cách để lập trình web và thậm chí có thể bắt đầu sự nghiệp lập trình từ đây.
Chúng ta sẽ chia hướng dẫn thành nhiều phần và hôm nay chúng ta sẽ bắt đầu với phần đầu tiên, đó là Frontend – có nghĩa là phát triển giao diện người dùng, đồng thời giới thiệu cho bạn những ngôn ngữ và công cụ quan trọng nhất trong lập trình web.
Ngôn ngữ và công cụ phát triển giao diện người dùng
Chúng ta sẽ bắt đầu với một loại sơ đồ mô tả về Frontend, đây là những điều ít nhất bạn nên biết để định hướng trong quá trình học lập trình web bây giờ và sau này.
Các đường màu vàng hiển thị những điều cơ bản bạn cần học, trong khi màu cam đại diện cho các chủ đề nâng cao hơn mà bạn có thể để lại sau này học cũng được.
Phát triển giao diện người dùng hay còn gọi là phát triển giao diện người dùng, đề cập đến việc tạo giao diện người dùng web, các phần của ứng dụng mà người dùng nhìn thấy và tương tác.
3 trụ cột chính trong việc xây dựng giao diện người dùng là HTML để tạo ra khung trang web, CSS để làm đẹp và JavaScript cho logic và tương tác giữa người dùng và ứng dụng.
Nó sẽ cung cấp cho bạn điểm khởi đầu để bắt đầu khám phá hệ sinh thái Frontend. Sau này, khi đã thành thạo thì bạn có thể học thêm 1 Framework JavaScript để lập trình web nhằm tối ưu hoá việc code và tạo ra các ứng dụng mang tính tương tác cao hơn.
Ngôn ngữ
HTML
Ngôn ngữ đánh dấu siêu văn bản (Hyper Text Markup Language – HTML) là một ngôn ngữ đánh dấu cho phép bạn cấu trúc thông tin được hiển thị cho người dùng. Nó bao gồm các phần tử, mỗi phần tử được biểu thị bằng thẻ HTML, chẳng hạn như tiêu đề (header), đoạn văn bản (paragraph) hoặc trường nhập văn bản (input).
Một file HTML cũng có thể liên kết đến các file khác bằng cách sử dụng siêu liên kết. Mỗi thẻ mang một loại nội dung riêng, có hình thức và hành vi nhất định. Bạn cần thời gian để tìm hiểu và áp dụng nó. Sau khi hiểu rõ về HTML, bạn sẽ có thể tạo ra các trang HTML tĩnh đơn giản.
CSS
Cascading Style Sheets (CSS) là một ngôn ngữ tạo kiểu được sử dụng để làm đẹp cho các phần tử HTML. Nó có thể được sử dụng để kiểm soát các khía cạnh như vị trí của một phần tử, kích thước, kiểu văn bản hoặc màu sắc hoặc hầu như bất kỳ khía cạnh trực quan nào khác của trang web.
Các tính năng của CSS cho phép bạn vượt xa các kiểu dáng cơ bản của HTML và kiểm soát các khía cạnh xử lý giao diện phức tạp hơn, chẳng hạn như cách bày trí, hiển thị tốt trên cả Desktop và Mobile,…
Mặc dù CSS là một ngôn ngữ mạnh mẽ trong lập trình web nhưng nó có những hạn chế khi phải sử dụng lại mã, tính dài dòng và cô lập. Do đó, việc bảo trì CSS thực sự rất khó khăn khi ứng dụng web của bạn phát triển.
Để giải quyết những bất cập này, một số giải pháp đã được cộng đồng đưa ra. Các ngôn ngữ và trình biên dịch của CSS ra đời, chúng được gọi là CSS Preprocessors (ngôn ngữ tiền xử lý CSS) như là Sass/SCSS, PostCSS, Less,…
JavaScript
JavaScript (JS) là ngôn ngữ lập trình được sử dụng nhiều nhất để phát triển giao diện người dùng cho ứng dụng web. Nó cho phép bạn thêm hành vi tùy chỉnh vào trang web của mình, chẳng hạn như tương tác với các sự kiện của người dùng, tải dữ liệu từ các Web Service và hiển thị/ẩn các phần tử trên một trang.
Nó cũng cho phép bạn tương tác với trình duyệt thông qua các API khác nhau. Bạn có thể sử dụng nó để thêm các yếu tố tương tác riêng biệt vào trang web của mình hoặc tạo các ứng dụng web phức tạp.
Một thuật ngữ khác mà bạn có thể gặp liên quan đến JavaScript là ECMAScript, viết tắt là ES, thực chất là một đặc tả ngôn ngữ cho JavaScript. Mỗi năm chúng ra 1 phiên bản vì vậy bạn không bao giờ phải lo về việc lập trình web với JavaScript sẽ lỗi thời nhé!
Framework JavaScript
JavaScript là một ngôn ngữ mạnh mẽ, nhưng nếu bạn muốn tạo một ứng dụng phức tạp, việc sử dụng nó mà không có framework sẽ dẫn đến hàng loạt đoạn code phức tạp, khó quản lý, bảo trì. Để đơn giản hơn, có một số framework hỗ trợ các chức năng như tương tác với các phần tử HTML, tải dữ liệu, kiến trúc ứng dụng,… 3 framework JavaScript phổ biến nhất ở thời điểm hiện tại là React, Angular và Vue.
React
React là một thư viện để xây dựng giao diện người dùng do Facebook phát triển. React dựa trên việc tạo ra các thành phần, chẳng hạn như một nút hoặc một menu, có thể hiển thị HTML dựa trên các tham số đầu vào. Các thành phần React được viết bằng một phần mở rộng cho JavaScript gọi là JSX, cho phép bạn kết hợp mã JavaScript và HTML một cách thuận tiện.
Các thành phần có thể được kết hợp với nhau để tạo ra các phần tử giao diện người dùng phức tạp và toàn bộ ứng dụng. React không phải là một framework, nó chỉ cung cấp các lớp giao diện. Tuy nhiên, hệ sinh thái công cụ và thư viện phong phú của nó cho bạn mọi thứ bạn cần để tạo các ứng dụng phức tạp. React rất dễ bắt đầu, nhưng theo thời gian, bạn sẽ phải tìm hiểu các thư viện mới để lấp đầy những khoảng trống còn thiếu.
Angular
Angular là một Framework JavaScript do Google phát triển. Các ứng dụng Angular thường được viết bằng TypeScript. Nó cung cấp hầu hết những thứ bạn cần để xây dựng một ứng dụng web bao gồm công cụ CLI để khởi động, phát triển và xây dựng dự án cũng như các thư viện để quản lý form, tải dữ liệu, route,…
Mặc dù nó cung cấp hầu hết mọi thứ nhưng nó có mức độ phức tạp và trừu tượng cao hơn so với React. Việc học TypeScript sẽ cực kỳ khó khăn cho những ai mới tiếp cận. Vì vậy, nên có người hướng dẫn khi học Angular sẽ giúp bạn tiến đi nhanh hơn.
Khác với React, lúc đầu học Angular sẽ hơi khó nhưng càng về sau, nó sẽ càng dễ nếu bạn hiểu hết các vấn đề mà Angular muốn truyền tải.
Vue
Vue là một Framework JavaScript được thiết kế theo mô-đun do cộng đồng lập trình viên ở Trung Quốc phát triển. Mặc dù ra mắt sau so với đàn anh React và Angular nhưng Vue không hề nép vế, nó tận dụng các ưu, nhược điểm của đàn anh và biến nó thành các điểm tốt.
Đặc biệt, Vue rất dễ học, chỉ cần bạn nắm chắc JavaScript là bạn có thể master nó trong vòng từ 1-3 tháng. Vì vậy, nó nhận được sự yêu mến của rất đông bộ phận lập trình viên trên toàn thế giới. Rất nhiều các thư viện và công cụ ra đời để hỗ trợ việc lập trình web với Vue.
Ngoài ra vẫn còn một số Framework JavaScript khác không được nhắc đến, tuy nhiên chúng đang dần bị thay thế bởi 3 gã khổng lồ này.
TypeScript
TypeScript kế thừa từ JavaScript nên nó có tất cả các tính năng của JavaScript và khắc phục các điểm yếu mà JavaScript đang có như kiểu dữ liệu, bất đồng bộ, class hay arrow function,… Nếu sau khi nắm chắc JavaScript cơ bản và chọn Angular là Framework JavaScript để đi tiếp thì bắt buộc bạn phải học TypeScript.
TypeScript cũng cung cấp khả năng điều hướng và tái cấu trúc mã tốt hơn. Việc sử dụng TypeScript giúp làm việc trên các dự án lớn dễ dàng hơn rất nhiều.
Component Libraries
Thư viện thành phần là tập hợp các thành phần có thể được sử dụng để lắp ráp cho ứng dụng của bạn. Từ đơn giản đến phức tạp của các thành phần đều có trong những thư viện này.
Bạn có thể tuỳ chỉnh nó để phù hợp với thiết kế và thương hiệu của dự án mà bạn đang làm. Hầu hết chúng đều có sẵn dưới dạng CSS và JavaScript thuần, tuy nhiên, chúng cũng được gói vào các Framework phổ biến hiện nay. Một số thư viện có thể kể đến như là Bootstrap, Semantic UI, Material UI, ant-design, Foundation, Pure,…
Công cụ
Hệ sinh thái Frontend được biết đến với kho công cụ hữu ích lớn, mỗi công cụ được thiết kế cho mục đích riêng. Vì có rất nhiều trong số đó nên chúng ta sẽ tập trung vào một số công cụ phổ biến trong lập trình web.
npm
npm thực chất có 2 ý nghĩa:
- Một kho tàng chứa các package chúng ta sử dụng để lập trình web
- Một công cụ CLI cho phép cài đặt, cập nhật và gỡ bỏ các package
Sử dụng npm cho phép bạn cài đặt các thư viện sẽ được dự án của bạn sử dụng và ghi chúng lại trong một tệp JSON. npm CLI cũng cho phép bạn chạy các tập lệnh có thể được sử dụng để thực hiện kiểm tra, biên dịch mã hoặc thực hiện phân tích mã.
Tương tự với npm là Yarn, cung cấp một số cải tiến hiệu suất và hỗ trợ tốt hơn cho việc phát triển thư viện và tương thích với các package npm.
Webpack
Webpack là một trình gói mô-đun phổ biến. Nó cho phép bạn hợp nhất các loại nội dung khác nhau, chẳng hạn như mã JavaScript, CSS, HTML và thậm chí cả hình ảnh thành các gói để trình duyệt có thể tải hiệu quả hơn. Khi sử dụng Webpack, bạn chia mã của mình thành các mô-đun. Mỗi mô-đun có thể import các mô-đun khác.
Sau đó, Webpack phân tích biểu đồ import và gộp các tài nguyên lại với nhau. Ngoài việc đóng gói, Webpack sử dụng trình tải và plugin để chuyển đổi mã được đóng gói, ví dụ: Thực hiện biên dịch, phân tích mã,… Webpack có thể khó cho lúc bắt đầu, nhưng nó là nền tảng của hầu hết các set-up hiện đại.
Rollup.js đôi khi được sử dụng thay thế cho Webpack.
Chrome DevTools
Chrome DevTools là một bộ công cụ phong phú có sẵn trong trình duyệt Chrome. Nó có thể được sử dụng để gỡ lỗi, theo dõi mã nguồn hoặc các phần tử HTML, thay đổi đường truyền mạng và đo lường hiệu suất của các phần khác nhau trong ứng dụng của bạn.
Nó cho phép bạn chỉnh sửa các trang một cách nhanh chóng, điều này có thể hữu ích để nhanh chóng kiểm tra một loạt các thay đổi nhỏ. Nắm chắc các công cụ này sẽ giúp bạn tiết kiệm được vô số giờ gỡ lỗi. Bạn cũng có thể sử dụng nó để xem các trang web khác và xem chúng hoạt động như thế nào. Các công cụ tương tự cũng có sẵn trong các trình duyệt khác.
Kết luận
Mọi thứ mình giới thiệu trên này đủ để giúp bạn bắt đầu sự nghiệp phát triển giao diện người dùng. Đừng lo lắng, đây chỉ là phần nổi của tảng băng chìm. Nếu bạn cảm thấy rằng đây là điều mà bạn muốn tìm hiểu chi tiết hơn thì sẽ có rất nhiều điều thú vị đang chờ đợi bạn.
Trong phần tiếp theo, chúng ta sẽ đi đến tổng quan về phát triển Backend trong lập trình web và xem chúng ta có những gì ở phía máy chủ tại đây.
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
