Introduction to
Universal Angular 2
in 10 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
Your regular ng(2) app
Your 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
• avarage ng app loads in 3-7 seconds, that is a lot!
...psst Progressive Webapps anyone?
What really is this 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 that 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
became visible
App takes over
User events?
• preboot sent 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 we can use it?
Ok I want to use this, how do I do that?
1, You 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!
Thats it, Questions?
Introduction to Universal Angular 2
By Attila Oláh
Introduction to Universal Angular 2
- 1,233