Sumber Baharu untuk Pereka dan Pengembang Web (Januari 2018)
Tahun baru 2018 ada di sini. Jika kita melihat kemajuan dalam pembangunan web lima tahun yang lalu, ia berbeza daripada apa yang kita ada hari ini. Hari ini ada yang baru kaedah, alat, dan bahkan paradigma baru yang mengubah cara kami membina laman web hari ini - dan VirtualDOM adalah salah satu daripada mereka.
DOM (Model Objek Dokumen) adalah a model pokok yang mentakrif bagaimana sebuah laman web berstruktur. Memilih, melintasi, dan memanipulasi DOM boleh menjadi pembolehubah yang sangat mahal dan mungkin menghalang prestasi rendering laman anda.
Walau bagaimanapun, dalam catatan ini, kita tidak akan membincangkan bagaimana VirtualDOM berfungsi, sebaliknya, bersama dengan alat lain, kita akan melihat perpustakaan yang membolehkan anda melaksanakan VirtualDOM segera. Mari kita periksa mereka.
MaquetteJS
An pelaksanaan VirtualDOM yang membolehkan anda membina antara muka pengguna cecair yang sentiasa dikemas kini dengan data di sekelilingnya. Ia adalah JavaScript tulen dan tidak ditukar perpustakaan dengan itu mungkin untuk gunakannya bersama dengan bahasa sintetik seperti CoffeeScript, TypeScript, dan JSX. Perpustakaan alternatif yang hebat untuk React.js; MaquetteJS jauh lebih kecil dalam saiz (hanya 3kbsebanding dengannya.
ReDOM
Ini adalah salah satu pustaka VirtualDOM kegemaran saya, kerana mudah untuk mengambilnya hanya dengan melihat sintaks. Dengan hanya 2Kb, anda boleh membina laman web cepat rendering atau komponen HTML tersuai. Perpustakaan terdiri daripada dua fungsi utama el, untuk membuat atau memanipulasi elemen, dan gunung untuk menambahnya kepada elemen yang dipilih. Anda boleh memuatkannya di pelayar dan sisi pelayan dengan NodeJS.
ReaktifJS
A templating Perpustakaan UI untuk membina aplikasi web yang sangat interaktif. Asalnya dibina untuk TheGuardian, ReaktifJS dibina untuk berfungsi merentas pelayar dan peranti mudah alih; jadi anda boleh bergantung kepada kebolehpercayaannya. ReaktifJS juga datang dengan banyak ciri yang diperlukan untuk aplikasi web moden keluar-of-the-box, seperti Scoped CSS, Custom Components, SVG, dan animasi.
RiotJS
RitoJS adalah menyenangkan untuk bekerja dengan dan lebih mudah untuk belajar perpustakaan untuk pemula kerana ia membolehkan menentukan komponen tersuai dengan elemen HTML dan atribut HTML sementara perpustakaan terdahulu akan memaksa menggunakan sintaks JavaScript tulen.
RiotJS adalah serasi untuk persekitaran Node.js atau dalam pelayar, dan boleh menjadi alternatif hebat untuk Vue.js diberikan similarties.
HyperHTML
hyperHTML, seperti namanya, ciri prestasi semasa membuat dan memanipulasi DOM. Anda boleh menggunakannya untuk membuat Elemen Kustom dan Komponen Web. Ia berfungsi semudah jQuery di mana ia boleh digunakan dalam penyemak imbas memuatkan skrip dari CDN dan mengakses hiperHTML. Tidak perlu rumit perkakas.
Mithril
Kerana kedengarannya, Mithril adalah a perpustakaan JavaScript berkuasa. Selain dari VirutalDOM dan Komponen, Mithril juga dilengkapi dengan Routing dan XHR yang mana anda boleh membina aplikasi web halaman tunggal tanpa bergantung pada mana-mana perpustakaan lain. Benchmark menunjukkan bahawa ia melebihi beberapa perpustakaan popular seperti Vue.js, React.js dan Angular.
SlimJS
SlimJS adalah perpustakaan JavaScript untuk membina komponen web tersuai menggunakan API Component Web asli. Oleh kerana ia dibina di sekitar komponen pelayar asal SlimJS dilengkapi dengan a Polyfill yang mengharungi API dalam pelayar yang tidak menyokongnya lagi. Ia adalah rangka kerja yang hebat jika anda lebih suka mengamalkan cara asalnya.
VSVG
Walaupun ia mempunyai sintaks serupa dengan HTML, SVG adalah sejenis binatang dengan ciri khasnya. Perpustakaan ini, seperti nama yang dicadangkan, akan membolehkan anda membuat dan memanipulasi SVG dengan cepat.
EmotionSH
EmotionSH adalah Rangka kerja CSS-in-JS yang anda perlukan semasa membina laman web dengan VirtualDOM. Ini membolehkan anda menyampaikan hanya bit CSS yang diperlukan di laman web anda dan anda boleh mengemas kini penggayaan secara dinamik tanpa diselaraskan dengan penamaan kelas dan kekhususan kerana gaya dipotong kepada hanya Komponen yang digunakan untuk.
React Starter Kit
Sekiranya anda mengikuti web dalam beberapa tahun kebelakangan ini, anda akan mendapati React (hampir) setiap tempat. Ini adalah 5 kursus pendek video yang memperkenalkan React. Jika anda ingin bersaing dengan industri, ini mungkin tempat yang tepat untuk bermula.
Elemen
Elemen adalah koleksi komponen iOS untuk mencipta prototaip apl iOS dalam Lakaran. Ia dibina oleh orang ramai oleh Sketch dan telah dikemas kini dengan iPhone X UI.
Modaal
Modaal adalah pustaka JavaScript yang dibina dengan akauntabiliti dalam fikiran. Sudah menjadi disahkan untuk “Sokongan Level Level WCAG 2.0” itu (saya fikir) yang paling boleh diakses “Modal” perpustakaan hari ini. Ia ringan, jQuery serasi, dan boleh digunakan untuk imej, video, dan juga Instagram. Selain itu, kursus pendek ini dari Google akan membantu anda memulakan Kebolehaksesan Web dan mengapa ia penting.
WordPressify
Pakej NPM yang membolehkan anda mendapatkan persekitaran pembangunan WordPress dan berjalan dalam beberapa minit. Ia semua ditubuhkan alat moden seperti Gulp, LiveReload, PostCSS, Babel jadi anda boleh memberi tumpuan kepada membangunkan projek anda dan bukan konfigurasi penalaan.
Lando
Lando juga merupakan alat yang berguna untuk memancarkan suasana pembangunan dengan cepat dan mudah, seperti WordPressify yang baru kita sebutkan di atas. Tetapi bukannya Node.js, ia mengambil masa kelebihan Docker adalah kontena ringan teknologi dan ia menawarkan lebih banyak fleksibiliti dari segi timbunan yang anda ingin gunakan dalam pembangunan anda.
Sebagai contoh, anda boleh nyatakan versi PHP, dayakan XDebug, dan pasang Komposer.
WP-Docklines
WP-Docklines adalah a koleksi imej yang boleh anda gunakan sebagai garis dasar untuk melaksanakan Integrasi dan Pengiriman Berterusan untuk tema WordPress dan pluins anda dalam perkhidmatan seperti Bitbucket, CircleCI, dan Gitlab. Setiap imej dibundel dengan alat yang diperlukan semasa membangunkan WordPress seperti PHP Code Sniffer, PHPUnit, dan WP-CLI.
WP-Locker
WP-Locker adalah Docker Compose configuration untuk memutar persekitaran pembangunan WordPress dalam beberapa minit sahaja. Ia adalah sediakan dengan Apache, MySQL dan phpMyAdmin dan kerana ia memanjangkan imej WP-Docklines, ia juga menjalankan alat-alat tambahan pada gambar di luar kotak.
Cukup jenis bin / permulaan untuk membiarkannya, konfigurasikan localhost dan pasang plugin dan tema yang anda telah konfigurasikan dalam fail konfigurasi.
Docusaurus
Satu lagi inisiatif sumber terbuka dari Facebook, Docusaurus adalah alat untuk membuat tapak web dokumentasi projek anda. Dibina dengan React dan Markdown, anda boleh dengan mudah mengarang dokumentasi, mengekalkannya, dan juga membuat blog untuk laman web anda, dan menyiarkannya ke Halaman Github.
VSCode Yo
Yeoman adalah Pakej Nod yang membolehkan anda memulakan projek dengan cepat memilih perancah pra-dibuat yang sesuai dengan projek anda. Jika anda menggunakan Kod Visual Studio, plugin ini akan menyelaraskan aliran kerja permulaan lebih jauh kerana ia membolehkan anda jalankan “Yo” Perintah kanan dari tetingkap Kod Studio Visual.
BluebirdJS
Pustaka JavaScript yang membolehkan anda menggunakannya Janji, menanti, async hari ini dalam semua pelayar; berkata ia juga berfungsi di Netscape. Janji adalah salah satu titik terkuat dalam spesifikasi JavaScript terkini yang akan membuat kod anda lebih ramping, mudah dibaca, dan mudah dikendali.
Lebih cantik
Prettier adalah alat untuk formatkan kod anda untuk mematuhi piawaian pengekodan bahasa. Ia akan menulis semula kod anda dari scracth berikut peraturan yang membolehkan anda dan pasukan anda menjadi lebih produktif daripada membahaskan gaya menulis kod.
