Trên 40 tuổi, không có nền tảng kỹ thuật, đây là cách tôi học Frontend Framework trong 2 tuần

Trong hai tuần qua, tôi đã chia sẻ kinh nghiệm cá nhân của mình về việc học nhanh những kiến thức cơ bản về HTML, CSS và JavaScript mà không cần bất kỳ kiến thức, kinh nghiệm hay hướng dẫn nào trước đó. Tuy nhiên, nếu mục tiêu của bạn, giống như của tôi, là trở thành nhà phát triển web toàn diện hoặc nhà phát triển độc lập có khả năng tạo sản phẩm của riêng bạn, thì việc thành thạo ba nhóm công nghệ cơ bản này là chưa đủ. Vì vậy, tuần này, tôi sẽ chia sẻ hướng dẫn hoàn chỉnh dành cho người mới bắt đầu để nhanh chóng tìm hiểu những điều cơ bản về khung giao diện người dùng và tạo các sản phẩm đơn giản. Tất cả các tài nguyên học tập liên quan đến bài đăng này đều miễn phí!

Sau khi học xong, tôi đã tạo một ứng dụng web như ứng dụng web này. Xin thứ lỗi cho tôi vì đã không triển khai dự án của riêng mình mà thay vào đó sử dụng ví dụ về dự án trong hướng dẫn liên quan. Đây là kho lưu trữ của riêng tôi. Trên thực tế, tôi đã sao chép hơn 90% tất cả các hiệu ứng trong dự án mẫu. Những lý do không triển khai sẽ được thảo luận sau. Như bạn có thể thấy, đây là một dự án tương đối hoàn chỉnh, liên quan đến nhiều khía cạnh như giao tiếp frontend và backend, thiết kế hoạt ảnh frontend, thiết kế móc vòng đời, thiết kế cấu trúc dữ liệu phụ trợ, quản lý trạng thái, quản lý tuyến đường, v.v. Tôi thậm chí còn tích hợp một trình soạn thảo văn bản đa dạng thức và tailwindcss vào dự án này, làm cho giao diện người dùng trông rất chuyên nghiệp. Nếu ngay cả tôi cũng có thể nhanh chóng thành thạo những kiến thức cơ bản về frontend framework, thì tại sao bạn lại không thể?

Như thường lệ, trước tiên chúng ta hãy nói về những con đường vòng mà tôi đã thực hiện trong quá trình tìm hiểu khuôn khổ giao diện người dùng của mình.

Với rất nhiều frontend framework, người mới bắt đầu nên chọn cái nào?

Đây là một trong những câu hỏi khó hiểu nhất đối với người mới bắt đầu, đặc biệt là những người mới bắt đầu tự học. Đây là một câu hỏi mang tính cá nhân hóa cao, liên quan đến các kỹ năng cơ bản, lựa chọn lộ trình học tập, khả năng học tập, mục tiêu ngắn hạn và dài hạn của bạn, thậm chí cả quốc gia và khu vực bạn sinh sống. Do đó, rất khó để đưa ra câu trả lời chuẩn. Những người mới bắt đầu thường thiếu kiến thức và kinh nghiệm trong ngành để đánh giá lựa chọn tốt nhất trong số tất cả các yếu tố này.

Đây là một vấn đề quan trọng vì khung giao diện người dùng có liên quan chặt chẽ với ngôn ngữ lập trình chính mà bạn sử dụng khi xây dựng ứng dụng web. Ngoài ra, nếu bạn chọn một khuôn khổ ít phổ biến hơn, bạn có thể khó tìm được các tài nguyên cộng đồng có liên quan và thậm chí cảm thấy bị hạn chế khi tham gia các khóa học và cộng tác với những người khác. Tôi đã nhầm lẫn về điều này trong một thời gian dài và thậm chí đã thử học Flask và Django, nhưng cuối cùng đã bỏ cuộc vì nhiều lý do.

Tôi có thể viết một bài báo 10.000 từ về vấn đề này, nhưng đó không phải là điểm chính của bài viết hôm nay. Vì vậy, đây là câu trả lời ngắn gọn của tôi: Nếu bạn đang tìm việc, tốt nhất là nên học React và biến nó thành framework chính của bạn. Nếu bạn là người mới bắt đầu như tôi với ít kiến thức trước đó và muốn học nhanh, xây dựng nhanh và phát triển sản phẩm một cách độc lập trong tương lai, thì bạn có thể chọn Vue3. Đường cong học tập của nó tương đối mượt mà hơn và dễ dàng hơn cho người mới bắt đầu.

