なぜ、私は私のウェブサイトのためにsapperjsを選びました、そして、私がこれまでにフレームワークについて学んだもの

うわー、どのようなフレームワーク!
このポストでは、私はどのように私はよく構造化されたウェブサイトを構築するために必要なすべての基準を満たす技術スタックをシングルにすることができた私の思考プロセスを説明します.

snappy、稲妻高速パフォーマンス

Web上で表示される最適化されたSEO

効率的にハッキングのための開発者の友好性

ウェブサイトツールの分野におけるイノベーション

新技術を試すための開発者としての自然の関心

私は現代のウェブサイトに行きたかったのでJAMStack セットアップ、私はフレームワークの人気と成熟度に基づいてこれらのオプションを持っていた

次.js

ギャツビー

ヒューゴ

Nuxtjs

マナアニー

あなたはNetLifyによって提供される利用可能な静的サイトジェネレータの完全なリストを見ることができますStaticGen , 競争相手がたくさんいます!

次。js

私は約2年の専門家の経験を持って反応して、それは次の選択の意味をたくさんしているだろう.私の好ましいフレームワークとしてのJS、しかし、それはあまりに簡単であったでしょう?
そこに別のJavaScriptフレームワークでより汎用性があるために、私は次のような反応ベースのフレームワークに対して決めました.js

ギャツビー

私は、すでに私は最近呼ばれた別のプロジェクトのために使用しているので、再びギャツビーを選択したくなかったDAW Comparison .
別のツールを試してみたいとは別に、私は完全にGATsbyを使用して開発者の経験を楽しんでいない私はパフォーマンスを問題に実行し、困難な時間を得る方法を考え出すgatsby-image 私が必要としていない方法で作業して/非表示のプラグインに不満を取得.
それにもかかわらず、私はギャツビーがここに滞在し、優れたフレームワークに成長することを確信しています$28M in Series B Funding 2020年5月

ヒューゴ

バックエンドのプロジェクトを書くための言語を試してみることに興味がありますがHugo それは私のレーダーではなく、その混乱して見えるテンプレート構文のためであるため、例えば:

{{ define "main" }}
<main aria-role="main">
  <header class="homepage-header">
    <h1>{{.Title}}</h1>
    {{ with .Params.subtitle }}
    <span class="subtitle">{{.}}</span>
    {{ end }}
  </header>
  <div class="homepage-content">{{.Content}}</div>
  <div>{{ range first 10 .Site.RegularPages }} {{ .Render "summary"}} {{ end }}</div>
</main>
{{ end }}

それは本当に強力なサイトジェネレータであるかもしれません、しかし、私は私のウェブサイトプロジェクトのために単純さを目指します.

Nuxtjs

ウェブサイトを構築するNuxt.js すべての3つの主要なJavaScriptフレームワーク(反応、角度とVue . js)で、いくつかの実際の経験を得たでしょう.
VueJSはGitTubやJSシーンを通じて多くの人気を得ています.JSシーンでは、反応と角度の最高の特徴を組み合わせていますが、以下のように、私は最終的にはアンダードッグと一緒に行くことにしました.

小型迂回路

少し前に私はSvelte そして、ユーザーインターフェースを構築する根本的な新しいアプローチであるという約束に魅了されて魅了されました.
彼らのウェブサイトで見られるように、「Svelteは通常、あなたのアプリを構築するとき、あなたがあなたのアプリを構築するとき、起こる、コンパイルステップに、ブラウザーで行われる仕事の大部分を動かします」.ねえ、それは私のためのパフォーマンスの問題を解決するための素晴らしい方法のように聞こえる!
全体作業後Svelte tutorial , 私は、その絶対的な単純さと滑らかな開発者経験に感銘を受けたいくつかのWTF瞬間(最も肯定的な感覚で)を持ちました.
それにもかかわらず、それはあまりにも地下であり、恐るべき“ちょうど別のJavaScriptフレームワーク”死を死ぬことを認めた後、遅かれ早かれ、それを試して現実世界プロジェクトを欠いて、私はそれを却下し、再びsvelteについて忘れてしまった.

sapperjs

