Phần 2: Mài dũa các kĩ năng front-end
Sau khi đã nắm được các kiến thức cơ bản về HTML, CSS và Javascript, bạn có thể đi sâu vào các kĩ năng nâng cao hơn của front-end. Phần này sẽ điểm qua các công cụ hữu ích và kĩ năng giúp bạn phát triển được khả năng của mình.

Responsive design là kiến thức bắt buộc phải có trong thời đại smartphone
Khi website mới xuất hiện, bạn chỉ có thể xem chúng trên duy nhất một thiết bị là máy tính.

Điện thoại thông minh và dữ liệu di động vẫn chưa xuất hiện. Khi làm một website, bạn chỉ phải suy nghĩ về cách chúng hiển thị trên máy tính như thế nào.

Nhưng hiện nay theo thống kê của Statcounter.com, số lượng người sử dụng điện thoại của họ để duyệt web đã nhiều hơn số lượng sử dụng máy tính.

Vậy nên chúng ta cần đảm bảo websites hoạt động và nhìn ổn định trên tất cả mọi thiết bị từ các màn hình lớn nhất cho tới những chiếc điện thoại nhỏ nhất.

Kĩ năng này gọi là responsive design. Nó có tên như vậy vì các thiết kế có thể "tùy biến" trên mọi loại thiết bị hiển thị.

Bạn có thể kiểm tra một website có responsive hay không bằng cách thay đổi độ rộng của cửa sổ trình duyệt để xem thiết kế đó hiển thị như thế nào.

Xây dựng một website có thể responsive cần chuẩn bị từ bước lên kế hoạch trong khâu thiết kế. Bạn phải cân nhắc mọi thứ hiển thị như thế nào trên tất cả thiết bị. Tới khâu lập trình, bạn phải sử dụng media queries (chính là @media) để điều khiển các thuộc tính CSS được sử dụng như thế nào tùy thuộc vào độ rộng cụ thể.

Frameworks có thể giúp bạn xây dựng các website responsive nhanh hơn

Bạn có thể tưởng tượng việc viết code CSS cho một trang web responsive mệt mỏi thế nào.

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

Sức mạnh của các framework này là nó đã hỗ trợ sẵn các code CSS và Javascript tùy biến. Các thành phần như headlines và buttons đã được viết những đoạn code tùy biến phù hợp. Chúng cũng đi kèm các thành phần Javascript khác như cửa sổ popup dạng modal và thanh điều hướng.

Sử dụng các công nghệ đã được đảm bảo sẽ giúp bạn xây dựng website dễ dàng hơn. Điều duy nhất bạn cần lưu ý là không nên phụ thuộc quá nhiều vào các frameworks.

Tài liệu tham khảo

Sass sẽ giúp bạn tiết kiệm thời gian và sức lực khi viết CSS.

Một khi đã quen với CSS, tôi khuyên bạn nên học Sass vì nó rất tuyệt. Sass là viết tắt của "Syntactically Awesome Style Sheets" và được miêu tả trên trang chủ của nó là "phần mở rộng của CSS". Nó giúp việc viết CSS dễ dàng hơn, linh động hơn và nhanh hơn.

Đừng hiểu nhầm tôi, CSS vẫn rất tốt. Nhưng khi bắt đầu làm, bạn sẽ nhận ra việc viết CSS thuần mệt mỏi thế nào. Và nếu bạn không siêu cẩn thận trong cách tổ chức các dòng code CSS, đoạn code của bạn sẽ trở nên rối như mớ bòng bong.

Sass giúp bạn kiểm soát code tốt hơn, nhiều sức mạnh hơn.

Dưới đây là vài ví dụ chứng minh Sass sẽ giúp cuộc sống bạn dễ dàng hơn nhiều

  • Mixins: Thay vì việc phải sao chép và dán các đoạn code CSS giống nhau hàng nghìn lần, bạn có thể sử dụng mixins. Nó cho phép bạn tái sử dụng các style css.
  • Nesting: Giúp bạn giảm số lượng code trùng lặp bằng cách hỗ trợ kế thừa.

