三年以上作業するには、最近のビジネスは非常に忙しいではありませんが、私の心は空です。同社は最近、自身があまりにも多くのことを知らない見つけ、UIライブラリーの開発に参加しました。この機会に、それ:
私は自分自身に応じてすることができ、自分の技術では、ここ二、三年以上成長し、2016年に私は前任者を共有する必要性を見てを見つけてショックを受け書き込み、誰もが私は学校に有用であったと述べ、右常に古い世代に耳を傾け、2019システムを学ぶ方の経験と理解をまとめ、心臓は自身の優先順位の底部を有します。
今すぐ戻ってタイトルに戻り、フロントエンドエンジニアは何を学ぶべきですか?私はあなたと共有するために、一緒に学び、アウトラインを書いたが、ゴールの内側に最初の問題、あなた自身に言うことを学ぶことで、2番目はあなたが私には何も下に欠けていないことを見るのを助けることです。
フィールドのフロントエンドを識別していなかった私の自己位置は、広すぎる最も適しており、さらなる研究の価値があるの終点でいますか?知りません。しかし、最初の完全な学校は再び、あなたは全体的に正しいと言うかもしれません。
私はまだ感じて、まだ、常にフロントエンドの学生になります。
この記事では、結果を落胆しない、読むことをご安心ください。あなたが新卒であれば、その場所を特定、お時間がかかります。
フロントエンドエンジニア
まず、基本的な言語
HTML関連
- HTMLの標準、最新のHTML標準の更新のためのフォローアップ。
- HTMLタグはセマンティック標準を入れ子になりました。
- アクセシビリティ。
目標を学ぶことは:タブの関係を再ソートします。国際、アクセシビリティ基準に沿って今後のWebページの構造。
CSS関連
- CSSの標準、CSS標準は、最新の更新プログラムのために従います。
- CSSプロパティ、最新の属性。
- CSSプログラミング、フーディーニ。
- ウェブフォント
学習目標: CSSプロパティとの関係を整理して、より多くの機能を実現するために、CSSを使用してみてください。CSSの最新の開発を懸念マスター。
JavaScriptの関連
- こうした最新の提案、ブラウザDOM、BOMなどのECMAScript標準、。
学習の目標: JavaScriptの基礎API、明確なパラメータに精通。最新のトレンドに遅れないJavaScriptの言語。
Node.jsの関連
- グローバルAPI、ネイティブモジュールのNode.js、Node.jsのは、最新のトレンドについて学びます。
学習の目標:役割に精通しているとは、Node.jsのベースのネイティブAPIを使用します。サービス側の開発を学習するための基礎を築きます。
活字体(TS)
- 今後の開発動向にTS火災。
- 活字体の使用。JavaScriptのAPIの違い
学習目標:活字体に泊まりました。
AssemblyScript(AS)
- C \ C ++に加えて、錆、Kotlin、Golangおよびその他の高レベル言語はWebAssemblyバイトコードに変換することができますが、新しい言語がASことができます。ASはTSの厳密なサブセットが一緒に学ぶWebAssembly開発のための基礎を築くことができます。
- AssemblyScript文法と用法
学習目標:基本的な文法を学び、AssemblyScriptファイルは.wasm形式にコンパイルすることができます。これを使うと、C / C ++検討するために行くことができません。
ダーツ
- フラッターは、開発のための基礎としてダーツ、ホット続け把握すべきです
- ダートはJavaScriptの構文との違いを理解しています。
学習目標:ダート言語に泊まりました。
値下げ
- 使用する構文。
- 記事を書く必要なドキュメントを書きます
学習目標:記事を書くために熟練した使用Markdownを、および他のプロジェクトのドキュメントを。
シェルスクリプト
- 文法、一般的に使用される機能
学習目標:あなたはより一般的な手順を記述シェルを使用することができます。
SQL言語
- 一般的な構文は、機能
学習目標は: SQL文のカード一般的なクエリを書くことができます。
第二に、基本的なコンピュータ
データ構造とアルゴリズム
- アイデア古典アルゴリズム
- 一般的なデータ構造
学習目標:過去にビジネスコードに適用する考え古典算術を習得することは、適切なシーンで最適なデータ構造を選択します。
コンピュータネットワーク
- HTTPプロトコル、TCPプロトコル、UDPプロトコル
- HTTPS、HTTP2
- DNS
- WebSocketを
学習目標:習得し、これらのネットワークプロトコルの原理を理解するために、実践するために使用することができます。
コンピュータの構成原理
- アリー
- ユニコード、ASCII、UTF-8エンコーディングなど
- コンピュータの仕事
学習目標:「クラウド」ホスティング、Webホスティング基盤を理解するために、彼らのパートナーを理解すること。
オペレーティングシステム
- コンピュータのオペレーティングシステム
- Linuxオペレーティングシステム
学習目標:オペレーティングシステムがどのように機能するかを理解するために、あなたは、Linuxオペレーティングシステムに依存しない、マスター一般的に使用されるコマンドを使用することができます。
第三に、高度な
エンジニアリング
- WebPACKの
- 巻き上げる
- バベルは確認され、最新のECMAScriptの構文11で使用することができます原則を使用します。
- などeslint、stylelint、きれいなスタイルと文法を使用し、コードレビューツール
- テストツールやライブラリを使用したユニット
- SASSプログラミング構文
- postcssポストプロセッサ
- 原理と実装uglify
- マルチプレイのgitのコラボレーティブプロセス
- 構築し、使用するgitlab
- CI / CD
- gitのフック、ハスキー、commitlint
- ドキュメントの出力、絵本、gitDoc、gitbookなど
- NPM、式
- 糸
- 値下げは、レンダリングします。値下げ書き込みの例としては、オンラインで行うことができます
- モジュラー、JSのECMAScriptとNode.jsのモジュラー主にここで検討してきたが、CSSモジュラーいくつかの方法を指し、
- データモック
学習目標:すぐに、ゼロから現代多人数の共同フロントエンドエンジニアリングプロジェクトを構築し、開発効率を向上させるための適切なツールを選択し、スタイルの制服をコーディングチームメンバーを維持し、コードの品質を保護するためのツールの使用を最大化することができます。
コンポーネント化
- ビュー
- 反応します
- WebComponents
- ブラウザの互換性、canIUse
学習目標:ヴューに泊まったが、今後の動向をWebComponentsの開発、コンポーネントベースの理解を反応します。マスタデータ駆動型の思考は、深い理解、ソースコードを読んで、古典的な双方向バインディングの実装の原則を把握します。遠位派生商品マスタ・ルーティング、設計データ管理の実装。
WebベースのサービスのNode.jsの開発
- さらに
- 表します
- PM2
- RESTfulなスタイル
- プロセス管理
- などのデータ永続化のMongoDB、MySQLの、
- Redisのデータキャッシュ、など
- ロングリンクサービス
- SSR
- ドッカー
- nginxの設定、openresty
- クラウドホスティング、共有ホスティング、など
学習目標:ビルドを完了し、独立したWebサービスを展開。
CLIベースのNode.jsの開発
- CLIライブラリと共通の開発の原則
- 人気のデザインのCLIライブラリ、アイデアの実現
学習目標:需要があるとき、あなたはすぐにこのプログラムを見つけることができ、独立してCLIを開発することができます。
デスクトップアプリケーションの開発
- 電子
- NW.JS
学習目標: JavaScriptベースのデスクトップアプリケーションの開発を理解し、必要なときに、すぐにこの技術的な解決策を見つけることができます。
モバイルアプリケーションの開発
- フラッター芸術と関連デリバティブ
- ネイティブアートおよび関連デリバティブの反応
- WEIGHT
- WEEX
学習目標:理解し、マスターします。フラッターは、モバイルRNまたはAPPを開発するために使用することができます。PWAをご覧ください。
サードパーティのプラットフォーム
- 小型マイクロチャネルプログラム
- アリペイアプレット
- Baiduのアプレット
- 高速アプリケーション
- wepy
- mpvue
- 里芋
- ...
学習目標:すぐに小さなプログラムのあらゆる種類の開発を始めるために。実装アプレットをご覧ください。プログラム開発の人気の小さなライブラリのアイデアを実現するため、業界の理解。
プラグインの開発
- クロームプラグインAPI
- DevTool拡張
- VSCodeや他のIDEプラグイン開発
学習目標:すぐにこのスキームを見つけることができ、必要なときにプラグインは、何ができるかを学びます。
ブラウザの作品
- レイアウトエンジン、ブラウザのレンダリング原則
- スクリプトインタプリタエンジン、スクリプトは原則、V8を実行します
- ヘッドレスヘッドレスブラウザ、人形遣い
学習目標:ブラウザの動作をマスターするために、自動テストおよびパフォーマンスの最適化に適用することができます。
パフォーマンスの最適化
- RAILモデル
- ハードウェアの基礎:フレーム、フレームレート、表示原理の描画
- プログレッシブウェブページインデックス(プログレッシブウェブメトリクス、PWMのと呼ばれます)
- 一般的に使用されるパフォーマンスの最適化ツール
学習目標:パフォーマンス最適化ツールを理解し、Webアプリケーションの優れた性能を記述します。
Webブラウザのセキュリティ
- ブラウザのセキュリティポリシー:元ポリシー、コンテンツセキュリティポリシー、サンドボックス
- 攻撃:XSS、CSRF
- その他:CRLF攻撃、DNSハイジャックし、DNSポイズニング、クリックジャッキング、ブラウザプラグイン悪用など
- 一般的な対称暗号化と非対称暗号化アルゴリズムについて学びます
学習目標:ウェブサイトを書くために、セキュリティ上のリスクを回避するために、一般的なWebブラウザ攻撃について学びます。
Webサーバーのセキュリティ
- 一般的な攻撃:ディレクトリトラバーサル、DDOS、再生、パスワードクラッキング、SQLインジェクション
- その他の攻撃:CC攻撃、ポートの浸透
学習目標:共通のサーバ攻撃と原則を学ぶ、書き込みWebサービスを避けるために明白な抜け穴があります。
監視統計
- フロントエンド監視用スクリプトエラー:エラー・スタックの形、リアルタイム監視の実装
- フロントエンドのパフォーマンス監視:パフォーマンス指標、実装
- サーバ監視:ハードウェア監視、システム監視、アプリケーション監視、ネットワーク監視、トラフィック分析、監視ログ、セキュリティ監視、APIの監視(可用性、精度、応答時間)、パフォーマンス監視、サービス監視
学習目標:オープンソースの監視プラットフォームを自己構築または構築する方法を学びます。一般的なモニタリング指標のいくつかの意味を理解します。このようなパフォーマンス関連の指標TTLB、QPSそれが何を意味し、どのようなビジネス関連の指標のPV、UV、CTRなど代表として。
可視化
- 高度なキャンバス
- 高度なSVG
- WebGLの基盤
- コンピューターグラフィックス
- 共通ライブラリ:ECharts、D3、など
学習目標:これは未来志向のフロントエンド技術です。すぐにプログラムを見つけることができ、需要がある場合には、一般的な可視化技術のソリューションをご紹介します。クールな、データの可視化を開発するために最新の技術を適用するために注意して使用することができます。
SEO
- 検索エンジンのクローラ原則
- 検索エンジンのアルゴリズムの重み
- タグに関連するSEOのウェブページ
学習目標:検索エンジンのアルゴリズムをランク付け、検索結果の原則を理解し、実装します。自律的に簡単なSEOを行うことができ、外部ウェブサイトは、ウェブサイトは、可能な限り高い検索エンジンでランク付けした場合(PPCよを過ごすためではありません)。
開発とデバッグ
- Explorerのスクリプトのデバッグ
- Node.jsのデバッグ
- クローム開発ツール高度な使用(環境シミュレーション、パフォーマンス、メモリ使用量、デバッグエンドポイント、パケットキャプチャ、コンソール組み込み関数、およびその上でのレンダリング)
- HERE
- そのようなスペルようにチェックし、などのプラグインを、開発を支援するために使用します。
学習目標:スクリプト開発用のクロームのデバッグツールを使用してマスタリング、パフォーマンスの最適化は大きな利点です。マスターデバッグ方法Node.jsのサービスを提供しています。
UI库
- UXベース
- 色彩理論、色光の三原色、色表現のページ
- 色、色の心理学の原理にWebページ
- 一般的なUIコンポーネントを達成
- 一般的な使用UIコンポーネントとソースコード
学習目標:、参加する独立設計することができます何のデザイナーといくつかのインタラクティブなプログラムが存在しない場合には、一定の美的およびユーザーエクスペリエンスの注意を持って、一般的なUIコンポーネントの意味を理解表し、あなたは右のニーズに右のコンポーネントを使用することができます。一般的なUIコンポーネントのデザインやアイデアの実現、独自に開発したUIコンポーネントライブラリを特定します。
WebAssembly
- 原則
- 優位
- 簡単なアプリケーションの開発
:学習目標、必要なときに、ブラウザでその動作モードを理解し、開発プロセスWebAssemblyバイトコードを理解し、すぐにこのプログラムを見つけることができます。
WebRTC
- リアルタイム通信ソリューション
- 理解し、開発するのは簡単です
学習目標:基準を理解し、のWebRTC技術を追跡、理解することは、実装の原理は、必要なときに、すぐにこのプログラムを見つけることができます。
WebXR
- JavaScript開発者VRとAR
- WebXRのAPIを学び、ドラフトのプロセスをフォローアップ
:目標学習の理解と関心のWebXR技術は、標準規格を理解し、実装の原則、必要なときに、すぐにこのプログラムを見つけることができます。
WebAuthn
- ブラウザを使用して、生物学的認証
- WebAuthnのAPIを学び、簡単な使用します
:目標学習の理解と関心のWebAuthn技術は、標準規格を理解し、実装の原則、必要なときに、すぐにこのプログラムを見つけることができます。
「生徒のブログ」に掲載されこの記事では、ソースを明記してください。
終わり。