Sumberdaya Segar untuk Desainer dan Pengembang Web (Januari 2018)

Tahun baru 2018 ada di sini. Jika kita melihat kemajuan dalam pengembangan web lima tahun lalu, itu sama sekali berbeda dari apa yang kita miliki saat ini. Hari ini ada yang baru metode, alat, dan bahkan paradigma yang sama sekali baru yang mengubah cara kita membangun situs web hari ini - dan VirtualDOM adalah salah satunya.

DOM (Document Object Model) adalah a model pohon yang menentukan bagaimana struktur situs web. Memilih, melintasi, dan memanipulasi DOM bisa menjadi operasi yang sangat mahal dan mungkin menghambat kinerja rendering situs Anda.

Namun, dalam posting ini kami tidak akan membahas bagaimana VirtualDOM bekerja, sebagai gantinya, bersama dengan alat-alat lain, kami akan melihat ke dalamnya perpustakaan yang memungkinkan Anda untuk mengimplementasikan VirtualDOM segera. Mari kita periksa.

MaquetteJS

Sebuah implementasi VirtualDOM yang memungkinkan Anda untuk membangun antarmuka pengguna yang terus diperbarui dengan data di sekitarnya. Ini murni JavaScript dan tidak terbuka perpustakaan sehingga dimungkinkan untuk gunakan bersama dengan bahasa sintetis seperti CoffeeScript, TypeScript, dan JSX. Perpustakaan alternatif yang bagus untuk React.js; Ukuran MaquetteJS jauh lebih kecil (hanya 3kb) sebanding.

ReDOM

Ini adalah salah satu pustaka VirtualDOM favorit saya, karena mudah untuk mengambilnya hanya dengan melihat sintaksnya. Hanya dengan 2Kb, Anda dapat membangun halaman web rendering cepat atau komponen HTML khusus. Perpustakaan terdiri dua fungsi utama el, untuk membuat atau memanipulasi elemen, dan meningkat untuk menambahkannya ke elemen yang dipilih. Anda dapat memuatnya di browser dan sisi server dengan NodeJS.

ReaktifJS

Templating Perpustakaan UI untuk membangun aplikasi web yang sangat interaktif. Awalnya dibangun untuk TheGuardian, ReactiveJS dibangun untuk bekerja di seluruh browser dan perangkat seluler; sehingga Anda dapat bergantung pada keandalannya. ReactiveJS juga dilengkapi dengan banyak fitur yang dibutuhkan untuk aplikasi web modern langsung, seperti Scoped CSS, Custom Components, SVG, dan animasi.

RiotJS

RitoJS adalah menyenangkan untuk bekerja dengan dan lebih mudah untuk belajar perpustakaan bagi pemula karena itu memungkinkan mendefinisikan komponen khusus dengan elemen HTML dan atribut HTML sementara pustaka sebelumnya akan memaksa untuk menggunakan sintaksis JavaScript murni.

RiotJS kompatibel dengan lingkungan Node.js atau di browser, dan bisa berupa a alternatif yang bagus untuk Vue.js diberikan similarties.

HyperHTML

hyperHTML, seperti namanya, fitur kinerja saat merender dan memanipulasi DOM. Anda dapat menggunakannya untuk membuat Elemen Kustom dan Komponen Web. Ini bekerja semudah jQuery di mana ia dapat digunakan di browser oleh memuat skrip dari CDN dan mengakses hyperHTML. Tidak perlu ribet perkakas.

Mithril

Sekeren kedengarannya, Mithril adalah a perpustakaan JavaScript yang kuat. Selain dari VirutalDOM dan Komponen, Mithril juga dilengkapi dengan Routing dan XHR Anda dapat membangun aplikasi web satu halaman tanpa mengandalkan pustaka lain. Benchmark menunjukkan bahwa itu mengungguli beberapa perpustakaan populer seperti Vue.js, React.js dan Angular.

SlimJS

SlimJS adalah perpustakaan JavaScript untuk membangun komponen web khusus menggunakan API Komponen Web asli. Karena dibangun di sekitar komponen browser asli SlimJS dilengkapi dengan Polyfill yang mengubah API di browser yang belum mendukungnya. Ini adalah kerangka kerja yang bagus jika Anda lebih suka mengadopsi cara asli.

VSVG

Meskipun memiliki sintaksis yang mirip dengan HTML, SVG adalah jenis binatang buas dengan kebiasaannya sendiri. Perpustakaan ini, seperti namanya, akan memungkinkan Anda untuk membuat dan memanipulasi SVG dengan cepat.

EmosiSH