Ngắn gọn, sử dụng Sass sẽ giúp bạn tiết kiệm thời gian và giảm sự khó chịu. Hãy học cách sử dụng nó.

Tài liệu tham khảo

Lưu ý: Vì các trình duyệt web không thể đọc được file Sass, bạn phải compile lại các file này về CSS. Để làm được điều đó, bạn phải sử dụng một thứ gọi là build tool và chạy nó trên máy tính của bạn. Vậy nê hãy tiếp tục với phần tiếp theo có chủ đề là build tool!.

Build tools là gì?

Chắc hẳn bạn đã nghe tới một vài cụm từ sau: npm, Webpack, Grunt, Gulp, Bower, Yarn,... vân vân và mây mây.

Các công cụ này thường được nhắc tới với các tên như build tools, task runners, task managers, nói nôm na là "Bây giờ tôi phải cài thứ gì đây?!"

Vài công cụ giúp bạn làm các công việc mệt mỏi.

Các build tools như GruntGulp hay Webpack thường được dùng để thực hiện các công việc sau:

  • Xử lý các file Sass thành CSS
  • Gộp nhiều file CSS hoặc Javascript thành một file CSS/Javascript lớn.
  • Nén các files CSS, Javascript, thậm chí là ảnh.
  • Tự động tải lại trình duyệt sau khi thay đổi CSS hay Javascript.

Bạn hoàn toàn có thể tự làm các công việc trên. Nhưng việc phải làm đi làm lại những thứ đó khi bạn chỉ tạo ra một thay đổi nhỏ trong file CSS hay Javascript có thể làm bạn phát điên.

Tôi nên dùng build tool nào?

Thời điểm hiện tại Webpack áp đảo toàn bộ các build tools khác, nhưng Grunt và Gulp vẫn được sử dụng. Tôi chắc chắn sẽ học Webpack, nhưng học thêm Grunt hay Gulp cũng là lựa chọn không tồi (Gulp nhanh hơn và việc chạy nó cũng dễ dàng hơn)

Một số công cụ để cài thêm các gói packages cho bạn.

Để thực hiện các tác vụ trên, bạn thường sẽ phải tải về và cài đặt các gói hỗ trợ hay packages.

Đó là lí do bạn phải sử dụng các tool như npm (Node Package Manager), Bower, hay Yarn. Đây là những công cụ cho phép bạn cài đặt các packages trên máy tính chỉ bằng cách gõ các dòng lệnh trong cửa sổ command line. Hiểu đơn giản thì chúng là những tools giúp bạn tải về tools khác.

Bạn nên học cách sử dụng npm vì nó là trình quản lý package chiếm hữu thị phần hiện giờ. Bowercũng là một trong những công cụ quản lý packages đầu tiên, nhưng nó đã chính thức bị thay thế - nhà sáng lập Bower.io khuyến khích mọi người sử dụng Yarn. Yarn là công cụ có nhiều điểm tương đồng với npm được tạo bởi Google, Faceboook, và một số thành viên khác hứa hẹn sẽ sửa chữa các vấn đề npm gặp phải. Mặc dù số lượng người sử dụng Yarn vẫn còn ít nhưng tôi khuyên bạn nên thử vì nó đang dần phổ biến.

Tài liệu tham khảo

Mọi người đều yêu thích các frameworks của Javascript.

Bạn có thể đã để ý tới một vài frameworks của Javascript, các thư viện, toolkit,... tất cả đều có cái tên kết thúc bằng ".JS". Trước tiên hãy cùng xem lại định nghĩa một framework của Javascript là gì cái đã.

Tùy thuộc vào người bạn nói chuyện cùng, các khái niệm framework, thư việc, bộ công cụ có thể là như nhau (điều này vẫn đang được tranh cãi). Nhưng tựu chung chúng đều là những công cụ cần thiết để hỗ trợ bạn trong công việc xây dựng một trang web.

Framework là một cấu trúc được xây sẵn để bạn có thể phát triển ứng dụng của bạn.

