MarkoJSの最初の観察
19366 ワード
As some of you may know I recently joined the Marko team, but I've been working on a future version and haven't actually got to dig into the current. So join me as I learn about how Marko works.
今日、我々は簡単なアプリケーションを使用して構築を見ているMarkoJS . 何MarkoJS お願いします.JavaScriptのUIフレームワークは、eBayのサーバー側のレンダリングに熱心なフォーカスで2013年に開発された.eBayで構築されている以上、eBayの大部分はその上に構築されています.
あなたが共有会社にいる前にそれを聞いていない場合.より大きな技術会社によって建てられても、Markoは露出を決してしなかったか、反応または角度のような図書館と同じ強打を運びました.
マルコは独自の遺産を持っており、非常に明らかにVueやSvelteのようなライブラリにインスピレーションを与えている.しかし、最も驚くべきことは、それがまだ最初の30年後に最高である最初から最善を尽くしたことです.好きなものautomatic partial hydration , streaming while you load/render , そしてfastest JS Framework server rendering .
始める
ウェブサイトに行くhttps://markojs.com/ 私はすぐにマルコはVueとsvelte *と同様の単一のファイルコンポーネントを使用して見ることができます.私が気がつく第2のものは、構文が少し珍しいです.
<div.count>
${state.count}
</div>
<button.example-button on-click("increment")>
Click me!
</button>
HTMLのように見えますが、タグには特別な構文が追加されています.マルコはマークアップベースの言語としてそれ自体を見ます.HTMLのスーパーセット.これは「ただのJavaScript」のantithesisのようです.
Markoがジェイド、ハンドルバーまたはEJSのようなサーバー側のテンプレート言語にそのルーツを持っているので、それは意味をなします.そして、それは非常にそのデザインに影響を与えて、また、SSRレンダリング性能の面で達する高いバーとして役立った.
*Note: Marko does support splitting a component across multiple files if desired: https://markojs.com/docs/class-components/#multi-file-components
最初のサンプルアプリを試して
では、マルコCLIを試してみましょう.Markoで始めることができます.
npx @marko/create
プロジェクトの名前を求める短い対話型CLIがあります.デフォルトのテンプレートを選びましょう.
これは、すでに構築された基本フォルダ構造を持つテンプレートを作成します.それはAとかなり標準的なセットアップのように見えますsrc ディレクトリcomponents and pages ディレクトリ.vscodeで起動します.
プロジェクトの調査
まず第一に気がつくということはindex.js . エントリポイントはありません.マルコは念頭に置いて複数ページのアプリで構築されて表示されます.あなただけのページを作るPages ディレクトリとそれはあなたのルートです.
があるindex.marko 着陸ページとして機能します.
<app-layout title="Welcome to Marko">
<mouse-mask.container>
<header>
<img.logo src="./logo.svg" alt="Marko"/>
</header>
<main>
<p>Edit <code>./pages/index.marko</code> and save to reload.</p>
<a href="https://markojs.com/docs/">
Learn Marko
</a>
</main>
</mouse-mask>
</app-layout>
style {
.container {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size:2em;
color: #fff;
background: #111;
height:100%;
width:100%;
}
img.logo {
width:400px;
}
}
このページにはマークアップブロックとスタイルブロックがあります.マークアップは、ロゴとドキュメントサイトのリンクと思われるページのコンテンツをラップするレイアウトコンポーネントから始まります.
実際に我々のトップレベルのHTML構造を参照してください.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A basic Marko app.">
<title>${input.title}</title>
</head>
<body>
<${input.renderBody}/>
</body>
</html>
style {
html, body {
font-family: system-ui;
padding: 0;
margin: 0;
}
code {
color: #fc0;
}
a {
color: #09c;
}
}
したがって、パターンは各ページのエントリポイントであり、共通のレイアウトとコントロールを作成するためにそれらの間のコンポーネントを共有することができます.input はprops を返します.And input.renderBody の代わりに見えるprops.children . あなたが考えることができる微妙な違いがありますrenderBody '関数呼び出しとしてsを返します.テンプレートのその部分が実行されるまで、子は作成されません.
最後のコンポーネントマウスマスクは、我々のロゴの上に面白い視覚効果をつくるために、マウス入力のいくらかの操作をします.しかし、その瞬間に焦点を合わせるつもりはない.例を挙げましょう.
例の実行
Markoのdevサーバを起動して起動できます.
npm run dev
これは自動的に時計モードで構築し、ポート3000以上のファイルを提供開始します.ブラウザでロードすると、視覚的な効果を見ることができるページの上にマウスを動かすので、見ることができます.
また、ビルドを試してビルドすることができますnpm run buildを使用してnpm start . Chrome Inspectorでのクイックビューは、この簡単な例が15.2 KBであることを示しています.チャンクを見て、Markoが13 KBの重さであると言うのは公平です.
最小のライブラリではなく、Inferno、またはMitthrilに匹敵し、最も人気のあるライブラリのいずれかの下に来る.
自分で作る
それで結構です.しかし、私はこれから私自身のサイトを作りたいです.それで、私はapp-layout コンポーネントとマルコテンプレートを空にします.
私はCSSの専門家ではありませんが、私は人気の開発者のブログのデザインに触発された個人的なブログのためのクイックディレクトリを一緒に投げることができると考えた
この運動のために、私はちょうどindex.marko ファイル.また、日付を正しくフォーマットする機能も含まれています.
static const POSTS = [
{
title: "Making Sense of the JS Framework Benchmark",
caption: "A closer look at the best benchmark for JS Frameworks",
link: "https://dev.to/ryansolid/making-sense-of-the-js-framework-benchmark-25hl",
date: "10/29/2020",
duration: 9
},
{
title: "Why I'm not a fan of Single File Components",
caption: "Articial boundaries create artificial overhead",
link: "https://dev.to/ryansolid/why-i-m-not-a-fan-of-single-file-components-3bfl",
date: "09/20/2020",
duration: 6
},
{
title: "Where UI Libraries are Heading",
caption: "Client? Server? The future is hybrid",
link: "https://dev.to/ryansolid/where-web-ui-libraries-are-heading-4pcm",
date: "05/20/2020",
duration: 8
},
{
title: "Maybe Web Components are not the Future",
caption: "Sometimes a DOM element is just a DOM element",
link: "https://dev.to/ryansolid/maybe-web-components-are-not-the-future-hfh",
date: "03/26/2020",
duration: 4
},
]
static function formatDate(date) {
const d = new Date(date);
return d.toLocaleDateString("en-US", {
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
単語の使用に注意してくださいstatic これはマルコのコンパイラにファイルをロードするときに一度実行するように指示し、テンプレートのインスタンスの外側に存在します.
そこから私はこのデータをレンダリングするいくつかのマークアップを追加しました.ほとんどはHTMLです.興味深いことに、Markoは属性割り当てのデリミタを必要としません.ない{ } など.
<app-layout title="Solidarity.io">
<main class="container">
<h1>Solidarity</h1>
<aside class="intro-header">
<img class="avatar" alt="avatar" src="https://pbs.twimg.com/profile_images/1200928608295849984/1A6owPq-_400x400.jpg">
A personal blog by
<a href="https://twitter.com/RyanCarniato" target="_blank">Ryan Carniato</a>
</aside>
<ul class="blog-list">
<for|post| of=POSTS>
<li class="blog-list-item">
<h3>
<a href=post.link target="_blank">${post.title}</a>
</h3>
<small>
${formatDate(post.date)} •
<for|coffee| from=0 to=(post.duration/5)>
☕️
</for>
${post.duration} minute read
</small>
<p>${post.caption}</p>
</li>
</for>
</ul>
</main>
</app-layout>
style {
.container {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
background: #333;
height:100%;
width:100%;
min-height: 100vh;
}
.avatar {
width: 50px;
border-radius: 50%;
}
.blog-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.blog-list-item h3 {
font-size: 1rem;
margin-top: 3.5rem;
margin-bottom: 0.5rem;
}
.blog-list-item a {
color: light-blue;
text-decoration: none;
font-size: 2em;
font-weight: 800
}
}
この例のキーは<for> コンポーネント.私は両方のポストのリストを繰り返して、私のコーヒーカップ(1時間あたり5分あたり)を表示する範囲を反復するために使用します.
これは間違いなく最大の構文の違いです.
<for|post| of=POSTS>
<a href=post.link>${post.title}</a>
</for>
これは何ですか?よく、パイプは何かMarko呼び出しですTag Parameters . これは基本的にレンダリング小道具の等価を行う方法です.これが反応コンポーネントであるならば、我々は書きます:
<For of={POSTS}>{
(post) => <a href={post.link}>{post.title}</a>
}</For>
そしてそれです.最後の結果は、我々のシンプルなブログのランディングページがあります.ちょうどそれが見える方法を見るために、私は生産を構築して、それを走らせました.万事うまくいく.しかし、私は、最も顕著なものがJS束サイズであると思います.
ない
正しく、クライアントにJavaScriptを必要とするものは何もしなかったので、Markoランタイムまたは任意のバンドルされたJSをクライアントに出荷する必要はありませんでした.マルコは、あなたが必要とするJavaScriptを出荷するだけの手動干渉でゲートから最適化されています.
結論
よく、これは深いことを意味しませんでした.ランニングへの最初の一見MarkoJS .
私は、それが確かに使用するために構文を持っていると言います.私は、タグベースのUI言語については、JavaScriptライブラリで見つけるのと同じ機能の多くを持って興味深いことだと思う.HOCS(高位コンポーネント)のようなパターンとレンダリングの小道具はここで完全に適用できるようです.
経験は、他の現代のJavaScriptフレームワークの開発に非常に似ていました.私は2番目のことを忘れました.サーバー指向であり、デフォルトではJavaScriptをブラウザに出荷することができました.JavaScriptが送られなかったので、これが完全に静的だったので、我々のケースで.
私は心の向きでクライアント側ですので、これは間違いなく私のための出発だった.Javascriptのデフォルトではサイトの全体のカテゴリの可能性の新しい世界です.
次回も探検し続けてくださいMarkoJS そして、すべての強力な機能を明らかにする.
Reference
この問題について(MarkoJSの最初の観察), 我々は、より多くの情報をここで見つけました
https://dev.to/ryansolid/a-first-look-at-markojs-3h78
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<div.count>
${state.count}
</div>
<button.example-button on-click("increment")>
Click me!
</button>
*Note: Marko does support splitting a component across multiple files if desired: https://markojs.com/docs/class-components/#multi-file-components
では、マルコCLIを試してみましょう.Markoで始めることができます.
npx @marko/create
これは、すでに構築された基本フォルダ構造を持つテンプレートを作成します.それはAとかなり標準的なセットアップのように見えます
src ディレクトリcomponents and pages ディレクトリ.vscodeで起動します. プロジェクトの調査
まず第一に気がつくということはindex.js . エントリポイントはありません.マルコは念頭に置いて複数ページのアプリで構築されて表示されます.あなただけのページを作るPages ディレクトリとそれはあなたのルートです.
があるindex.marko 着陸ページとして機能します.
<app-layout title="Welcome to Marko">
<mouse-mask.container>
<header>
<img.logo src="./logo.svg" alt="Marko"/>
</header>
<main>
<p>Edit <code>./pages/index.marko</code> and save to reload.</p>
<a href="https://markojs.com/docs/">
Learn Marko
</a>
</main>
</mouse-mask>
</app-layout>
style {
.container {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size:2em;
color: #fff;
background: #111;
height:100%;
width:100%;
}
img.logo {
width:400px;
}
}
このページにはマークアップブロックとスタイルブロックがあります.マークアップは、ロゴとドキュメントサイトのリンクと思われるページのコンテンツをラップするレイアウトコンポーネントから始まります.
実際に我々のトップレベルのHTML構造を参照してください.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A basic Marko app.">
<title>${input.title}</title>
</head>
<body>
<${input.renderBody}/>
</body>
</html>
style {
html, body {
font-family: system-ui;
padding: 0;
margin: 0;
}
code {
color: #fc0;
}
a {
color: #09c;
}
}
したがって、パターンは各ページのエントリポイントであり、共通のレイアウトとコントロールを作成するためにそれらの間のコンポーネントを共有することができます.input はprops を返します.And input.renderBody の代わりに見えるprops.children . あなたが考えることができる微妙な違いがありますrenderBody '関数呼び出しとしてsを返します.テンプレートのその部分が実行されるまで、子は作成されません.
最後のコンポーネントマウスマスクは、我々のロゴの上に面白い視覚効果をつくるために、マウス入力のいくらかの操作をします.しかし、その瞬間に焦点を合わせるつもりはない.例を挙げましょう.
例の実行
Markoのdevサーバを起動して起動できます.
npm run dev
これは自動的に時計モードで構築し、ポート3000以上のファイルを提供開始します.ブラウザでロードすると、視覚的な効果を見ることができるページの上にマウスを動かすので、見ることができます.
また、ビルドを試してビルドすることができますnpm run buildを使用してnpm start . Chrome Inspectorでのクイックビューは、この簡単な例が15.2 KBであることを示しています.チャンクを見て、Markoが13 KBの重さであると言うのは公平です.
最小のライブラリではなく、Inferno、またはMitthrilに匹敵し、最も人気のあるライブラリのいずれかの下に来る.
自分で作る
それで結構です.しかし、私はこれから私自身のサイトを作りたいです.それで、私はapp-layout コンポーネントとマルコテンプレートを空にします.
私はCSSの専門家ではありませんが、私は人気の開発者のブログのデザインに触発された個人的なブログのためのクイックディレクトリを一緒に投げることができると考えた
この運動のために、私はちょうどindex.marko ファイル.また、日付を正しくフォーマットする機能も含まれています.
static const POSTS = [
{
title: "Making Sense of the JS Framework Benchmark",
caption: "A closer look at the best benchmark for JS Frameworks",
link: "https://dev.to/ryansolid/making-sense-of-the-js-framework-benchmark-25hl",
date: "10/29/2020",
duration: 9
},
{
title: "Why I'm not a fan of Single File Components",
caption: "Articial boundaries create artificial overhead",
link: "https://dev.to/ryansolid/why-i-m-not-a-fan-of-single-file-components-3bfl",
date: "09/20/2020",
duration: 6
},
{
title: "Where UI Libraries are Heading",
caption: "Client? Server? The future is hybrid",
link: "https://dev.to/ryansolid/where-web-ui-libraries-are-heading-4pcm",
date: "05/20/2020",
duration: 8
},
{
title: "Maybe Web Components are not the Future",
caption: "Sometimes a DOM element is just a DOM element",
link: "https://dev.to/ryansolid/maybe-web-components-are-not-the-future-hfh",
date: "03/26/2020",
duration: 4
},
]
static function formatDate(date) {
const d = new Date(date);
return d.toLocaleDateString("en-US", {
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
単語の使用に注意してくださいstatic これはマルコのコンパイラにファイルをロードするときに一度実行するように指示し、テンプレートのインスタンスの外側に存在します.
そこから私はこのデータをレンダリングするいくつかのマークアップを追加しました.ほとんどはHTMLです.興味深いことに、Markoは属性割り当てのデリミタを必要としません.ない{ } など.
<app-layout title="Solidarity.io">
<main class="container">
<h1>Solidarity</h1>
<aside class="intro-header">
<img class="avatar" alt="avatar" src="https://pbs.twimg.com/profile_images/1200928608295849984/1A6owPq-_400x400.jpg">
A personal blog by
<a href="https://twitter.com/RyanCarniato" target="_blank">Ryan Carniato</a>
</aside>
<ul class="blog-list">
<for|post| of=POSTS>
<li class="blog-list-item">
<h3>
<a href=post.link target="_blank">${post.title}</a>
</h3>
<small>
${formatDate(post.date)} •
<for|coffee| from=0 to=(post.duration/5)>
☕️
</for>
${post.duration} minute read
</small>
<p>${post.caption}</p>
</li>
</for>
</ul>
</main>
</app-layout>
style {
.container {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
background: #333;
height:100%;
width:100%;
min-height: 100vh;
}
.avatar {
width: 50px;
border-radius: 50%;
}
.blog-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.blog-list-item h3 {
font-size: 1rem;
margin-top: 3.5rem;
margin-bottom: 0.5rem;
}
.blog-list-item a {
color: light-blue;
text-decoration: none;
font-size: 2em;
font-weight: 800
}
}
この例のキーは<for> コンポーネント.私は両方のポストのリストを繰り返して、私のコーヒーカップ(1時間あたり5分あたり)を表示する範囲を反復するために使用します.
これは間違いなく最大の構文の違いです.
<for|post| of=POSTS>
<a href=post.link>${post.title}</a>
</for>
これは何ですか?よく、パイプは何かMarko呼び出しですTag Parameters . これは基本的にレンダリング小道具の等価を行う方法です.これが反応コンポーネントであるならば、我々は書きます:
<For of={POSTS}>{
(post) => <a href={post.link}>{post.title}</a>
}</For>
そしてそれです.最後の結果は、我々のシンプルなブログのランディングページがあります.ちょうどそれが見える方法を見るために、私は生産を構築して、それを走らせました.万事うまくいく.しかし、私は、最も顕著なものがJS束サイズであると思います.
ない
正しく、クライアントにJavaScriptを必要とするものは何もしなかったので、Markoランタイムまたは任意のバンドルされたJSをクライアントに出荷する必要はありませんでした.マルコは、あなたが必要とするJavaScriptを出荷するだけの手動干渉でゲートから最適化されています.
結論
よく、これは深いことを意味しませんでした.ランニングへの最初の一見MarkoJS .
私は、それが確かに使用するために構文を持っていると言います.私は、タグベースのUI言語については、JavaScriptライブラリで見つけるのと同じ機能の多くを持って興味深いことだと思う.HOCS(高位コンポーネント)のようなパターンとレンダリングの小道具はここで完全に適用できるようです.
経験は、他の現代のJavaScriptフレームワークの開発に非常に似ていました.私は2番目のことを忘れました.サーバー指向であり、デフォルトではJavaScriptをブラウザに出荷することができました.JavaScriptが送られなかったので、これが完全に静的だったので、我々のケースで.
私は心の向きでクライアント側ですので、これは間違いなく私のための出発だった.Javascriptのデフォルトではサイトの全体のカテゴリの可能性の新しい世界です.
次回も探検し続けてくださいMarkoJS そして、すべての強力な機能を明らかにする.
Reference
この問題について(MarkoJSの最初の観察), 我々は、より多くの情報をここで見つけました
https://dev.to/ryansolid/a-first-look-at-markojs-3h78
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<app-layout title="Welcome to Marko">
<mouse-mask.container>
<header>
<img.logo src="./logo.svg" alt="Marko"/>
</header>
<main>
<p>Edit <code>./pages/index.marko</code> and save to reload.</p>
<a href="https://markojs.com/docs/">
Learn Marko
</a>
</main>
</mouse-mask>
</app-layout>
style {
.container {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size:2em;
color: #fff;
background: #111;
height:100%;
width:100%;
}
img.logo {
width:400px;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A basic Marko app.">
<title>${input.title}</title>
</head>
<body>
<${input.renderBody}/>
</body>
</html>
style {
html, body {
font-family: system-ui;
padding: 0;
margin: 0;
}
code {
color: #fc0;
}
a {
color: #09c;
}
}
Markoのdevサーバを起動して起動できます.
npm run dev
また、ビルドを試してビルドすることができます
npm run buildを使用してnpm start . Chrome Inspectorでのクイックビューは、この簡単な例が15.2 KBであることを示しています.チャンクを見て、Markoが13 KBの重さであると言うのは公平です.最小のライブラリではなく、Inferno、またはMitthrilに匹敵し、最も人気のあるライブラリのいずれかの下に来る.
自分で作る
それで結構です.しかし、私はこれから私自身のサイトを作りたいです.それで、私はapp-layout コンポーネントとマルコテンプレートを空にします.
私はCSSの専門家ではありませんが、私は人気の開発者のブログのデザインに触発された個人的なブログのためのクイックディレクトリを一緒に投げることができると考えた
この運動のために、私はちょうどindex.marko ファイル.また、日付を正しくフォーマットする機能も含まれています.
static const POSTS = [
{
title: "Making Sense of the JS Framework Benchmark",
caption: "A closer look at the best benchmark for JS Frameworks",
link: "https://dev.to/ryansolid/making-sense-of-the-js-framework-benchmark-25hl",
date: "10/29/2020",
duration: 9
},
{
title: "Why I'm not a fan of Single File Components",
caption: "Articial boundaries create artificial overhead",
link: "https://dev.to/ryansolid/why-i-m-not-a-fan-of-single-file-components-3bfl",
date: "09/20/2020",
duration: 6
},
{
title: "Where UI Libraries are Heading",
caption: "Client? Server? The future is hybrid",
link: "https://dev.to/ryansolid/where-web-ui-libraries-are-heading-4pcm",
date: "05/20/2020",
duration: 8
},
{
title: "Maybe Web Components are not the Future",
caption: "Sometimes a DOM element is just a DOM element",
link: "https://dev.to/ryansolid/maybe-web-components-are-not-the-future-hfh",
date: "03/26/2020",
duration: 4
},
]
static function formatDate(date) {
const d = new Date(date);
return d.toLocaleDateString("en-US", {
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
単語の使用に注意してくださいstatic これはマルコのコンパイラにファイルをロードするときに一度実行するように指示し、テンプレートのインスタンスの外側に存在します.
そこから私はこのデータをレンダリングするいくつかのマークアップを追加しました.ほとんどはHTMLです.興味深いことに、Markoは属性割り当てのデリミタを必要としません.ない{ } など.
<app-layout title="Solidarity.io">
<main class="container">
<h1>Solidarity</h1>
<aside class="intro-header">
<img class="avatar" alt="avatar" src="https://pbs.twimg.com/profile_images/1200928608295849984/1A6owPq-_400x400.jpg">
A personal blog by
<a href="https://twitter.com/RyanCarniato" target="_blank">Ryan Carniato</a>
</aside>
<ul class="blog-list">
<for|post| of=POSTS>
<li class="blog-list-item">
<h3>
<a href=post.link target="_blank">${post.title}</a>
</h3>
<small>
${formatDate(post.date)} •
<for|coffee| from=0 to=(post.duration/5)>
☕️
</for>
${post.duration} minute read
</small>
<p>${post.caption}</p>
</li>
</for>
</ul>
</main>
</app-layout>
style {
.container {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
background: #333;
height:100%;
width:100%;
min-height: 100vh;
}
.avatar {
width: 50px;
border-radius: 50%;
}
.blog-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.blog-list-item h3 {
font-size: 1rem;
margin-top: 3.5rem;
margin-bottom: 0.5rem;
}
.blog-list-item a {
color: light-blue;
text-decoration: none;
font-size: 2em;
font-weight: 800
}
}
この例のキーは<for> コンポーネント.私は両方のポストのリストを繰り返して、私のコーヒーカップ(1時間あたり5分あたり)を表示する範囲を反復するために使用します.
これは間違いなく最大の構文の違いです.
<for|post| of=POSTS>
<a href=post.link>${post.title}</a>
</for>
これは何ですか?よく、パイプは何かMarko呼び出しですTag Parameters . これは基本的にレンダリング小道具の等価を行う方法です.これが反応コンポーネントであるならば、我々は書きます:
<For of={POSTS}>{
(post) => <a href={post.link}>{post.title}</a>
}</For>
そしてそれです.最後の結果は、我々のシンプルなブログのランディングページがあります.ちょうどそれが見える方法を見るために、私は生産を構築して、それを走らせました.万事うまくいく.しかし、私は、最も顕著なものがJS束サイズであると思います.
ない
正しく、クライアントにJavaScriptを必要とするものは何もしなかったので、Markoランタイムまたは任意のバンドルされたJSをクライアントに出荷する必要はありませんでした.マルコは、あなたが必要とするJavaScriptを出荷するだけの手動干渉でゲートから最適化されています.
結論
よく、これは深いことを意味しませんでした.ランニングへの最初の一見MarkoJS .
私は、それが確かに使用するために構文を持っていると言います.私は、タグベースのUI言語については、JavaScriptライブラリで見つけるのと同じ機能の多くを持って興味深いことだと思う.HOCS(高位コンポーネント)のようなパターンとレンダリングの小道具はここで完全に適用できるようです.
経験は、他の現代のJavaScriptフレームワークの開発に非常に似ていました.私は2番目のことを忘れました.サーバー指向であり、デフォルトではJavaScriptをブラウザに出荷することができました.JavaScriptが送られなかったので、これが完全に静的だったので、我々のケースで.
私は心の向きでクライアント側ですので、これは間違いなく私のための出発だった.Javascriptのデフォルトではサイトの全体のカテゴリの可能性の新しい世界です.
次回も探検し続けてくださいMarkoJS そして、すべての強力な機能を明らかにする.
Reference
この問題について(MarkoJSの最初の観察), 我々は、より多くの情報をここで見つけました
https://dev.to/ryansolid/a-first-look-at-markojs-3h78
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
static const POSTS = [
{
title: "Making Sense of the JS Framework Benchmark",
caption: "A closer look at the best benchmark for JS Frameworks",
link: "https://dev.to/ryansolid/making-sense-of-the-js-framework-benchmark-25hl",
date: "10/29/2020",
duration: 9
},
{
title: "Why I'm not a fan of Single File Components",
caption: "Articial boundaries create artificial overhead",
link: "https://dev.to/ryansolid/why-i-m-not-a-fan-of-single-file-components-3bfl",
date: "09/20/2020",
duration: 6
},
{
title: "Where UI Libraries are Heading",
caption: "Client? Server? The future is hybrid",
link: "https://dev.to/ryansolid/where-web-ui-libraries-are-heading-4pcm",
date: "05/20/2020",
duration: 8
},
{
title: "Maybe Web Components are not the Future",
caption: "Sometimes a DOM element is just a DOM element",
link: "https://dev.to/ryansolid/maybe-web-components-are-not-the-future-hfh",
date: "03/26/2020",
duration: 4
},
]
static function formatDate(date) {
const d = new Date(date);
return d.toLocaleDateString("en-US", {
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
<app-layout title="Solidarity.io">
<main class="container">
<h1>Solidarity</h1>
<aside class="intro-header">
<img class="avatar" alt="avatar" src="https://pbs.twimg.com/profile_images/1200928608295849984/1A6owPq-_400x400.jpg">
A personal blog by
<a href="https://twitter.com/RyanCarniato" target="_blank">Ryan Carniato</a>
</aside>
<ul class="blog-list">
<for|post| of=POSTS>
<li class="blog-list-item">
<h3>
<a href=post.link target="_blank">${post.title}</a>
</h3>
<small>
${formatDate(post.date)} •
<for|coffee| from=0 to=(post.duration/5)>
☕️
</for>
${post.duration} minute read
</small>
<p>${post.caption}</p>
</li>
</for>
</ul>
</main>
</app-layout>
style {
.container {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
background: #333;
height:100%;
width:100%;
min-height: 100vh;
}
.avatar {
width: 50px;
border-radius: 50%;
}
.blog-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.blog-list-item h3 {
font-size: 1rem;
margin-top: 3.5rem;
margin-bottom: 0.5rem;
}
.blog-list-item a {
color: light-blue;
text-decoration: none;
font-size: 2em;
font-weight: 800
}
}
<for|post| of=POSTS>
<a href=post.link>${post.title}</a>
</for>
<For of={POSTS}>{
(post) => <a href={post.link}>{post.title}</a>
}</For>
よく、これは深いことを意味しませんでした.ランニングへの最初の一見MarkoJS .
私は、それが確かに使用するために構文を持っていると言います.私は、タグベースのUI言語については、JavaScriptライブラリで見つけるのと同じ機能の多くを持って興味深いことだと思う.HOCS(高位コンポーネント)のようなパターンとレンダリングの小道具はここで完全に適用できるようです.
経験は、他の現代のJavaScriptフレームワークの開発に非常に似ていました.私は2番目のことを忘れました.サーバー指向であり、デフォルトではJavaScriptをブラウザに出荷することができました.JavaScriptが送られなかったので、これが完全に静的だったので、我々のケースで.
私は心の向きでクライアント側ですので、これは間違いなく私のための出発だった.Javascriptのデフォルトではサイトの全体のカテゴリの可能性の新しい世界です.
次回も探検し続けてくださいMarkoJS そして、すべての強力な機能を明らかにする.
Reference
この問題について(MarkoJSの最初の観察), 我々は、より多くの情報をここで見つけました https://dev.to/ryansolid/a-first-look-at-markojs-3h78テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol