Hey everybody, thanks for coming to another episode of Adventures and Angular. I'm
the host Aaron Frost with Hero Devs. Today on the panel, we have
the loved geos Ephemes. Hey everybody, Choe Emes here, CEO of Thinkster
dot I out and Cypress expert. Now, hey, nice bro. Did
my Cypress webinar today? It was awesome, So yep, Cyprus expert.
And we have the beloved beloved Brian Love. Hi everybody. Brian. Who
are you? Tell everyone who you are? So I'm a Google Developer expert
Angular and right now I'm just doing independent consulting, so helping out a couple
of clients here in Denver, and also Lucas ruble Key out of Phoenix kind
of doing a project with him right now as well. So mainly focused on
Angular, but I certainly do a lot of full stack development with node and
nests as well. So nice yeah man. And I was going to ask,
is your is that workshop the Cypress that you did, Is that going
to be available online? The webinar or the workshop? The webinar? The
webinar is going to be available online, although I think we're going to do
the webinar again a couple more times. But if we have the workshop coming
up on July seventh and eighth, that will also be available online for people
to buy the workshop, but it's a full day cypress workshop. I'm doing
a little selfless plug here while we're talking about about it. But yeah,
I think the webinar, we're going to make it an available online for people,
but I think we're going to do it a couple more times too.
How far out are we on our publishing? Were a few weeks just to
correct it wasn't a selfless plug. It was a shameless Yeah. If anything,
it was selfish. But it's notice how if you use a word that
sounds right but is wrong, it totally changes what things mean. Right,
Yeah, yeah, yeah, right, yeah, right. Well, if
I say shamish, that's just a Scottish person, but if I say slish,
it's different. You're right, shameless plug. Bro. It's like when
I talk about my fat free twinkies. They're not fat free, but if
I say that, it totally changes. Yeah, they might be trans fat
free. Well, let's get to our guest we have on the show,
another Google developer expert, Michael print Is. Mike, can you introduce yourself
to everybody. Hey, I'm Michael Prentiss. I am in central Florida on
the beach on the East Coast, and I run a small consulting company,
Devon Tante, and I spend a lot of my time lately as a contributor
on the Angular Components team, the lead maintainer of angular jass material, so
the previous version, and so I'm keeping that alive and stable and mature and
fixing accessibility and performance and things like that, as well as working on making
sure all the use cases around upgrade work so you can have a nice upgrade
angular material. Now, my understanding is the East Coast is the worst of
the two coasts. Is that true or false? Well, it depends on
what you want to do. There's not really any surfing on the West coast,
so I'm here for the waves and some surfing, some rocket launches.
That's a good point. If you just want sort of waste deep water that's
kind of just stagnant and you know, pretty then the West Coast is great,
but it's ptter too. Are we good to call you by your usual
nickname? Point Break? Is that is that fine? Never heard that one?
I love point Break? So so let me let me ask a question
when as you introduce yourself. I know that angular js is in long term
support on version one dot seven and one dot two technically is still in long
term support too, since that's the last version that supported I eight, So
I know those are technically in long term support, meaning but they get very
little. So how much love does angular jazz material get like it sounds like
you're actively doing it. Yeah, so angular js is in long term support,
and you know, they've had a few releases come out with some little
fixes here and there, fixing some regressions. One dot seven eight is a
recent one. I think the LTS is about one dot seventy five, so
there's been a few small patch releases. But yeah, there's no like if
you open an issue or open a bug. For the most part, they're
not really accepting those. So if you want to make some major change angler
js, they're kind of recommending, you know, it's safe to pork it.
There's not a lot of things going on, so if you did need
to pull a few things in you could. For angular js material, we
started a good deal after angler js started, and we have we're built on
top of that. So we've kind of been you know, catching up,
and we have a lot of components and we want to make the components a
bit more mature and accessible before we kind of say, you know, LTS
is ready to go. These are stable and completely done. So yeah,
we are working. You know, it's basically just me and you know a
number of community contributors that are still still working on things fixing. A lot
of people are still using it. I think we have fifty thousand downloads on
MPM a months, but then a lot of users strong script tags and UMD
and also power yeah, because it's still from back in the day when that
was the thing, right yep. Yeah, So we support this wide range
of like script tags all the way to now in our builds. We don't
publish or talk about it a lot, but we do actually put our builds
out into like closer modules and there's quite a bit of modularity there that if
you needed it, you could go and grab it. But Mike, to
be clear, Angular JS material is not it hasn't been like an LTS or
deprecator or anything. Right, You're still it's still being actively maintained. Correct.
We are you know, evaluating and we've got a one dot two dot
O release that we're kind of looking at. Okay, but it's kind of
where that's sort of in limbo as we try to you know, get the
high priority issues and accessibility fixed and the nice breaking changes around like aligning with
Material Design Speck, but does break Google internal and that's sort of a problem,
so we're trying to figure out how to deal. You still have Do
you still have customers inside of Google? Yeah? A lot, I bet.
We have to go through the whole presubmit process, so we're working with
different teams as you know, issues are found, and you know, we've
had a few contributors from inside of Google who wanted to add something. We
just recently had a we have our autocomplete. It only does virtual repeat,
which means that all the items have to be the same size. But we
got a contribution from inside Google to make variable height there. So it doesn't
use virtual scrolling, so it's not as performance, but you do get your
variable height. So so it was sounding like Angular Jazz material project, what's
kind of fully run by the community, But since there's so much dependency on
at Google, is it is it still a Google project? Like are you?
Are you working with the team at Google, Mike. Yes, yes,
I'm on the Angular component's team. I work with Jeremy and the rest
of the team, the caretakers and whatnot, go through that the full process
of pre submitting and running tests and screen shot tests against all Google and so
like analytics. A lot of their products are using their Jazz, material Cloud
and fire based. You know. It's it's like because a lot of those
a lot of those apps are still in a hybrid state right where they're moving
them over from Anglo jazs Angular. Yeah. Yeah, and there's a lot
of apps that are just Angular JS and they're not you know, there's no
major reason to move them. A lot of internal apps and things like that.
Interesting. Yeah, it is interesting. I didn't know that. That's
good to know. Well, that's kind of fun being on the components team.
Yeah. I try to help out with you know, the main components
REPO, CDK and material when I can, but limited time. Mostly I
just help a little with schematics and some triage. I also help with the
CLI documentation. Yeah, you were helpful with helping me a little bit with
schematics, right, and so I certainly appreciate all that you've done there.
Yeah, I did some projects in the past with enterprise customers, so I
dug into schematics a bit. Yeah, it's fun interested in that area.
We're not here to talk about schematics. So we're talking about migrating angular jas
to angular or excuse me, migrating angular jazz material to angular material. Sorry,
let me get that clear. Yeah, so are we talking about migrating
angular jazz material to angular or migrating an app that uses angular JS material to
angular material? Yeah? Like what are we talking about? So in the
past, we've had an angular io. There's a guide for enng up grade,
so you got to get your angular jass app up to Angular. But
if anyone's ever tried it and they use angular jazz material, it's just just
easy, like it's not even very hard. Yeah, it's it's like a
one page doc, right, Yeah, and you just followed instructions that are
perfectly perfectly there's no holes and super simple copy paste. Isn't it just energy
upgrade? Don't you just run a command I wish, I wish this is
a series of short stack overflow articles and then you're done. Okay, all
right, so you go into the pit of despair and you decide that you're
gonna upgrade, which is actually I say that it's it's better to upgrade than
it is to like go to another framework. In my opinion, it's better
to upgrade to Angular. It's cheaper, but it does have that initial like
I got to set it up. That initial setup is like a punch in
the neck, right, Yeah, And there's a bit of in the beginning
about like how do I wrap my arms around this? Like what are all
the things that I need to do? And how am I going to plan
and estimate this? Yeah, because most people doing this, they've been doing
Angular Jazz for probably not an insignificant amount of time. They don't they don't
have the some of them have webpack experience or well they'll have some other types
of experience, but others don't, right, Like, so it's a massive
upgrade, Like depending on where you're at, there's a lot of different steps
involved, and you know, you can get a long way into it.
You you know, you can upgrade to some components, you can upgrade to
type scripts and web pack, and you won't feel any of the pain of
hitting some of the Angular Jazz material stuff until you're you know, halfway through
it and then you try to you know, go into hybrid mode and you
can run into some issues. So there's sorts of upgrade. There's sort of
the NG upgrade and then there's the NG upgrade lights, which now it's upgrade
static I think it's called there's different terms around it, but it's basically are
you using upgrade module or downgrade module? And so with upgrade module, Angular
Jass material is not going to be happy if you're using the upgrade Okay,
so you're you're gonna want to use the downgrade and downgrade the angular version.
Is that what you're saying? Like, yeah, so there's a whole guide.
It's it's actually called upgrading for performance on Angular io, and that goes
through using the downgrade module, and that is sort of the process you want
to follow for Angular jass material compatibility as well as you know, improved performance.
I'm really ignorant to this material piece of the upgrade. I've done an
upgrade, but the material piece, I'm like totally ignorant. But it's actually
even more money than Google saving you by offering this, like the fact that
I can downgrade Angular material components to be run in Angular JS, Like that's
that's a phenomenal cost savings. Anyway, it sounds like it's probably also not
trivial. It's not. It's not trivial, but I'm putting together a stack
blitz. It kind of shows how to do it, but it's it's it's
one piece, you know, so you kind of have to have already gotten
to webpack and things like that. So yeah, there's some different things.
You got to have to set up some facades and you set up you know,
your downgrade module and you connect everything up. But then once you have
that, as long as you sort of play within the right sandboxes, you
are able to put you know, Angular material components angular material components in the
same app on the same page and actually community cool. Do you provide like
some some downgrade helpers that will help keep the APIs that the Angular JS apps
are using able to work with the APIs of the new Angular material components?
Like, are you providing additional support because I'm I know you don't have the
same APIs in the new version that you did in the old version, So
are you providing that transfer layer like thing? No, nothing, nothing quite
like that. We don't really add any any specific APIs other than we just
allow you know, our angular just material APIs to work and then you can
bring in the angular material and those will work. So that's one of the
big sort of issues, is like you can't just convert like a toolbar to
a toolbar, Like you can't go MD to MATT and it will just work.
Yeah, you can't just do MD to MATT and then everything's working now
because some of the elements have gone to the CDK and some of them have
gone to material and like our layout system was completely pulled out into you know
a number of separate things. Yeah, got it. So you can't you
can't just it's not a one to one no, And so we put together
this migration guide now it's on it's published now to the material Angular jested org
slash migration. So we've got a guide now that will break you through and
it'll walk you through and it'll show you like these things map one to one.
The name is a little different, but here's the links to both of
the docks, so you can go look at the APIs and then we also
break down some of the bigger changes like theming, layout, typography and just
know how those work. What are the features that are supported in the two
different? Because it's not complete feature parody. So if I want to downgrade,
like if instead of doing an MD button and I want to I want
to use the map button, they should look largely the same. But I
can't just rename it to Matt button and expect everything to work. I have
to do a lot of stuff. It sounds like, like what's involved in
like just doing like one component with a button, and like, what do
I have to do in that component? It's a good question if it's just
a button, Yeah, you gotta change the name. And we've got a
little bit different syntax as well, because we've got like Matt raised buttons,
so we use the attributes instead of a class in some cases. Additionally,
the data binding will be a little different if you're doing anything there, and
the padding and the spacing will be a little different. Most of the behavior
will be similar, but there may be a little bit of a padding in
space, get some looking field changes. It sounds like, yeah, you
need to, you know, check your CSS and make some adjustments. So
I'm guessing because I asked this, and maybe I didn't askiade like when you
take an angular two components and you're going to downgrade it, you have to
wrap it in that downgrade component function. Right, that kind of takes it
and says, oh Angular, Jess understands you. You know, now,
do I have to manually do that? Or are you providing the downgrader.
I'm going to call it a downgrader because I'm not in I'm not part of
your world, bru, and I don't understand what they're called. So are
you providing me the downgrader for the button or do I have to like,
oh, button, I gotta go down and then then I gotta do my
I gotta write my own downgrader thing. No, you don't have to do
your own downgrader thing with When you do your Angular JSS module, do you
kind of you put in there like downgrade module and then you hook in your
bootstrapped your Angular module and then you need to register your components and directives.
So in this case, you would register your Angular components as directives. So
you tell it the selector and then you say downgrade component and then you just
give it the class of the the Angular component. Yeah, so that's what
you do for your actual components. You don't actually need to go and do
that for like Matt toolbar class or anything like that. Okay, so the
button, the buttons one of the easier ones. It sounds like I got
to change a couple binding syntaxes, but largely I think I'm hoping that people
on the podcast are like imagining. Okay, largely, the button is going
to take me a nominal amount of time per button, right, there's no
there's no finding replaced schematic type thing for this. So it's gonna take me
a nominal amount of time per button. What are the ones that are like,
it's not one to one because the MAT's like it's the button is one
to one. You're changing from button to button and you're done. What are
the ones that aren't but one to one? The calendar that one of them,
or like well, for for date picker, there is a date picker,
so there you know that's comparable. Okay, there's actual an emty calendar,
which is like the actual calendar the month few and other material doesn't expose
that, so you wouldn't want to migrate that piece. You have to keep
that, you know, in the hybrid mode until you find another solution.
For now, So you're saying the angular jazz has a calendar. Angular aular
jets material has a calendar, and there isn't one in angular materials what you're
saying, correct, So that's a calendar. Yep. Actually in some cases
the combination is better because a lot of people on a adjust material they really
need a table. Oh and there's really nothing whereas you can bring in the
CDK table or the angular material table have your whole anger material app but then
boom, you've got an angular material table and you're good to go. Boom.
Nice. So there's benefits that way, and then you know as far
as what's not so like md panel goes to the CDK. Now that's overlay.
There's like virtual repeat that's handled and the Virtual four for CDK there's we
have some live announces brand new right yeah, it's just under a year old.
I think virtual repeat the CDK Virtual four kind of the thing. But
there's a bunch of different attributes and things that you can use with it.
Yeah, and then accessibility and like bide ie stuff those are also in the
CDK. And then the layout is really sort of it splits off like you
can do really simple lightweight layout with the CDKS layout Okay, you do some
responsive breakpoints, and you can you know, do that in typescript as well
as in your templates. But then if you want sort of the full on
like material you know, Angular Jazz material layout system, that kind of got
poarded over to Angular flex Layout mm hm, the whole library, and they've
actually added grid support and that's sort of a heavy weight, full layout system.
But that adds just like our layout we you know, when we do
our layout and Angular Gestion care, we generate a ton of CS to handle
every possible container and nested layout and whatnot. And when you say generate,
that's on runtime, right, you're generating all that CSS. Yeah. Yeah,
so you'll see in your project like a mass and so they've improved upon
that, but it's still like it has to do a lot of work and
solve a lot of problems. So I put in our migration guide some details
about kind of the bundle size impact you're looking at. It really depends on
if you're just using Flexbox. If you're using Flexbox Angrid, so as you
use it's all modular. So if you just use a few features, you
get a smaller hit. But like if you use everything, I think you
can get up to like sixty kb just dad like the flex layout with all
the features. Wow. So is that the recommended approach or do you recommend
just writing your own you know, s CSS with flex Flexbox and CSS grade.
Yeah, it depends if if you want to get some of the responsive
features and some of the reactive like observable APIs and stuff, you can use
a CDK layout that's just like a three KB MOMP. So it's pretty small,
yep, but you don't have all the attributes and all the other things.
So that's an option. But yeah, for a lot of apps and
a lot of cases, flex box and grid just CSS is sort of the
recommended way to do it. We have links in here for flex Box Zombies,
Flexbox Froggy, places where you can go and you know learn, you
know how to use these and cut out the need for you know, a
jobscript library since you can write that CSS. Yeah, just use the platform.
Yeah, man, Joe, remember we were talking about this stuff the
other day and you had you had a bunch of questions, right, tons,
tons, I mean there's so many I can't even I can't even keep
them straight. But you forgotten them. Well, I forgot like there's there.
They're just jumbled, like you know, what is and who is and
how is It's just a big question, just a big question. What isn't
not? What is it not? What isn't not? Yeah, that's a
new question. Yeah, Like I do have a few questions about just how
you're handling supporting people that are actually doing upgrades and all the crazy scenarios that
they're coming up with, like oh, I'm trying to do this and this
isn't work and I'm trying to do this. Like for me when I was
I spent I think eight years of my life roughly with on ENNG upgrade eight
eight around eight around eight? Uh yeah, crator, did you mean on
an angular JS? No, no, no energe upgrade. But here's about
it my life. That's sort of feels like I'm just like going off feel
I don't really, I don't really believe in Like I didn't have a calendar
control really like relative years. Yeah, I hadn't implemented the calendar control when
I had started tracking, so I wasn't I'm not one hundred percent sure on
the exact but it's about eight years. But when you do an upgrade,
you know, jobs troup with math it's eight years, but there might be
a rounding error in there. You might want to convert that to weasm bro,
you might GI. But when you're doing upgrades, that was one I
did a lot of work with upgrades and man number one question with people,
well not number one, but one of the very common question was material Right,
Like, I look at this and I just think, oh my gosh,
if I'm migrating from a material angular JASS app to a material angular app,
there's so many like controls that just still aren't in material angular. What
do you tell people to do? Like just from a high level strategy standpoint,
it really depends on their you know, final goal and you know the
size of the app and whatnot. I think for a lot of you know,
a lot of teams, it's just bring in the angular stuff, you
know, the angular material stuff. Get the benefits of that, and and
you know, add your new components you know in that. I think,
you know, from what I've heard talking to people even within Google as well,
that seems to be what they're doing a lot of is you know,
as we add a new component, we'll do it in an angular in the
new angular angular material we'll use the CDK, but you know, we we
have enough of a look and feel similarity that the UI will work together.
Maybe if you'll see us a squeaks. But so just leave the angular jas
material stuff in angular jas material and focus on the future building with the angular
material if you can. It really depends on your use case. If you
know all of the you know the fine, you know, the small,
the performance, all the stuff the angular gives you, then you might be
more motivated to you know, just come into Joe's question. As Joe,
as you asked that, I'm staying. Yeah, well you eloquently stated it.
I'm sitting there imagining, you know that scenario where it's like, all
right, imagine that you have an app that's written in angular jazz and an
you jest material and you have to upgrade it to something else, right Joe,
mm hmm exactly. Well, if you if you don't use NG upgrade
and you don't go to angular jezz material or angular material angular thing material,
you have to manually do all this upgrade stuff anyway, like you have to.
There's no NG upgrade support for you. Like let's say you're gonna go
to a view or spelt or react or you know whatever, pick your pick
your fa your jobs. So even though as crazy as it sounds, and
as as like Mike's talking about the many to one and the random spacing problems,
and there's not a parody on imagine doing all that without a whole entire
team of people supporting you, Like, it's even as hard, as as
hard as it sounds, and as hard as Mike is like saying, hey,
it's not trivial. It's not trivial, because it isn't and he's not
lying. But as hard as it sounds, and as hard as it actually
is, and as much as it's gonna cost you to actually do it,
it's still cheaper than if you are like, all right, I'm gonna go
another route to another thing that has absolutely no pavement for me to just walk
down, you know what I'm saying, Like I gotta all up myself.
Sorry. Here kind of provides the glue there. But if you go to
like view or something, you actually have like three or four different material libraries
to choose from before you even get started. And then we don't there's no
mapping to tell you, yeah, how to get there. And as people
who are comfortable with a framework, which most anulogists people are those people right
where, Well, if you're still an anulogist, you're not out one of
the I like to just use the platform. I like to just use Vanilla
jas. People like that's that's generally not who you are. I realize I'm
generalizing, and I know that's that's just not a good thing to do.
But so I think that this is still a comfortable path. I think for
a lot of people, it's a it's a less even it's a less mountainous
way to go than then. Like the way Mike just said, let's go
to view and just figure it out on our own, without any support,
out without any guides. I'm kind of curious. It seems to me like
this is the number one reason why a lot of people, the number one
reason why a lot of people don't upgrade from Angler Jays to Angler is just
the fact that we have this huge custom component library we've already built. It's
there, it works, it's fantastic, and going to anything else would be
so horrendously painful for us that we decide not just you know, yeah,
when I say pain, pain is just money. It's just a euphemism for
money. Yeah, is that what you say? That's true what I've seen.
Yeah, it's hard to like I said, it's hard to wrap your
arms around it and really see, Like how can I pitch this to my
boss? If you know, I only can tell him and show him.
Oh, I got documentation for the English jazz piece, but now we are
providing the England jazz material piece, so that you can bring all of that
and you can say, Okay, we're gonna we have to do our services
and here's here's the different services with angular jazz material that map to angular material
and so at least there's a way for you to like start that analysis and
break it down and chart your own path. We don't really right now have
like do these components first, or we don't. We don't have a guideline
you know there, but we have enough here for you to sort of see
what how you can chart your own path. We call out some of the
new components that you know you haven't seen or use, like badge and drag
and drop and things like that, so you get a preview into that as
well. When I see people like Joe kind of going to where you're saying,
oh, I'm intimidated. It's too scary. I don't have the money,
right, whatever, whatever the pain is, you know, you call
it pain money, that's if you're a boss, it's money, if you're
if you're a programmer, it's fear. You know, it's imposter scenemos,
whatever. It's a multitude of things that are that are the pain. Why
you don't do it? But uh, I look at it and I think,
uh, the bare minimum that you should do. Like, let's say
it's a pain, and I'm not saying it's not real. It's real.
Okay, I've done it. I know it's scary. Yeah, you should,
at least, though, put in angular upgrade so that your new features
can go in Angular. I'm not talking about rewriting a line of code.
I'm talking about in your in your worst case scenario. Just tell your team,
Hey, starting this day, everything is Angular. Everything from here backwards,
we maintain, we upgrade, and we go forward and angular jests.
But everything new is in Angular. And we're doing that for these reasons,
save money. Still be able to recruit, but la, you list them
out. But the people who are so scared that they won't even like take
the first step that's where that's where I'm completely lost. Like it reminds me
of this this uh saying from Mark Twain where he's like, if your task
is to eat frogs, eat him first thing in the morning. And if
your task is eat big is to eat two frogs, eat the biggest one
first. Like there there are tasks that are not fun, they're scary,
they're intimidating, and your imposters from drunk gets the best of you or your
procrastinator instead of you, you know, whatever it is, whatever part of
you that's like, oh you don't do it, it gets you, but
you got to change your mentality. It's like, dude, eat your frogs,
man, eat the biggest frog first, and just just just do something.
The only thing that's worse than then then then then than a bad idea
is nothing. Like you gotta do something though, like take it, take
a step in some directions. So so yeah, that's kind of that's kind
of where I'm at, Mike. Can you speak to maybe kind of internally
google what they've done. Have they done something like what Aaron's sane where they're
just like, okay, listen, we can't rewrite everything that we have in
the you know, the cloud console or Firebase or whatever it is. But
going forward, we're just going to write it all in the new Angular and
the new Angular material. Is that bend the experience or are they? Or
they actually they've got engineers sitting there just banging out code and Angular and just
you know, going from Angular JAS to Angular and trying to get Angular JAS
completely. You know, well, I think you know the reality is that
there's thousands of apps and so they're doing it all. There's certain apps that
are going completely upgraded. There's certain apps that they're just doing the new features
and Angular material. Okay, it's just it depends on the team, the
app et cetera. By all, do you mean there's also apps that they
are committing hardcores and never upgrading, Like is that also a thing? I
think he said that, yes, they're just gonna like whatever it works to
ango JS, it's all good. Some that just don't make sense and there's
not even a team on it right there's like someone built it for a you
know, line of business need and it's still working. Though. I think
developers have a hard time with that concept of not all developers, but I
think some it's not certainly. Generally, I think people are okay with it.
But I think sometimes people can't see past the it doesn't make financial sense
to upgrade this thing, you know, and they they they create false urgency.
Like I remember I was on a team sixty five front of developers and
and one day We've been writing in you know, jest for years effectively,
right, and one day people just start saying things like I can't do it,
I can't do this anymore. And I was just like, what,
Like I've been I worked with you for the last five years, and you
did it for every day for five years, like what happened yesterday that we
can't do it today? Like like it's still like it you say, you
can't be more specific, like you don't want to cause you could, you
could still do it, you know, And so I don't know. I'm
also very sensitive to the business need that sometimes it doesn't make sense upgrade,
you know. The other thing they should be mentioned is LTS for Anglo JS
is out to twenty twenty two. Twenty one? Oh is it twenty one?
Okay? Can I that's still pretty far out right, I mean,
if you started today, like let's talk about Brian you've done an upgrade,
right. Yeah, if you started today and you weren't like aggressive, you
were just kind of like slowly upgrading, you're going you're gonna go way past
June twenty twenty one. You'd have to get aggressive. You have to get
aggressive. And I've worked for clients here on Denver that have huge Anglo JS
apps and they've gone aggressive, and it's taken them, you know, nine
months, ten months, and they're just they're just pushing as hard as they
can and they're still doing some feature development, but they've slowed future development and
they're just like focused on getting rid of Angular JAS and it's just it's a
lot of work. Yeah, and we're in June twenty nineteen. If you
started today, I gotta be honest, most people don't hit that twenty twenty
one deadline. Now here's the deal why I don't care most people in Angular
JS, you're you're only supported if you're on the latest one dot seven dot
X. Okay, what you said, you're not one. Like, let's
say you're on one dot five. You're already not supported. So most people
don't care about the support because they didn't they're not even on one sevens X
they're on you know, one six or one five. So yep, that's
true. You know, largely, we really recommend that if possible, you
know, get onto the one tous seven one to seven eight. If something
does come out and braze and browsers like break something, then that is the
branch that gonna get the fix. You'll be able to pull that fix in,
get your app back ount production, and you're good to go. Whereas
if something breaks are on one point five, all of a sudden, you've
got a good amount of upgrading to do to get to one seven before you
can apply that fix. Right, Imagine Chrome comes out with an update tonight
and Angular one dot two breaks. Just let's just pretend, Okay, I
don't know, and if you're not on the latest one doot seven you're not
gonna get fixed. Like it could be even the Jquerry breaks, and then
you need to get to that version of ja Querry. You need to upgrade
Angular jass yeah, or could be exactly. It could be jQuery that breaks
from Chrome update tonight and then you got to get on three dot zero and
so yeah, like you know, maybe maybe instead of talking trash, but
let's let's give some recommendations if we could. Let's let's channel this into a
better topic. If you're on an Angular JASS app Joseph Eames, and you
want to get ready for an upgrade? Are you want to get ready for
some of the things we're talking about? What are some of the prelim things
you can do to get ready? I have I have a list in my
head, but there's like some basic ones and there's some more advanced ones.
What do you what would you guys? Do you're in an Angular JS app?
For everybody? This for everybody that's in an all Angular JS app right
now, start with your build tool probably or maybe that's one of the steps,
right, yep, Try and get your build on web. Okay,
yep, maybe move over to typescript. Certainly use components anger one to five
and certainly get to one seven if you can, trying to use the one
to five component interface rather than one the primitive directive interface. Correct, Okay,
what other thing do you hit? About? All of them? So
we actually link to the prep guide for the upgrade from our migration guide and
you hit them, you know, use a module, order, migrate to
type script, use some component directives. There's a little caveat there that MD
dialogue doesn't support components, so those would still be using controllers. We've got
some plans to fix that at some point, but it's I don't think it's
the end of the world. You're still, you know, migrating a controller
to a component. It's it's not that big of a deal. It's not
as easy just to copy and paste a few things, but you won't be
copy pasting during the upgrade, and in this case probably anyway, the one
that you didn't hit is following the Angular JS style guide. Yeah, yeah,
your code aligned to make the upgrade smoker. I would also say stop
using third party libraries like j querry, stop using things like low dash,
because they're they're going to make not necessarily loa Dash specifically, but the third
party integrations are largely going to make this a lot more difficult, you know.
Now, the more different you know, chart line, libruares and date
time picker, special libraries and a special select library, all of those are
gonna make grides more complicated. Yep, yep. What else could you do?
I'm trying to think here, if I was going to move to a
webpack build to be totally honest, I think the easiest webpack build. Have
you done an upgrade or two? I think it might be easiest just to
have to move your Angular jass project into the Angular Cli because it's really easy
to do. Like, it's kind of stupid easy, if we're being totally
honest. So can you talk a little bit more about that, because I
don't think I've done that before. I'd be interested in hearing kind of what
you did. Yeah, So the Angular Cli has an entry file, right,
mm hmm. So it's just just your main not ts. Right.
You go into your project and your angler j soon you see it. So
if you just point that at your main file for Angular JS, because your
Angular gist, if you're using a webpack or if you're getting ready to use
a webpack, you're going to have an entry point as well. Correct,
yep, And so I would recommend getting an entry point actually, like like
try and get one entry file that your webpacker, goal or broccoli or grut
build can just hit that one file and then it reads all the other imports
and stuff. Right. Another thing is you need to and I'm trying to
think down a few levels. It's been a long time since says there,
so I'm not doing read job if you're not in like a package that Jason
environment where you install Angular js through MPM. Like let's say you just have
Angular jazz copied into your reput, well worse, you've copied the version into
your ECO or maybe you are using it from a CDN. I would suggest,
you know, getting your project to be more MPM friendly as well,
like hold your some Bower projects out there, for sure, there's JSPM people
are still isn't that all projects? So I would say, hey, start
to do some smaller things and you can get onto a more NPM friendly thing
without really doing much at all. Right, you're just saying, oh,
instead of pulling the Angular gests from here, do it from here, you
know. And so there's some things you can do to get your project a
little bit more ready, and there's smaller steps. So on the CLI topic,
there's definitely some known issues there with the upgrade and the CLI. I
have been actually this morning, I was trying to hack together something. I
had it working in stack blitz, but then I pulled it down locally and
upgraded it to the latest CLI, and I couldn't I could get certain things
instantiate, but I couldn't get things to render. And I know that Sam
Julian has been talking to the CLI team about, you know, how we
can make that work better more consistently. So there's there's some gotchas there.
For sure, there's some gotchas. And then I suppose let's say a programmer
makes I'm assure to throw out at number one hundred thousand dollars a year,
Okay, I don't know, maybe make more Maybia less and uh, let's
say it's gonna take you three or four weeks to get past some of these
problems. And it will, I promise it will. That's not hypothetical when
it takes you three or four weeks. I just you may consider reaching out
to companies like Narwal, who are absolute experts on upgrade, because like you
can follow the steps in Joe Eames's Plural site course, you can follow the
steps on Saint Julian's upgrading Angular website, and you can follow the steps on
the documentation. But eventually you're gonna hit you're gonna hit a wall, and
you're gonna need to talk to someone. And you could spend three or four
months figuring it out manually or Yeah, I would recommend getting on narwal connect
and getting an expert on the other end. And does the expert cost a
lot? Yeah, I don't know. I don't know what narwal connect costs.
Let's just throw out a number. Five hundred dollars an hour. Five
hundred dollars an hour for three hours is way less than a developer that makes
one hundred thousand dollars for three months. Like it's it's significantly less. And
you're gonna have a much more well thought out solution by working with like that
type of a scenario than you are with someone who like debate, contemplated like
ending their life every single day when they went home because they scenario every day.
Yeah, and so I would recommend reaching out to like the narwhals and
and some of the other consultants that have experienced with this stuff. I know
certainly it sounds like Mike has a consulting agency. I have a company that
we do We do upgrades as well. So there's people that are that are
there for you on that path. Yeah, and even if they cost something
like five hundred dollars an hour, it's still cheaper. Then your time is
gonna be and you're gonna get a more cohesive answer. It's such a better
answer for way, way, way less money than if you did it by
your also, so we're trying to fill that gap with this new guide,
not completely, but at least make the gap smaller. So a lot of
what you'll find in the guide here is specific use cases, like I literally
went through all of the features and use cases and Angular Jazz material, including
things like our meta service and things like that, and I like specifically went
how do I map all these things over? And you know, like the
meta service, it doesn't map to angular material. It maps to you know,
angular So there's all those sorts of things. In the past it was
like okay, I have panel or something like, oh, but you know
there's no panel and material and how do I do this? And maybe you
overlooked the overlay and the CDK because it's not called panel, and then you
may go off for weeks investigating and then building your own. And so this
is here to kind of connect those dots so that you don't go into that
hole of despair and you say, oh, here's the happy path I should
be on trying as well as theming, there was a lot of things.
Actually I went into this where I was like, an angular material, you
just cannot theme with the power that you can't in angular jazz material. There's
no way because it's round T versus at build time. Yeah, it's a
number of different things. We do a whole lot of runtime stuff. We
generated an angular jazz material, and so you get a bunch, you get
a bunch of these like style tags with all this stuff in there that generates
just too much overhead, too much you know size, and so Angular Material,
you know, took a different approach to that and went to a lot
of you know sas and mixings and things like that. And if you're not
really familiar with sacs, you may not understand like how to do certain things.
And some of those things I actually wasn't I wasn't sure that you could
do that. And you know, working with Jeremy and some of the other
people call on the team, they came and said, oh, yeah,
that you can do this. Here's here's the sass to make that happen.
And so we actually were able to put specific examples in the migration guide.
We also enhanced the Angular Material docs so that some of those theming approaches were
called out and demos were given, so certain things like that that you know,
a normal developer could certainly assume, like, oh, you you know
you can't do this. You know, we've kind of dug into that and
figured out really how that would be done. And then a lot of a
lot more cases than I expected, there's a solution. It's pretty thorough.
So let's say I'm going through your migration guide and I find an issue or
I have another recommendation or something I want to contribute. How do I go
about doing that? Should I just do a pull request? Or what's kind
of the way to get a hold of you, or how do I how
do I help? Yep, you can open an issue, talk about what
you know, you found or proposed you know, a change, and we
can talk about that and then get pr for it. It's all a single
markdown file, so it's really simple to edit and modify. Just a little
get the hub icon at the top of the page. You just click on
that. It'll take you into our repo and nice you can track down the
file. I think it's pretty simple. I think it's in docks. Yeah,
docs content migration empty. Cool, that's the whole thing. You can
actually read it on GitHub and they're marked down. If you want, we
don't quick into styles in there, but prefer that you can do that.
You can send a pull request just modify the markdown. And we really would
like to get feedback on this. We haven't. I don't know of anyone
yet who's gone through the full process and use this pull guide, so we'd
like to know more. We've sort of launched it in our sort of head
branch and we kind of like told people about it a couple of months ago,
but the one dot one nineteen chat uh one one nineteen release just came
out and that promoted it onto our main website and everything, so it's officially
available as a last Friday. Cool Mike. I think, uh, every
time we talk to the core team members and I guess I shouldn't call you
core team. I know you go a shunning it away from it from the
Angular team members. I know that everyone's really thankful for all the work that
you do, and it's not it's not easy being an open source maintainer,
So thanks for caring after all that work. It's cool. If anyone wants
to reach out to you on social media, what's your Twitter handle. It's
black Tar on Twitter and Facebook and et cetera. But Twitter's most active.
Okay, cool, all right, so let's get to the picks section if
we can. I'll go first, and then uh, we'll go Brian,
Joe, Mike. Is that cool? So I'm gonna pick. I'm gonna
pick a conference coming up in September. It's called rx just Live. If
anyone's listening to the show recently, you know, I love rxis. It's
about my favorite thing right now. I think programmers would use it write better
code. I think it forces you to think things through. Treating things as
streams makes a lot of sense. And there's a conference about our exes only.
So it's not an Angular plus RXGES conference, it's an Angular or sorry,
it's just an RX only conference. But it will be two days where
you can kind of focus in on just learning RX and meeting people from Microsoft,
Google, other companies that are using RX in Angular React view node scenarios,
and so it's a powerful conference. It's a chance to level up,
to go from good to great on RXS and so I'm gonna pick it RXS
Live. The website is rxgs dot live. So head over and check it
out. The speakers just got put up this week. The call for papers,
call for presenters just ended, and we picktoks and so I'm gonna pick
that because I'm more excited rxs than I am about more those things right now,
and this conference is going to be It's gonna be awesome. So so
what check arecs? Just life? Brian? Yeah, I have two picks.
First of all, Steven Fluin just published some new demos with Angular eight
out on his YouTube channel, so definitely go check those out. He does
a great job with those videos. I don't know if you've seen those before,
but they're really awesome. So he talks about some of the features in
Angular eight, like differential loading for the poly fills and that kind of thing,
so those are very cool. Definitely check those out. And my other
pick is I've been watching this show. It probably came out a while ago,
I don't know, but it's called Umbrella Academy, and I've really been
enjoying it. It's a really great show. So if you've got Netflix,
check that out too, all right, cool se Yeah, So it's just
been on my mind. I'd a webinar about it this morning, but I'm
gonna pick Cyprus because it's just such a freaking cool project product. You know,
all my life doing and testing, it just wasn't the thing. In
We had an author for Thinks To that was talking about Cypress, and he
said something that just really struck me, which was, for the first time
in my life, I'm excited to write into end tests. Once I found
out about Cypress, it was the night of that. So he loved you,
so I like you, but I totally echoed that. I resonate with
that sentiment that I was not a fan of writing and ntests and been dealing
with him until you know, ever, it was just a necessary evil.
Then Cypress came along and I was like, Wow, this actually could be
Yeah, like writingests can actually be a cool thing. Cool. Yep,
that's it. Awesome Mike. You got any picks, bro, Yeah,
I got a few. One is the side projects I've been working on in
my spare time with some of the amazing gdes and community and Latin America and
Spain and how they're Spanish speaking countries. I'm working on with a group called
Angular Espano. So it's a website and we've got matter Most for chat,
so connecting Angular developers from all around the world who speak Spanish and want to
talk about it, ask questions, get help support each other in Spanish.
So that's something we've been working on. It's at Angular dot lat is the
website dot l A T and then another pick is related to that. So
we just want a conference page and so we've listed there on that page.
We have ANGI Bolivia, we have Angie Honduras and Angie Spain. Those conferences
are all coming up. They all have cfps that are opening right now,
so you can submit talks if you're interested and heading over to one of those
nice sunny places. Do you submit a talk? Would the talk be in
English or Spanish? I think you can do to both. Okay, I'm
going to speak at Angie Bolivia and I'm probably going to have my sides in
English because I already wrote my mama, do it in Spanish. Yeah,
nice, do it. I just went down to Peru when I give two
or three talks in Spanish for the first time, and they were really supportive
and it went pretty well. So I do recommend it. Do when you
speak about technical things, you just got to embrace the Spanlish, you know
what I'm saying, and so I just do it. It sounds it sounds
so dumb, like literally, it's one of the dumbest forms of Spanish you'll
ever listen to. But it's so that's the reality. There's another podcast Angular
Riando, which is like Angular and Spanish, and we had a discussion about
that. There's just certain words like merge that they just say, like mergeiato.
They don't say likergall away or something. So there's a lot of Spanglish
and a lot of the code is also written in English. But yeah,
like poll request, there's no word for that, right, so you just
say you might pull request and you know that's how you say it. That's
because that's the words, right right, That's what it says, gethub.
Everyone knows the same vocabulary. If you try to say something else, people
get confused. But last pick front end Masters. I haven't really spent any
time on there in the past, but I've been checking out some of their
videos. I paid for like the thirty nine dollars monthly thing, and it
seems like quite a value. I'm really enjoying the content. That's cool.
Cool man. Well, Mike, thank you for coming on and thanks for
all your hard work in the open source community. Thanks for what you're doing
within your layer Latin. Everything soon, all right, everybody, Thanks for
coming, and until next time peace,