Đây là chuỗi bài viết ghi lại nhật ký tự học lập trình web của bản thân và dự kiến sẽ sử dụng 3 công nghệ chính là Laravel, Vue và Tailwind CSS. Ý định là chuỗi bài viết này sẽ giống như nhật ký nên có thể trong quá trình thực hiện sẽ có những lúc vướng mắc, đi đường vòng thậm chí là sai hướng nhưng nó sẽ phản ánh đúng thực tế về việc tự học lập trình nói riêng và tự học nói chung.
Lưu ý rằng mình cũng tự học nên không phải chuyên gia hay có kinh nghiệm nhiều trong lĩnh vực này, nên chắc chắn trong bài viết sẽ có nhiều đoạn cần các chuyên gia, các bạn đọc đóng góp ý kiến để mình hoàn thiện bài viết, cũng như bản thân tốt hơn.
Tóm Tắt
I. Tổng quan
1. Lựa chọn công nghệ
1.1. Laravel
Logo Laravel
Web là một mảng khá năng động và nhiều nền tảng, ngôn ngữ hỗ trợ. Thực sự Laravel không phải là nền tảng web đầu tiên mình được học mà là ASP.NET và Java Spring. Tuy nhiên do mình thấy PHP là một ngôn ngữ được sinh ra chỉ để làm web mà nó có thể trường tồn đến bây giờ thì phải có một sức sống mãnh liệt cũng như phải có nguyên nhân của nó. Đồng thời, PHP là một trong những ngôn ngữ để làm backend thông dụng nhất hiện nay. Và trong các framework của PHP thì Laravel là framework nổi tiếng nhất và có số lượng người dùng lớn nhất. Đó chính là lý do mình chọn Laravel.
Trong chuỗi bài viết này mình sẽ sử dụng Laravel 8.
Mọi người tham khảo thêm bài viết tại: https://viblo.asia/p/gioi-thieu-ve-laravel-924lJrnzlPM
1.2. Vue
Logo VueJS
Mình sẽ trích dẫn phần giới thiệu về Vue trên chính trang chủ của framework này:
Gọi tắt là Vue (phát âm là /vjuː/, giống như view trong tiếng Anh), Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive – tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces). Khác với các framework nguyên khối (monolithic), Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước. Khi phát triển lớp giao diện (view layer), người dùng chỉ cần dùng thư viện lõi (core library) của Vue, vốn rất dễ học và tích hợp với các thư viện hoặc dự án có sẵn. Cùng lúc đó, nếu kết hợp với những kĩ thuật hiện đại như SFC (single file components) và các thư viện hỗ trợ, Vue cũng đáp ứng được dễ dàng nhu cầu xây dựng những ứng dụng một trang (SPA – Single-Page Applications) với độ phức tạp cao hơn nhiều.
Nếu bạn muốn tìm hiểu thêm về Vue, chúng tôi đã tạo một video clip về những nguyên tắc cốt lõi và một dự án mẫu.
Nếu bạn là một lập trình viên front-end giàu kinh nghiệm và muốn hiểu hơn về tương quan giữa Vue và các thư viện hay framework khác, hãy xem phần So sánh với các framework khác.
Mình chọn Vue thay vì React vì mình thấy những người xung quanh đều dùng React, nên dùng thử Vue xem nó có gì hay, và sau có thể so sánh với React dễ dàng hơn. Đồng thời, Vue nổi tiếng về độ nhẹ cũng như tài liệu viết rất chi tiết, bằng tiếng Việt nên sẽ thân thiện với người bắt đầu hơn. Đồng thời, sau khi tham khảo thì mình thấy rằng Laravel và Vue là một kết hợp khá được ưa chuộng cho người mới bắt đầu.
1.3. Tailwind CSS
Trích từ một bài viết trên Viblo
Tailwind CSS là một utility-first CSS framework, nó cũng giống như Bootstrap, nó có những class built-in mà chúng ta có thể dùng. Tailwind CSS có nhiều các class bao gồm các thuộc tính CSS khác nhau và quan trọng, chúng ta có thể dễ dàng mở rộng tạo mới ra những class bằng chính những class của nó. Mình sẽ giải thích dần nó là gì trong các bài sau.
Lý do mình dùng Tailwind CSS là do khả năng về viết CSS của mình khá kém. Mà Tailwind CSS cũng na ná Boostrap thôi nhưng một điều tiện lợi khi dùng framework này là chúng ta có nhiều class mới hơn tiện lợi hơn Boostrap. Các bạn có thể tham khảo tại đây trong Tailwind. Và hơn nữa, việc có nhiều thêm những class nhưng với quy tắc đặt tên cực kỳ thân thiện với người dùng, người dùng cũng có thể nhìn vào class đó và có thể biết được class này nó đang style cái gì. Chúng ta cũng phải nói đến khả năng tùy biến và mở rộng cao, đem đến cho ta sự linh hoạt không giới hạn.
Trong các bài viết sau sẽ đề cập kỹ hơn và mình cũng sẽ tìm hiểu kỹ hơn để so sánh và nêu lý do thuyết phục hơn. Thực ra việc lựa chọn công nghệ cũng như lựa quán ăn ven đường vậy, thấy quán đông khác và được review tốt thì chọn, thỉnh thoảng cũng chọn quán lạ, nhưng đa phần sẽ chọn quán quen vì sẽ an toàn hơn. Nhưng với mình, một người thích thử những thứ hay ho nên quyết định chọn quán lạ nhưng đông khách và hợp với túi tiền (kiến thức của bản thân)
2. Chuẩn bị
Máy tính là thứ phải có rồi. Mình không thích và chưa bao giờ lập trình trên điện thoại cả. Và mình là người thích dùng Ubuntu nên sẽ dùng Ubuntu 20.04 trong bài viết này. Mình khuyến khích các bạn thử Ubuntu thay vì Windows trong quá trình thực hiện theo chuỗi bài viết này.
Về Ubuntu thì mọi người tham khảo bài viết trước của mình. Trong bài đó có đề cập về việc cài đặt Ubuntu và một số cách sử dụng đơn giản.
Sau khi đã cài Ubuntu thì mọi người cài VS Code theo đường dẫn sau https://code.visualstudio.com/ hoặc xem video trên Youtube
Về trang thiết bị là như vậy, còn về tinh thần thì sẵn sàng tinh thần như trên đầu bài viết đã nói “trong quá trình thực hiện sẽ có những lúc vướng mắc, đi đường vòng thậm chí là sai hướng” nên mọi người phải kiên trì đồng thời phát hiện mình sai ở đâu thì nên bảo mình hoặc vướng mắc ở đâu thì cũng nên thông báo với mình để tìm kiếm sự hỗ trợ.
II. Lộ trình dự kiến
Khi nói về lập trình web thì sẽ gồm 2 thành phần chính: backend và frontend. Backend là phần xử lý mà như trên mình đã đề cập là dùng framework Laravel. Frontend sẽ sử dụng Vue và Tailwind CSS, bên cạnh đó phải có những đoạn JS đơn giản. Chúng ta nên bắt đầu từ dễ đến khó, từ lạ đến quen nên sẽ chia ra làm 3 giai đoạn: Học sử dụng Tailwind CSS, học Vue và học Laravel. Cứ phần sau sẽ dùng kiến thức của phần trước.
1. Tailwind CSS
Tailwind CSS là làm về giao diện, nên tinh thần là sẽ tìm một file thiết kế trên trang này https://dribbble.com/tags/tailwindcss và cắt HTML bằng Tailwind CSS. Cắt HTML là gì, cắt HTML là từ file thiết kế (file ảnh) thì sẽ code ra 3 thành phần HTML, CSS và JS sao cho khi mở lên bằng trình duyệt (browser) thì nó sẽ giống file thiết kế.
Như vậy sẽ gồm 2 giai đoạn chính: học sử dụng Tailwind CSS và kiến thức về HTML, CSS, JS cơ bản; tập cắt giao diện trên Dribbble.
Độ khó: Khó (Theo thang: dễ, bình thường, khó, cực khó)
Đây là giai đoạn mới nhập môn nên dễ nản nhất.
2. Vue
Từ file HTML, CSS, JS thuần đã cắt được ở trên. Chúng ta sẽ kết hợp với Vue để tạo thành SPA (Single page application).
Độ khó: Bình thường
3. Laravel
Từ dự án Vue ở trên, kết với với Laravel để xây dựng trang web. Dự kiến chức năng sẽ gần giống trang https://demo.inertiajs.com/
Độ khó: Khó
III. Kết luận
Trên đây là dự kiến kế hoạch về việc tự học làm web của mình. Thực tế làm video sẽ dễ theo dõi hơn nên mình sẽ cân nhắc việc quay lại video trong quá trình học, code cũng như sẽ viết bài dưới dạng tóm tắt những gì mình làm. Hy vọng mọi người sẽ ủng hộ chuỗi bài viết này. Cảm ơn mọi người đã chú ý và đọc hết bài viết này.
