Mời các bạn tiếp tục đọc phần 2, chúng ta sẽ bàn luận về học lập trình frontend của chuỗi bài “Học lập trình Web nên bắt đầu từ đâu?”.

Phần 2: Làm cho kỹ năng frontend của bạn tỏa sáng

Làm cho kỹ năng frontend của bạn tỏa sáng Nordic Coder
Nguồn: Internet

Khi bạn đã hoàn thành khóa học HTML, CSS và JavaScript, bạn có thể bắt đầu học các kỹ năng nâng cao hơn trong lập trình frontend.

Phần này sẽ thông qua các kinh nghiệm thực tiễn và công cụ giúp bạn xây dựng kỹ năng lập trình web phù hợp với thị trường.

Thiết kế responsive là điều bắt buộc trong thế giới đầy những thiết bị di động này

Khi các trang web xuất hiện lần đầu tiên, chỉ có một cách để xem chúng là trên máy tính của bạn.

Điện thoại thông minh và dữ liệu di động chưa thực sự tồn tại. Khi làm một trang web, bạn chỉ phải lo lắng về việc nó trông như thế nào trên máy tính của bạn.

Bây giờ, theo Statcorer.com , nhiều người đang sử dụng điện thoại của họ hơn máy tính để bàn để lướt internet.

Nhiều người đang sử dụng điện thoại của họ hơn máy tính để bàn để lướt internet

Vì vậy, chúng ta cần đảm bảo rằng tất cả các trang web hoạt động và trình bày tốt trên mọi thứ, từ màn hình lớn nhất đến điện thoại nhỏ nhất.

Việc này là được gọi là thiết kế responsive. Nó được gọi như vậy bởi vì thiết kế có thể đáp ứng với bất kỳ thiết bị nào đang xem nó.

Bạn có thể kiểm tra mức độ responsive của một trang web bằng cách thay đổi thủ công độ rộng của cửa sổ trình duyệt và xem thiết kế trông như thế nào ở chiều rộng lớn và nhỏ.

Xây dựng một trang web responsive thực sự bao gồm rất nhiều bước chuẩn bị trong giai đoạn thiết kế để xem xét mọi thứ sẽ trông như thế nào trên tất cả thiết bị.

Và trong giai đoạn phát triển web, nó liên quan đến việc sử dụng các media query để kiểm soát thuộc tính CSS nào đang được sử dụng ở các độ rộng cụ thể.

Framework có thể giúp bạn xây dựng một trang web responsive một cách nhanh chóng

Như bạn có thể tưởng tượng, coding tất cả CSS của một trang web responsive tốn rất nhiều công sức.

Nếu bạn không thể dành nhiều thời gian cho nó, bạn có thể thử sử dụng một framework responsive như Bootstrap hay Zurb Foundation .

Ví dụ về trang bạn có thể tạo với Bootstrap

Framework có thể giúp bạn xây dựng một trang web responsive một cách nhanh chóng

Cái hay của các framework này là chúng được đóng gói sẵn với CSS và JavaScript tùy chỉnh. Chúng đã bao gồm rất nhiều thứ cho bạn bằng các yếu tố tạo kiểu trước như tiêu đề và nút bấm.

Chúng cũng đi kèm với các thành phần JavaScript (về cơ bản là các plugin nhỏ) như cửa sổ bật lên và thanh điều hướng.

Vì bạn đang sử dụng một cái gì đó đã được thử nghiệm, nó sẽ giúp việc xây dựng trang web dễ dàng hơn rất nhiều.

Nhắc nhở duy nhất là bạn không nên quá phụ thuộc vào framework.

Không có gì có thể thay thế cho việc biết cách xây dựng một trang web responsive từ đầu.

Đọc thêm

Sass sẽ giúp bạn tiết kiệm thời gian và đau đầu khi viết CSS

Khi bạn đã hoàn thành học CSS cơ bản, bạn nên bắt đầu học Sass, vì đơn giản nó rất tuyệt vời.

Nó thậm chí nằm trong cái tên! Sass là viết tắt của cụm từ “Syntactically Awesome Style Sheets”.

Và nó được mô tả trên trang web như là một phần mở rộng của CSS.

Nó làm cho việc viết các kiểu CSS dễ dàng hơn, trực quan hơn và nhanh hơn

Đừng hiểu sai ý tôi, CSS rất tuyệt. Nhưng khi bạn bắt đầu, bạn sẽ nhận ra rằng CSS vanilla thông thường có thể trở nên khá tẻ nhạt.

Và, nếu bạn không sắp xếp kỹ càng trong cách bạn viết các style của mình, các style CSS của bạn có thể nhanh chóng bị rối loạn một cách khó chịu.

Những gì Sass làm là cung cấp cho bạn sự kiểm soát tốt hơn