Nói đơn giản framework là một hệ thống được tạo bởi người khác, bạn chỉ việc sử dụng chúng. Để sử dụng framework, bạn phải cài đặt nó trên website của bạn. Sau đó dựa trên các cấu trúc có sẵn của chúng, bạn thêm thắt những thứ do bạn tự xây nên để dựng lên ứng dụng/website của mình. Sử dụng framework giống như việc mua một căn nhà có đầy đủ cấu trúc từ nền, khung, mái nhà vậy, nhưng căn nhà đó vẫn chưa hoàn thiện. Bạn cần phải thêm điện, nước, xây cabin, sơn tường và trang trí.

Một vài framework front-end điển hình của Javascript là ReactVue và Angular.

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

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

Đây là sự khác biệt cơ bản của framework và thư viện: framework là một cấu trúc được dựng sẵn, còn thư viện bản thân nó không phải một cấu trúc. Thư viện chỉ cung cấp thêm các chức năng bạn có thể thêm vào hệ thống của mình.

Để tiếp tục xây một căn nhà, bạn có thể coi thư viện như các dụng cụ bạn mua để đặt vào nhà như bếp, vòi tắm, điều hòa,... Bạn cần phải cài đặt chúng trong căn nhà để hoạt động.

Một ví dụ của thư viện là jQuery. jQuery là một thư viện Javascript mà bản thân nó không có cấu trúc, nhưng lại chứa 300 hàm khác nhau bạn có thể dùng.

Nhắc lại lần nữa, những định nghĩa về thư viện và framework trên không được tất cả mọi người nhất trí.

bản thân React và jQuery là các thư viện, còn Angular và Vue là frameworks.

Ba ông lớn trong Javascript framework: Angular, React, Vue

Năm 2010 có sự bùng nổ của các framework kết thúc bằng ".js", gần như mỗi tháng đều có một framework mới.

Tuy nhiên khi tiến gần tới 2020, chúng ta chỉ còn lại ba kẻ chiến thắng là Angular, React và Vue

Các framework Javascript bắt đầu như một xu hướng sớm nổi chóng tàn, nhưng tới nay nó vẫn tồn tại vững chắc.

Angular, React, Vue đều đang phát triển, và bản thân Javascript đang ngày càng phổ biến. Javascript hiện là công nghệ được sử dụng nhiều nhất trong 5 năm gần đây theo thống kê hàng năm của Stack Overflow. Stack Overflow đã công bố những xu hướng công nghệ dựa vào số lượng câu hỏi hàng tháng. Có thể thấy Angular chiếm tỉ lệ nhiều nhất. Cả Angular và React đều phát triển đều đặn mỗi năm.

Bảng khảo sát các giai đoạn của Javascript cho thấy React có số lượng lập trình viên sử dụng và yêu quý nhiều nhất, theo sau là Angular. Angular có vẻ không còn thú vị và được nhiều người muốn tái sử dụng nữa. Vue có số lượng người sử dụng ít hơn, nhưng lại dẫn đầu trong công nghệ các lập trình viên muốn thử trong tương lai nhiều nhất. Có thể đoán trước được Vue sẽ là một tay chơi lớn trong vài năm tới. Tuy nhiên tôi nghĩ rằng bộ ba này vẫn sẽ tồn tại vững chắc trong tương lai, ít nhất là trong vài năm tới.

TL,DR: framework nào tôi nên sử dụng?

Tùy thuộc vào bạn. Nếu bạn đang tìm kiếm một công việc lập trình web toàn thời gian, tôi khuyên bạn nên xem danh sách các công việc tại địa phương để tìm hiểu framework nào được nhắc tới nhiều nhất. Nếu bạn chỉ đang bắt đầu học mà chưa có mục tiêu cụ thể, Vue là một khởi đầu tốt. Nó rất nhẹ và có các ghi chép hướng dẫn khá tốt. Tuy nhiên cá nhân tôi sẽ không chỉ học mỗi Vue. Bạn nên học thêm React hoặc Angular, phụ thuộc vào sở thích cá nhân của bạn.

Tài liệu tham khảo

Quay trở lại với back-end nào

Ngôn ngữ nào tôi nên học đầu tiên?

