2015-2016 フロントエンド アーキテクチャ システム技術合理化版_html/css_WEB-ITnose

2015-2016 フロントエンド アーキテクチャ システム テクノロジーの簡易版

クリックして github の高解像度画像を表示します

クリックしてフルバージョン

1. フレームワークとコンポーネント

**Bootstrap およびその他の UI フレームワークの設計と実装

• 伸縮式レイアウト: グリッド グリッド レイアウト

• 基本 UI スタイル: 要素リセット、ボタン、画像、メニュー、フォーム

• コンポーネント UI スタイル: ボタン グループ、フォント アイコン、ドロップダウン メニュー、入力ボックス グループ、ナビゲーション グループ、パンくずリスト、ページング、ラベル、カルーセル、ポップアップ ボックス、リスト、マルチメディア、警告

• レスポンシブ レイアウト: レイアウト、構造、スタイル、メディア、JavaScript レスポンシブ

• サードパーティのプラグイン: プラグイン管理

**JQuery、zepto の使用原則とプラグイン開発

• amd、cmd、およびグローバル変数のモジュラー パッケージ化をサポート

• $.fn.method = function(){}

**mvc/mvvm フレームワークの原則デザイン、vue/angular/avalon など

• ディレクティブ設計: html、text、class、html、attr、repeat、ref、extensible

• フィルター設計: bool、upperCase、 lowerCase、拡張可能

• 式設計: if-else の実装など

• Viewmodel 構造設計: などデータ、要素、メソッドのマウント、スコープ

• データ変更検出: 関数トリガー、ダーティ データ検出、オブジェクト ハイジャック

**ポリマー/angular2 のアイデアと設計アイデア

• インポート技術

• テンプレートとスクリプトの導入方法

• CSS スタイルの名前空間分離

• サードパーティのライブラリの簡単な再利用

**reactjs の原則と使用

• 仮想 dom 一方向データ バインディング

• js 実行構文メソッド

• UI は状態によって制御されます

....

2.エコシステムの構築

**grunt/gulp 開発環境タスクの作成

• ファイル処理プラグイン: html、scss、js、画像、フォント、その他

• 最適化プラグイン: スプライト、画像圧縮、アイコンフォント ビルド

• 置換プラグインの公開

• パッケージ化と圧縮パッケージプラグイン: コンポーネントの自動分析

• ホワイトリスト構成

• カスタムプラグインの書き込み

...

3. 開発スキルとデバッグ

**Fiddler と Willow の基本的な組み合わせデバッグ

• 共通の構成と分析

• ブラウザーの結合デバッグ

werien、vorlonjs リモートデバッグ、Chrome 検査コード自動検査 fecs

...

4. HTML、CSS および再構築

**jpeg、webp、apng、bpg 画像

• コーディング原則

• 特徴、長所、短所

• 適用可能なシナリオ

**アイコンフォントの使用法と実装原則

• 自動パッケージ化と構築方法

• iconfont の互換性記述方法

• fonthello 、fontawesome、icomoon.io、iconfont.cn オンライン ツール

** ページ レスポンシブ デザイン

• レイアウト レスポンシブ

• HTML 構造 レスポンシブ

• CSS スタイル レスポンシブ

• イメージ メディア レスポンシブ

• JavaScript レスポンシブ

• メディアクエリとプラットフォーム判定

**CSS リセット

• reset

• nomalize

• neat

**sass/compass/less/postcss の共通構文と使い方

• 共通構文関数

• コンポーネントベースの UI デザイン管理

• ツール導入計画の構築

• スプライト画像の自動合成

• アイコンフォントの自動アクセスなど

**メディアクエリと共通ページの理解サイズ

• メディア タイプの紹介とメディア機能の紹介

• デバイス幅の適応

• 網膜画面の適応

**em、rem 原則と実装

**code4ui、code4app、first page、maka など

• フロントエンド dom 操作も更新フロントエンド ページ

• によると、dom 操作によりコンポーネント構成設定が生成され、データベースに保存されます

• r.js または webpack を使用して構成構成に従ってパッケージ化します

• パッケージ化された出力ファイルを公開します

**css3 アニメーション

• トランスフォーム

• アニメーション

• トランジション

• 3D アクセラレーションとアニメーション アクセラレーション

• アニメーション ライブラリ

• イージング関数のチートシート: http://www.xuanfengge.com/easeing/easeing/

• Ceaser: http://xuanfengge.com/easeing/ceaser/

• cubic-bezier: http://cubic-bezier.com/

**css グリッド レイアウト

• susy

• レスポンシブ グリッド システム

• Fluid 960 Grid(adaptjs)

• Simple Grid

**検索エンジンとフロントエンド SEO

• tdk 最適化

• ページ上のコンテンツの最適化

• ユニークな H1 タイトル

• img set alt 属性

• nofollow

• URL 最適化

• 統合リンク

• 301 ホップ

• 正規

• ロボット最適化

• robots.txt

• メタロボット

• サイトマップ

• SEO ツール

• 各種ウェブマスターツール、など

**ブラウザのキャッシュ タイプ、リソース、webSQL、indexDB、localstorage、cookie、アプリ キャッシュ、キャッシュ ストレージ

• store.js、cookie.js

**UI フレームワーク

• ブートストラップ、jqwidgets、セマンティック ui、amaze ui

• WeChat QQ ui: Frozenui、weui 、blend ui

• extjs、echart チャート ui

....

5. ネイティブ/ハイブリッド/デスクトップ開発

**ionic モバイル開発ソリューション

• ランタイム アーキテクチャ

• ハイブリッド ハイブリッド開発

• cordova インタラクション

• オフライン パッケージの更新

• パフォーマンスのボトルネック

**ネイティブスクリプト モバイル開発ソリューション

* *react ネイティブ モバイル開発ソリューション

• 実行アーキテクチャ: js エンジン

• パフォーマンスの欠陥とメモリ リーク

• 更新仕組み

• 使用シナリオ

**android/ios ネイティブ開発とフレームワーク

• java

• oc、swift

• Web とネイティブの対話

• 画面回転

• シェイク

• ビデオ、写真撮影、ローカル写真の選択

• 電話、テキスト メッセージの送信

• バッテリー残量

• 地理位置情報

• 日付の選択

• ハードウェア アクセラレーションをオンにする

**デスクトップ アプリケーション開発

• nodewebkit

• NetEase Hex

• pomelo( ゲーム サーバー フレームワーク)

• react デスクトップ

• appjs:appjs.com

…

6.フロントエンド/H5 の最適化 (別の図が示されています)

**yslow、pagespeed

**モバイル Web パフォーマンスの最適化

• 単一ページとルーティングの実装

• 業界有名サイトの事例分析

....

7. フルスタック/フルエンド開発

**express/node club + mongodb、thinkjs およびその他のフレームワーク

**cdn および dns

• 動的ドメイン名高速化

• cdn 原理と cdn コンボ

....

8. 研究実験

**WebAssembly、webTRC、typescript

**マテリアルデザイン仕様フロントエンドフレームワーク

• インタラクティブエフェクトライブラリ

**AMP-HTML仕様

• 使用モバイル Web 上の静的コンテンツのパフォーマンスを向上させるための制限された HTML およびキャッシュ技術

• 無効な要素を置き換えるカスタム要素を追加します: amp-audio、amp-img、amp-video お待ちください

...

9. データ分析とモニタリング

**badjs データ レポート

** ヒート マップをクリックします。Heat、heatMap

**js 読み込み失敗最適化ソリューション

• 失敗再送メカニズム

• ソース ドメイン ネーム サーバー ファイルの読み込み

• https ハイジャック対策

**Baidu アナログ データ報告

....

10. その他のソフト スキル

**axure プロトタイプ設計

**xmind ブレインマップ管理

**効率管理

**github は使えますか

**ナレッジ管理/概要の共有

**製品の考え方とスキル

....

11. フロントエンド技術 Web サイト

**技術コミュニティ

• alloyteam、html5 ベース

• W3 ヘルプ

**業界カンファレンス

• セグメントフォールトカンファレンス

• 深セン js、杭州 js

• GMIC (グローバル モバイル インターネット カンファレンス)

• D2、webrebuild

• infoQ コンテンツ、Qcon、velocity

フルバージョン アドレス https://ouvens.github.io/frontend-resource/2016/01/26/front-end-learning-list.html