EmosiSH adalah Kerangka kerja CSS-in-JS yang mungkin Anda perlukan saat membangun situs web dengan VirtualDOM. Ini memungkinkan Anda untuk hanya mengirimkan sedikit CSS yang dibutuhkan di situs Anda dan Anda bisa perbarui gaya secara dinamis tanpa dikagetkan dengan penamaan kelas dan spesifisitas karena gaya dihapus hanya Komponen yang diterapkan.

Bereaksi Starter Kit

Jika Anda telah mengikuti web dalam beberapa tahun terakhir, Anda akan menemukan React (hampir) di mana saja. Ini adalah sebuah 5 kursus singkat video yang memperkenalkan React. Jika Anda ingin mengikuti perkembangan industri ini, ini mungkin tempat yang tepat untuk memulai.

Elemen

Elemen adalah koleksi Komponen iOS untuk membuat prototipe aplikasi iOS di Sketch. Ini dibangun oleh orang-orang oleh Sketch dan telah diperbarui dengan iPhone X UI.

Modaal

Modaal adalah perpustakaan JavaScript yang dibangun dengan mempertimbangkan aksesibilitas. Telah diverifikasi untuk “Dukungan WCAG 2.0 Level AA” itu (saya pikir) paling dapat diakses “Modal” perpustakaan hari ini. Nya ringan, kompatibel dengan jQuery, dan dapat digunakan untuk gambar, video, dan bahkan Instagram. Selanjutnya, kursus singkat dari Google ini akan membantu Anda memulai dengan Aksesibilitas Web dan mengapa ini penting.

WordPressify

Paket NPM yang memungkinkan Anda untuk mendapatkan lingkungan pengembangan WordPress dan berjalan dalam hitungan menit. Semua sudah diatur alat modern seperti Gulp, LiveReload, PostCSS, Babel sehingga Anda dapat fokus pada pengembangan proyek Anda, bukan konfigurasi tuning-up.

Lando

Lando juga merupakan alat yang berguna untuk memutar lingkungan pengembangan dengan cepat dan mudah, seperti halnya WordPressify yang baru saja kami sebutkan di atas. Tetapi alih-alih Node.js, dibutuhkan Keuntungan Docker adalah containerisasi yang ringan teknologi dan menawarkan lebih banyak fleksibilitas dalam hal tumpukan yang ingin Anda gunakan dalam pengembangan Anda.

Misalnya, Anda bisa tentukan versi PHP, aktifkan XDebug, dan instal Komposer.

WP-Docklines

WP-Docklines adalah a koleksi gambar yang dapat Anda gunakan sebagai garis dasar untuk melakukan Integrasi dan Pengiriman Berkelanjutan untuk tema WordPress Anda dan pluins dalam layanan seperti Bitbucket, CircleCI, dan Gitlab. Setiap gambar dibundel dengan alat yang biasanya dibutuhkan saat mengembangkan WordPress seperti Sniffer Kode PHP, PHPUnit, dan WP-CLI.

WP-Locker

WP-Locker adalah konfigurasi Penyusun Docker untuk memutar lingkungan pengembangan WordPress hanya dalam beberapa menit. ini atur dengan Apache, MySQL dan phpMyAdmin dan karena itu memperluas gambar WP-Docklines, itu juga melakukan alat tambahan pada gambar out-of-the-box.

Secara sederhana mengetik bin / mulai untuk membiarkannya, konfigurasikan localhost dan pasang plugin dan tema yang telah Anda konfigurasikan dalam file konfigurasi.

Docusaurus

Inisiatif open-source lain dari Facebook, Docusaurus adalah alat untuk membuat situs web dokumentasi proyek Anda. Dibangun dengan React dan Markdown, Anda dapat dengan mudah menulis dokumentasi, memeliharanya, dan bahkan membuat blog untuk situs Anda, dan publikasikan ke Halaman Github.

VSCode Yo

Yeoman adalah Paket Node yang memungkinkan Anda memulai proyek dengan cepat memilih perancah buatan yang sesuai dengan proyek Anda. Jika Anda menggunakan Visual Studio Code, plugin ini akan merampingkan alur kerja start up lebih jauh karena memungkinkan Anda untuk melakukannya jalankan “yo” perintah langsung dari jendela Visual Studio Code.

BluebirdJS

Pustaka JavaScript itu memungkinkan Anda untuk menggunakannya Janji, menunggu, async hari ini di semua browser; mengatakan itu bahkan bekerja di Netscape. Janji adalah salah satu titik terkuat dalam spesifikasi JavaScript terbaru yang mungkin buat kode Anda lebih ramping, mudah dibaca, dan mudah dipelihara.

Lebih cantik

Lebih cantik adalah alat untuk format kode Anda agar sesuai dengan standar pengkodean bahasa. Ini akan menulis ulang kode Anda dari scracth mengikuti aturan yang memungkinkan Anda dan tim Anda lebih produktif daripada berdebat tentang gaya penulisan kode.