Có hàng ngàn ngôn ngữ back-end. Một vài ngôn ngữ đã tồn tại lâu đời, vài ngôn ngữ khác mới chỉ ra đời gần đây. Điều này khiến việc lựa chọn ngôn ngữ để bắt đầu khá khó khăn. Tôi sẽ đề xuất một vài nguyên tắc có thể giúp bạn đưa ra lựa chọn tốt hơn:

  • Chọn ngôn ngữ dễ học: nó phải là ngôn ngữ dễ học, có các ghi chép hướng dẫn cẩn thận, có hệ thống hỗ trợ online
  • Chọn ngôn ngữ liên quan tới mục tiêu nghề nghiệp của bạn
  • Chọn một ngôn ngữ thú vị. Học lập trình web rất khó khăn, sẽ không có nghĩa lý gì để ép buộc bản thân bạn phải học một ngôn ngữ bạn không thích.

Điều quan trọng ban cần phải nhớ đó là bạn không cần phải học hết TẤT CẢ các ngôn ngữ.

Nếu bạn là người mới bắt đầu tôi khuyên bạn nên tập trung vào một ngôn ngữ trước đã. Tất cả ngôn ngữ lập trình đều có vài điểm chung.

Ví dụ bạn đều có thể viết các vòng lặp "for" trong Javascript, PHP, C# và Python. Một khi bạn đã làm quen với các nguyên tắc cơ bản của lập trình, việc chuyển đổi qua lại giữa các ngôn ngữ sẽ trở nên dễ dàng hơn. Tôi hi vọng sau khi biết điều này sẽ giúp bạn thấy thoải mái hơn trong việc chọn lựa ngôn ngữ khi học.

Cùng xem qua một vài ngôn ngữ back-end phổ biến nào

Java

Java là một ngôn ngữ ổn định được sử dụng rộng rãi và đã tồn tại khá lâu đời. Nó nằm trong top bảng xếp hạng TIOBE từ năm 2001 (TIOBE là bảng xếp hạng những ngôn ngữ lập trình dựa trên số lượng tìm kiếm)

Ngoài ra Java cũng xếp vị trí thứ ba trong bảng xếp hạng những ngôn ngữ được sử dụng nhiều nhất trên Stack Overflow và có số lượng câu hỏi nhiều thứ hai trên trang web này

Rất nhiều các công ty công nghệ lớn sử dụng Java cho website của họ: Google, Youtube, Facebook, Amazon, Twitter, và nhiều trang web khác. Lý do chính là Java rất nhanh và có thể xử lý tốt khi mở rộng quy mô trang web. Nó cũng là một ngôn ngữ dễ bảo trì. Twitter ban đầu được viết bằng Ruby on Rails nhưng tới năm 2015 họ đã chuyển sang Scala để có thể mở rộng quy mô (Scala là ngôn ngữ chạy trên Java Virtual Machine)

C# (C Sharp)

C# tạo ra bởi Microsoft và được coi như đối thủ của Java. Có thể thấy thời đại hoàng kim của C# là năm 2009 trên bảng xếp hạng xu hướng của Stack Overflow nhưng tới nay nó lại đang giảm dần.

Nhưng tôi không cho rằng C# sẽ biến mất. Nó là ngôn ngữ hướng đối tượng mạnh mẽ, có số lượng tags nhiều thứ ba trên bảng xếp hạng các tags của Stack Overflow. Nó cũng nằm thứ ba trong bảng xếp hạng các ngôn ngữ cần nhiều nguồn nhân lực trong tháng 12 năm 2017.

C# được sử dụng rộng rãi trong các ứng dụng như ứng dụng trên Windows hay lập trình Android. Nó cũng được sử dụng nhiều trong lập trình game bằng Unity. Nếu bạn hứng thú với lập trình Android hay game, C# là một lựa chọn không tồi.

Node.js Javascript đang là ngôn ngữ được sử dụng nhiều nhất theo báo cáo của Stack Overflow trong 5 năm qua. Một phần nguyên do của điều này cũng từ NodeJS, một công nghệ chiếm lĩnh top đầu trong danh sách các framework, thư viện được dùng nhiều nhất trong năm 2017.

Bản thân NodeJS được mô tả là "Javascript runtime", đơn giản nó là Javascript chạy phía back end.

