ユニークな、美しいWebビット

昨日アニメのドキュメンテーションを完成させたかったhamburger_icon 私の前のポストで使われるボタン.

からのモバイルWebアプリのレイアウト

{遺伝子}・ Jul 22 ' 18・ 2分読む

#showdev #webdev #javascript #zuix

頻繁に起こるように、物事を文書化することはそれらを改善するのを助けます、そして、これはいくつかの最後の瞬間変化を必要とします.そして、このケースでは、異なるバーガーアニメーションと色を選ぶために余分なオプションを加えることについてありました.結果は得られるhere .
でもちょっと待ってください.私は、グリッチの上で3つの例プロジェクトの全てで、そして、GitHubページの上で他の2、3のプロジェクトの上でこのHamburgerRoundアイコン・ボタンを使いました.

Does that mean I've to copy the new code all over the different projects that are using the hamburger_icon and publish all of them once again?

幸運にも、それらのプロジェクトのどれも採用されたビットのコピーを持っていなかったが、むしろ、それぞれの元の源への直接のリンクでなかったので、それはそうでありません.

ユニークビット

これはまた、我々が見ることができるものですHTML 前の記事の最後の例でヘッダバーを実装するために使用するコード

<header data-ui-include="//zuix-app-1.glitch.me/layout/header"></header>

インデックスからの“ビット”.Zuix - app - 3でホストされるHTML.グリッチ.ミー
The data-ui-include="//zuix-app-1.glitch.me/layout/header" はlayout/header 最初の例をホストしているサーバから直接フェッチされ、これらの2つのファイルから構成されます.

https://zuix-app-1.glitch.me/layout/header.html

https://zuix-app-1.glitch.me/layout/header.css

しかし、我々が見るときheader.html ご覧ください

<div class="logo">
    <a href="/">app-logo</a>
</div>
<div data-ui-load="@lib/components/hamburger_icon"
     data-ui-options="options.menuButton"
     class="menu-button"></div>

どこdata-ui-load="@lib/components/hamburger_icon" は、ヘッダがロードされることを意味しますcomponents/hamburger_icon から@lib (これはzKit コンポーネントコレクションサーバー.
So zuix-app-3 を含むlayout/header からzuix-app-1 ホストとそれもロードしますzuixjs.github.io/zkit .
これはlayout/header ホスト上で変更されるzuix-app-1 これは自動的に両方の更新されますzuix-app-2 and zuix-app-3 , しかし、それはcomponents/hamburger_icon はZuixjsに更新されます.ギタブ.IO/ZKitは、シームレスに、即座にすべての例グリッチでホストされて更新されます!

したがって、コンポーネントへのユニークな参照を使用すると、生産性と創造性の両方が、同じサーバー上または別のものの束の上にホストされている場合の両方の明らかな利点があります.

可愛いけど...

問題なしでこの仕事をするために、分散コンポーネントが更新されるときはいつでも、我々は100 %の下位互換性を保証しなければなりません.これが可能でないならば、新しい経路は更新された構成要素に割り当てられなければなりません.
また、不確実な信頼性の複数のホストからのリソースをダウンロードすることは特にネットワーク問題の存在においてパフォーマンスを妥協することができると考える必要があります.それは既にCDNの使用によって教えられた古いレッスンです.
したがって、パフォーマンスがあなたのアプリケーションに対する本当の関心であるとき、異なる戦略は採用されることができます、そして、これは採用された資源の全てをダウンロードして、それらを一つのローカルファイルに詰めることから成ります.
しかし、あなたが始める前に、私はビルドシステム、パッケージマネージャ、ウェブパッカーズなどについて話をするつもりです.
まあ、それはオプションにもなりますが、もし私たちがまだこれらのビルドツールに対処する必要がない場合は、単にZuixを使用します.私たちはブラウザのコンソールに直接アプリケーションバンドルを生成することができます.

それはブラウザのバンドル(またはクライアント側のバンドル)で私が呼ぶものです、しかし、私は後でこれについて書きます.
次を読む

ViewPagerをWebアプリケーションに追加する

{遺伝子}・ Jul 28 ' 18・ 2分読む

#showdev #webdev #javascript #zuix