Webデザイナーおよび開発者向けのフレッシュリソース（2018年1月）

2018年の新年はここにあります。 5年前のWeb開発の進歩を見てみると、今日のものとはまったく違います。今日は新しい 方法、ツール、そしてまったく新しいパラダイムさえも それは私たちが今日ウェブサイトを構築する方法を変えます - そしてVirtualDOMはそれらの一つです.

DOM（Document Object Model）は Webサイトの構造を定義するツリーモデル. DOMを選択し、トラバースし、そして操作することは、非常に高価な操作になるかもしれません。 あなたのサイトのレンダリングパフォーマンスを妨げる.

ただし、この記事ではVirtualDOMがどのように機能するのかについては説明しません。代わりに、他のツールと合わせて検討します。 VirtualDOMを実装できるようにするライブラリ 直ちに。チェックしてみましょう.

MaquetteJS

あ VirtualDOMの実装 それはあなたがそれの周りのデータで更新され続ける流動的なユーザーインターフェースを構築することを可能にします。純粋なJavaScriptです 無人の それゆえ、ライブラリ CoffeeScript、TypeScript、JSXなどの合成言語と一緒に使用する. React.jsに代わる素晴らしいライブラリ。 MaquetteJSはサイズがずっと小さいです（のみ 3キロバイト）同等に.

ReDOM

これは私のお気に入りのVirtualDOMライブラリの1つです。構文を見るだけで簡単に取得できるためです。. わずか2Kbと, 高速レンダリングWebページまたはカスタムHTMLコンポーネントを作成できます。ライブラリは 2つの主要機能 エル, 要素を作成または操作する, そして マウント 選択した要素に追加します。 NodeJSを使ってブラウザやサーバーサイドにロードすることができます。.

ReactiveJS

テンプレート 高度にインタラクティブなWebアプリケーションを構築するためのUIライブラリ. もともとTheGuardianのために建てられた、ReactiveJSはブラウザとモバイル機器の向こう側に働くように造られます。だからあなたはその信頼性に依存することができます。 ReactiveJSも付属しています 最新のWebアプリケーションに必要な多くの機能, スコープCSS、カスタムコンポーネント、SVG、アニメーションなど.

RiotJS

RitoJSは、初心者のためのライブラリで、それを使うのが楽しいですし、学ぶのがずっと簡単です。 HTML要素でカスタムコンポーネントを定義することを許可します 以前のライブラリは純粋なJavaScriptシンタックスを使わざるを得ないでしょう.

RiotJSはNode.js環境またはブラウザと互換性があります。 類似点を考えると、Vue.jsに代わる優れた選択肢.

HyperHTML

hyperHTML, 名前が示すように, DOMのレンダリングおよび操作時のパフォーマンスが向上. これを使用してカスタム要素とWebコンポーネントを作成できます。ブラウザで使用できるjQueryと同じくらい簡単に動作します。 CDNからスクリプトをロードしてhyperHTMLにアクセスする. 複雑な必要なし ツーリング.

ミスリル

それが聞こえるようにクールな、ミスリルは 強力なJavaScriptライブラリ. VirutalDOMとコンポーネントの他に、MithrilはルーティングとXHRも備えています。 他のライブラリに頼らずに単一ページのWebアプリケーションを構築できます。. ベンチマークは、Vue.js、React.js、Angularなどの一般的なライブラリよりも優れていることを示しています。.

SlimJS

SlimJSはJavaScriptライブラリです。 ネイティブWebコンポーネントAPIを使用してカスタムWebコンポーネントを構築する. SlimJSはネイティブのブラウザコンポーネントを取り巻くように構築されているので、 ポリフィル まだそれをサポートしていないブラウザでAPIをシム. あなたがネイティブの方法を採用したい場合、それは素晴らしいフレームワークです。.

VSVG

それはHTMLに似た構文を持っていますが、SVGはそれ自身の癖を持った別の種類の獣です。このライブラリは、その名のとおり、 あなたがその場でSVGを作成して操作することを可能にします.

エモーションSH