Có đủ cho người mới bắt đầu học một framework không?

Tôi đã từng nghĩ rằng việc chọn một khung giao diện người dùng trong hệ sinh thái của ngôn ngữ lập trình chính của mình sẽ giải quyết được mọi vấn đề vì các khung chính thống có hệ sinh thái rất phong phú có thể xử lý tất cả các loại tình huống trong quá trình phát triển. Tuy nhiên, khi tôi dần dần tìm hiểu các khóa học khác và xây dựng sản phẩm, tôi nhận ra ý tưởng này thật ngây thơ.

Ví dụ: tôi hiện đang học chương trình đào tạo Solidity của Đại học Alchemy. Điều kiện tiên quyết chính thức cho khóa học này là kiến thức cơ bản về JavaScript. Tôi nghĩ rằng tôi có thể xử lý khóa học này một cách dễ dàng vì tôi không chỉ học HTML, CSS, JavaScript mà còn cả Vue3. Tuy nhiên, sang tuần thứ 3, tôi chợt phát hiện dự án tuần đó được xây dựng bằng frontend của React. Tôi chết lặng. May mắn thay, dự án trong tuần rất đơn giản và chỉ yêu cầu những kiến thức cơ bản về React. Tuy nhiên, ngay cả như vậy, tôi cũng mất nửa ngày để học nhanh những kiến thức cơ bản về React, và cuối cùng tôi đã hoàn thành xuất sắc dự án trong tuần. Vì vậy, với tư cách là người mới bắt đầu, đừng bao giờ đặt hy vọng của bạn vào một ngăn xếp công nghệ duy nhất. Học hỏi nhanh và khả năng thích ứng là những kỹ năng cần thiết cho chúng ta.

Chiến lược học tập khuôn khổ Front-end của tôi

Đơn giản, Thực tế và Định hướng Mục tiêu

Tôi không mong đợi trở thành chuyên gia về front-end framework chỉ trong 2 tuần. Mặc dù Vue3 thân thiện với người mới bắt đầu hơn React, nhưng hệ sinh thái của nó rất phong phú và đầy nội dung, bao gồm nhiều tài liệu như của riêng Vue3, Vite, Vue Router, Pinia, v.v. Nếu bạn muốn xây dựng một giao diện người dùng chất lượng, bạn cũng cần nghiên cứu các thư viện giao diện người dùng như Element Plus. Ngoài ra, nếu sản phẩm của chúng tôi có một số tính năng đặc biệt, chúng tôi cần tìm hiểu một số thư viện dành riêng cho tính năng đó, chẳng hạn như trình soạn thảo văn bản đa dạng thức, wangEditor, mà tôi đã tích hợp vào ứng dụng web của mình.

Không thể học tất cả những điều này trong 2 tuần, vì vậy tôi đã đặt mục tiêu nắm bắt các chức năng cốt lõi của Vue3 và bước đầu xây dựng một giao diện người dùng chuyên nghiệp.

Tập trung vào tài liệu Vue3 và tăng dần độ phức tạp của thực hành

Tôi đã xem xét nhiều tài liệu kể từ khi tôi bắt đầu tự học lập trình và tôi phải thừa nhận Vue3 là một trong những tài liệu thân thiện với người mới bắt đầu nhất. Cách viết tài liệu xuất sắc đã giúp tôi có thể tìm hiểu các khuôn khổ giao diện người dùng. Do đó, thay vì đề xuất bất kỳ hướng dẫn của bên thứ ba nào, tôi thực sự khuyên những ai muốn học Vue nên biến tài liệu của riêng Vue3 thành tài liệu nghiên cứu cốt lõi của họ.

Chỉ có tài liệu học tập tốt là không đủ để nắm vững một khuôn khổ; cách tốt nhất để nắm bắt một khuôn khổ là sử dụng nó để xây dựng các dự án. Tuy nhiên, cố gắng xây dựng ứng dụng web mà tôi đã trình bày ở đầu bài viết này có thể không phải là một ý kiến hay. Tôi thực sự đã xây dựng hai dự án trong quá trình học của mình, dự án đầu tiên rất đơn giản, chủ yếu để cảm nhận cách sử dụng khung, hiểu quy trình chung và các phần cốt lõi. Dự án thứ hai là phần mở rộng của dự án đầu tiên, học cách tìm các tài nguyên cần thiết để xây dựng một ứng dụng web thực sự trong hệ sinh thái của khung.

Thời gian và lịch học

