Tài nguyên mới cho các nhà thiết kế và phát triển web (tháng 1 năm 2018)
Năm mới 2018 đã đến. Nếu chúng ta nhìn vào sự tiến bộ trong phát triển web năm năm trước, nó hoàn toàn khác với những gì chúng ta có ngày nay. Hôm nay có mới phương pháp, công cụ và thậm chí là một mô hình hoàn toàn mới điều đó thay đổi cách chúng ta xây dựng trang web ngày nay - và VirtualDOM là một trong số đó.
DOM (Mô hình đối tượng tài liệu) là một mô hình cây xác định cách cấu trúc một trang web. Chọn, di chuyển và thao tác DOM có thể là một chi phí rất tốn kém và có thể cản trở hiệu suất kết xuất trang web của bạn.
Tuy nhiên, trong bài đăng này, chúng tôi sẽ không thảo luận về cách thức hoạt động của VirtualDOM, thay vào đó, cùng với các công cụ khác, chúng tôi sẽ xem xét các thư viện cho phép bạn triển khai VirtualDOM ngay lập tức. Hãy kiểm tra chúng.
MaquetteJS
An triển khai VirtualDOM cho phép bạn xây dựng giao diện người dùng linh hoạt, luôn cập nhật dữ liệu xung quanh nó. Đó là một JavaScript thuần túy và không bị ảnh hưởng thư viện do đó có thể sử dụng nó cùng với một ngôn ngữ tổng hợp như CoffeeScript, TypeScript và JSX. Một thư viện thay thế tuyệt vời cho React.js; MaquetteJS có kích thước nhỏ hơn nhiều (chỉ 3kb) tương đương.
ReDOM
Đây là một trong những thư viện VirtualDOM yêu thích của tôi, vì nó dễ dàng chọn nó chỉ bằng cách nhìn vào cú pháp. Chỉ với 2Kb, bạn có thể xây dựng một trang web hiển thị nhanh hoặc thành phần HTML tùy chỉnh. Thư viện bao gồm hai chức năng chính el, để tạo hoặc thao tác một phần tử, và gắn kết để thêm nó vào một yếu tố được chọn. Bạn có thể tải nó trong trình duyệt và phía máy chủ với NodeJS.
Phản ứngJS
Một khuôn mẫu Thư viện UI để xây dựng ứng dụng web tương tác cao. Ban đầu được xây dựng cho TheGuardian, ReactiveJS được xây dựng để hoạt động trên các trình duyệt và thiết bị di động; vì vậy bạn có thể phụ thuộc vào độ tin cậy của nó. ReactiveJS cũng đi kèm nhiều tính năng cần thiết cho ứng dụng web hiện đại ngay lập tức, chẳng hạn như Scoped CSS, Thành phần tùy chỉnh, SVG và hình ảnh động.
RiotJS
RitoJS rất dễ làm việc và thư viện dễ học hơn cho người mới bắt đầu vì nó cho phép xác định thành phần tùy chỉnh với thành phần HTML và các thuộc tính HTML trong khi các thư viện trước đó sẽ buộc phải sử dụng cú pháp JavaScript thuần túy.
RiotJS tương thích với môi trường Node.js hoặc trong các trình duyệt và có thể là một sự thay thế tuyệt vời cho Vue.js được cung cấp cho các similarties.
HyperHTML
hyperHTML, cái tên nói lên tất cả, tính năng hiệu suất khi kết xuất và thao tác DOM. Bạn có thể sử dụng nó để tạo Thành phần tùy chỉnh và Thành phần web. Nó hoạt động dễ dàng như jQuery trong đó nó có thể được sử dụng trong trình duyệt tải tập lệnh từ CDN và truy cập hyperHTML. Không cần phức tạp dụng cụ.
Mithril
Nghe thật ngầu, Mithril là một thư viện JavaScript mạnh mẽ. Ngoài VirutalDOM và Linh kiện, Mithril cũng được trang bị Routing và XHR. bạn có thể xây dựng ứng dụng web một trang mà không cần dựa vào bất kỳ thư viện nào khác. Điểm chuẩn cho thấy nó vượt trội so với một số thư viện phổ biến như Vue.js, React.js và Angular.
SlimJS
SlimJS là một thư viện JavaScript để xây dựng thành phần web tùy chỉnh bằng API thành phần web gốc. Vì nó được xây dựng xung quanh thành phần trình duyệt riêng, SlimJS được trang bị Polyfill giúp loại bỏ API trong trình duyệt chưa hỗ trợ. Đó là một khuôn khổ tuyệt vời nếu bạn thích áp dụng cách bản địa.
VSVG
Mặc dù nó có cú pháp tương tự như HTML, nhưng SVG là một loại quái thú khác có những đặc điểm riêng. Thư viện này, như tên cho thấy, sẽ cho phép bạn tạo và thao tác SVG một cách nhanh chóng.
Cảm xúc
Cảm xúc là Khung CSS-in-JS mà bạn có thể cần khi xây dựng trang web với VirtualDOM. Điều này cho phép bạn chỉ cung cấp các bit CSS cần thiết trên trang web của mình và bạn có thể tự động cập nhật kiểu dáng mà không bị kết án với cách đặt tên lớp và tính đặc hiệu vì kiểu được chỉ vào Thành phần mà nó được áp dụng cho.
Bộ khởi động React
Nếu bạn đã theo dõi web trong vài năm qua, bạn sẽ tìm thấy React (gần như) ở mọi nơi. Đây là một 5 khóa học video ngắn giới thiệu React. Nếu bạn muốn theo kịp ngành, đây có thể là nơi thích hợp để bắt đầu.
Yếu tố
Các yếu tố là một bộ sưu tập của Các thành phần iOS để tạo nguyên mẫu ứng dụng iOS trong Phác thảo. Nó được xây dựng bởi mọi người bởi Phác thảo và được cập nhật với Giao diện người dùng iPhone X.
Modaal
Modaal là một thư viện JavaScript được xây dựng với ý tưởng khả thi. Nó đã được xác minh cho “Hỗ trợ WCAG 2.0 cấp độ AA” điều đó (tôi nghĩ) nhiều nhất có thể truy cập “Phương thức” thư viện ngày hôm nay. nó là gọn nhẹ, tương thích với jQuery và có thể được sử dụng cho hình ảnh, video và thậm chí là Instagram. Hơn nữa, khóa học ngắn này từ Google sẽ giúp bạn bắt đầu với Khả năng truy cập Web và tại sao nó quan trọng.
WordPressify
Gói NPM cho phép bạn có được môi trường phát triển WordPress và chạy trong vài phút. Tất cả đã được thiết lập với các công cụ hiện đại như Gulp, LiveReload, PostCSS, Babel vì vậy bạn có thể tập trung vào phát triển dự án thay vì điều chỉnh cấu hình.
Lando
Lando cũng là một công cụ tiện dụng để cải thiện môi trường phát triển nhanh chóng và dễ dàng, rất thích WordPressify mà chúng tôi vừa đề cập ở trên. Nhưng thay vì Node.js, phải mất lợi thế của Docker một container hóa nhẹ công nghệ và nó cung cấp sự linh hoạt hơn về mặt ngăn xếp mà bạn muốn sử dụng trong quá trình phát triển của mình.
Ví dụ, bạn có thể chỉ định phiên bản PHP, bật XDebug và cài đặt Trình soạn thảo.
WP-Docklines
WP-Docklines là một bộ sưu tập hình ảnh mà bạn có thể sử dụng làm đường cơ sở để thực hiện Tích hợp và phân phối liên tục cho các chủ đề và tài khoản WordPress của bạn trong các dịch vụ như Bitbucket, CircleCI và Gitlab. Mỗi hình ảnh được đóng gói với công cụ thường cần khi phát triển WordPress chẳng hạn như PHP Code Sniffer, PHPUnit và WP-CLI.
Khóa-WP
WP-Locker là cấu hình Docker Compose để quay một môi trường phát triển WordPress chỉ trong vài phút. Nó là thiết lập với Apache, MySQL và phpMyAdmin và vì nó mở rộng hình ảnh WP-Docklines, nó cũng thực hiện các công cụ bổ sung trên hình ảnh bên ngoài hộp.
Đơn giản kiểu thùng / bắt đầu để cho nó, cấu hình localhost và cài đặt plugin và các chủ đề mà bạn đã cấu hình trong tệp cấu hình.
D Focusaurus
Một sáng kiến nguồn mở khác từ Facebook, D Focusaurus là một công cụ để tạo một trang web tài liệu về dự án của bạn. Được xây dựng với React và Markdown, bạn có thể dễ dàng soạn tài liệu, duy trì và thậm chí tạo blog cho trang web của mình và xuất bản nó lên trang Github.
VSCode Yo
Yeoman là Gói Node cho phép bạn khởi động dự án nhanh chóng bằng cách lựa chọn giàn giáo làm sẵn phù hợp với dự án của bạn. Nếu bạn đang sử dụng Visual Studio Code, plugin này sẽ hợp lý hóa quy trình khởi động hơn nữa vì nó cho phép bạn chạy “Bạn” lệnh ngay từ cửa sổ Visual Studio Code.
BluebirdJS
Một thư viện JavaScript cho phép bạn sử dụng Hứa, chờ đợi, không đồng bộ ngày nay trong tất cả các trình duyệt; cho biết nó thậm chí hoạt động trong Netscape. Hứa là một trong những điểm mạnh nhất trong các thông số kỹ thuật JavaScript mới nhất làm cho mã của bạn gọn hơn, dễ đọc hơn và dễ bảo trì.
Đẹp hơn
Prettier là một công cụ để định dạng mã của bạn để phù hợp với tiêu chuẩn mã hóa của ngôn ngữ. Nó sẽ viết lại mã của bạn từ scracth theo quy tắc cho phép bạn và nhóm của bạn được năng suất cao hơn thay vì tranh luận về phong cách viết mã.