Dưới đây là một vài ví dụ về cách Sass sẽ làm cho cuộc sống của bạn dễ dàng hơn:

  • Mixins: Thay vì sao chép và dán mã CSS cho một số phần tử nhất định một triệu lần, bạn có thể sử dụng mixins. Chúng cho phép bạn viết một tập hợp các kiểu cho một phần tử chỉ một lần và sử dụng lại bao nhiêu lần tùy ý.
  • Nesting: Thay vì viết tất cả các lớp cha mẹ theo một kiểu cụ thể, bạn có thể lồng tất cả các con bên trong các kiểu của cha mẹ. Điều này cũng cắt giảm rất nhiều việc bị trùng lặp.

Đây là một ví dụ về việc sử dụng nesting trong Sass:

6-Nesting trong Sass

Nói tóm lại, sử dụng Sass sẽ giúp bạn tiết kiệm thời gian và giảm thiểu phiền toái. Cũng đáng nỗ lực để học nó!

Đọc thêm

Một lưu ý: vì trình duyệt không thể tự đọc các tệp Sass, bạn phải biên dịch các tệp Sass của mình thành CSS.

Để làm điều này, bạn sẽ phải sử dụng một công cụ xây dựng và chạy nó trên máy tính của bạn.

Điều này đưa chúng ta đến phần tiếp theo.

Tất cả những công cụ xây dựng này là gì?

6-Grunt                          6-Gulp                               6-Webpack

Bạn có thể đã nghe một hoặc một số thuật ngữ sau: npm, Webpack, Grunt, Gulp, Bower, Yarn…, danh sách trở nên khá dài!

Những công cụ này thường được mô tả là build tool, task runner, task manager hoặc “NGAY BÂY GIỜ tôi phải cài đặt gì?!”

Một số công cụ thực hiện grunt work cho bạn

Các công cụ như GruntGulp, và Webpack thường được sử dụng để thực hiện một số tác vụ sau:

  • Xử lý tệp Sass thành CSS
  • Ghép nối (kết hợp) nhiều tệp CSS hoặc nhiều tệp JavaScript thành một tệp CSS hoặc JavaScript lớn.
  • Giảm thiểu (nén) các tệp CSS, JavaScript và thậm chí cả hình ảnh
  • Tự động làm mới trình duyệt của bạn với mã CSS hoặc JavaScript vừa được cập nhật

Chắc chắn, nhiều trong số những việc này bạn có thể tự làm bằng tay.

Nhưng phải làm đi làm lại nhiều lần mỗi khi bạn thực hiện một thay đổi CSS hoặc JavaScript nhỏ sẽ khiến bạn mệt mỏi.

Bạn nên sử dụng công cụ xây dựng nào?

Hiện tại, Webpack đang chiếm lĩnh thị trường này, nhưng Grunt và Gulp vẫn đang được sử dụng.

Tôi chắc chắn sẽ học Webpack, nhưng cũng học cả Grunt hoặc Gulp (Gulp nhanh hơn và có vẻ dễ hơn để cài đặt và chạy).

Các công cụ khác cài đặt plugin cho bạn

6-npm                          6-bower                               6-yarn

Ngoài ra, để hoàn thành tất cả các tác vụ đó, bạn thường cần tải xuống và cài đặt các plugin hoặc package.

Đây là lúc mà một công cụ như npm (Node Package Manager), Bower, hay Yarn trở nên hữu ích. Đây là những công cụ cho phép bạn nhanh chóng cài đặt các package vào máy tính của mình bằng cách nhập lệnh.

Về cơ bản, chúng là những công cụ giúp bạn có thêm nhiều công cụ khác!

Vì npm là trình quản lý package thông dụng nhất hiện giờ, bạn chắc chắn nên học cách sử dụng nó.

Bower là một trong những công cụ quản lý package  đầu tiên, nhưng nó chính thức đã lỗi thời, những người tạo ra Bower.io hiện khuyên bạn nên sử dụng Yarn.

Yarn là một công cụ rất giống npm được tạo bởi Google, Facebook và các công ty khác hứa hẹn sẽ khắc phục một số vấn đề mà npm có.

Mặc dù Yarn thuộc nhóm thiểu số, tôi vẫn khuyên bạn nên dung thử, vì dường như nó đang trở nên phổ biến hơn.

Đọc thêm

Mọi người đều thích framework JavaScript

Có lẽ bạn đã nhận thấy rất nhiều framework JavaScript, thư viện, bộ công cụ, v.v. đang có mặt khắp nơi, như bạn biết, những cái tên đó đều kết thúc bằng .JS?

Trước tiên, hãy lùi lại một bước và định nghĩa framework JavaScript là gì.

Tùy thuộc vào người bạn đang nói chuyện, framework, thư viện và/hoặc bộ công cụ có thể hoặc không thể thay thế cho nhau. (Nó vẫn đang được tranh luận.)

Nhưng tất cả chúng đều là những công cụ cần thiết giúp bạn thực hiện một số công việc.

Framework là một cấu trúc được xây dựng sẵn mà bạn sẽ dựa vào.

Nói chung, một framework là một hệ thống các bộ phận làm việc được tạo ra bởi người khác.

Để sử dụng framework, bạn cài đặt nó vào các tệp trang web của bạn. Sau đó, bạn làm việc với cấu trúc hiện có, thêm vào nó để thực hiện những gì bạn muốn làm.