1. Tôi đã dành nửa ngày để phân loại các tài nguyên học tập có thể, chủ yếu là một số tài liệu và hai hướng dẫn dự án được lựa chọn cẩn thận. Các tài liệu bao gồm: tài liệu Vue3 , tài liệu Vite , tài liệu Vue Router , tài liệu Axios , tài liệu Element+ và tài liệu Pinia . Tài liệu Vue3 là quan trọng nhất trong số này.

   
   

2. Sau đó, tôi đã dành khoảng 3 ngày rưỡi để đọc hầu hết các tài liệu về Vue. Trọng tâm là những điều cơ bản và ngay cả khi là người mới bắt đầu, tôi đảm bảo bạn có thể vượt qua phần này mà không gặp khó khăn gì. Tuy nhiên, khi tôi đến các phần sau, một số nội dung dần trở nên ít rõ ràng hơn. Điều đó là bình thường đối với người mới bắt đầu, và không sao cả. Những phần tôi không thể hiểu bây giờ, tôi ghi lại chúng và tiếp tục. Một số phần, như Phương pháp hay nhất, TypeScript và Chủ đề nâng cao, tôi quyết định bỏ qua hoàn toàn. Tóm lại, nếu bạn chỉ tập trung vào những phần thiết yếu và cơ bản nhất thì 3 ngày rưỡi là dư dả. Tôi không phải là người học nhanh và những kiến thức cơ bản của tôi còn yếu, có lẽ bạn sẽ không cần nhiều thời gian như vậy.

   
   

3. Trong một ngày rưỡi tiếp theo, tôi đã làm theo hướng dẫn cổ điển miễn phí từ Traversy Media và thực hiện một dự án nhỏ - trình theo dõi tác vụ. Tôi đặc biệt muốn nói về phong cách giảng dạy của Brad ở đây. Anh ấy chắc chắn là một nhân vật huyền thoại, được coi là cha đỡ đầu của lập trình bởi nhiều người tự học. Mỗi khi tôi xem các khóa học của anh ấy, tôi học được rất nhiều. Anh ấy rất giỏi trong việc sử dụng một dự án nhỏ để thể hiện đầy đủ tất cả các khía cạnh mà một người cần học trong một kho công nghệ. ** Nhưng là người mới, bạn phải chú ý một điều, đừng nghe những lời dạy của thầy mà không có cơ sở. ** Vì cách dạy của Brad rất súc tích và tao nhã. Nếu bạn không có bất kỳ kiến thức cơ bản nào, bạn có thể không theo kịp tốc độ của anh ấy. Do đó, tôi đã cố tình lên lịch hướng dẫn dự án nhỏ này trong giai đoạn thứ hai của quá trình học chứ không phải giai đoạn đầu tiên.

   
   

4. Nếu bạn đã nghiêm túc làm theo hướng dẫn của anh ấy, tôi tin rằng bạn đã tìm thấy cảm giác xây dựng một giao diện người dùng với một khung, nhưng đồng thời, bạn cũng có nhiều câu hỏi hơn. Tôi đã như vậy, tôi nóng lòng muốn lướt nhanh các tài liệu của vite, vue Router, Axios và pinia. Lần này tôi chỉ dành một ngày rưỡi. Vì mình đã biết sơ bộ về kiến thức cơ bản của các công nghệ trên để build vue3 project nên mình tập trung vào các nội dung này. Còn những nội dung khác tương đối phức tạp nhưng không thông dụng, tôi lướt qua thôi. Nếu bạn không hiểu tất cả cùng một lúc, chỉ cần bỏ qua nó.

   
   

5. Sang đến tuần thứ hai, tôi đã đủ tự tin để củng cố lại những kiến thức cơ bản đã học ở tuần đầu tiên bằng cách xây dựng một dự án tương đối phức tạp. Và theo nhu cầu xây dựng web app thực thụ, mở rộng nội dung đã học trước đó. Lần này tôi vẫn chọn một hướng dẫn vue phổ biến - FireBlog từ Traversy Media. Hướng dẫn này được giải thích bởi John Komarnicki , hãy để tôi giải thích tại sao tôi chọn hướng dẫn này.

   
   

• Ưu điểm của dự án này là nó rất hoàn thiện, với giao diện người dùng chuyên nghiệp và api phụ trợ được triển khai với sự trợ giúp của firebase. Toàn bộ dự án liên quan đến nhiều khía cạnh như giao tiếp đầu cuối và đầu cuối, thiết kế hoạt ảnh đầu cuối, thiết kế móc vòng đời, thiết kế cấu trúc dữ liệu đầu cuối, quản lý trạng thái, quản lý tuyến đường, v.v. Thậm chí tôi đã học được nhiều nội dung mà tôi không hiểu khi đọc tài liệu trong quá trình xây dựng. Nếu chúng ta muốn phát triển ứng dụng web trong tương lai, đây là cơ hội tuyệt vời để trải nghiệm thực tế.

