The
Angular 2 ecosystem
in 15 minutes
Attila Olah
The obligatory first slide
Hi there!
I am Attila,
I am working at Budacode as a developer,
you can contact me on Twitter via
Lets talk about
Angular Universal
Offline Compilation
NativeScript
ngUpgrade
AngularFire
From Framework to Platform
Zones
Angular Universal
Our fancy ng(2) app
Our fancy ng(2) app has problems
• no link preview
• zero SEO, your content is invisible
• without js enabled your users see nothing
• it has the web app gap
• native apps load instantly, function instantly
• average ng app loads in 3-7 seconds, that is a lot!
...psst Progressive Webapps anyone?
What really is Universal Angular 2?
Universal (isomorphic) JavaScript support for Angular 2
It allows you
• to render the requested page on the server side
• with a custom state
Why is it good for you?
• the things was mentioned before
• fits into your stack (no code duplications, no context switches)
• makes your app (partly) functional during initalaization
How it works
Server rendered view
becomes visible
App takes over
User events?
• preboot send down with the initial view
• it record the user events with pre-defined reactions
• once your app is initialized, preboot
replay the events to your app
Preboot
But wait
This is cool, but Angular is
tightly coupled to the DOM isn't it?
Yes ng1 is, but not ng2
Your ng2 app
Angular 2 API layer
Rendering Layer
How can we use it?
Ok I'd like to use this, how do I do that?
1, Just write your ng2 code...
with one restriction:
• No direct DOM manipulation
2, Install the Angular 2 server-plugin
• for your Express or Hapi framework
• ... more to come!
Offline Compilation
The Angular 1 way
Included in the package
• template compilation is handled in the browser
• tightly coupled to the DOM
Why isn't it good for you?
• performance loss at the first run
• needs to run in a browser environment
• dynamic behaviour, code can't be optimized by the
browser
• bigger size (compiler needs to be included)
The Angular 2 way - offline compilation
New approach
• template compilation is separated
• it supports offline compilation
The Angular 2 way - offline compilation
Why is that good for you?
• VM friendly code for best performance
• can run everywhere (Universal)
• small size (compiler is not included)
• can run in web workers
Angular as a Platform
Angular 2 loves multiple platforms – and the platforms love it too!
Progressive Web apps
Greatest step toward closing the web app gap
• Progressive
• Responsive
• App-like
• Fresh
• Safe
• Discoverable
• Re-engageable
• Installable
• Linkable
• Connectivity-independent
NativeScript (and React Native)
Really exciting stuff...
But at a basic level,
but I haven't found time to try it yet.
NativeScript converts the templates to native interfaces so there won’t be any junk on any device.
React Native by Facebook is also supported, you just write your regular Angular code and only the style and the template needs to be written in React.
Desktop
You can write an app for desktop in Angular with the help of Electron or as a Windows Universal App.
It allows you to write your app and call all native functions through Node or the Universal Platform.
Angular Fire
Synchronizes collections as Observables
import { AngularFire } from 'angularfire2';
class Attendees {
// people: any[];
people: FirebaseListObservable<any[]>;
constructor(af: AngularFire) {
this.people = af.database.list('/people');
}
}<ul>
<!-- <li *ngFor='let person of people'> -->
<li *ngFor='let person of people | async'>
{{ person.name }}
</li>
</ul>ngUpgrade
The browser has gone evergreen, and frameworks can too.
Zones
It allows Angular to schedule their painting and change detection smarter
How? It monkey patch all the async things
it is the reason we never have to call $apply again.
Thats it, Questions?
The Angular 2 ecosystem
By Attila Oláh
