2015 で Web アプリを開発するために知っておくべきこと_html/css_WEB-ITnose

この 1 年間、私は初めての主要な Web アプリケーションをゼロから開発してきました。経験は、特にセキュリティとユーザー エクスペリエンスの点で、これまで知られていなかった多くのことを教えてくれます。

私が最後に適度な複雑さのビルドを試みたのは 2005 年であったことは言及しておく価値があります。したがって、安全保障防衛の観点から言えば、私はまだ付け加えるべきことがたくさんあります。

私がすでに知っていることや遭遇したこと以外でも、Web アプリケーションの開発中、特に始めたばかりの場合、次の詳細リストは非常に忘れがちです。

このリストは、ある意味で詳しく説明されていない可能性があります。経験豊富な開発者であれば、ここに驚くような内容はないと思います。ただし、何かが欠けている可能性がある人の助けになれば幸いです。

セキュリティ

確認メール: ユーザーがサインアップするとき、確認リンクを含むメールを送信する必要があり、ユーザーはリンクをクリックして確認する必要があります。ユーザーがある時点で電子メール アドレスを変更した場合、同じアクション フローがトリガーされる必要があります。

ID 管理: パスワードを保存するときは、まず広く使用されている暗号化ライブラリを使用して暗号化します。パスワードを管理できない場合は、認証インターフェイスを使用するだけで、Facebook/Github/Twitter で ID 管理を管理できます。

暗号化: Web 上のすべての証明書の問題に関して、SSL より優れた技術はありません。SSL を使用するか、HSTS を使用してください。

証明書: いかなる形式のサーバー証明書 (API キー、データ ブロック パスワード) もソース管理リポジトリにチェックインしないでください。

プロジェクト: アニメーション

念のため言っておきますが、ほとんどの CSS アニメーションはレイアウトの再描画をトリガーするため、アプリ内のすべての要素をアニメーション化しないでください。それを制限し、可能な場合は変換と不透明度を使用することをお勧めします。

遅延トランジション計算を使用する必要がある場合は、必ず特定のプロパティを使用する必要があります (「トランジション: すべて 250 ミリ秒イーズイン」の代わりに「トランジション: 不透明度 250 ミリ秒イーズイン」など)。

ユーザーエクスペリエンス

フォーム: フォームを送信すると、ユーザーは送信に関するフィードバックを受け取る必要があります。送信後にページが他のページにジャンプしない場合は、送信が成功したか失敗したかをユーザーに知らせるポップアップ タイプのリマインダーが必要です。

ログイン リダイレクト: ユーザーが Web サイト上のページにアクセスしたいがログインしていない場合、ユーザーはまずログイン ページにリダイレクトされ、ログインした後、次のページにリダイレクトされます。ページが以前にアクセスしようとしたページ。 ログイン時に間違ったパスワードを入力した場合は、パスワードを忘れた場合に新しいパスワードをリセットするかどうかを尋ねるメッセージが表示されます。

メール

購読設定: 各ユーザーに送信するメールには、ユーザーがメール設定を変更できるアプリ内のページへのリンクが少なくとも含まれている必要があります。また、ユーザーが購読を解除するための別のリンクも必要です。 配信停止を求めるメールを送信させないでください。

モバイル

アプリ用のモバイル クライアントを開発する必要はありません。しかし、成長するか成長しないかは、非常に重要な決定であることを理解する必要があります。これはアプリを開発するデザイナーやエンジニアに大きな影響を与えるからです。

以下は、プラットフォームの 1 つとして特定のモバイル バージョンを選択していることを前提としています。私はたまたまビルド ツールとして Grunt を使用しているため、すでにいくつかの Grunt プラグインが利用可能です。ただし、使用している JavaScript ツールに類似したものが存在する可能性があります。

エンジニアリング

シングル ページ アプリケーション: 最近シングル ページ アプリケーション (SPA) が主流になっています。その主な利点: SPA は読み込みが少なく、必要なリソースのみを読み込むだけでよく、何度も繰り返す必要がありません。再びロード中。新しい Web アプリケーションを構築しようとしている場合は、SPA を選択する必要があります。

