私は自分自身でフレームワークの明確なアイデアを取るためにSvelteを試してみたかった.私の日常生活で、私は特に反応(next . js)で働きます.反応とSvelteの両方は、コンポーネントアーキテクチャに基づいています、主な違いはSvelteはコードをコンパイルします、一方、反応は仮想DOMを使用します.

どのようなアプリケーションですか？

プログラミング言語のトレンドGitリポジトリを取得し、表示する単純なWebアプリケーション.

使用するツール

Svelte アプリを開発するため.

SnowPack アプリを構築するため.

Vercel アプリケーションを展開するため.

ソースコードはここで入手できます.

カイディモハメッド / スベートパワー

The Demo .

プロジェクトアーキテクチャ

プロジェクトのアーキテクチャは非常に簡単です.

始めましょう

“src”フォルダでは、アプリケーションを作成します.Svelte、それは主要なコンポーネントです.

  const getReposByLang = async () => {
    if (!reposMap.has(repoLang)) page = 0;
    isSearching = true;
    if (reposMap.has(repoLang) && !page === 0) {
      isSearching = false;
      return;
    }
    await getRepos(repoLang, page).then((res) => {
      if (reposMap.has(repoLang)) {
        reposMap.set(repoLang, [...reposMap.get(repoLang), ...res.items]);
      } else reposMap.set(repoLang, res.items);
      isSearching = false;
    });
    listRepo = reposMap.get(repoLang);
    if (page === 0) page = 1;
  };

  // actions to do when the component is mounted first time
  onMount(() => {
    getReposByLang();
    repoLangInput.focus();
  });

The onMount 関数はgetReposByLang(); and repoLangInput.focus(); コンポーネントがマウントされている場合、useEffect() .
The getReposByLang 関数はreposを取得し、マップに保存します.

export default async function getRepos(repoLang: string, page: number) {
  repoLang = repoLang.replace(/\s/g, "");
  const response = await fetch(
    `https://api.github.com/search/repositories?q=language:${repoLang}&sort=stars&order=desc&per_page=30&page=${
      page + 1
    }`
  );
  if (response.ok) {
    return response.json();
  } else throw new Error();
}

git reposの表示

{#if isSearching}
      <div style="display:flex;flex-direction:row;position:relative;left:42%">
        <Spinner class="spinner-border text-warning" />
      </div>
    {/if}
    <Row>
      {#each listRepo ?? [] as repo}
        <Col class="mt-1 col-md-6 col-12 col-s-6 col-sm-6 col-lg-4 col-xl-3">
          <Repo {repo} />
        </Col>
      {/each}
    </Row>

私たちはgit reposを含んでいるlistrepoの上でループして、グリッドでそれらを表示します.

それぞれのレポを表示するために別のコンポーネントを使用します.<Repo {repo} /> Repo はプロップrepoを持つコンポーネントです.

<script lang="ts">
  import type { IRepoProps } from "src/types";

  import { Card, CardBody } from "sveltestrap";

  export let repo: IRepoProps;
</script>

コンポーネントの小道具を作成するにはexport 変数名に.

  export let repo: IRepoProps;

積雪の建物

私は、プロジェクトを構築するためにSnowpackを使用しました雪パックは、ウェブパックへの軽量の代替品です.
にconfig 私たちはちょうどsvelteプラグインを追加し、魔法に配置する必要があります.

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: "/",
    src: "/dist",
  },
  plugins: ["@snowpack/plugin-svelte"],
  routes: [
    /* Enable an SPA Fallback in development: */
    // {"match": "routes", "src": ".*", "dest": "/index.html"},
  ],

プロジェクトをビルドするにはsnowpack build

Vercelでの展開

Vercelでの展開は非常に簡単です、我々はちょうどGithubからプロジェクトをインポートする必要がありますし、Vercelすべての残りの部分を行います.

ソースコードとデモ。

ソースコードはここで入手できます.

カイディモハメッド / スベートパワー

The Demo .

どのようなアプリケーションですか？

プログラミング言語のトレンドGitリポジトリを取得し、表示する単純なWebアプリケーション.

使用するツール

スベルテhttps://svelte.dev/ ) アプリを開発するため.

スノーパックhttps://www.snowpack.dev/ ) アプリを構築するため.

[ Vercel ]https://vercel.com/ ) アプリケーションを展開するため.

プロジェクトアーキテクチャ

プロジェクトのアーキテクチャは非常に簡単です

始めましょう

“src”フォルダでは、アプリケーションを作成します.Svelte、それは主要なコンポーネントです.
const getreposbylang = async ()>> {
ページ(= reposmap . has )
本当の意味
reposmap .があるならば!ページ== = 0
偽の
返り値
｝
getreposを待ってください.次に、
を返します.
reposmap.設定する.
View on GitHub
The Demo .

結論

Svelteは、反応と比較して学ぶことは本当に、JSXの欠如、および新しいパラダイム反応によってもたらされるWeb Velで初心者の友人svelteを作る私はよりエキサイティングな機能をもたらすsvelteキットを待ちます.