Ban đầu nó được sử dụng như một giải pháp hiệu quả hơn server Apache. Kể từ khi được ra đời năm 2009, Node.js đang ngày càng được sử dụng nhiều do tốc độ và sự gọn nhẹ của nó.

Các lập trình viên node thường sử dụng framework Express để xây dựng ứng dụng web. Express.js là một framework gọn nhẹ dành cho Node.js

Sử dụng Node và Express ở backend, và Angular hay React phía front-end, bạn có thể tự gọi bản thân là lập trình viên Javascript full stack được rồi đấy! Sự phối hợp các công nghệ này hiện đang rất phổ biến, đặc biệt là ở các startup.

Python

Python lần đầu xuất hiện vào năm 1991 và thường là ngôn ngữ đầu tiên mà nhiều sinh viên lần đầu tiếp xúc với lập trình học. Do sự dễ đọc và sử dụng các từ khóa bằng tiếng Anh, Python được coi là một ngôn ngữ dễ học. Dưới đây là một vài framework Python bạn có thể sử dụng

  • Django với nhiều tính năng có sẵn
  • Flask gọn nhẹ và linh động

Sự phổ biến của Python đang tăng dần những năm trở lại đây. Tính tới thời điểm bài viết này, nó nằm ở vị trí thứ 4 trong bảng xếp hạng TIOBE. Tới 2017 nó đã nằm ở vị trí thứ 2 trong bảng xếp hạng các ngôn ngữ có số lượng pull request gửi lên GitHub nhiều nhất, dựa vào thống kê năm 2017 của họ.

Tháng 9 vừa qua Stack Overflow thống kê rằng data science, machine learning và các nghiên cứu học thuật là lý do chính cho sự phát triển của Python. Kể cả khi bạn không phải là data scientist, kĩ năng làm việc và thay đổi các dữ liệu cũng có thể trở nên rất hữu ích. Alexus Strong của Code Academy viết:

"Python có sức hấp dẫn với những người ngoại đạo vì nó giúp việc phân tích dữ liệu trở nên dễ dàng"

Nếu bạn tò mò về data sciene hay machine learning, Python sẽ là lựa chọn tốt cho bạn vì đây là các lĩnh vực đang ngày càng phát triển.

Ruby

Ra đời vào năm 1995, Ruby bắt đầu thu hút sự chú ý vào đầu những năm 2000 khi startup Basecamp tạo ra framework Ruby on Rails. Cùng với cú pháp thân thiện và dễ đọc của Ruby, Rails khiến việc xây dựng các ứng dụng web trở nên nhanh chóng và dễ dàng. Ruby on Rails trở nên phổ biến và là sự lựa chọn hàng đầu cho rất nhiều startup như Codepen.io, GitHub, và Shopify.

Tuy nhiên Ruby lại không được sử dụng nhiều như các ngôn ngữ kể trên. Năm ngoái nó nằm ở vị trí thứ 10 trên bảng xếp hạng của Stack Overflow lẫn TIOBE. Lí do là Ruby on Rails không hoạt động tốt với những trang web cần sức tải lớn, điều này dẫn tới việc nhiều startup chuyển sang các ngôn ngữ khác khi họ bắt đầu lớn mạnh (Twitter đã chuyển sang Java là một ví dụ điển hình)

Tuy Ruby không nằm top đầu trong những bảng xếp hạng nhưng nó là lựa chọn tốt để bạn bắt đầu học một ngôn ngữ lập trình. Nếu bạn hứng thú với thế giới startup hay địa phương của bạn có nhiều công việc Ruby (hay là bạn muốn làm việc ở Framgia), hãy cân nhắc học Ruby và Ruby on Rails

PHP

PHP là ngôn ngữ nhiều người rất thích chì chiết.

Trái ngược với số lượng câu hỏi nhiều kinh khủng khiếp "PHP chết chưa" trên Quora thì đến nay đây vẫn là ngôn ngữ được sử dụng rộng rãi phía backend. Khảo sát của W3Techs.com cho thấy 83% websites sử dụng PHP (ngôn ngữ theo sau là ASP.net với 14%)