Web Tasarımcıları ve Geliştiricileri İçin Yeni Kaynaklar (Ocak 2018)

2018 Yeni yılı burada. Beş yıl önce web geliştirme alanındaki ilerlemeye bakarsak, bugün sahip olduklarımızdan tamamen farklıdır. Bugün yeni yöntemler, araçlar ve hatta tamamen yeni bir paradigma Bu, bugün web sitelerini oluşturma biçimimizi değiştiriyor - ve VirtualDOM bunlardan biri.

DOM (Belge Nesne Modeli) bir Bir web sitesinin nasıl yapılandırıldığını tanımlayan ağaç modeli. DOM’i seçmek, dolaşmak ve değiştirmek çok pahalı bir işlem olabilir ve sitenizin görüntü oluşturma performansını engelleme.

Ancak, bu yazıda VirtualDOM'un nasıl çalıştığını tartışmayacağız, bunun yerine diğer araçlarla birlikte inceleyeceğiz. VirtualDOM uygulamanıza izin veren kütüphaneler derhal. Onları kontrol edelim.

MaquetteJS

bir VirtualDOM uygulaması Bu, etrafındaki verilerle güncellenen akışkan kullanıcı arabirimi oluşturmanıza olanak sağlar. Saf bir JavaScript ve unopiniated Kütüphane böylece mümkün CoffeeScript, TypeScript ve JSX gibi sentetik bir dille birlikte kullanın. React.js'ye harika bir alternatif kütüphane; MaquetteJS boyutu çok daha küçük (sadece 3kb) karşılaştırmalı olarak.

ReDOM

Bu benim en sevdiğim VirtualDOM kitaplıklarından biri, tıpkı sadece sözdizimine bakarak kolayca aldığım için.. Sadece 2Kb ile, hızlı görüntülenen bir web sayfası veya özel bir HTML bileşeni oluşturabilirsiniz. Kütüphane oluşur iki ana işlev el, eleman oluşturmak veya üzerinde değişiklik yapmak, ve dağ Seçilen bir öğeye eklemek için NodeJS ile tarayıcıya ve sunucu tarafına yükleyebilirsiniz.

ReactiveJS

Bir şablonlama UI kütüphanesi yüksek düzeyde etkileşimli web uygulaması oluşturmak için. Aslen TheGuardian için üretilmiş olan ReactiveJS, tarayıcılarda ve mobil cihazlarda çalışmak üzere üretilmiştir; Böylece güvenilirliğine güvenebilirsiniz. ReaktifJS ayrıca gelir kullanıma hazır modern web uygulaması için gereken birçok özellik, Scoped CSS, Özel Bileşenler, SVG ve animasyon gibi.

RiotJS

RitoJS ile çalışmak hoş ve yeni başlayanlar için kütüphane öğrenmek çok daha kolay HTML öğesiyle özel bir bileşen tanımlamayı sağlar ve önceki kütüphaneler saf JavaScript sözdizimini kullanmaya zorlayacakken, HTML özellikleri.

RiotJS, Node.js ortamıyla veya tarayıcılarda uyumludur ve bir benzerlikler verilen Vue.js için büyük bir alternatif.

HyperHTML

hyperHTML, adından da anlaşılacağı gibi, DOM oluşturma ve işleme sırasında performans sağlar. Özel Öğe ve Web Bileşeni oluşturmak için kullanabilirsiniz. Tarayıcıda kullanılabileceği jQuery kadar kolay çalışır betiği CDN'den yüklemek ve hyperHTML'ye erişmek. Karmaşık gerek yok takım.

Mithril

Sesi kadar serin, Mithril bir güçlü JavaScript kütüphanesi. VirutalDOM ve Bileşenlerinin yanı sıra, Mithril ayrıca Yönlendirme ve XHR ile donatılmıştır. başka bir kütüphaneye güvenmeden tek sayfalık bir web uygulaması oluşturabilirsiniz. Benchmark, Vue.js, React.js ve Angular gibi bazı popüler kütüphaneleri geride bıraktığını gösteriyor.

SlimJS

SlimJS bir JavaScript kütüphanesidir yerel Web Bileşeni API'sini kullanarak özel web bileşeni oluşturmak. Yerel bir tarayıcı bileşeni çevreleyen SlimJS bir donanıma sahip polyfill API, henüz desteklemeyen tarayıcıda. Yerli yolu benimsemeyi tercih ederseniz, bu harika bir çerçevedir..

VSVG

HTML ile benzer bir sözdizimi olmasına rağmen, SVG kendi tuhaflıkları olan başka bir tür hayvandır. Bu kitaplık, adından da anlaşılacağı gibi, anında SVG oluşturmanıza ve değiştirmenize izin verir.

EmotionSH