ユーザー インターフェイス

解像度: MVP を開発するとき、UI がすべてのデバイスでエレガントに動作することを保証する必要はないかもしれませんが、携帯電話やタブレットで動作することを確認する必要があります。 基本的な解像度の範囲。

ユーザー エクスペリエンス: 帯域幅

モバイルの帯域幅はデスクトップ コンピューターの帯域幅よりも価値があり、これもモバイル アプリケーションの大きなトピックです。したがって、リクエストの数を減らし、可能な限り非同期を使用し、リクエストされるリソースのサイズを減らすあらゆる機会を探す必要があります。

JS と CSS:

アプリケーション固有の JavaScript と CSS を 1 つのファイル (JS 用に 1 つ、CSS 用に 1 つ) に入れ、そのサイズをできるだけ減らすように努める必要があります。ここでの友達は Grunt-contrib-concat、Grunt-contrib-cssmin、Grunt-contrib-uglify です。

すべてのリソースについて CDN を使用しますか?

CDN を使用することの主な利点は 2 つあります。ホストされているすべてのリソースに適用される最初の機能は、CDN によってリソースが特定のエリアにあることを確認できるため、ユーザーがアクセスしたときに近くのリソースにアクセスできるようになり、リソースの読み込み時間が短縮されます。

2 つ目は、Web アプリケーションに適用される依存関係ファイル (アプリケーション固有ではないスタイルや JS コードなど) です。 Web アプリケーションが依存するファイルに CDN を使用すると、ユーザー キャッシュを通じてロード時間を大幅に短縮できます。たとえば、多くの Web サイトは Angular.js に依存しており、CDN を使用してコアの Angular コードにリンクするとキャッシュ ヒットがトリガーされ、モバイル デバイスのユーザーは別の HTTP リクエストを行う代わりにキャッシュからコードを受信します。

CSS - スクリプト サイズの削減: ほとんどの開発者は、最初に開始するときに何らかの種類の UI フレームワーク (Bootstrap、Foundation など) を使用する可能性があります。これらのフレームワークは非常に大きくなる可能性があり、通常、ほとんどの CDN では必要なものを取り除いたスタイルで利用できるため、フレームワークに含まれるすべてのスタイルを使用する必要はほとんどありません。多くの場合、 uncss などのツール ( processhtml などのツールと組み合わせて使用​​することがよくあります) は、不要になったスタイルを削除するのに非常に役立ちます。

uncss パーサーは動的スタイルを解析できないことに注意してください。したがって、アプリケーションで実際に使用されている間違ったスタイルを削除しないようにチェックするときは注意する必要があります。

CSS - ヘッドにキーコードを配置します: キースタイルはアプリがロードされる前に利用可能である必要があり、ヘッドに配置する必要があります。二次スタイルは後でロードできます。

JS - スクリプト サイズの削減: 製品の JavaScript コードは、人が理解できるように内部変数を必要としないため、変数 user.email の名前を u.e に変更すると、スクリプト ファイルのサイズを削減できる可能性があります。幸いなことに、この作業を行うのに役立つツールがあります。前述の uglify は、JS コードを読みにくくする可能性がありますが、JS ファイルは小さくなります。

ユーザー エクスペリエンス: フォーム

フォームとワークフローがシンプルであることを確認してください。全体的にこれは良いヒントです。これは、モバイルにも導入することを選択した場合に特に重要です。携帯電話で 5 ページのフォームに記入したい人はいないでしょう。

このリストが、初めての Web アプリの開発を準備している人、すでに開発を始めている人、またはフロントエンド設計の最適化手法に慣れていない人にとって役立つことを願っています。開発を始めて、他の忘れ去られたテクニックやトリックを発見した場合は、それをメモして私に知らせてください。このリストに追加することを検討します。

元のアドレス (英語): http://blog.venanti.us/web-app-2015/