PETE BACON DARWIN:
Hello, Angular Connect.
How are you doing?
We're really pleased
to be here today.
So today we're going
to share with you some
of the interesting,
exciting things are coming
in the Angular 1 branch
of this massive project
that we're all part of nowadays.
LUCAS MIRELMANN: So
first, who are we?
This is us hard at work.
And this is--
PETE BACON DARWIN:
At the office.
LUCAS MIRELMANN: At the office.
PETE BACON DARWIN:
Luke, can you just
stop with the silly photos, OK?
This is me.
My name is Pete Bacon Darwin.
I'm the Angular 1 lead.
Otherwise, when
I'm not doing that,
I'm organizing conferences.
LUCAS MIRELMANN: I'm Lucas.
I'm also part of the
Angular 1 core team.
So we're going to
present-- actually,
the presentation
is split into two.
In the first half, we're going
to show what is Angular 1, what
is coming up with Angular 1.5.
The second part is what
are we doing at the core
to ease the upgrade
to Angular 2?
PETE BACON DARWIN:
OK, so let's get
started with part one, which is
what you're all interested in,
yeah?
OK, so let's just have
a little poll of hands.
Who thinks Angular 1 is amazing?
AUDIENCE: Woo!
PETE BACON DARWIN: Yay!
Fantastic.
Yeah, as Brad said
in his keynote,
there's like a million
people using Angular 1.
And I think it's fair to say
that Angular 1 is our bread
and butter, and it will continue
to do so for a little while
still.
So what is actually happening
in Angular 1 right now?
LUCAS MIRELMANN: So Angular 1.2
and 1.3 are still maintained,
are open to security to fixes.
And 1.4 is the current
stable version,
is getting all bug fixes.
And Angular 1.5 is
the newer version.
PETE BACON DARWIN:
With new features.
Cool.
LUCAS MIRELMANN: New features.
PETE BACON DARWIN: So we've
got already just in the master
branch since we branched
off Angular 1.5,
we've got over 10 commits
with features and 23 bug fixes
already in there.
But there's loads
more on the way.
There's 30 pull
requests just sitting
in the Angular 1.5 milestone
that's waiting to go in.
Today we're just going to touch
on two of those, which we think
are particularly interesting.
LUCAS MIRELMANN: So first
one is, in Angular 1
over the years, we understand
some of the good practices,
some of the best practices.
The current way to find
directives, it's very flexible,
but it'll ask you
some poor practices.
So we are going to
add a new mechanism
to define a directive, that
is a component, adapting
some of the best
practices for Angular 1.
PETE BACON DARWIN:
The other thing
that I'm really excited about
is multi-slot transclusion.
And this is a feature
that's been asked a lot
for over the last year or so.
And, in fact, it was originally
muted by our friend, Vojta
Jina, back in October 2013.
Since then, in ng-conf,
Kara and Rachael
actually demoed a version
of this in their talk.
And we've iterated upon
that, and now we've
actually managed to
get this into master.
Now, what this does is
it allows us to set up
a mapping between the elements
in your transcluted code
and slots in the template.
So now you can map in different
parts of the transclusion
into different
parts of template.
And I think you're
all going to enjoy
playing with that very soon.
LUCAS MIRELMANN: The other
thing that is very interesting
is that in Angular 1.4, we
focus on the performance
part for digest times.
In Angular 1.5, we're
focusing on bootstrap time.
This is why we have a new
lazy completion of templates.
This allows for 25%
faster boot up time,
and it reduces the initial
memory pressure by 50%.
We also have a new sanitizer.
The new sanitizer-- it's
completely done from scratch.
It reduces the [INAUDIBLE]
minify version by 3K.
This is very
important, especially
for mobile development.
PETE BACON DARWIN: Cool.
So the other thing you ought
to be interested in, if you're
a Windows developer,
is that we've
been putting a lot of effort
into making sure that you
can contribute to Angular 2.
You might not know,
but most Googlers
don't actually build and develop
generally on Windows machines.
And so the support for
Windows builds of Angular
over the years has
waxed and waned,
but we've, actually, now got a
really reliable, solid platform
for building on both Windows and
Unix-oriented operating system.
So there's no excuse for
anyone not to get involved
and contribute now.
LUCAS MIRELMANN: And we'd
like to also point out
that the effort in
Angular 1 would not
be possible with these
amazing community.
We'd like to highlight all
the core member teams that
are not here with us on stage.
Many of us, many of you--
PETE BACON DARWIN:
Some of them are
going to be in the
audience, I reckon.
LUCAS MIRELMANN: Yeah.
But I would like to
really highlight this,
that this vibrant
community actually
makes Angular 1 possible.
PETE BACON DARWIN: So
I'd like to just take
a moment to say thank you
very much to you guys.
You've been amazing,
amazing support
over the last 12 months or so.
So that's not all.
We've got loads of stuff
planned for Angular 1.
There's so many things that we
could be doing with Angular 1.
We want your feedback.
Here are some of the ideas.
If you want to get
involved, or you've
got some ideas about what we
could be doing in Angular 1,
come and see us at the AMA later
on and discuss it with us too.
So that's the end of part one.
It was lots of fun.
You're going to like
part two even more.
LUCAS MIRELMANN: So
what is part two?
Part two is, what
are the changes
that we're doing at the core?
And what are the
libraries that allow
you to upgrade from
your existing Angular 1
app to an Angular 2 app?
PETE BACON DARWIN:
I'd like to point out
that this is the second
mention of "Back to the Future"
in any talk, so far,
in Angular Connect.
I reckon there
could be a few more
over the next couple of days.
OK, so what we're
trying to explain
is how do we get from
here, at my Angular 1 app,
to here, my Angular 2 app?
Now, what we've got today is
to talk to about-- there's
a couple of projects.
One of them Brad already
mentioned, ng-upgrade.
And the other one is ng-forward.
And we're going to give
you a bit more information
about that right now.
LUCAS MIRELMANN: So
what are the challenges
that you will face when you're
upgrading your existing Angular
1 app to an Angular 2 app?
There are changes in syntax.
There are changes from an
Angular 1 app to an Angular 2
app.
There are also
changes in semantics.
The behavior for the
components change in Angular 1
and in Angular 2.
So for those two challenges, we
have two completely different
contexts that we're trying to
solve this to actually make
life easier for you.
PETE BACON DARWIN: So
what we've got here
is we've split the
challenges into two groups,
and that's because the first
group gets handled really
nicely by this project
called ng-forward.
LUCAS MIRELMANN: The
second part is ng-upgrade.
Ng-upgrade allows the
semantic part of the upgrade
to an Angular 2 app.
PETE BACON DARWIN: And what we
believe is that both of these
can be used separately
and together.
So let's actually
think about how
you could upgrade a large
Angular 1 app, incrementally,
to Angular 2, using
these projects.
So your first step could be,
you take some of your Angular 1
components, and
directives, and services
and you use ng-forward to
translate them syntactically
into something that looks
much more like Angular2.
Remember, though, that this
is all still Angular 1.
There's no Angular
2 involved here.
It just looks a
bit like Angular 2.
LUCAS MIRELMANN:
Second part would
be to upgrade the
components that you already
have in ng-forward, to
move them using ng-upgrade
to an Angular 2 app.
This allows you to have
Angular 1 and Angular 2
running side by side.
The upgrade for components
that are already
in ng-forward to ng-upgrade
will be very, very boring.
But--
PETE BACON DARWIN:
It'll be pretty
straightforward, won't it?
LUCAS MIRELMANN: It'll
be very straightforward.
But it will allow you to have
your app running with Angular 1
and Angular 2 side by side.
PETE BACON DARWIN:
And so you do is
you continue with this
process of moving things
into ng-forward and then
across into ng-upgrade.
Until eventually, you
get to this state,
here, where you've
got most of your app
in ng-upgrade running
Angular 2 components,
and then a few bits and
pieces left in Angular 1
that you just can't move
across without making
it a big change to
your application.
LUCAS MIRELMANN: At
some point in time,
you finish this upgrade
process, and you end up
with a full Angular
2 application.
At that point, you can
actually remove ng-upgrade,
and you end up with
your Angular 2 app.
PETE BACON DARWIN: And
Angular 1 has disappeared.
We were going to put
a tombstone there,
but I thought that
might go badly.
OK, so let's talk
a little bit more
about exactly what these
projects are all about.
Ng-forward actually comes out
of a bunch of community projects
that different people
started, and they all
had a similar goal.
And at the beginning
of the summer,
they all got together and
decided to join forces.
And Mike, and Hannah,
and Tim, and Paul--
who's here-- and they
actually, have all
formed this group
called ng-upgraders.
And they've created a
project called ng-foward,
which we're talking about now.
And I'd really like to
thank them for this work
that they've done,
because, again, these
are people in the community
doing it for their own benefit,
but also for the
love the community.
So what ng-forward
does is it allows
you to use cool tools
like languages, like ES 6,
and decorators, TypeScript,
and ES 6 modules, and so
on, in a really clean way, but
still build a pure Angular 1
application.
And if you look here, you've got
a component definition, which
looks really similar
to Angular 2,
and the code inside
the class is going
to be really similar
to what you'll
have when you get to Angular 2.
But this is actually going
to syntactically sugar
around a pure
Angular 1 directive.
So what you end up with is
a pure Angular 1 directive,
but you can work in a way which
is much closer to Angular 2.
Similarly, ng-upgrades
auto-generates directives
for you, so that
you can actually
use this rounded brackets
and square brackets
syntax in your templates to
interact with the components
that you've generated
using ng-forward.
So again, you're trying
to move your templates
closer to the syntax that's
going to be used in Angular 2.
We've got a really
cool demo of that.
Unfortunately, it's
a Todo MVC, and Brad
was hoping that we
wouldn't have any Todo
MVCs in this conference,
but there is one.
But we're not going
to demo it right now.
If you want to know more
about this, and see the demo,
and look at the code, come
over to our AMA later on
and I'll give you
full run through.
LUCAS MIRELMANN: So the
second project is ng-upgrade.
Brad actually mentioned
this in his keynote.
Ng-upgrade allows you to
have Angular 1 and Angular 2
components running side by side.
You can have cross-Angular 1
and Angular 2 component usage.
And Angular 1 can use Angular
two components, and vice versa.
You also can do cross-Angular
transculsion An Angular 1
transclusion will be transformed
into an Angular 1 projection,
and the other way around.
That implies that components
that use transclusion,
you can use them within
Angular 1 and Angular 2.
Also, bindings and expressions
will work across Angular 1
and Angular 2 projects.
That implies that
Angular 1 and Angular 2
will be running side
by side within one app,
and the components will be
shared between those two apps.
PETE BACON DARWIN:
And not even side
by side, but kind of inside and
outside of each other, as well.
Like they're totally
intermingled.
It's really, really cool.
LUCAS MIRELMANN: So
here's some sample code.
This is how you would actually
use an Angular 2 components
within an Angular 1 app.
You just define it
in your template,
and you define the findings.
That implies that an Angular--
that is actually the only thing
you have to do in Angular 1.
In the Angular 2 side, you have
your own component definition.
It's an Angular 2, purely
Angular 2 component,
and you can use it.
It's important to
notice that there
is some boilerplate in
the Angular 1 application,
it's custom bootstrap.
But that aside, it's just
an Angular 1 application
that starts.
The same thing can happen
the other way around.
In an Angular 2
component that wants
to use an Angular 1
component, you just
define it to your template.
And it's important to notice
that in an Angular 2 component,
you actually have
to specify what
components you want to use.
And you upgrade provide
some helper classes that
will wrap your existing
Angular 1 component,
so they're Angular 2 compatible.
But on the other side, it's your
existing Angular 1 component,
you have to make no
modifications all.
They can just be used as a
normal Angular 1 component
within a Angular 2 component.
And I just your existing
component with existing
bindings.
You could just embed it.
PETE BACON DARWIN: And this
sounds really straightforward
when you talk about
it, but the difficulty
of actually getting
all of this to work
is amazingly complicated.
And [? Mishko ?], who
obviously couldn't be here,
spent a lot of time
working on this.
And he's done a fantastic job
of getting all this transclusion
and the messaging
backers in and out
of all the different
components to work.
It's a really cool
piece of engineering.
So let's just recap
where we got to.
We are suggesting that a
potential upgrade path that you
can take is you get
your Angular 1 app,
you convert the syntax
across to something which
is much closer to Angular 2.
And this also gives
you an opportunity
to scale up your team on the
syntax, and language features,
and the tooling
that you would need
when you start doing
[? transplaction ?] with ES 6,
and so on.
Then once you've got
that up and running,
you've got your
apps still running,
but your team is starting to
understand the new concepts.
You can then take that and move
it across to using real Angular
2.
And in real Angular 2 you
get performance benefits.
You get additional benefits,
in terms of the extra features
that ng-foward is
not able to provide.
And then, finally,
you remove ng-forward
and you can then move
all of the other bits
across into Angular 2,
strip out the Angular 1 app,
and off you go.
Now , it's important to remember
that this is just a suggestion.
And you can miss
any of these steps
if they aren't appropriate
for your project.
So it might be that you
don't need ng-forward,
because you want to just
get stuck in straight
away into Angular 2.
That's absolutely cool.
It might be that
you want to hold off
on actually moving to
Angular 2 until you're really
comfortable in the whole app.
Or maybe, for
instance, you don't
want to have the extra
download of having
two frameworks running side by
side, and perhaps a mobile app,
for instance.
In which case, you might use
ng-foward for a lot longer,
and then move the
whole app across.
Or you if you really daring,
or you've got a very small app,
you could just
ditch all of these
and just move the whole
thing across in one go, which
is going to be a lot of fun,
but could be a bit scary if it's
a big app.
LUCAS MIRELMANN: And just
to recap, Angular 1.5
will be very cool.
It will have a lot of
features that you will love.
It will have great
performance improvement.
We are building the core
in the core, the components
and the changes that
we need to allow
for ng-forward and
ng-upgrade to work very nice
and to have a very
smooth transition.
You can actually have your
existing Angular 1 app
and upgrade to Angular 2 in
a very smooth transition.
Your app will be
running all the time.
You will be able to
do this incrementally.
Please, if you
have any questions,
join us in the Ask Me Anything.
It will be later on today.
Enjoy the conference,
and thank you.
PETE BACON DARWIN: Oh,
and just before we leave,
we wanted to show
you a little bit more
about the people
who've been involved
in Angular from the beginning.
So if we can just
get to that button.
Oh, it's underneath there.
LUCAS MIRELMANN: Reset?
PETE BACON DARWIN: Refresh.
LUCAS MIRELMANN: Always it's--
you always need something
to not to work, you know?
PETE BACON DARWIN: So just
enjoy the beauty of contributors
to Angular.
And you can see how, initially,
when Angular was first built
and for the first
year or two, there
was only a very small
group of people.
And then around about 2012,
Open Source kicked off
and Angular went ballistic.
And suddenly, you had
hundreds of people
joining in and helping out.
And this is really testament
to Angular's success, I think.
You know, that we've
drawn in the community,
and the community have embraced
Angular and gotten involved.
So I'd like you all
to keep doing it.
Do it with Angular 1, but
also do it with Angular 2,
because that's going
to need the ecosystem
to build around it too.
So thank you very much.
[APPLAUSE]