• Nhược điểm chính của nó là đây là hướng dẫn từ hai năm trước, vì vậy chắc chắn một số ngăn xếp công nghệ đã được nâng cấp. Ví dụ: vue-cli được sử dụng trong hướng dẫn hiện đang ở trạng thái bảo trì, tôi đã sử dụng vite khi xây dựng. Một ví dụ khác là trình soạn thảo văn bản đa dạng thức được sử dụng trong hướng dẫn đã lâu không được cập nhật, tôi đã sử dụng wangEditor cũng nhẹ nhưng được bảo trì gần đây hơn và tích hợp tốt hơn với vue3 khi xây dựng.

  
  

6. Backend của bài hướng dẫn này sử dụng firebase để build, tuy không phức tạp nhưng có thể không đáp ứng được nhu cầu thực hành của bản thân. Ví dụ: phần phụ trợ lý tưởng của tôi là một API yên tĩnh được xây dựng với node.js+express+mongodb+mongoose. Do đó, mình không làm theo hướng dẫn xây dựng firebase backend mà tạm thời xây dựng một virtual backend với json-server để mô phỏng hành vi của một restful API. Đây cũng là lý do tại sao tôi không triển khai dự án của mình trực tuyến. Bởi vì cả github page và vercel đều chỉ có thể triển khai các trang web tĩnh và thiết bị đầu cuối của máy chủ json chỉ có thể chạy cục bộ, không thể triển khai trên chúng. Bạn có thể chọn tùy theo nhu cầu của mình khi làm theo hướng dẫn này, hoặc bạn có thể xây dựng một phụ trợ firebase giống như vậy.

   
   

7. Hướng dẫn này kéo dài trong sáu tiếng rưỡi. Thông thường, nếu bạn học nội dung một giờ mỗi ngày, thì sáu ngày là quá đủ. Khi tôi lớn hơn, tốc độ học tập của tôi chậm hơn. Bạn có thể hoàn thành việc xây dựng trong vòng chưa đầy sáu ngày. Ngày cuối cùng mình vẫn ôn lại nội dung trước đó như bình thường, quan trọng nhất là sắp xếp lại các note mình đã ghi trong 2 tuần học và làm cheat sheet thật tốt. Bởi vì tôi thấy hành động này là rất quan trọng. Thường thì 1 tháng sau khi học xong mở lại code thì có nhiều chỗ không hiểu hoặc không nhớ. Tại thời điểm này, nếu bạn muốn xây dựng một dự án mới, các ghi chú và cheat sheet thường có ích.

Một số lời khuyên cuối cùng:

1. Trước đây, tôi luôn bị ám ảnh bởi việc tìm kiếm "hướng dẫn hoàn hảo". Nhưng sau này tôi thấy rằng thực sự không có hướng dẫn hoàn hảo. Lấy hướng dẫn FireBlog mà chúng ta đã học trong tuần thứ hai làm ví dụ, nó còn nhiều thiếu sót và thậm chí một số phần chưa đáp ứng được yêu cầu của chúng tôi. Nhưng cái gì cơ? Nó vẫn là một hướng dẫn xuất sắc và là một dự án thực tế hiếm có. Chúng tôi chỉ cần nâng cấp hoặc sửa đổi những phần không đáp ứng yêu cầu.

   
   

2. Học một front-end framework có phần giống với học javascript mà chúng ta đã nói vào tuần trước, đừng mong đợi hoàn thành mọi thứ trong hai tuần. Có rất nhiều nội dung trong hệ sinh thái của nó và nó liên tục được nâng cấp. Chưa kể, như chúng ta đã thảo luận trước đó, sẽ không thực tế nếu chỉ học một framework để chinh phục tất cả các khía cạnh, vì vậy đây được coi là một quá trình học tập liên tục. Điều chúng ta cần làm là tận hưởng tất cả những điều này và không xem đó là gánh nặng.

   
   

3. Nếu bạn định học react thay vì vue, hay thậm chí là angular thì nội dung mình nói ở trên vẫn áp dụng được. Với front-end framework là vậy, phương pháp học và hướng chọn tài nguyên học thực ra khá giống nhau.

   
   

#WebDevelopment #FrontendDevelopment #VueJS #JavaScript #LearningToCode #CodeNewbie #TraversyMedia #SelfImprovement #SelfTaught #CodingResources #React