最新Angular2案例rebirth開源

在過去的幾年時間裏，Angular1.x顯然是很是成功的。但因爲最初的架構設計和Web標準的快速發展，逐漸的顯現出它的滯後和不適應。這些問題包括性能瓶頸、滯後於極速發展的Web標準、移動化多平臺應用，學習難度等。

因此Angular團隊最終決定以全新方式構建Angular2框架。Angular2框架如今已經進入RC6版本，很快它就將進入最終發佈版。Angular2帶來了不少不錯的特性，它們包括跨平臺、高性能、高效開發，擁抱web標準等等。

因爲在Angular中引入了render層隔離設計，因此它也很容易實現跨平臺的拓展。多平臺拓展，理論上只須要實現目標平臺的render層處理邏輯。目前在Angular2的生態圈中已有的跨平臺框架以下：

• Web： Angular框架自身(https://angular.io/);

• Universal / Isomorphic: Universal(https://universal.angular.io/);

• Progressive Web App: mobile-toolkit(https://mobile.angular.io/);

• NativeScript: nativescript-angular(https://github.com/NativeScript/nativescript-angular);

• React Native: react-native-renderer(https://github.com/angular/react-native-renderer);

• Ionic2: Ionic2(http://ionic.io/2/);

• Electron: angular-electron(https://github.com/angular/angular-electron/);

• …....

Angular2架構的從新設計，使得其在性能方面也獲得了巨大的改善：

• 組件樹和單向的@Input、@Output使得變動的影響變得可預知，再也不須要Angular1那樣屢次的digest直到穩定；以及結合ChangeDetectionStrategy.OnPush與immutablejs或者是Rxjs，Angular2的變動檢查算法複雜度降爲了log(n)。相對於Angular1，獲得了至少5倍的性能提高；

• Universal服務端渲染可以更好提高首屏加載的性能，以及單頁面應用的SEO問題；

• AOT技術引入，可以讓組件處理的生成代碼提早到構建時期；再加上TypeScript的tree shaking等技術，可以更大化的減少加載JavaScript文件大小和提高運行時性能；

• Web端Web Worker的實現，可以更好的解放咱們的UI線程，獲得更好的而用戶體驗，以及性能的提高；

不單單這些，Angular2還有不少的優秀特性。如：基於TypeScript的靜態類型檢查、擁抱web標準（Shadow dom，fetch API）等等。

總之，Angular2是一門值得咱們學習的優秀前端框架。隨着Angular2進入了RC6版本，意味正式發佈版將不遠矣。開始學習Angular2的時機已經到了。

 

同時筆者也開源了本身的rebirth項目供你們學習。它是一個利用Angular2開發的博客系統前端部分。它涉及到的Angular2知識點很是的全面，包括：組件化，自定義directive，路由，HTTP交互，Template drive form和Reactive form，異步路由，jwt token認證，資源權限控制，動態加載component，jQuery插件集成等經常使用知識點。

同時rebirth項目也集成了不少前端優秀的技術實踐：

• Angular2 + rxjs

• bootstrap-sass

• codemirror + markdownit(online markdown文檔編輯器)

• webpack2 + DashboardPlugin(代碼打包)

• TypeScript2 + @types

• stubby(數據mock框架)

• tslint + codelyzer(ts代碼和Angular2組件靜態檢查)

• angular2-template-loader(Angular2 component的html、css打包)

• karma + phantomjs(TDD開發)

• sass + postcss(css樣式組織)

• typedoc(ts文檔)

• fontgen-loader(icon font)

• .......

在這裏爲你們放上幾張rebirth效果圖，供你們預覽：

移動端樣式：

PC端樣式：

 

 

 

 

但願你們能喜歡。有任何的問題能夠在筆者的github提issue，筆者會在空閒時間爲你們解答。

 

rebirth 項目地址： https://github.com/greengerong/rebirth