Sử dụng framework cũng giống như mua một ngôi nhà chỉ có khung đi kèm với tất cả các thành phần kết cấu (móng, khung, mái), nhưng không hoàn chỉnh.

Bạn vẫn cần phải đi vào và gắn nước và điện, cũng như lắp đặt tủ, sơn tường và trang trí.

Một số ví dụ về frontend framework của JavaScript là ReactVue, và Angular.

Thư viện là một tập hợp các công cụ được tạo sẵn mà bạn thêm vào cấu trúc của bạn.

Để so sánh, một thư viện là một tập hợp các thành phần riêng lẻ mà bạn có thể lấy và cắm vào hệ thống của mình.

Đây là sự khác biệt chính giữa framework và thư viện:

Trong khi framework là các cấu trúc được tạo sẵn, các thư viện không phải là một cấu trúc. Chúng cung cấp chức năng bổ sung cho các hệ thống hiện có.

Để tiếp tục công việc xây dựng nhà, bạn có thể nghĩ về các thư viện như các thiết bị mà bạn chọn để thêm vào ngôi nhà của mình.

Các máy móc như lò nướng, vòi hoa sen và máy điều hòa đều thực hiện những chức năng riêng biệt, nhưng bạn phải cài đặt chúng vào một ngôi nhà hiện có để có thể dùng được.

Một ví dụ về thư viện, sử dụng phân loại ở trên, là jQuery.

jQuery là một thư viện JavaScript không có bất kỳ loại cấu trúc nào, nhưng có hơn 300 hàm khác nhau mà bạn có thể sử dụng.

Một lần nữa, những định nghĩa này đều không phải được đồng ý bởi tất cả mọi người 

React và jQuery tự phân loại chúng là các thư viện và Angular và Vue tự gọi mình là các framework.

Tuy nhiên, theo hiểu biết cá nhân, nó giúp phân loại các công cụ thành hai nhóm chung về framework (hệ thống) và thư viện (công cụ).

Điều này đưa chúng ta đến phần tiếp theo…

Ba ông lớn trong các framework JavaScript: Angular, React và Vue

6-angular                          6-react                          6-VueJs

Vào đầu những năm 2010, đã có một sự bùng nổ của framework kết thúc bằng “.js”, gần như là một framework mới mỗi tháng.

Tuy nhiên, đến năm 2020, chỉ còn lại với ba framework lớn: Angular, React và Vue.

Framework JavaScript có thể đã bắt đầu như một xu hướng, nhưng chắc chắn rằng chúng vẫn tiếp tục ở đây.

Angular, React và Vue đều đang phát triển và bản thân JavaScript hiện đang cực kỳ phổ biến. Đây là công nghệ được sử dụng nhiều nhất trong năm năm dựa theo cuộc khảo sát hàng năm của Stack Overflow.

Ngoài ra, Stack Overflow cũng công bố xu hướng của các công nghệ dựa trên số lượng câu hỏi được đặt ra mỗi tháng.

Bạn có thể thấy rằng Angular có số lượng lớn nhất, và cả Angular và React đều có sự tăng trưởng khá mạnh trong năm qua.

6-Stack Overflow - JavaScript Framework Trends

Nguồn: Stack Overflow – JavaScript Framework Trends

Khảo sát về JavaScript cho thấy React dẫn đầu về số lượng lập trình viên đã sử dụng và yêu thích nó, trong khi Angular dường như không thú vị bằng hoặc không muốn sử dụng lại nhiều.

Vue có lượng sử dụng thực tế thấp hơn, nhưng đang dẫn đầu về việc trở thành một công nghệ mà các lập trình viên muốn thử trong tương lai.

Vì vậy, việc Vue có thể trở thành một framework lớn trong vài năm tới là hoàn toàn khả thi trong thế giới lập trình.

TL, DR: Tôi nên học framework nào ngay bây giờ?

Nó phụ thuộc vào nếu bạn đang tìm kiếm một công việc phát triển web toàn thời gian, bạn nên xem qua danh sách công việc tại địa phương để xem framework nào có vẻ được nhắc đến nhiều nhất.

Nếu bạn chỉ học ngay bây giờ mà không có mục tiêu cụ thể, Vue là framework tốt để bắt đầu cho người mới học. Nó nhẹ nhàng và có nhiều tài liệu khá tốt.

Tuy nhiên, cá nhân tôi sẽ không chỉ học Vue. Sẽ tốt hơn nếu bạn có thể thêm cả React hoặc Angular vào, tùy thuộc vào ý thích của bạn.

Đọc thêm

Xem tiếp: Phần 1 | Phần 3

Bạn muốn trở thành lập trình viên chuyên nghiệp trong thời gian ngắn nhất? Bạn muốn có việc làm IT mức lương khủng sau khoá học? Hãy đăng ký các khoá học lập trình online và offline tại Nordic Coder – Trung tâm dạy lập trình uy tín và chuyên nghiệp. Ngoài ra, Nordic Coder còn là cầu nối nghề nghiệp IT giữa học viên và với các công ty công nghệ hàng đầu Việt Nam sau các khoá học lập trình.