EmotionSHは VirtualDOMでWebサイトを構築するときに必要になる可能性があるCSS-in-JSフレームワーク. これはあなたがあなたのサイトに必要なCSSのほんの少しだけを届けることを可能にします、そしてあなたはそうすることができます スタイルを動的に更新する スタイルはそれが適用されるコンポーネントのみに限定されるため、クラスの命名と特殊性に惑わされることはありません。.

リアクトスターターキット

過去2、3年の間にWebをフォローしてきた人は、Reactを（ほとんど）どこでも見つけることができます。これは Reactを紹介する5つのショートビデオコース. あなたが業界に遅れずについていきたいのなら、これらは始めるのに適した場所かもしれません。.

要素

要素はのコレクションです SketchでiOSアプリのプロトタイプを作成するためのiOSコンポーネント. Sketchによって人々によって構築され、iPhone X UIで更新されました.

モーダル

Modaalはアクセシビリティを念頭に置いて構築されたJavaScriptライブラリです。それはありました の確認済み “WCAG 2.0レベルAAサポート” それが（私は思う） アクセス可能 “モーダル” 今日の図書館それは 軽量、jQuery互換、画像、ビデオ、さらにはInstagramにも使用可能. さらに、このGoogleからの短いコースは、Web Accessibilityの使用を開始するのに役立ちます。なぜそれが重要なのでしょうか。.

WordPressify

あなたが数分でWordPress開発環境を稼働させることを可能にするNPMパッケージ。それはすべてで設定されています Gulp、LiveReload、PostCSS、Babelなどの最新のツール そのため、チューニング設定ではなくプロジェクトの開発に集中できます。.

ランドー

Landoは開発環境を素早く簡単に立ち上げるのに便利なツールでもあります。 WordPressify 先ほど述べたとおりです。 Node.jsの代わりに、それはかかります Dockerの利点軽量コンテナー化 あなたの開発に使用したいスタックに関して、テクノロジーとそれはより高い柔軟性を提供します。.

たとえば、 PHPのバージョンを指定し、XDebugを有効にして、Composerをインストールします。.

WPドックライン

WP-Docklinesは 継続的インテグレーションとデリバリーを実行するためのベースラインとして使用できる画像のコレクション あなたのWordPressテーマとBitbucket、CircleCI、そしてGitlabのようなサービスのプラグインのために。各画像は同梱されています WordPressを開発するときに一般的に必要なツール PHP Code Sniffer、PHPUnit、WP-CLIなど.

WPロッカー

WP-Lockerは、わずか数分でWordPress開発環境を起動するためのDocker Compose構成です。それは Apache、MySQL、phpMyAdminでセットアップ そしてそれはWP-Docklines画像を拡張するので、それはまた箱から出してすぐに画像に追加のツールを実行します.

単に タイプ ビン/開始 それを可能にするには、 ローカルホスト プラグイン と設定ファイルで設定したテーマ.

フォーカスサウルス

Facebookからのもう一つのオープンソースイニシアチブ, DocusaurusはあなたのプロジェクトのドキュメンテーションWebサイトを作成するためのツールです。. ReactとMarkdownを使用して構築されているため、ドキュメントを簡単に作成し、保守し、さらには自分のサイト用のブログを作成することもできます。 Github Pagesに公開する.

VコードYo

Yeomanはあなたが素早くプロジェクトを立ち上げることを可能にするNode Packageです。 あなたのプロジェクトに合った既製の足場を選択する. Visual Studio Codeを使用している場合は、このプラグインを使用すると、起動ワークフローがさらに効率化されます。 実行します “よ” Visual Studioのコードウィンドウから直接コマンドを実行する.

BluebirdJS

JavaScriptライブラリ あなたが使用することができます 約束する, 待つ, 非同期 今日はすべてのブラウザで; Netscapeでも動作する. 約束する 最新のJavaScript仕様で最も強力な点の1つです。 コードを細かくし、読みやすく、そして簡単に保守できるようにする.

きれいな

きれいにするためのツールです。 言語のコーディング標準に準拠するようにコードをフォーマットする. それはあなたとあなたのチームになることを可能にする規則に従ってスクラッチからあなたのコードを書き換えます コードの書き方について議論する代わりに、より生産的.