Latest ANGULAR2 Case Rebirth Open Source

In the past few years, angular1.x has obviously been very successful. But because of the initial architecture design and the rapid development of web standards, it gradually shows its lag and not adapt. These issues include performance bottlenecks, web standards that lag behind rapid development, mobile multiplatform applications, and learning difficulties.

So the angular team finally decided to build the ANGULAR2 framework in a completely new way. The ANGULAR2 framework is now in the RC6 version, and soon it will go into the final release version. Angular2 brings a lot of good features, including cross-platform, high-performance, efficient development, embracing web standards, and more.

Because of the introduction of the render layer isolation design in angular, it is also easy to achieve cross-platform expansion. Multi-platform expansion, theoretically only need to achieve the target platform's render layer processing logic. The existing cross-platform framework in the ANGULAR2 ecosystem is as follows:

• Web:angular framework itself (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/);

• .......

The redesign of the ANGULAR2 architecture has also resulted in significant improvements in performance:

• The component tree and one-way @input, @Output make the impact of the change predictable, no longer need to Angular1 as many digest until stable, and ChangeDetectionStrategy.OnPush the combination with Immutablejs or RXJS, The complexity of the change check algorithm for ANGULAR2 is reduced to log (n). At least 5 times times the performance improvement compared to ANGULAR1;

• Universal service-side rendering can better improve the performance of first-screen loading, as well as the single-page application of SEO problems;

• The introduction of AOT technology enables component processing of generated code to advance to the build time, plus typescript's tree shaking and other technologies, can be more to reduce the load of JavaScript file size and improve runtime performance;

• Web-side web worker implementation, can better liberate our UI thread, get a better user experience, and improve performance;

Not only that, ANGULAR2 also has a lot of good features. such as: static type checking based on typescript, embracing Web standards (Shadow dom,fetch API) and so on.

In short, Angular2 is a good front-end framework that deserves our learning. As Angular2 enters the RC6 version, it means that the official release will not be far behind. The time has come to start learning Angular2.

At the same time I also open up their own rebirth project for everyone to learn. It is a front-end part of a blog system developed using ANGULAR2. It involves Angular2 knowledge points that are very comprehensive, including: component, custom Directive, routing, HTTP interaction, Template drive form and reactive form, asynchronous routing, JWT token authentication, resource permission control, Dynamic loading Component,jquery plug-in integration and other common knowledge points.

At the same time, Rebirth Project also integrates many front-end excellent technical practices:

• ANGULAR2 + RXJS

• Bootstrap-sass

• Codemirror + markdownit (online markdown document editor)

• Webpack2 + dashboardplugin (Code pack)

• TypeScript2 + @types

• Stubby (data mock frame)

• Tslint + codelyzer (TS code and ANGULAR2 component static check)

• Angular2-template-loader (HTML, CSS Packaging for ANGULAR2 component)

• Karma + PHANTOMJS (TDD development)

• Sass + POSTCSS (CSS style organization)

• Typedoc (TS documentation)

• Fontgen-loader (Icon font)

• .......

Here for everyone to put a few rebirth, for everyone to preview:

Mobile-style:

PC-side style:

I hope we can enjoy it. Have any questions can be in the author's GitHub mention issue, the author will be in the free time for everyone to answer.

Rebirth Project Address: Https://github.com/greengerong/rebirth

Latest ANGULAR2 Case Rebirth Open Source