このウェブサイトの潜在的Jamstackセットアップの最初の研究に早送り.
偶然出会ったSapperJS そして、それが「Svelteによって供給されて、同じコアチームによって開発される」と理解しました.
勝利の短い瞬間の後、私はこの通知を文書に見ました.

これは危険な選択である.早期開発通知
Sapper documentation
ああ、スナップ!それは潜在的な頭痛の多くのように聞こえる、私はまだ角2から4までのアップグレードを覚えているし、3〜4あまりにもウェブパック3.
だから私の選択は

安定して成熟したnuxtで移動します.JSは、私がスタックし、スタックオーバーフローに依存しなければならない場合に大きなコミュニティからの求人市場と利益に関連する

初期の開発Sapperjsを選んでください.そして、それはまだ主要なバージョンを打ちませんでした

疑う余地がある

簡単な選択ではない、私は正しいか.私は良い仕事とアドバイスのために常に頼ることができる前の仕事同僚に頼むことに決めました.
彼は地獄としてスマートで、JavaScript生態系の約20年の経験を持っています.
私は尋ねました:「ねえピート、私は私のウェブサイトのためにsapperjsを使うのが好きです、しかし、それはまだ初期の開発においてあります、それは愚かな考えです、正しく?」
しかし、特に個人的なプロジェクトで、新しいツールを試して、経験から成長することは素晴らしいです
驚いたことに、彼はすぐにその考えを断っていないし、彼は私にもそれを試してみて、私はやる気を感じ、右にジャンプ!
アンダードッグ・フレームワークから始めて、プラグインと解決の不足している生態系があるということも意味しました、しかし、私はそれに気づいていて、ゼロからウェブサイトを構築することの一部としてそれを受け入れて、それをすばらしい学習経験として見ています.

サッパーで速く進む

私は始めからsapper-template-rollup とすぐに最初の数ページを設定します.
今、約1ヶ月間、ウェブサイトをオンオフした後、私はこれらの目標に達したことを誇りに思っています.

高速、パフォーマー、完全に応答サイト

カテゴリとタグのフィルタオプションとサブページのブログサイト

自身のクッキー通知によるGDPRコンプライアンス

コメントシステムReplyBox

レイアウトの高速スタイリングTailwind CSS

300 KB未満の出荷と各ページ間の~ 20リクエスト

遅延負荷と画像最適化svelte-image

簡単に展開Netlify

灯台監査の100 %近く

SAPPERは、ルートプリフェッチ、サーバーサイドレンダリング、自動コード分割、およびオフラインのサポートのような高度な機能と最適化が付属しているため、サイトのパフォーマンスについて心配することなく、これらの目標にほぼ排他的に集中することができた!

今までの経験

あなたがSapperJSで始めるのを刺激したと感じる場合には、これらは私の考えと経験です.
長所

最適なオプションの豊富な大きなスターターテンプレート

それはスムーズに任意のしゃっくりや奇妙なエラーがなくても、初期の開発段階にある

あなたは、簡潔な構文のような素晴らしいSvelte機能から自動的に利益を得ます

開発サーバーが高速起動し、ホットモジュールの再読み込み

フレームワーク固有<Link> コンポーネント、ジャスト<a> プリフェッチをサポートするタグ

スムーズな統合Rollup , また、Svelteの創設者であるリッチ・ハリスによって作られた

あなたのすべての潜在的な質問のための素晴らしいコミュニティとの不和のチャンネル

短所

SAPPERドキュメントは良いですが、開発において起こる様々なエッジケースをカバーしません

多くの必要なSEO属性はデフォルトで設定されません

生態系や成分ライブラリーを欠くことは存在しないか初期の発生ではないsvelma(svelteのためのbulmaコンポーネント)

すべてのすべてで、私は書く時に厳しいコンパスに遭遇しなかった、と私は楽観的なSveletjs周辺のすべての誇大広告と我々は着実に成熟し、尊敬のWebアプリケーションのフレームワークに成長する生態系が表示されます.
Jamstackでウェブサイトを構築することがあなたに興味がないならば、あなたは私の他のポストをチェックすることができますWix, WordPress, JAMStack- Oh My! いくつかの大きな選択肢.
読書ありがとう!