DuyguSH VirtualDOM ile web sitesi oluştururken ihtiyaç duyabileceğiniz CSS-in-JS çerçevesi. Bu, yalnızca sitenizde gereken CSS bitlerini sağlamanıza olanak tanır ve stili dinamik olarak güncelle stil yalnızca uygulandığı Bileşene göre tanımlandığı için sınıf ismiyle ve özgüllüğü ile toplanmadan.

Başlangıç ​​Kitini Tepki

Web'i son birkaç yılda takip ediyorsanız, her yerde React (neredeyse) bulabilirsiniz. Bu bir React'i tanıtan 5 kısa-video kursu. Sektöre ayak uydurmak istiyorsanız, başlamak için doğru yer olabilir..

Elementler

Elements bir koleksiyonudur Sketch'de iOS uygulaması prototipi oluşturmak için iOS bileşenleri. İnsanlar tarafından Sketch ile oluşturuldu ve iPhone X UI ile güncellendi.

Modaal

Modaal akılda güvenilirliği ile inşa edilmiş bir JavaScript kütüphanesidir. Oldu için doğrulandı “WCAG 2.0 Seviye AA Desteği” en çok (sanırım) ulaşılabilir “kip” bugün kütüphane. Onun Hafif, jQuery uyumlu ve görüntüler, videolar ve hatta Instagram için kullanılabilir. Ayrıca, Google’dan gelen bu kısa kurs, Web Erişilebilirliğine başlamanıza ve bunun neden önemli olduğunu anlamanıza yardımcı olacaktır..

WordPressify

Bir WordPress geliştirme ortamı hazırlamanızı ve dakikalar içinde çalıştırmanızı sağlayan bir NPM paketi. Her şey ayarlandı Gulp, LiveReload, PostCSS, Babel gibi modern araçlar böylece projelendirmeyi ayarlamak yerine projenizi geliştirmeye odaklanabilirsiniz.

Lando

Lando aynı zamanda bir geliştirme ortamını hızlı ve kolay bir şekilde döndürmek için çok kullanışlı bir araçtır WordPressify az önce yukarıda bahsettiğimizi. Ancak Node.js yerine Docker'ın hafif bir konteynerizasyonun avantajı teknolojisi ve geliştirilmesinde kullanmak istediğiniz yığın açısından daha fazla esneklik sunar.

Örneğin, PHP sürümünü belirtin, XDebug’u etkinleştirin ve Composer’ı kurun.

WP-Docklines

WP-Docklines bir Sürekli Entegrasyon ve Teslimat gerçekleştirmek için temel olarak kullanabileceğiniz görüntülerin toplanması WordPress temalarınız için ve Bitbucket, CircleCI ve Gitlab gibi hizmetlerdeki eklentiler için. Her görüntü paketlenmiştir WordPress geliştirirken sıkça ihtiyaç duyulan araçları PHP Kod Sniffer, PHPUnit ve WP-CLI gibi.

WP-Locker

WP-Locker, bir WordPress geliştirme ortamını birkaç dakika içinde döndürmek için yapılandırmayı yapılandırıyor. Bu Apache, MySQL ve phpMyAdmin ile ayarlandı WP-Docklines resmini genişlettiğinden, resimdeki ilave araçları da kullanıma hazır hale getiriyor..

basitçe tip bin / başlangıç izin vermek için localhost ve eklentileri yükleyin ve yapılandırma dosyasında yapılandırdığınız temalar.

Docusaurus

Facebook'tan bir başka açık kaynaklı girişim, Docusaurus, projenize ait bir dokümantasyon web sitesi oluşturmak için bir araçtır. React ve Markdown ile oluşturulmuş olarak, dokümanları kolayca oluşturabilir, bakımını yapabilir ve hatta siteniz için bir blog oluşturabilir ve Github Pages’de yayınlayın.

VSCode Yo

Yeoman, projeyi hızla başlatabilmenizi sağlayan bir Düğüm Paketidir. projelerinize uygun önceden hazırlanmış iskele seçimi. Visual Studio Code kullanıyorsanız, bu eklenti başlangıçta iş akışını daha da kolaylaştıracak şekilde düzenleyecektir. koş “Yo” Visual Studio Kod penceresinden sağ komut.

BluebirdJS

Bu bir JavaScript kütüphanesi kullanmanızı sağlar Söz vermek, beklemek, zaman uyumsuz bugün tüm tarayıcılarda; Netscape'de bile çalıştığını söyledi. Söz vermek en yeni JavaScript özelliklerinde en güçlü noktalardan biridir. kodunuzu daha yalın, okunaklı ve kolayca bakım yapılabilir hale getirin.

Daha güzel

Prettier için bir araçtır Kodunuzu, dilin kodlama standardına uyması için biçimlendirin.. Size ve ekibinize izin veren kuralı izleyerek kodunuzu en baştan yazacaktır. kod yazma stilleri üzerinde tartışmak yerine daha üretken.