Nếu bạn là nhà phát triển web hoặc đang học phát triển web thì câu hỏi này có thể đã xuất hiện trong đầu bạn. Vanilla JS là gì?
Vanilla JS là gì?
Có hàng ngàn hương vị kem. Tuy nhiên, hương vị mặc định hoặc tinh khiết nhất của kem là vani, loại kem không có hương vị. Khái niệm này được chuyển sang JavaScript. Do đó, Vanilla JS là một JavaScript vô vị mà tôi. e. JavaScript không có khung hoặc thư viện. Vanilla JS giúp bạn xây dựng các ứng dụng hiện đại cho web, thiết bị di động hoặc máy tính để bàn. Vanilla. js không phụ thuộc vào gói và không yêu cầu công cụ xây dựng
Tại sao chúng ta nên học nó?
90% newbie developer thường nhìn vào Vanilla JavaScript và thường nghĩ Tại sao phải học vanilla JavaScript khi chúng ta có hầu hết các framework phổ biến như Angular, React và Node. js? . Sau này, tôi biết tầm quan trọng của việc viết mã từ đầu và sau đó chuyển sang các khuôn khổ
Hãy làm cho nó đơn giản và hiểu hai điểm chính tại sao việc học lại quan trọng
- Làm cho bạn Framework độc lập. Khi bạn học cách viết mã từ đầu và xây dựng các ứng dụng web mà không phụ thuộc vào bất kỳ khung hoặc thư viện nào, bạn thực sự trở thành một nhà phát triển web giỏi hơn. Nó cho thấy rằng bạn đang có kiến thức tốt về JavaScript thuần túy. Các framework và thư viện như Angular và React chỉ là những công cụ hỗ trợ khả năng xử lý và tổ chức JavaScript của chúng ta. Học trực tiếp các framework sẽ khiến bạn trở thành người phụ thuộc vào framework và cuối cùng sẽ bị ràng buộc với các framework và thư viện không tồn tại mãi mãi. Chúng ta nên ghi nhớ điều này rằng các khung và thư viện sẽ thay đổi nhưng JavaScript là mãi mãi. Ngoài ra, học Vanilla JS giúp chúng ta hiểu code tốt hơn
- Giúp bẻ khóa các cuộc phỏng vấn của Tech Giants. Nhiều công ty lớn dựa trên sản phẩm hàng đầu như Microsoft, Google, Facebook, v.v. yêu cầu xây dựng các ứng dụng web [như bản sao của triển vọng] trong các cuộc phỏng vấn mà không sử dụng bất kỳ khung hoặc thư viện nào. Điều này thường xảy ra trong Vòng Machine Coding. Lý do đằng sau việc này là để kiểm tra xem người được phỏng vấn chỉ là người phụ thuộc vào khung hay có thể xây dựng ứng dụng từ đầu bằng Vanilla JavaScript. Đó là lý do tại sao việc học Vanilla JS để viết mã từ đầu và trở nên độc lập với các framework và thư viện là vô cùng quan trọng.
Nó không quan trọng cho công việc đầu tiên của bạn. Nhưng, nó rất quan trọng cho công việc thứ hai và thứ ba của bạn
- Tanay Pratap
lời chia tay
Nếu bạn là người mới bắt đầu phát triển web và mong muốn tạo dựng sự nghiệp của mình trong đó. Vanilla JS là con đường khởi đầu cho lộ trình của bạn
Có khá nhiều lý do, nhưng tôi muốn nói về ba lý do chính tại sao nên sử dụng một số loại khung. Ba lý do đó sẽ là tooling, structure, và sau đó là performance. Tôi rất hâm mộ ý tưởng rằng các nhà phát triển nên sử dụng đúng công cụ cho đúng công việc
Nếu bạn có một số loại khung có thể thực hiện tất cả các loại nhiệm vụ khác nhau mà bạn thường cần xây dựng, thì tại sao bạn không tận dụng chúng?
Ví dụ: nếu bạn định sử dụng một số loại thành phần React, thì loại công cụ đó đi kèm với tất cả các loại tính năng khác nhau mà bạn có thể sử dụng ngay lập tức. Bạn có thể quản lý state của mình. Bạn có thể làm việc với properties, nghĩa là bạn có thể truyền dữ liệu từ thành phần này sang thành phần khác
Nếu bạn cố gắng làm điều đó chỉ với Vanilla JavaScript, bạn sẽ thấy rằng chương trình đó sẽ nhanh chóng trở nên khó sử dụng và rất khó bảo trì. React có một hệ sinh thái rộng lớn như vậy và không chỉ mỗi React
Điều tương tự cũng thực sự áp dụng cho Vue, Angular và các khung khác này. Bởi vì những hệ sinh thái này đã trở nên quá lớn, những gì chúng cho phép bạn làm là thiết lập một hệ thống để phát triển các ứng dụng của bạn
Nếu bạn vừa có ý tưởng của riêng mình về cách bạn muốn xây dựng ứng dụng và bạn muốn viết tất cả chỉ bằng Vanilla JavaScript
Về mặt kỹ thuật, bạn có thể, nhưng vì có quá nhiều điểm chung giữa các ứng dụng, chẳng hạn như làm việc với các phần tử biểu mẫu, làm việc với danh sách, có thể gọi structure0 và hiển thị trên màn hình. Tất cả những điều đó có thể được hệ thống hóa bằng cách làm việc với một khuôn khổ
Lý do thứ hai mà tôi muốn nói đến là các khung này cung cấp cho bạn một cấu trúc chung. Tôi muốn bạn tưởng tượng một kịch bản mà bạn đang thực hiện một dự án nào đó và nó đang diễn ra tốt đẹp, nhưng bạn đã viết tất cả bằng Vanilla JavaScript
Giả sử bạn là một nhà phát triển JavaScript xuất sắc và nó hoạt động hoàn hảo, nhưng bây giờ bạn muốn bắt đầu phát triển nhóm. Chà, điều gì xảy ra khi bạn mời một nhà phát triển mới?
Lần đầu tiên họ nhìn vào tệp mã của bạn, đầu óc họ sẽ nổ tung vì họ không biết tất cả mã được cho là đi đâu. Ngay cả khi bạn đã viết nó tốt, thì vẫn sẽ có một lộ trình học tập rất dốc đối với họ
Bây giờ hãy so sánh điều đó với nếu bạn đã viết vào, chẳng hạn như khung Vue, bạn có thể đặc biệt ra ngoài và tìm một nhà phát triển Vue. Đưa họ lên máy bay, và ngay lập tức họ sẽ biết các bộ phận được đặt ở đâu
Họ sẽ biết những gì một thành phần sẽ làm. Họ sẽ biết các thư viện phải làm gì
Họ sẽ có ý tưởng về cấu trúc tổng thể ngay lập tức, điều đó có nghĩa là thời gian học tập để họ tham gia sẽ thấp hơn nhiều. Họ sẽ nhanh hơn khi có thể bắt đầu xây dựng các tính năng đó
Lý do thứ ba tôi muốn thảo luận là hiệu suất. Về mặt kỹ thuật, nếu bạn là nhà phát triển JavaScript cấp cao với mười năm kinh nghiệm, bạn sẽ biết ngôn ngữ này từ trong ra ngoài. Bạn có thể xây dựng một ứng dụng về mặt lý thuyết sẽ hoạt động tốt hơn ứng dụng React hoặc Vue
Bây giờ đó là về mặt kỹ thuật, tuy nhiên, tôi đoán là bạn có thể không có mức độ kinh nghiệm đó. Tôi không có kinh nghiệm về JavaScript ở mức độ đó, vì vậy điều mà những khuôn khổ này cho phép bạn làm là gian lận một chút
Bạn không cần phải hiểu tất cả nền tảng về cách thức hoạt động của JavaScript và các công cụ như structure5 vì chúng giúp bạn rất nhiều việc đó. Một ví dụ tuyệt vời là cách hoạt động của structure6
Nếu bạn có một ứng dụng React và ứng dụng này có 15 thành phần trên một trang và dữ liệu chỉ thay đổi ở một trong các thành phần đó. Thay vì hiển thị lại toàn bộ trang, tất cả những gì mà React làm là xem xét một thành phần đó và chỉ cập nhật thành phần đó
Điều đó dẫn đến trải nghiệm nhanh hơn nhiều. Hiệu suất của các ứng dụng này, nếu chúng được viết tốt, thường sẽ tốt hơn nhiều so với việc bạn cố tự viết tất cả bằng Vanilla JavaScript
Cũng có một lý do khác. Thông thường, khi bạn làm việc với một trong những khuôn khổ này, họ đang sử dụng một công cụ có tên là structure9. React và Vue làm điều này khi chúng không thực sự cho bạn biết hoặc chúng không thực sự cung cấp cho bạn khả năng viết các phần tử DOM trực tiếp trên màn hình
Họ tạo ra thứ được gọi là structure9. Nó gần như bắt chước performance3 trên trang, performance4, và vì vậy điều này cho phép bạn làm là tất cả những yếu tố khác nhau mà bạn thấy trên trang
Nếu bạn đang viết những thứ đó bằng Vanilla JavaScript thì đó sẽ là những phần tử thực, được mã hóa cứng đang được đặt trên trang web hoặc trong ứng dụng. Điều gì xảy ra với React và Vue trong các khung này là những phần tử đó trông giống như chúng là những phần tử đó trên trang
Những gì chúng thực sự đằng sau hậu trường là chúng là các đối tượng JavaScript. Chúng có thể được tạo ra, chúng có thể được loại bỏ và chúng có thể được sửa đổi nhanh hơn nhiều so với việc bạn làm điều đó theo cách thủ công
Thông thường, nếu bạn đang viết mã bằng Vanilla JavaScript, điều bạn đang làm là thực hiện các tác vụ như tạo một performance5 mới hoặc tìm kiếm một và sau đó cập nhật nó. Nếu bạn có một số lượng lớn trong số đó, vì vậy nếu bạn có hàng nghìn cái, quá trình đó có thể rất tốn bộ nhớ và trình duyệt
Những gì bạn có thể làm với một DOM ảo là sử dụng một chút phím tắt và chính mã trong khung cho phép bạn bỏ qua rất nhiều công việc thủ công mà hệ thống thường phải thực hiện. Nó chỉ đơn giản là đi và nó cập nhật các đối tượng và cập nhật các thành phần trên trang. Thông thường, điều đó dẫn đến một ứng dụng hoạt động tốt hơn nhiều