Angular v16 Release Live Event

Angular v16 Release Live Event


Angular v16 Release Live Event

Something wonderful this way comes


Content

2 -> [Music]
6.42 -> foreign
10.29 -> [Music]
36.6 -> foreign
38.48 -> [Music]
66.5 -> thank you
72.299 -> foreign
77.95 -> [Music]
116.939 -> hello everyone Mark Thompson here from
119.28 -> the angular team and welcome to the
121.32 -> angular V16 launch event now we've been
124.74 -> hard at work adding new features for
126.78 -> this release and we can't wait to share
128.94 -> everything with all of you tuning in
131.039 -> from all over the world now before we
133.44 -> get started we want to extend an
135.54 -> enormous thank you to all of the angular
137.58 -> developers out there whether you're
139.44 -> making content contributing to the
141.36 -> framework commenting on rfcs writing
144.36 -> apps or supporting in some other way we
146.76 -> just want to say a huge thank you from
148.44 -> the bottom of our hearts and let you
150.599 -> know that we appreciate you so here's
153.06 -> how it's going to work today we'll be
155.099 -> announcing features and speaking with
157.26 -> various members of the team now that's
160.08 -> your chance to get your questions
161.64 -> answered live on air if you have a
164.459 -> question about a feature that we just
165.9 -> announced put it in the chat but but but
168.56 -> be mindful of our code of conduct be
172.2 -> kind and respectful so we all can have a
174.54 -> nice time
175.44 -> now with that being said let's turn our
178.08 -> attention to the new framework features
180.12 -> that we think you're really going to
181.44 -> love here we go
185 -> hi everyone my name is Dylan Han and I'm
188.4 -> a software engineer on the angular
189.66 -> framework team let's look at some recent
191.76 -> angular updates that we think will
193.14 -> really improve your development
194.4 -> experience to start things off how often
197.34 -> do you wish that you could get router
198.599 -> parameters as component inputs
200.94 -> it would be so much easier compared to
202.739 -> having to inject a service and interact
204.36 -> with its API right I'm happy to share
206.879 -> that in V16 you can now directly receive
209.519 -> the route data path parameters and query
211.92 -> parameters for a route as component
213.959 -> inputs
215.64 -> another small quality of life
217.379 -> Improvement that we introduced in V16 is
219.78 -> self-closing tags
221.58 -> these allow you to do less typing by
223.68 -> skipping the closing tag of your custom
225.12 -> elements and templates
227.159 -> next we had a very popular feature
229.08 -> request asking us to enable marking
230.76 -> inputs as required so that when you
232.799 -> don't set their value in a template you
234.54 -> can get an error
236.04 -> in version 16 you can take advantage of
238.26 -> this feature today
239.819 -> you can specify an input as required by
241.92 -> passing an object with required
243.36 -> properties set to true to the input
245.04 -> decorator
246.36 -> a few months ago we started porting the
248.28 -> angular CLI build system to es build
250.5 -> it's a highly performant bundler
252.48 -> implemented in go
254.519 -> a missing piece to make it available in
256.56 -> developer preview was the NG serve
258.54 -> command and in V16 we implemented a
261.959 -> development server based on Veet
264.12 -> with this change we're happy to announce
266.22 -> that the es build-based Builder enters
268.919 -> developer preview
271.32 -> we also worked on improving your
272.88 -> experience in your text editor or IDE
275.82 -> the angular language service now
277.56 -> supports automatically importing
279.06 -> components and pipes both NG module and
281.88 -> standalone
284.16 -> the last feature that I want to tell you
285.84 -> about today is the content security
287.4 -> policy Improvement we made for inline
289.5 -> styles
290.82 -> starting today across the angular CLI
293.4 -> and framework you can specify a knots to
295.86 -> meet the content security policy style
297.6 -> source for more information about this
300 -> release check go.gle angular-v16
309.84 -> wow such great updates and we really
312.66 -> hope that you like them but to tell us
315.06 -> more we have some very special guests
317.1 -> please welcome Dylan Han and Doug Parker
320.22 -> Dylan Doug welcome to the show how you
322.5 -> folks doing
323.699 -> uh it's great to be here in beautiful
325.08 -> Sunnyvale
326.34 -> um yeah really great to be on the show
327.66 -> yeah I'm feeling great loving the vibe
330.18 -> here is really an awesome Place glad to
332.16 -> be here yeah great to have you all right
334.08 -> got a ton of questions for you and then
336 -> for our friends at home remember that if
338.1 -> you have questions put those in the chat
340.8 -> so Doug I want to start off with you
342.36 -> because you uh in this video Dylan
344.4 -> announced something really fantastic uh
346.56 -> can you tell us what's next for the
348.18 -> developer preview of the Veet server
350.88 -> yeah so what we've had so far is
352.919 -> something we've been working through for
354.12 -> a few releases now uh trying to update
356.34 -> our build stack to use yes build under
358.08 -> the hood and now we're throwing in V for
360.24 -> development serving so NG serve now just
362.639 -> works with Veet when you're opted into
364.38 -> this new uh this new build stack things
367.08 -> are a lot faster we've been seeing some
369.479 -> really great performance improvements
370.68 -> there
371.639 -> um one thing I do want to set some
373.139 -> expectations with the community a lot of
375.419 -> people outside of angular tend to use
377.039 -> Veet as kind of an all-in-one build
378.72 -> system doing everything that they need
380.58 -> to do for uh for their particular app
382.88 -> for angular we're using it in a much
385.319 -> more narrow context we're using it
386.639 -> specifically for a development server
387.96 -> and specifically using it in NG serve so
391.259 -> we've got some uh so with now we're able
394.44 -> to ship this uh and get the performance
396.479 -> improvements out of that one thing we're
398.22 -> looking forward to in the future is
399.3 -> being able to pre-bundle dependencies so
401.34 -> that we get even faster builds we don't
403.08 -> have to rebundle dependencies that are
404.88 -> going to be the same every time you
406.259 -> rebuild your app get some nice
408.12 -> improvements there and we'll be looking
409.86 -> forward to you even better performance
412.08 -> going on for the future and then for
414 -> developers to use this they have to opt
415.68 -> in this is not a change that they just
418.08 -> get automatically they have to opt into
419.58 -> that for right now yes you have to opt
421.319 -> in uh there's instructions on the blog
423.36 -> post but it's just one one little flag
424.86 -> change is all you have to make to be
426.72 -> able to opt in there are a few known
429 -> feature gaps that we're still working
430.44 -> through which is why it's still in
431.34 -> developer preview but we're very much
432.78 -> excited for people to try it out and
435.36 -> we're hoping to graduate this to stable
436.86 -> and eventually enable it by default
438.12 -> sometime soon fantastic fantastic all
441 -> right I got a question for Dylan before
442.44 -> we go to our audience questions what
444.36 -> type of Errors will folks get with the
446.46 -> mark input is required I know it's a new
448.8 -> feature people have been wanting that
449.88 -> for a long time and check our GitHub
451.8 -> lots of comments wanting that so how's
454.259 -> that going to work out for developers in
456.419 -> practice Yeah so as you mentioned this
458.34 -> is like a top issue on GitHub for a long
459.96 -> time for a long time you'd see
462 -> especially authors of component
463.74 -> libraries they would in their NG on a
465.419 -> net specifically check Stephen input was
468.12 -> present and if it wasn't then throw a
469.8 -> runtime error and so the big advantage
471.72 -> of required inputs the new required
473.699 -> inputs API is that this is now a static
475.86 -> error we captured at compile time for
477.36 -> you so you can imagine like if you're a
480.06 -> component Library author and say you are
482.34 -> trying to provide like a date picker
483.66 -> widget right or um let's say like a
486 -> schedule viewer widget and you really
487.68 -> want to have that date provided as an
489.419 -> input you can verify that it's present
491.58 -> at compile time now so we think this is
493.86 -> going to be super useful for component
495.36 -> Library authors but in general it's
497.58 -> something people have really been asking
498.78 -> for so we're very excited I know I've
501.12 -> certainly written way too many
502.379 -> components that have to assert things NG
504.3 -> on and they think it's very boilerplate
506.34 -> e you have to put the non-null assertion
508.319 -> I always feel dirty when I do that I am
511.86 -> so looking forward to being able to
513.12 -> delete all that just slap required on it
515.039 -> get some nice compile time errors and
516.779 -> looking forward to it fantastic all
518.459 -> right we're going to throw to our
519.479 -> audience to see if we have any questions
520.68 -> from our audience remember put your
522.659 -> questions in the chat alright chaos
525.54 -> Monster one of our favorite friends from
527.279 -> our live streams if you don't watch the
528.839 -> gaming live stream watch the gaming live
530.58 -> stream is really awesome with Jeremy
532.26 -> elborn and myself as at angular is the
536.1 -> new resolver input blocking or can it be
538.8 -> a sync
541.98 -> this is for the the new router resolver
544.019 -> I think that's for the new router
545.339 -> resolver
547.56 -> um off the top of my head I think it's
549.36 -> blocking but really the the right person
551.339 -> to answer this question is actually
552.36 -> Andrew Scott so if uh if you add us on
555.42 -> Twitter at angular or at dilhun for me
558.36 -> um we will get you pointed the right
560.459 -> direction to answer that question sure
562.74 -> yeah we'll get back to you on Twitter so
564.72 -> definitely add us let's get another
566.279 -> question from the audience
569.279 -> all right so are there plans to
571.26 -> integrate forms and signals uh does unit
573.959 -> directional data flow get broken with
577.08 -> this approach let's actually save this
579.12 -> question this is a great question but
580.2 -> we're going to have some Engineers who
581.7 -> work directly on signals that can answer
584.04 -> that more but Dylan actually worked on
585.66 -> reactive forms can you give us just a
587.399 -> little bit of a preview of that Dylan
589.019 -> yeah so sort of our perspective on this
592.2 -> and without you know getting too much
593.94 -> into what we could possibly do in the
595.92 -> future because we certainly haven't
597.06 -> decided anything in this direction yet
598.68 -> but um we consider forms to be like a
602.279 -> crucially important test case for uh
604.5 -> really any framework or any reactivity
606.18 -> system we really want the forms
607.5 -> experience to be amazing
609.3 -> um and so obviously you know we're
611.7 -> talking about how do signals impact the
614.76 -> way developers are going to write their
615.779 -> applications we really need to sit down
617.459 -> and think about what that's going to do
618.54 -> to the forms experience so I want to
620.82 -> emphasize we haven't made any decisions
622.26 -> yet for exactly what direction we're
624.42 -> going to take forms
625.86 -> um but definitely we expect signals to
627.779 -> impact forms in some way okay I think
630.48 -> we've got another question from the
631.5 -> audience
635.88 -> all right I'm completely new to Veet
638.339 -> what does veet's history purpose and
640.68 -> ultimate goal what is the purpose an
643.32 -> ultimate goal for angular so how are we
644.82 -> going to integrate this long term what
646.62 -> do you foresee is how Veet can play a
648.54 -> part of the angular story yeah so V if
651.12 -> you're not familiar with that uh
652.92 -> particular term um feat is a sort of
655.86 -> combination build system development
658.2 -> server that's been developed in open
661.14 -> source uh most notably kind of Evan used
664.079 -> behind it notable for view contributions
666.92 -> and there's been some a lot of momentum
669.6 -> behind that just a lot of some very very
672.42 -> good performance coming out of it uh and
674.579 -> it's really been kind of taking a lot of
677.279 -> the web tooling by storm and so we've
680.459 -> been hoping to leverage that within
681.899 -> angular and a lot of what the angular
685.14 -> CLI in particular is trying to
686.579 -> accomplish is to sort of abstract over a
688.68 -> lot of the tooling that's going on under
690.18 -> the hood that a lot of developers don't
691.8 -> necessarily want to deal with we don't
693.839 -> want to be messing with config files and
695.22 -> things like that and so one of our goals
697.44 -> with uh with this particular project is
699.42 -> to be able to swap out our Dev server
701.339 -> implementation put Veet in there get
703.86 -> performance improvements get additional
706.26 -> benefits from that and be able to just
708.3 -> ship that directly to users and you
709.92 -> don't have to change anything you don't
711.06 -> necessarily need to uh to deal with
714.42 -> config files or awkward migrations or
716.579 -> things like that and that's something
717.42 -> that we're trying to lead into over the
719.76 -> next few versions and where we're going
721.079 -> with it V is also particularly notable
724.2 -> for hot module replacement which for
725.88 -> those who might not be familiar is sort
728.16 -> of a method of being able to inject
730.98 -> changes from your application without
732.48 -> having to reload the page so you're able
734.399 -> to maintain State you're able to keep
735.959 -> looking at what you're looking at and
737.22 -> get a really awesome edit refresh
739.079 -> experience that's something that we're
740.82 -> going to be looking into a bit longer
742.32 -> term we want to be able to ship out what
745.079 -> we have now get faster builds make
746.76 -> things a lot better there and then one
748.26 -> of the next steps we're going to be
749.1 -> looking at after that is going to see
750.48 -> how we can improve the HMR story and how
753.42 -> we can make your your edit refresh
755.1 -> experience even better than it is today
756.54 -> so before we go to our next audience
758.64 -> question that is a great point that I'd
761.1 -> love for us to highlight just a little
762.24 -> bit about the HMR story so right now
764.82 -> angular does support HMR but support
767.339 -> isn't as robust as we like but with Veep
770.76 -> being a part of where we're doing the
772.68 -> developer preview so it sounds like
774.48 -> that's something that we'll spend some
775.74 -> time investigating to see how we can
777.48 -> improve that story for the hot module
780.3 -> replacement in the edit refresh cycle
781.74 -> right that is something we do want to
783.48 -> explore in the future it is important to
785.279 -> recognize that Veet adds a bunch of
787.8 -> awesome tooling and functionality to
789.72 -> make this a really great experience and
791.339 -> make it really fast but ultimately a lot
793.5 -> of the current challenges with HMR have
795.3 -> to do with how the framework itself is
797.04 -> designed and being able to actually
798.779 -> accept changes and replace your Styles
801.42 -> at runtime and update templates which
804.6 -> can be quite involved so there's still a
807.54 -> lot of work to be done there and that's
808.5 -> something that we're interested in
809.519 -> exploring in the future will help but
812.279 -> not totally solve that problem so
814.44 -> there's a lot more work to be done there
816.18 -> in the future all right I think we got
817.56 -> time for one more question
820.62 -> is V enabled by default or do we need to
823.26 -> do something to enjoy it so I can
825.18 -> actually answer this one because I am
826.8 -> also a genius on the couch
828.5 -> so you're going to have to do a run not
831.12 -> a runtime a configuration change
833.36 -> angular.json update there to enable it
836.519 -> we have details in the blog post that we
839.76 -> just released so definitely check out
841.019 -> the blog post and we'll put that in the
843.06 -> chat so you can know where the blog post
844.139 -> is so you can get the answers that
846.54 -> you're looking for all right I want to
848.04 -> say thanks to Doug and Dylan we're
850.86 -> actually I'm just hearing from Allstate
852.36 -> we have one more question let's go do
854.519 -> one more audience question all right I
856.26 -> was super excited for veat and Es build
858.06 -> but unfortunately I require the
859.92 -> localization to be supported any
862.68 -> insights on the roadmap for 16.2 yes uh
867.18 -> internationalization is probably the
868.32 -> biggest feature Gap that we have right
869.94 -> now that is probably the the next big
871.86 -> thing we're going to be shipping with uh
874.139 -> with this es build implementation so
876.24 -> definitely stay tuned uh I don't want to
878.22 -> commit to any specific release because
879.959 -> these things are always a little bit
881.459 -> flexible but it is definitely something
883.32 -> we're going to be doing and something
884.639 -> that we'll we'll need to get in before
886.5 -> we mark this stable so definitely
888.12 -> something to try out even just for your
890.94 -> default builds that aren't
892.199 -> internationalization play with it today
893.639 -> see what those performance improvements
895.5 -> are going to be and then as we start
896.639 -> Landing in the those last few features
898.62 -> to shore up that compatibility that's
900.24 -> when we can fully Mark the stable and
901.98 -> just enable it by default for everybody
903.12 -> okay so as we're wrapping up here tell
905.76 -> the audience one feature that you want
907.26 -> them to try out from the V16 release
909.6 -> yeah so um I'm going to toot my own horn
912.6 -> a little bit here I've been working for
914.519 -> a while on automatic Imports in the
915.899 -> language service so if you're using vs
918.899 -> code and you have our extension
919.92 -> installed or if you've installed our
921.72 -> language service extension in another
923.399 -> editor of your choice and you're
925.8 -> importing a component especially a
927.06 -> standalone component from elsewhere in
929.1 -> your application try mousing over it
931.079 -> click Quick Fix and see if it generates
933.12 -> the import for you all right Doug five
935.16 -> seconds to give us one feature yeah
937.139 -> that's a great one to start with I'll
938.94 -> say up front
940.56 -> um one other thing I'll point out is
941.76 -> that we we are adding experimental just
943.56 -> support right now just to try to explore
946.86 -> new unit testing options and that's
949.199 -> something the community's been asking
950.1 -> for for a long time still very early
951.72 -> right now but something we're going to
953.519 -> be continuing to push on in the future
954.66 -> and so I'm really excited to see where
956.1 -> that's going to be going all right so
957.24 -> you heard it here folks definitely try
959.04 -> out the new features in the angular
960.36 -> language service and try out that jet
962.699 -> support so big thanks to Doug and Dylan
964.98 -> great work and as a reminder continue to
967.26 -> put those questions in the chat so we
969 -> can answer them live with the team okay
971.579 -> we know that you love Standalone apis
974.399 -> and we love giving you updates let's
977.04 -> find out more in this clip from our very
979.26 -> own minko getchev
983 -> hi everyone I'm minko from the angular
985.8 -> team and I'm here to share the latest on
988.32 -> Standalone apis back in 2022 we
991.32 -> announced our plans to introduce a set
993.48 -> of Standalone apis that would improve
995.88 -> developer ergonomics reduce the amount
999.12 -> of boilerplates and move and your
1001.339 -> development forward
1003.38 -> since then we've heard from the
1005.36 -> community that you all love to improved
1007.579 -> developer experience
1008.899 -> we are thrilled to have unlocked so much
1011.66 -> potential for Android features
1014.48 -> in this video I'll share with you
1016.339 -> everything about the improvements in the
1018.38 -> routing apis we introduced in version 15
1020.68 -> and all the tooling that we landed in
1023.839 -> version 16.
1025.699 -> before the introduction of Standalone
1027.559 -> apis lazy loading routes was a
1030.38 -> multi-step process which relied on
1033.02 -> modules
1034.52 -> consider this example we have a child
1037.22 -> module which declares the items route
1040.1 -> in the routes array we use the Lord's
1042.62 -> children syntax to import the items
1044.839 -> module which contains the corresponding
1046.76 -> routes
1047.959 -> this seems like too much cold and too
1050.54 -> much work to Lazy load routes and while
1052.88 -> we agree
1054.02 -> let's check out the new and improved
1056.66 -> lazy loading syntax and version 15.
1060.74 -> with Standalone apis we can simply
1063.2 -> declare an array of routes and use loads
1066.08 -> children with a dynamic import to lazily
1068.96 -> load the child routes
1070.76 -> later we can pass the route array to
1073.34 -> provide router or just export it if
1076.58 -> these are jail routes that's it no more
1079.82 -> modules no for child that's just way
1083.059 -> less complexity and it is way more
1085.039 -> immediately clear what this code does
1087.86 -> there's actually one more feature that
1090.2 -> we would like to highlight
1091.94 -> check this out remember there was no
1094.28 -> direct way to Lazy load components
1096.86 -> the only way to achieve this was to
1099.44 -> reload children well thanks to
1101.78 -> Standalone apis we can now dynamically
1104.36 -> lazy load a component by using the loads
1108.08 -> component property on the route
1110 -> definition in this example the items
1113.059 -> component is lazy loaded and the code is
1116.9 -> much clearer you can learn more about
1119.12 -> the improved router apis on
1122.86 -> goo.gle angular Dash Standalone Dash
1127.16 -> routing
1128.179 -> so what's new 4D Standalone apis in
1130.64 -> version 16. we made improvements to the
1133.16 -> tooling story now developers can create
1135.559 -> apps bootstrap with the new Standalone
1137.66 -> apis using the Standalone flag with
1140 -> engineer
1141.2 -> with this change you will no longer need
1143.419 -> to manually convert your applications
1145.28 -> after creating them alright but what
1148.039 -> about our existing apps great question
1151.34 -> we have something for you too
1153.2 -> we're also announcing new schematics
1155.299 -> that will allow teams to migrate their
1157.52 -> applications from NG module based to
1160.46 -> standalone apis
1162.26 -> by running NG generates ads angular
1165.5 -> slash core column Standalone the
1168.2 -> schematics will guide you through
1169.34 -> options to convert your components
1171.5 -> directives and pipes to use standalone
1174.02 -> apis
1175.1 -> this will also assist you through
1176.539 -> removing unnecessary NG modules and even
1179.48 -> converting your app to bootstrap using
1181.94 -> standalone apis
1183.5 -> we can even choose to migrate specific
1185.78 -> parts of your application by specifying
1188.48 -> a path to the migration tool to get
1191.12 -> started check out the migration guide at
1193.419 -> angular.io forward slash guide forward
1196.64 -> slash Standalone Dash migration you can
1200.179 -> use this tooling today to start taking
1201.98 -> advantage of all that Standalone apis
1203.96 -> have to offer
1210.02 -> all right friends welcome back
1211.58 -> Standalone apis keep getting better and
1214.64 -> better and here to tell us more from the
1216.14 -> angular team Alex rickabaugh Alex
1218.66 -> welcome to the show how are you doing I
1220.94 -> am fantastic Mark thanks for having me
1222.38 -> yeah so good to have you I got a
1224.24 -> question for you right out the gate we
1225.44 -> want to get started and then I've
1226.64 -> already been told that the audience has
1228.62 -> a ton of questions so we we want to get
1230.84 -> going all right get into it but first
1232.34 -> the migration story for Standalone
1234.5 -> components has been on everyone's mind
1236.24 -> for a while please let us know what's
1238.46 -> the best way from your point of view for
1240.38 -> a team to migrate absolutely
1243.2 -> um so I think right off the bat if
1244.94 -> you're starting to think about using
1246.08 -> Standalone components in your
1247.28 -> application you should start authoring
1249.5 -> new Standalone components don't
1251.66 -> necessarily jump into the migration if
1253.46 -> you're not if you haven't used them
1254.6 -> before if you're not sure how they work
1256.1 -> get familiar with them try them out in a
1258.38 -> couple of cases and when you feel
1260 -> comfortable with the apis that's when
1261.799 -> you want to start running the migration
1263.66 -> schematic and you know if you have a big
1266.12 -> application take it slow migrate apart
1268.039 -> at a time as minko mentioned you can
1270.44 -> migrate a specific path and then when
1272.84 -> you're ready to say okay I'm comfortable
1274.4 -> with this it seems to be working then
1276.44 -> you can use the kind of options that
1278.12 -> were shown at the beginning to migrate
1279.86 -> the whole application
1281.48 -> um kind of the rest of the application
1282.74 -> to Standalone I love that advice for
1284.9 -> people to start using Standalone apis
1286.94 -> get used to them start to make sure they
1289.4 -> fit your use case I mean there's still
1290.72 -> going to be a great way to go to develop
1292.58 -> a component yeah always a good way to go
1294.559 -> but I think not having any experience
1296.299 -> because it changes the way that you
1297.919 -> write your code a little bit because
1299.299 -> you're removing the need for those
1300.679 -> modules yeah so that's a really good tip
1302.72 -> I think the community is going to really
1304.039 -> benefit from that all right speaking of
1305.78 -> community let's go straight to a
1307.159 -> question I know you folks have a bunch
1308.84 -> of questions so let's get started
1311.059 -> all right so will it be possible to Lazy
1313.64 -> load components without defining them in
1316.039 -> the router
1317.24 -> without the finding them in the router
1318.679 -> yeah you can lazy load Standalone
1320.179 -> components today
1322.039 -> um we have JavaScript has es6 Dynamic
1325.159 -> import which is the import that you call
1327.38 -> as a function and today you can do that
1329.419 -> in angular with a standalone component
1330.919 -> pass it to view container ref and render
1332.84 -> it dynamically no router needed oh that
1335.6 -> sounds fancy Alex I feel like okay so I
1338.12 -> love that that description of what to do
1339.799 -> I think you and I should do a video or
1342.2 -> something to let people see how to do
1344.12 -> that in practice I think some of these
1346.039 -> core practices around Standalone
1347.36 -> components there's some opportunities
1348.679 -> there we should do more of that let's do
1350.48 -> it and if you want to see us do more of
1351.799 -> that let us know what type of videos you
1353.24 -> want us to see if you want to see Alex
1354.44 -> on the strings more once the other
1356.24 -> people let's definitely do that speaking
1358.159 -> of let's get involved with more
1359.6 -> questions now if if I import a module
1363.02 -> into some component which are used in a
1365.84 -> pairing component is the module imported
1367.76 -> many times in the parent component or is
1370.7 -> there some caching involved under the
1372.559 -> hood
1373.28 -> there's
1374.659 -> um not necessarily caching but
1375.679 -> deduplication so NG modules serve two
1378.679 -> roles they kind of communicate which
1380.539 -> components and directives are available
1382.28 -> in templates
1383.6 -> and they configure dependency injection
1385.64 -> and that's one of the things that makes
1387.62 -> new developers kind of a little more
1389 -> confused when they're working with NG
1390.32 -> modules because they're actually doing
1391.28 -> these two kind of separate but somewhat
1393.26 -> related jobs
1395.059 -> um and so when you import an NG module
1396.919 -> into a standalone component from the
1398.96 -> dependency injection side it's
1400.52 -> deduplicated into the application
1401.96 -> injector so it only is referenced once
1404.48 -> from a template side it's compiled Away
1407.12 -> by the compiler fantastic I had a
1409.64 -> question for you actually what's next
1411.559 -> for Standalone apis what's next for
1413.84 -> Standalone apis so V16 has NG new
1416.559 -> Standalone you can start using
1419 -> Standalone in an application one of the
1421.22 -> things we're doing right now is working
1422.539 -> with our community to make sure that NG
1424.64 -> add when you're adding a new library
1427.159 -> like ndrx to angular works with
1429.5 -> Standalone applications and Standalone
1431.36 -> apis so once we kind of get that piece
1434.6 -> in place then we'll start to visit like
1436.58 -> should Standalone actually be the
1438.38 -> default experience for a new angular
1440.179 -> application oh that makes a lot of sense
1442.4 -> and I know that for some developers
1443.78 -> doing the NG ad requires a little bit of
1446.12 -> a work around that you have to do
1447.679 -> manually and we just want to smooth all
1449.539 -> those sharp edges off yeah the key is
1451.4 -> you can you can use Standalone in
1452.9 -> components and directives but it's
1455.9 -> migrating your bootstrap to Standalone
1457.76 -> that has a little bit of problems with
1458.9 -> NG ad because obviously community
1460.76 -> libraries were written before this
1462.26 -> existed right they're not looking for
1464.12 -> that bootstrap application call they're
1465.5 -> looking for an app module right so we're
1467.48 -> working with them to mix sure their
1468.679 -> schematics are compatible oh fantastic I
1471.02 -> think we have time for one more question
1472.52 -> from the community
1474.38 -> all right can I combine a load component
1476.659 -> with low children to Lazy load module
1479.12 -> and lazy load components yes you can do
1482.299 -> that so load children loads the kind of
1486.26 -> loads routes right it loads child routes
1488.539 -> of the current route load component will
1490.64 -> load the component that's being shown
1493 -> kind of for that
1495.44 -> prefix and so if your load component
1498.26 -> component has a router Outlet in it it
1500.179 -> will respect the load children and also
1501.799 -> lazy load the child routes
1503.659 -> fantastic yeah we'd like to take care of
1506.12 -> people this sounds like when we do
1507.679 -> things we really design the API so
1509.96 -> really make the developer life easy yeah
1512.48 -> a lot a lot of thought and and kind of
1515.08 -> effort goes into making sure that we
1517.7 -> have a clear consistent story for how
1519.559 -> these apis work that's right and I think
1521.48 -> we're going to talk more about that
1522.559 -> later on for the fireside chat with you
1524.9 -> at matliner so definitely people want to
1526.7 -> stick around for that so friends if you
1528.62 -> want to see more of Alex stick around to
1530.36 -> the stream Alex will be back to talk
1532.039 -> about more features especially one that
1534.32 -> I know people have been thinking about
1535.88 -> so you definitely want to stay tuned
1537.559 -> thank you Alex for coming out it's so
1539.179 -> great to have you now again we'll be
1541.039 -> hanging out with Alex a lot more today
1542.659 -> but up next we've heard that some of you
1545.659 -> have dry components
1548.6 -> and we want to make sure that you know
1551.539 -> about the future of server-side
1552.86 -> rendering and hydration in angular so
1555.14 -> you want it you got it take it away
1557.48 -> Jessica
1560.72 -> hey everyone I'm Jessica janick from the
1563.539 -> angular team and I'm here with some very
1565.46 -> exciting news about the future of
1567.2 -> angular's server-side technology plans
1569.9 -> up till this point angular applications
1572.299 -> that rely on server-side rendering have
1574.7 -> faced a major challenge hydration
1577.94 -> we've used a solution called destructive
1580.34 -> hydration which means that the app is
1582.32 -> rendered on the server side and then
1584.6 -> re-rendered from scratch again in the
1586.64 -> browser not ideal right of course there
1589.46 -> has to be a better way
1591.02 -> and we think so too the team and I have
1593.779 -> been working on implementing a
1595.34 -> non-destructive hydration technique for
1597.5 -> server-side rendering in angular
1600.44 -> now angular apps using SSR will support
1603.08 -> full hydration
1606.919 -> meaning that the apps will be rendered
1608.9 -> on the server side sent to the browser
1610.94 -> and angular will try to match and reuse
1613.4 -> as much of your app structure as it can
1615.26 -> instead of re-rendering it like before
1617.779 -> applications will have improved core web
1620.24 -> vitals and be able to take advantage of
1622.58 -> all the benefits of server-side rendered
1624.62 -> applications
1626.24 -> oh and I have something even more
1628.4 -> excellent to share with you I'm pleased
1630.5 -> to announce that the first developer
1632.24 -> preview of this feature is available now
1634.76 -> in the latest release angular V16
1638.419 -> that's right developers can update their
1640.76 -> apps and start experimenting with this
1642.86 -> feature
1644.419 -> since this is a developer preview you
1646.82 -> can expect apis to still be changed as
1649.279 -> well as various implementation
1650.6 -> improvements as we continue to build out
1652.94 -> the remaining features
1654.559 -> here's a sneak peek at what's on the
1656.539 -> horizon
1657.62 -> we'll be working on stabilizing the apis
1660.08 -> working on support for
1662.02 -> internationalization and exploring fancy
1664.82 -> features like more granular hydration
1667.58 -> we're so excited about this new update
1669.44 -> and can't wait to hear what you think
1671.299 -> and see the great apps you'll build
1673.88 -> live long and prosper and stay hydrated
1676.58 -> friends
1681.74 -> all right I have a question for you
1683.36 -> would you call that a wave of innovation
1686.539 -> all right all right I know I know dad
1688.76 -> jokes for the win all right so to tell
1690.44 -> us more about the new hydration features
1692.24 -> please welcome Jessica janick and Andrew
1694.58 -> Kushner from the angular team Jessica
1696.74 -> Andrew welcome to the show how are you
1699.08 -> folks doing today feeling great how are
1700.88 -> you doing Mark oh I'm so good so good
1702.799 -> yeah thanks for hitting us it's so good
1705.26 -> to have you listen the people are so
1707.48 -> excited if you have questions for Andrew
1709.4 -> and Jessica please put him in the chat
1712.7 -> this is your time to speak with the
1714.74 -> great folks who worked on this great
1716.179 -> feature all right here's my question to
1718.88 -> start off for you folks we've already
1720.98 -> had server-side rendering with angular
1723.5 -> Universal how is what we're doing now
1725.419 -> with hydration different
1727.4 -> so
1729.02 -> um angular Universal is kind of a
1730.94 -> separate project that was brought in to
1734.6 -> the angular ecosystem it was originally
1736.4 -> created by a Community member and
1739.1 -> hydration is something that's part of
1740.9 -> the core of the framework and they kind
1743.299 -> of work in conjunction so you have your
1745.279 -> server side rendering that's handled by
1746.84 -> Universal and then the core of the
1749.12 -> framework does all this annotation work
1750.799 -> to make it so that it can be reused on
1753.14 -> the client side
1755.059 -> all right fantastic
1757.1 -> Yeah question for you Andrew so working
1759.44 -> on this what were some of the challenges
1761 -> that the team had to overcome figuring
1763.399 -> out how to implement hydration for
1765.919 -> angular yeah that's a good question so
1769.039 -> um the previous method of um rendering
1771.74 -> the application after service that
1773.059 -> rendering was
1774.5 -> um not very optimal and it allowed some
1777.62 -> different patterns and our goal was to
1780.679 -> find the right balance between
1782.32 -> supporting some of the patterns but also
1785.24 -> to make sure that we set up the
1787.039 -> framework for success and for
1788.38 -> extensibility in the future to deliver
1790.279 -> more features so finding that balance in
1793.399 -> every decision was I think the key
1795.2 -> challenge
1797.36 -> so early on I remember talking with the
1799.399 -> folks about what your vision was for
1801.64 -> sorry for hydration in general and how
1804.86 -> you wanted to work with the other
1806.48 -> community members and other projects in
1808.399 -> this space can you speak a little bit
1809.899 -> about what implementation means for them
1812.48 -> as well
1815.059 -> so we definitely did work with like
1818.24 -> other community members and volunteers
1820.64 -> that wanted to help test the framework
1822.559 -> and the the new hydration changes along
1825.38 -> with us so that we could make sure that
1826.76 -> we didn't break anybody along the way
1828.44 -> and that we were able to catch some of
1830.72 -> those issues earlier on that was a big
1833.48 -> help for us in actually getting to the
1835.7 -> developer preview Point without that
1837.62 -> help we would not have been able to
1839.179 -> really deliver it and and have it be
1842.299 -> successful
1843.86 -> yeah and also one point that they want
1845.539 -> to make is that we also learn a lot from
1848.72 -> the people that we worked with and huge
1851.059 -> thanks to everyone I participated who
1852.919 -> participated and what we learned also is
1855.679 -> that
1856.539 -> the migration or like the enabling of
1859.46 -> hydration may not be like one step
1862.22 -> um but it can be made incremental so we
1865.22 -> provided a way to adopt the hydration
1867.98 -> incrementally for applications so if
1870.32 -> there are some components that are not
1871.46 -> fully compatible there's still a way to
1873.559 -> enable hydration for the whole
1875.059 -> application and just opt out those
1876.86 -> particular components so this is also
1879.1 -> was a feature that we delivered based on
1881.96 -> the feedback so yeah I think oh
1884.24 -> fantastic all right we got to go through
1886.039 -> some questions from the audience they
1887.419 -> are burning up with questions all right
1889.399 -> so there there is the new hydration is
1891.62 -> this just for SSR or this work also on
1894.86 -> the client because this person's saying
1896.659 -> they don't know as much about hydration
1898.279 -> so where does this fit in their
1899.84 -> developer story right now
1901.399 -> so uh this is not just SSR but it works
1904.88 -> in conjunction with SSR so you have a an
1907.76 -> application that you are server-side
1909.14 -> rendering and what hydration essentially
1912.5 -> is is uh once that server-side rendered
1915.919 -> application is serialized and passed
1917.72 -> down to the client the browser picks up
1920.24 -> and then angular kicks in and hydration
1923.84 -> is actually like angular reattaching and
1926.36 -> reusing all of the Dom structure that's
1928.159 -> there rather than what we did before
1929.899 -> which is to kind of wipe away what's
1931.58 -> there and re-render after the
1932.899 -> application has been fetched
1934.82 -> so the answer is that they're used
1937.039 -> together it's both server and client
1938.96 -> together oh fantastic and I love the
1941.419 -> idea of reuse or I got another question
1945.38 -> so what happens to the not rendered part
1948.5 -> of the server on the server which should
1951.74 -> be on the browser
1955.7 -> um so I can maybe answer that so we can
1957.62 -> send correctly the question is
1959.36 -> um is it possible to render only
1960.86 -> components on the client but not service
1963.26 -> and render them and um I think yeah we
1966.2 -> have this um flag that I mentioned the
1968.84 -> skip hydration flag so with that flag um
1971.539 -> it's possible to recreate the component
1973.279 -> on the client
1974.539 -> um and if there are some use cases or
1977.179 -> missing capabilities
1978.799 -> um we would love to see the feature
1980.179 -> request with some information and we'll
1982.76 -> be able to respond and you know think
1985.64 -> about it and collect more information
1987.5 -> and provide the feature if that becomes
1989.72 -> useful fantastic question for both of
1992 -> you what's next for hydration where are
1996.26 -> we going
1997.6 -> well uh there's a lot coming up in the
2001.36 -> future as far as like server-side
2003.399 -> rendering and hydration is concerned
2005.14 -> we're going to be exploring Concepts
2007.84 -> around like partial spaces where we
2011.559 -> could potentially have sections of the
2013.899 -> of the page that are left dehydrated
2016.659 -> until we want them to be hydrated so
2018.58 -> we're going to research that a bit we're
2020.86 -> also
2021.899 -> looking at like lazy loading as more of
2025.24 -> a like fine-grained lazy loading built
2028.36 -> into the framework that's something
2029.44 -> we're also going to be researching and
2031.36 -> these things will probably work in
2032.919 -> conjunction together but we have a lot
2034.899 -> of of like research to do on it before
2038.14 -> we can make any promises but we're very
2040.24 -> excited about the potential of what that
2041.74 -> brings
2042.82 -> and one thing that I want to mention is
2044.679 -> that the architecture that we put in
2046.419 -> place would allow us to do this research
2049.419 -> and actually with d-time research during
2051.639 -> the initial phase of the exploration so
2054.099 -> we do have we do have some interesting
2056.32 -> experiments
2057.52 -> um but we Jessica mentioned we want to
2060.399 -> do a little bit more research make sure
2061.599 -> that we deliver the best solution
2065.02 -> possible with the best quality possible
2066.639 -> so yeah we'll you'll hear more from us
2069.58 -> over the next few months and and I'll
2072.339 -> add that you know of course we also want
2073.78 -> to exit developer preview so we want to
2075.76 -> make sure it's stable for you all right
2079 -> more questions from the community
2082.839 -> someone says they're waiting for the for
2085.54 -> the next pun from Jessica well I mean
2088.72 -> there's a pool of them I can pick from
2091.5 -> we've got all this uh this talk about
2094.659 -> hydration what can I say all right let's
2097.48 -> get one more question one more question
2099.28 -> for the community
2101.32 -> all right well actually we're out of
2103.24 -> time for questions but we'll come back
2104.92 -> to more questions and listen if your
2106.24 -> question didn't get answered during this
2107.44 -> be sure to tag us on Twitter and then we
2110.8 -> will try to get back to you as soon as
2112.3 -> possible Jessica's also a person comes
2114.64 -> on the stream maybe we'll have Jessica
2115.96 -> and Andrew come on and we'll do a whole
2118 -> segment dedicated to hydration so big
2120.339 -> thank you to Jessica and Andrew for
2122.44 -> stopping by thank you so much all right
2125.26 -> friends this is your signal to put your
2127.96 -> questions in the chat because we're
2129.28 -> about to learn all about angular's new
2131.8 -> reactivity model angular signals take it
2134.56 -> away
2137.82 -> hi I'm Emma a senior developer relations
2141.339 -> engineer on the angular team today I'm
2144.22 -> here to share some fantastic news about
2146.56 -> angular and the future of change
2148.78 -> detection
2150.22 -> change detection is how angular updates
2152.38 -> the UI in the browser when the state in
2155.079 -> the app changes
2156.64 -> this could be from user interaction or
2159.099 -> maybe some new data is available
2161.5 -> making something happen when there's a
2163.54 -> change is called reactivity
2166 -> angular's reactivity today runs change
2168.7 -> detection all over your whole
2170.8 -> application
2172.24 -> but what if we were to rethink
2174.099 -> reactivity in angular
2176.2 -> well that's exactly what we've been
2177.94 -> doing
2178.839 -> before we move on let's discuss
2181.24 -> reactivity
2182.859 -> so what is reactivity what if angular
2185.98 -> knew more about which state in your
2188.5 -> application was changing and when it
2191.02 -> changed
2191.98 -> even better what if your state could
2194.68 -> tell angular itself where it's used and
2198.16 -> when it changes so angular could
2200.56 -> automatically update whatever depends on
2203.5 -> that value
2204.82 -> with this level of fine-grained control
2207.16 -> we believe that application developers
2209.8 -> can build scalable performant
2212.02 -> applications while taking advantage of
2214.359 -> the features and tooling they love from
2216.579 -> angular with these goals in mind we
2219.28 -> found a solution that we think
2220.839 -> developers and their teams will love
2222.96 -> introducing angular signals you might
2226.3 -> have come across information about our
2228.4 -> plans to update angular to use signals
2230.859 -> so we have another surprise for you
2233.74 -> angular signals are in developer preview
2236.26 -> in version 16 today
2238.96 -> we cannot wait for you to try them out
2241.72 -> to help you get started let's cover a
2243.88 -> few of the foundational Concepts
2245.5 -> together
2247.06 -> signals have three Core Concepts that we
2250.3 -> call reactive Primitives signal computed
2253.9 -> and effect
2255.76 -> a signal is like a variable and holds a
2258.7 -> value that can change
2260.619 -> unlike variables signals can notify
2263.079 -> angular when they change
2265.9 -> a computed is a kind of signal that
2268.66 -> calculates its value from other signals
2271.48 -> and only updates if the values it
2274.3 -> depends on change
2276.4 -> then we have effects effects are
2279.339 -> functions that execute when the values
2281.92 -> of the signals they use change
2284.8 -> giving developers the opportunity to
2287.38 -> respond to those changes in a meaningful
2289.599 -> way
2291.099 -> all right now that we have the
2293.26 -> fundamental concepts covered the next
2295.48 -> step is for you to get started and try
2297.82 -> it yourselves
2299.14 -> once you do we want to know what you
2301.18 -> think
2301.96 -> you can get started by heading to
2305.28 -> go.gle forward slash angular Dash
2308.74 -> signals alright that's it for me and for
2312.16 -> you that's your signal to NG update bye
2319.599 -> okay can I be honest this is one of my
2322.24 -> favorite angular features yet and I love
2324.579 -> that the community is so excited about
2326.68 -> it now I've already been told that you
2328.48 -> put your signal questions in the chat so
2330.4 -> we're definitely going to answer them
2332.26 -> live uh joining me on the couch are Alex
2334.78 -> and Emma from the angular team and
2336.76 -> Welcome Friends welcome back Alex again
2339.339 -> Emma good to see you as always welcome
2341.92 -> to the show
2343.06 -> thanks for having me yeah good you know
2345.4 -> what it's so good to be with everybody
2347.2 -> especially being a distributed team and
2349.119 -> get to spend time with people face to
2350.56 -> face it's just so good all right we're
2352.66 -> not gonna get to any of my questions
2354.16 -> because the people have already lit up
2356.38 -> the chat with signals questions so we're
2358.24 -> just going to jump right in all right
2359.56 -> jumping right into the community
2360.82 -> questions in terms of performance is
2363.52 -> there a net advantage of using only
2365.5 -> signals instead of the regular way the
2368.44 -> change detection that we're used to
2371.079 -> so in V16
2373.2 -> signals will drive on push components in
2376.3 -> the same way that observables can with
2377.92 -> the async pipe and that means that you
2379.9 -> can use signals to get the same
2381.22 -> performance benefits that you do if you
2383.079 -> make your components on push and use
2384.4 -> observables
2386.02 -> in the future we will have
2388.54 -> um kind of what we're calling per
2389.92 -> component change detection or granular
2391.599 -> chain detection and that means that
2393.82 -> whenever a signal component becomes
2395.98 -> dirty whenever a signal notifies that
2398.56 -> component that it's updated the
2400.24 -> component needs to refresh itself with
2402.28 -> the UI only that component can be
2404.619 -> refreshed and the rest of the
2405.7 -> application won't have to be so you'll
2407.74 -> get some performance benefits from that
2409.18 -> as well right because Emma this is just
2411.52 -> a developer preview at this point right
2413.079 -> yeah absolutely uh there's a ton more in
2416.38 -> the API that still has to come the rfcs
2419.859 -> do a really good job of outlining
2421.24 -> especially some of the performance-based
2423.339 -> optimizations on like a component life
2426.28 -> cycle basis but also things like
2428.56 -> interacting with observables things like
2431.14 -> that fantastic you mentioned the RFC we
2434.079 -> had a massive RFC five documents that we
2437.079 -> put out there do we have any key
2439.119 -> learnings that we could talk about from
2440.8 -> the RFC
2442.06 -> yeah absolutely there's actually an
2444.22 -> entire sixth RFC that just summarizes
2447.16 -> all of the learnings from the previous
2448.66 -> five
2450.22 -> um but I think my favorite learning was
2452.32 -> actually some of the updates we made to
2453.82 -> the rfcs while they were still open so
2456.22 -> things like uh like I mentioned that
2458.079 -> interoperability layer uh where we
2460.359 -> originally had from observable and we
2462.099 -> changed that to signal so changing some
2464.98 -> of the semantics and how developers will
2466.9 -> actually interact with these apis Alex
2469.3 -> do you you have other learnings maybe
2471.099 -> yeah even the team couldn't keep
2472.839 -> straight what from observable meant so
2474.7 -> the the community suggested that and we
2476.8 -> were like yes absolutely that makes
2478.24 -> perfect sense we also changed how the
2480.88 -> life cycle hooks were going to work so
2483.46 -> when we were looking at signal
2484.48 -> components we realized that we were
2486.4 -> going to be removing a number of the
2488.26 -> lifecycle hooks that just didn't make
2489.52 -> sense for signals you don't need NG on
2491.98 -> changes when you have signals telling
2493.359 -> you hey I'm changing and so as part of
2496.359 -> that we thought maybe we revisit how
2499 -> lifecycle hooks work and we have this
2500.8 -> after init thing in a construct
2502.56 -> and we got a very clear signal from the
2505.3 -> community that this was not an API
2507.88 -> design that they liked and so we said
2510.28 -> you know what we don't have to do that
2511.72 -> let's walk it back all right so we
2513.7 -> updated the RFC to say nope it's going
2515.92 -> to be NG on init
2518.02 -> there we go got a comment from the
2519.82 -> community
2521.26 -> all right so this one's actually a
2522.76 -> question does angular signals mean that
2524.619 -> all reactive data that we want to be
2526.839 -> rented to the Dom has to be provided in
2529.359 -> signals instead of having the saving in
2532.18 -> traditional variables this is a really
2534.04 -> good distinction to make help us explain
2536.2 -> that's a great question uh it depends so
2541 -> if you are still using Zone JS in your
2543.579 -> applications you will still be able to
2545.14 -> have Zone components and they can bind
2547.119 -> to state
2548.2 -> that is just in services and plain
2550.18 -> variables if you want to use the new
2552.579 -> zoneless change detection that will be
2554.2 -> coming in a future version you will need
2556.48 -> to communicate to angular when that
2558.579 -> state changes using signals it doesn't
2560.859 -> mean that every individual piece of
2563.2 -> information has to be in its own signal
2565 -> you could very easily build an
2566.619 -> application that just has one signal of
2568.78 -> your entire State and for many small
2570.28 -> applications that will suffice it's kind
2573.04 -> of up to you at what level of
2574.48 -> granularity you want to be able to
2576.82 -> change things in order to optimize which
2579.22 -> components need to update On Any Given
2581.92 -> change yeah I might be reading this
2583.72 -> question wrong and I'm sure Dennis can
2586 -> uh also add this in the chat but I also
2588.28 -> think that signals allow you to pick out
2590.26 -> what will change and what will be
2592.3 -> updated what will be computed things
2594.339 -> like that but there's a lot of variables
2595.9 -> in your app that maybe won't change and
2598.48 -> so by having a more granular
2600.119 -> fine-grained reactivity model if the
2602.8 -> variable isn't going to be updated then
2605.2 -> the it absolutely doesn't need to be a
2607.24 -> signal it can just be a variable and it
2608.859 -> can be static so making a
2610.66 -> differentiation of what is static in
2612.16 -> your app yeah rather than on the Dom
2613.72 -> that's a great point but then that gives
2615.4 -> us the fine grain because we get to
2616.9 -> choose Now versus just having variables
2619.3 -> that are in the zone and then we bind
2621.7 -> them to the template just everything
2623.26 -> there is kind of subject to change
2625.839 -> detection yes right all right another
2628.78 -> question from the community
2631.599 -> all right can signals be used outside
2634.42 -> the component like in a service or a
2636.7 -> guard good question great question and
2639.4 -> absolutely you can put them anywhere
2641.5 -> because they're just a part of the
2642.76 -> framework moving forward
2644.74 -> wow well so just to clarify for the
2647.26 -> people they're part of the framework but
2649.3 -> they're not only used for change
2651.4 -> detection anymore
2652.9 -> or not anymore we're just used for check
2654.579 -> for change detection yeah signals are
2656.619 -> how you communicate to angular that your
2659.02 -> state that the state you want to show in
2660.94 -> your UI is changing
2662.92 -> um and that state can still like in
2664.599 -> angular today it can still live anywhere
2666.04 -> you can put that state in Services you
2668.02 -> can put it inside of components or
2670 -> directives you can put that state in
2671.92 -> global variables if that's your thing
2674.68 -> um it doesn't matter as long as you bind
2676.9 -> in a component to a signal angular will
2679.54 -> be able to know that that component
2680.74 -> needs to update when that signal changes
2682.3 -> so you're telling me I can have a signal
2684.099 -> that I change in the service and they
2685.599 -> can communicate across the lines of a
2687.46 -> component yes or many components
2690.4 -> I'm not being sarcastic I'm just saying
2692.2 -> that's like fantastic that's such a
2694 -> fantastic feature I think we have time
2695.14 -> for one more question
2697.54 -> all right so how do you plan to help
2699.4 -> migrate Legacy Jones Zone JS libraries
2702.64 -> and applications to full signal-based
2705.16 -> component applications ooh that's a
2707.44 -> great question
2708.599 -> migration is something that we have not
2711.04 -> spent a lot of time looking at yet it is
2714.46 -> very challenging to migrate something as
2717.94 -> as deeply ingrained in an application as
2720.16 -> the reactivity model migrating from
2722.56 -> zones where angular stands for years was
2724.78 -> we know nothing about where your state
2726.339 -> is or when it updates some in some cases
2730.18 -> you know we can very clearly say oh
2731.8 -> you're assigning to this field here we
2734.2 -> can maybe in an automatic migration turn
2735.88 -> that into a signal in other cases when
2738.28 -> you have state that's often services and
2740.319 -> you know injected in various places
2741.76 -> throughout the application it's a bit
2743.079 -> more challenging to do that
2744.04 -> automatically
2745.359 -> so we are looking at can we have tools
2747.46 -> that maybe don't get it 100 right
2750.339 -> but do the hard work for you do the
2753.099 -> boilerplaty things for you and then show
2755.859 -> you the code afterwards and essentially
2757.54 -> ask like hey is this what your
2759.16 -> application was trying to do can we have
2761.44 -> like a human assisted migration rather
2763.72 -> than an automatic migration fantastic
2766.119 -> yeah that said I think even before the
2768.94 -> RFC when this was still in design phase
2770.98 -> we did work with a lot of heat
2772.9 -> management Library authors and like
2775.3 -> Library authors and owners who we know
2778.42 -> will want to provide a signal-based
2781.24 -> alternative or additional like
2783.64 -> operability in their library and so
2785.74 -> we've been working with them from the
2787.359 -> start basically to make sure that we
2789.46 -> have operability in mind that we have I
2792.04 -> mean there's already rfcs on some of
2793.72 -> your favorite State Management libraries
2795.46 -> on how they will integrate signals so
2797.8 -> that's not to say all Zone JS Legacy
2801.099 -> applications like we have answers for
2802.72 -> right now but we at least have already
2804.52 -> started work with making sure that your
2807.099 -> common third party libraries have
2809.319 -> solutions for this and that's a good
2811.3 -> point too obviously
2814.06 -> I've spent a lot of time working on this
2815.619 -> feature I hope people like it and I hope
2818.02 -> it's a good enough experience that you
2820.06 -> want to migrate but you will not have to
2823.24 -> we're not removing Zone JS right Zone
2825.88 -> components will be supported I think the
2827.38 -> language we used in the RC was for the
2828.819 -> foreseeable future
2830.38 -> which means that there is you know
2832.54 -> unless something changes in the
2833.92 -> ecosystem we don't see removing Zone
2836.02 -> support
2837.04 -> at all
2838.3 -> so you will not need to migrate Zone
2840.28 -> components but I hope you want to I hope
2842.079 -> you want to remember these friends these
2843.94 -> are early days yet with Zone sorry with
2846.52 -> excellent zones long days with zones but
2848.56 -> early days with signals and the rfcs let
2851.74 -> you know that we're still trying to
2853.359 -> decide what's the best way to move
2855.7 -> forward and what we're going to do next
2856.78 -> so
2858.04 -> we got time all right we got time we're
2860.2 -> still making decisions together and
2861.88 -> again together as Emma mentioned we're
2864.22 -> talking to library authors we're just
2865.78 -> working with people who use angular as a
2868.24 -> part of their part of their story so
2870.28 -> this is something that is going over
2872.319 -> time speaking of time our time is up
2874.48 -> together right now but thank you so much
2877 -> to Emma and Alex for spending some time
2879.099 -> with us talking about signals now right
2881.74 -> now I love to just hear some audience
2883.78 -> comments to see what the what the
2885.099 -> streets are saying about this oh listen
2888.04 -> Marcus thank you so much for sending the
2891.22 -> love out there Marcus and I share a
2893.26 -> strong bond having a very similar name
2895.48 -> so that's pretty fantastic ng-16 is the
2898.48 -> most amazing release ever the team hears
2901.3 -> that type of feedback and it just
2902.619 -> energizes us and it lets us know that
2904.72 -> we're doing the right work which is so
2907.599 -> encouraging so we really really
2909.22 -> appreciate that and then let's let's do
2910.9 -> one more uh comment signal signal signal
2914.079 -> signal signal signal signal signal
2916.359 -> signal signal that that's right right
2920.74 -> all right and okay one more Marcus came
2923.5 -> back with another comment happy
2924.78 -> anglers16 everyone and that goes out to
2927.64 -> the entire Community happy angular
2929.8 -> version 16. all right so let's change it
2932.319 -> up a bit shall We The Angler team has
2934.54 -> been shipping features left and right
2937.24 -> and people have been wondering well
2939.04 -> what's next well you're in luck to help
2941.8 -> us understand what's next for angular
2943.42 -> and more please welcome welcome our
2946.06 -> engineering manager madlina and Alex
2948.94 -> once again Alex has been on the show as
2951.94 -> much as I have so that's pretty
2953.2 -> fantastic thanks for having me back yeah
2955.839 -> welcome back my Atlanta thank you for
2958.18 -> coming on the show you're welcome to
2959.74 -> have you it's exciting to be here it is
2961.78 -> exciting so many questions I so I want
2964.42 -> to encourage the audience that as you're
2966.4 -> as you're spending time with them right
2967.599 -> now put your questions in the chat this
2969.7 -> is a great time to get questions
2970.96 -> answered that
2972.94 -> you'll get to hear from our leadership
2974.92 -> and you'll get some really really good
2977.02 -> answers from this very excited all right
2978.64 -> I'm going to open up
2980.74 -> now we had talked about hydration and
2983.8 -> signals all right how did the angular
2986.14 -> team figure out that these two features
2988.06 -> are everything that we could have been
2989.38 -> doing how do we land on these two
2991.48 -> features is our big things for 2023.
2994 -> it's a very it's a good question and
2995.859 -> it's one week get asked a lot it is also
2998.319 -> one that we've been talking about in
3000.24 -> various forms you'll hear a little bit
3001.74 -> more at i o you've heard about it maybe
3003.119 -> on ngcom for other places as well at the
3005.819 -> heart of it it comes down to the fact
3007.56 -> that we are data driven team
3009.24 -> and so we want to look at the data from
3012.18 -> the developers in various forms whether
3014.16 -> or not that's Commons your bug reports
3017.099 -> issue reports RFC comments all of those
3020.22 -> places but most importantly actually our
3021.96 -> annual survey that we run and lastly we
3024.119 -> got over 10 000 responses which is an
3026.22 -> amazing amount of data for us to be able
3028.079 -> to understand what is working probably
3030.72 -> more importantly what is not working
3032.4 -> because that's usually where we don't
3034.2 -> need to spend our time and that's how
3035.7 -> we've sort of gotten into this area and
3038.16 -> in particular Beyond like one of them is
3041.22 -> hydration it was very much the fact that
3043.079 -> we heard that server-side rendering
3044.7 -> needs some love and we need to spend a
3046.2 -> little more time making it better
3048.119 -> with reactivity it came from a little
3049.92 -> bit of a different place partially
3051.559 -> looking at issues and all of those
3053.76 -> places but also the fact that we knew we
3056.04 -> had to look at developer experience a
3057.359 -> little bit more and one of those Avenues
3059.04 -> was the fact that
3060.66 -> you know there are places where you
3062.46 -> needed to understand how angular worked
3064.38 -> in order to get your effects that you
3066.599 -> wanted in your app and that is not a
3068.579 -> great experience that's not how a
3069.9 -> framework is meant to work and what
3071.76 -> we've internally been calling that is
3073.26 -> sharp edges and so it's been really
3075.24 -> important for us to understand how do we
3076.92 -> remove those and understanding of the
3078.96 -> conceptual and deep level how we remove
3080.76 -> them not just the surface of it and
3082.559 -> that's how we ended up going into
3083.76 -> signals and Alex can talk a little bit
3085.5 -> more maybe about the process there yeah
3087.24 -> absolutely
3088.76 -> so this really came out of it's It's one
3092.64 -> interesting observation right is it's
3094.079 -> been nearly 10 years since angularjs was
3097.26 -> released
3098.3 -> and a couple years ago we came together
3101.64 -> as a team kind of for the first time
3103.14 -> after lockdown we're able to be in the
3105.119 -> same room together
3106.38 -> and had a bit of a deeper discussion
3108.839 -> about kind of looking back on that time
3112.02 -> and we realized kind of two really
3113.76 -> critical things
3115.02 -> one is that the web had changed a lot
3117.78 -> you know we said goodbye to some loved
3120.42 -> and not so loved browsers
3123.079 -> new browsers introduce all kinds of new
3125.76 -> apis the JavaScript language has really
3128.16 -> been evolving quite a bit since the you
3129.9 -> know ecmascript five days
3132.48 -> um and the second thing we realized was
3133.74 -> the angular had actually changed a bit
3135.78 -> in that time frame right right
3137.7 -> um you know we've kind of been on a
3139.02 -> journey as well
3140.4 -> and it seemed like an opportune moment
3142.859 -> to look back and look at some of the
3145.2 -> original design assumptions that were
3146.64 -> made some of the trade-offs that were
3148.8 -> put into the design of angular
3150.839 -> and ask ourselves whether those
3152.64 -> trade-offs were still the right ones to
3154.38 -> make seven to ten years later
3156.839 -> right and would they support us for the
3159.9 -> next 10 years of angular development
3161.94 -> and we started looking at things like
3163.5 -> change detection
3164.78 -> server-side rendering as well but for
3167.52 -> change detection specifically we noticed
3169.26 -> that hey
3170.46 -> a lot of the times as developers scale
3173.04 -> up their applications that they run into
3174.599 -> these problems
3175.98 -> that they start needing to understand
3178.559 -> more about how the framework is working
3180.72 -> internally as medlana mentioned
3183.18 -> really if you peel back all the layers
3185.94 -> of apis you see kind of Zone JS is at
3189.42 -> the root of this problem
3191.7 -> zonejs is doing its job but as it's not
3195.3 -> scaling in the developer experience in
3197.22 -> the way that we would like to see it
3198.96 -> doing
3199.859 -> and so we started asking ourselves hey
3201.66 -> is it time to consider an alternative
3204.059 -> is there a core that we can put in there
3206.28 -> in place of Zone JS that will support
3208.559 -> angular for the next 10 years of
3210 -> development that will smooth over these
3211.98 -> sharp edges
3213.119 -> and make it so that developers can focus
3215.099 -> on shipping their features and not
3217.14 -> necessarily fine-tuning their
3218.46 -> performance in the way they had to do
3219.72 -> before
3220.559 -> I think what's really valuable is a
3223.26 -> couple of things that you mentioned
3224.099 -> especially about thinking about 10 years
3226.88 -> of the next 10 years I think one of the
3229.859 -> things that's really hard for a
3230.819 -> framework especially in this space is
3232.44 -> they come they rise and then they kind
3235.02 -> of fade away it's obscurity and then if
3236.64 -> you're an organization you've put a lot
3238.68 -> of time into those Frameworks and
3240.599 -> adopting and then if the framework loses
3242.7 -> support you have this rework that you
3245.04 -> have to do so I think the audience and
3247.5 -> the community is really going to be
3248.819 -> happy to hear that we're thinking about
3250.5 -> what is the next 10 years looking like
3252.42 -> especially if you've recently adopted
3254.52 -> angular at your organization you want to
3256.5 -> know that we're committed to this thing
3257.64 -> and we are right and we are let's let's
3260.28 -> go to some audience questions or
3261.96 -> comments so I guess we got both okay so
3263.819 -> what I would like to know is how can
3266.16 -> developers contribute to the code for
3268.619 -> example input or output or pipes for
3271.559 -> angular itself the source code looks
3273.54 -> overwhelming are there any tutorials for
3276.3 -> such a thing this is a really good
3277.74 -> question what's the best way to
3279.24 -> contribute how can they get started
3280.5 -> that's a fantastic question
3282.66 -> um so on our issue tracker we have
3284.339 -> labels for the issues and there's two
3287.64 -> labels I think that are relevant here
3289.319 -> which is good first issue and help
3291.359 -> wanted
3292.26 -> these are issues that we've kind of
3293.7 -> singled out in triage as hey someone who
3295.8 -> really doesn't know too much about the
3297.599 -> internals of angular can come in here
3299.88 -> and start to maybe get their feet wet
3302.3 -> working in our code base definitely
3305.22 -> reach out to us if you're interested in
3307.079 -> working on an issue ping us on the issue
3308.7 -> and ask hey can I take this on can
3311.22 -> someone help me understand what needs to
3312.96 -> happen here and if it's you know there
3315.66 -> are many areas of the framework where we
3318.42 -> don't have the bandwidth to focus on
3320.04 -> right now sure we're working on
3322.26 -> reactivity and hydration at the moment
3323.94 -> right we're not necessarily doing deep
3325.98 -> work in the animations package today
3328.46 -> but if it's something that fits in with
3330.72 -> our plans if we have the bandwidth to
3332.46 -> kind of engage with you and help you
3334.68 -> understand what needs to happen there we
3336.599 -> will do that okay I definitely want to
3338.819 -> emphasize start small yeah right
3341.42 -> it's things are overwhelming if you
3343.92 -> haven't had a chance to get to learn it
3345.54 -> and so this is why we've done the work
3347.099 -> of singling out issues as being good
3349.8 -> places to start needing help because
3351.48 -> those are places where you can start
3352.74 -> getting to learn the code base as well
3354.54 -> and so while it might not be the thing
3356.16 -> that you might want to work on first or
3358.2 -> the first thing that brought you to want
3359.88 -> to look at the code it does allow you to
3361.559 -> get to know the code as well and so then
3363.24 -> the second issue will be easier and the
3364.559 -> third one even easier from there and and
3366.54 -> so on so and so forth so think in small
3368.64 -> steps here too but if you feel so
3370.619 -> roaming that's what I do when I get to
3372.72 -> encounter a new code base I've never met
3374.28 -> with it's not like I try and understand
3375.54 -> everything at once I try and learn a
3377.76 -> little bit and start solving small bugs
3379.859 -> because that's the way if I got to know
3381.42 -> the code as well and so we recommend the
3383.4 -> same way for angular as well and that
3385.079 -> works even internally even for myself I
3387.359 -> just pushed a new tutorial to the
3389.64 -> angular documentation and it was one
3392.28 -> thing that amazed me is how great the
3394.619 -> folks who are managing their repo how
3396.78 -> supportive they are even for internal
3398.819 -> external people so friends if you're out
3400.74 -> there and you want to contribute we're
3402.359 -> very supportive we're welcome to support
3403.859 -> from you as in your contribution and
3405.96 -> we're really really happy so let's uh
3407.88 -> jump into another question I'm new in
3409.5 -> front-end development I learned HTML and
3412.02 -> CSS and I'm at the end of JavaScript
3414.54 -> do you advise me to start to learn
3416.819 -> angular and why
3419.339 -> definitely I think there is no reason
3421.2 -> you've got all the prerequisites to get
3423.48 -> started going now and Mark just released
3424.98 -> in an amazing new tutorial which I know
3427.619 -> is I haven't had a chance to fully read
3429.359 -> all and go through it myself all of the
3431.52 -> steps yet but that is a great way to get
3433.5 -> to know angular in there as well and we
3435.18 -> we do assume some amount of knowledge of
3437.339 -> HTML and JavaScript but it sounds like
3438.9 -> you've got all the prerequisites for
3440.339 -> that so definitely get started an
3442.2 -> angular will scale with you and that's
3443.64 -> why we think it is such a great
3444.839 -> framework for you and if you want to get
3446.94 -> to learn how to work with a framework
3448.68 -> that will scale as you work on larger
3450.24 -> apps as you might build your own app out
3451.92 -> and get more people to contribute or you
3453.66 -> might want to work with others on a
3455.04 -> larger app angular will stay with you
3456.839 -> and grow with you and that's why it is
3458.52 -> such a what we believe at the heart of
3460.68 -> what makes angular so great is it helps
3463.5 -> you go from the small to the big as well
3465.72 -> and so get started with it right start
3467.819 -> with it small but then let it help you
3469.559 -> grow and help you grow your apps to
3471.24 -> larger and larger scales and I think
3472.859 -> that that just kind of transcends
3474.78 -> anything when you're learning just try
3476.88 -> so if you want us the best way to get
3478.619 -> started is to start so definitely want
3481.26 -> to encourage you just get started I
3483.359 -> think you're going to be great
3484.14 -> definitely do the new tutorial it was
3486 -> designed with beginners in mind and you
3488.16 -> don't have to dive into the deep end
3489.359 -> just yet so many questions from the
3491.28 -> community let's keep going work uh
3493.38 -> Community questions okay so is there a
3495.54 -> possibility of angular compilation
3497.46 -> support to single file Brandon Roberts I
3500.76 -> know who you the first time I know you
3503.099 -> we know you yeah so single file
3506.22 -> compilation with tools like Veet is
3509.339 -> there is there anything on a roadmap
3510.72 -> anything we're thinking about kind of
3512.28 -> where are we with that yes
3514.619 -> um single file compilation is a goal of
3517.02 -> angular in the future this is something
3518.579 -> we want to have sorry I hate the
3520.2 -> introduce you but not everyone may know
3521.64 -> what that even means okay a file
3523.26 -> compilation so today to compile your
3527.099 -> angular code right let's say you you
3529.2 -> have your component in
3531.78 -> call it like component module and you
3534 -> have your component file angular needs
3536.46 -> both of these things
3538.26 -> to be able to compile your application
3540.18 -> to be able to compile that that
3541.559 -> component and it's more than that
3543.42 -> actually if you're importing common
3544.799 -> module it needs the definition for
3546.48 -> common module to do that
3548.28 -> which means compilation kind of has to
3550.38 -> happen as this waterfall process where
3552.299 -> you compile the library and then you
3553.74 -> compile the application on top of the
3555.359 -> library
3556.14 -> and you have to compile all of the files
3558.299 -> kind of sequentially
3559.74 -> single file compilation means that you
3562.26 -> can take the source code for one file
3564.24 -> not knowing anything else about your
3566.22 -> application and produce output produce
3568.559 -> compiled output for that file
3570.839 -> and that's nice because you can paralyze
3572.94 -> it right so you can have builds that
3574.619 -> take advantage of multi-core processors
3576.359 -> and run you know compile 15 files
3578.52 -> simultaneously
3580.619 -> so yes it is on our roadmap right but we
3583.74 -> don't quite know yet when we're going to
3585.54 -> get around to it because we have a lot
3586.98 -> of other Grand plans at the moment and
3589.26 -> so we want to make sure we do each of
3591.119 -> those well and so as much as we'd love
3593.099 -> to do everything we want to make sure
3595.14 -> that we also are conscious of what makes
3597.78 -> sense and to finish the work we've
3599.64 -> started and not start a little bit here
3601.5 -> start a little bit there start a little
3602.76 -> bit there and then not finish any of
3604.14 -> them and so that's why it's a little
3605.52 -> harder for us to predict when we'll get
3607.02 -> to but it's definitely a topic that has
3608.52 -> come up and we definitely want to get
3609.9 -> around to it and sure the approach we've
3612.48 -> taken there is
3614.88 -> there are some fundamental assumptions
3617.099 -> that we make in angular about how things
3618.9 -> work like NG modules that are naturally
3622.14 -> incompatible with single file
3623.4 -> compilation so the approach we've taken
3625.68 -> is as we
3627.359 -> design these pieces as we consider do we
3629.94 -> you know do we need NG modules or do we
3632.04 -> do standalone
3633.18 -> single file compilation is a part of
3635.22 -> that consideration
3636.66 -> so we are taking steps towards it
3640.38 -> without necessarily a kind of
3642.92 -> overarching effort to do it with
3645.72 -> priority
3646.68 -> so Standalone is a great example of that
3648.48 -> Standalone components take us a step
3650.16 -> closer to single file compilation
3652.5 -> fantastic I want to touch on something
3654.18 -> that might line up brought up about the
3656.7 -> importance of us picking projects and
3658.68 -> completing them what learnings can you
3660.78 -> draw from or share with the community
3662.04 -> that led to our stance on it to be sure
3665.16 -> that that's kind of what Focus for us
3666.299 -> moving forward
3668.579 -> I guess for me personally wasn't uh I
3671.819 -> don't think that is just an angular
3672.96 -> specific thing I think it's a good
3674.16 -> software engineering practice in general
3675.66 -> and is we've probably all encountered
3678 -> the project where we got 80 or we got 90
3680.4 -> then it's not quite done and we were
3682.68 -> frustrated of like wait what do you mean
3684.299 -> I can't use it in this context yet or no
3686.339 -> and so I think that is actually as much
3688.2 -> as anything else that has led to that is
3690.059 -> we've ourselves as we use things both
3693.42 -> internally and externally as we've done
3695.16 -> our own practices as we've been software
3696.839 -> developers ourselves we know what it is
3699.119 -> like when someone doesn't fully finish
3700.619 -> it and so that's why it is so important
3702.359 -> for that it also has a second benefit
3704.579 -> which is it actually reduces the
3706.02 -> maintenance burden on us as long as we
3707.88 -> have multiple version of things floating
3709.26 -> around multiple features of the same
3710.94 -> kind multiple apis that do similar
3712.859 -> things anytime we want to touch any of
3714.48 -> that we're going to have to do both of
3716.04 -> those and so when we do something like
3717.54 -> signals we have to look at everything
3718.68 -> within angular and so we still had a
3720.78 -> number of versions back or a number of
3722.52 -> things left over we'd have to also
3724.44 -> consider it for them whether or not
3725.7 -> they're fully used or not we still have
3727.26 -> to consider it and so that's the other
3729.18 -> reason why it's so important for us to
3730.5 -> finish projects as well as to make sure
3732.299 -> it keeps us in a better State moving
3734.52 -> forward with other good things that we
3736.079 -> can then bring with new features
3737.88 -> fantastic let's get another Community
3740.66 -> question could you say something about
3743.16 -> the status of micro front and
3745.02 -> architecture research how's that going
3748.38 -> oh that's a good one minko is the one
3750.18 -> who's been leading this yeah um he's
3751.98 -> been talking to a lot of the different
3753.24 -> teams on this to understand what's out
3754.98 -> there what isn't
3756.359 -> um he is still compiling the research
3757.74 -> and we'll publish it we've been working
3759.299 -> on the report on that
3760.98 -> I think what we've learned is that
3762.78 -> there's a lot of different versions out
3764.28 -> there but also that
3765.72 -> there isn't the consensus yet on where
3767.64 -> it might go and for us it is important
3769.74 -> whatever path we pick if we build
3771.359 -> something into the front into angular
3773.339 -> itself we always want to make sure it is
3774.78 -> I think we can support for the long term
3776.7 -> and so that's why we're doing a very
3778.14 -> careful approach here and what to do and
3779.76 -> what not to do the other thing I'll
3781.38 -> always caution with these things is that
3783.24 -> it's um having gone through various
3786 -> migrations in this nature as well
3788.52 -> um it's easy to technology is often not
3792 -> the silver bullet for a lot of things
3793.68 -> that go on in an application and so
3795.66 -> microphone and solve some problems but
3797.16 -> it doesn't solve everything you might
3798.54 -> have going on I've actually seen
3800.04 -> somewhere you end up with very large
3802.14 -> nodes in the microphone and because you
3804 -> didn't do the job of actually finishing
3805.38 -> modularizing your app right and so
3807.119 -> there's a lot as well like if you're
3808.859 -> thinking about microfinance make sure
3810.299 -> you also think about what are you trying
3812.16 -> to solve and what are all the ways
3813.48 -> you're going to have to prepare yourself
3814.68 -> for that and where are you trying to go
3816.42 -> with that and so it is often a little
3819.359 -> bit not something we're spending more
3821.94 -> time on and actually the signals are of
3823.92 -> c pre-rfc and also what Alex was talking
3826.319 -> about the recollection of what we
3828.119 -> designed decisions is a large part of
3829.799 -> this is requirement Gathering is a
3831.78 -> really important part of processes for
3833.76 -> when we do things
3836.46 -> you have to understand what you want to
3838.38 -> solve and what are your actual problems
3840.599 -> are before you come up with a solution
3842.579 -> and I think sometimes it's so easy to go
3844.14 -> like oh that sounds fancy maybe that
3845.579 -> will help but make sure you actually
3846.96 -> understand what you're trying to solve
3848.22 -> with it and what new problems you're
3849.96 -> going to get Yes actually that's a
3851.46 -> really good one we've talked a lot with
3853.079 -> um I remember a lot of conversations on
3854.94 -> signals as well was like can we predict
3856.799 -> what problems we're introducing we know
3858.299 -> which ones we're solving do we know what
3860.4 -> neurons are going to come up and stand
3861.96 -> and I think that's really important
3863.16 -> there but back to the original question
3865.02 -> yeah we we're working on and we'll
3866.7 -> publish it in the near future sure
3868.619 -> coming soon all right for well soon as
3871.26 -> in when we finish it yeah that's when we
3874.619 -> say soon on the angular team that's what
3876.119 -> we mean when it's done we really don't
3878.04 -> try to predict Things based on like a
3879.48 -> calendar we try to predict them from
3880.98 -> when they're done so now when we do the
3883.38 -> next stream you guys ask us what's
3885.42 -> happening we can tell you now soon means
3887.76 -> when it's done all right let's get
3889.02 -> another question from the community
3890.4 -> should we expect rendering model of
3892.74 -> angular to have core changes driving
3895.02 -> from the introduction signals
3897.619 -> that depends what you mean by rendering
3900 -> model the reactivity model certainly
3902.28 -> right we're introducing a new one with
3903.96 -> signals we're not planning any changes
3906.359 -> to how rendering Works directly we just
3909.299 -> finished that with Ivy yes yeah and
3911.579 -> actually Ivy is one of the things that
3912.96 -> enables us to do this because we have an
3915.059 -> extensible architecture now so we can
3917.94 -> introduce things like signal components
3919.5 -> and not add additional code to Zone
3921.24 -> applications that aren't using it yet
3924 -> um but we're not planning on any major
3926.28 -> changes to how templates are created
3928.26 -> just yet there are some interesting
3930.48 -> ideas that we're benchmarking and
3931.799 -> playing around with there but that's
3933.24 -> kind of projects down the line we'll
3935.52 -> also probably want to see how signals
3937.319 -> actually end up working out in
3938.46 -> applications we know how it we've seen
3941.22 -> in our own explorations of this but it's
3943.14 -> always interesting to see what happens
3944.4 -> when you start scaling this up to very
3946.44 -> large apps and that's very hard for us
3947.88 -> to do it fully in their exploration
3949.38 -> phases and there's always good to see
3951.78 -> one of Works in practice right it's very
3953.4 -> as we say we know what we're moving we
3955.079 -> don't know what we're introdu
3956.04 -> introducing as maybe new issues and that
3958.26 -> will then help influence me when we want
3960.78 -> to take a look at whether or not we need
3962.099 -> to change on rendering anything we'll
3963.42 -> want to be in a state where we
3964.68 -> understand what the current system is
3966.48 -> fully and so if we're working on signals
3968.64 -> right now we'll want to make sure it has
3969.96 -> landed enough and we've seen enough how
3971.46 -> it works in actual applications to
3973.619 -> understand what it does before we then
3975.359 -> make another change on top because
3976.559 -> otherwise it's could be easily cascading
3978.96 -> without really fully understanding how
3980.579 -> it all comes together all right so we're
3982.5 -> running a little shorter time so we're
3983.819 -> going to do a lightning round of
3985.02 -> questions all right from the community
3986.4 -> all right another Community question if
3988.5 -> we're building a new app from ground up
3990.18 -> is there a reason to use a mixture of NG
3992.819 -> modules in Standalone or should we just
3994.859 -> go fully Standalone stand alone
3996.299 -> Standalone there's no reason to do a
3998.46 -> mixture if you're starting you
4003.16 -> that's right does angular use
4005.359 -> webassembly to optimize how it works in
4007.46 -> the browser or do we have plans to
4009.44 -> include it in the future
4010.94 -> we don't currently but it is something a
4013.22 -> topic we've been discussing a lot
4014.48 -> internally and it's something we plan to
4016.28 -> talk a lot more with the Chrome team as
4017.66 -> well one of the good things is we get to
4019.22 -> talk with other teams at Google and
4020.599 -> Chrome is definitely one of those and so
4022.28 -> it is on our roadmap we don't have we
4024.799 -> don't quite know how it's gonna shake
4026.24 -> out yet and I want to save some of these
4028.039 -> questions for the future and do some
4030.2 -> like deeper Dives and more interviews I
4032.18 -> think people have such fantastic
4033.799 -> questions for us all right Let's do
4035.72 -> let's do a couple more okay so is there
4038.119 -> the possibility of compilation support
4039.859 -> oh we did that one before all right if
4041.9 -> we're building a new app we did that one
4043.579 -> let's see is there any more uh do you
4046.039 -> suggest to name a component all right so
4047.599 -> this is the thing I okay I'm not going
4050.78 -> to give my opinion I'll just tell you do
4053 -> you suggest the name of a component like
4054.68 -> with card component or just card with
4057.02 -> the introduction of Standalone
4058.46 -> components do we need to change our best
4060.5 -> name practices the reason I said
4061.88 -> something is because we recently did a
4063.559 -> live stream and I'd like to name my
4065.48 -> components like Mark component or door
4068.72 -> component Jeremy like do 4. so settle
4072.74 -> the debate is it oh door component or
4075.5 -> door I would do door CMP so
4079.66 -> we have a third country
4082.539 -> okay all right so then it sounds like
4085.4 -> it's best left up to the development it
4087.26 -> probably depends on what else you do
4088.46 -> what do you do with your services what
4090.079 -> do you do with your business logic where
4092.299 -> if
4093.319 -> um is there other naming conventions you
4095.119 -> have that you want to fit in so I would
4096.5 -> say the most important thing is make
4097.58 -> sure it fits in with the rest of what
4099.14 -> you have and so if you generally end up
4101.6 -> designating things as components or you
4103.219 -> end up having things in folders whatever
4104.6 -> structure you might have for your
4106.04 -> personal the project you're working
4107.359 -> within stick with that more than
4109.279 -> anything else
4111.58 -> that's right architecture one more let's
4114.319 -> do one more and then we'll we'll wrap up
4116.42 -> here do we have plans to add native
4119.719 -> store for State Management and angular
4122.42 -> something okay I get it something like
4124.16 -> we have in ngrx we have plans for
4126.859 -> something like that oh that's a great
4128.6 -> that's a great question yeah
4131 -> um I think it remains to be seen yeah
4134 -> um so we're talking with a number of the
4136.46 -> community library stakeholders so ngrx
4139.339 -> ngxs RX angular State adapt and we're
4143.359 -> engaging with them to figure out what
4144.98 -> are some good patterns around State
4146.779 -> Management where I think we're not
4148.819 -> settled right now is like where does
4150.799 -> this slider live between what the
4153.92 -> community supports and encourages in
4155.719 -> different patterns so like ngrx Works
4157.699 -> differently than ngxs
4159.92 -> how much of that do we leave up to the
4162.02 -> community versus how much do we say okay
4163.46 -> everybody seems to be doing this one
4165.08 -> thing in a very similar way it makes
4167.239 -> sense to put this part of the core
4168.799 -> framework oh good very good point I
4171.14 -> think the most important thing for us
4172.16 -> was though to make sure that you work
4173.54 -> with signals
4175.4 -> um and then see how things develop from
4176.96 -> there but that interoperability layer
4179.179 -> was very critical for that as we
4180.859 -> introduce it see fantastic I think we
4183.259 -> have one more we want to go to
4187.759 -> all right so are there any plans to be
4189.38 -> able to render static Pages at build
4191.179 -> time with life cycle methods like nexjs
4194.239 -> to make SEO and social media links
4196.82 -> sharing easier for static portions of
4199.52 -> the sites without the need of SSR
4202.64 -> that's a chunky question the chunky
4204.8 -> question it's probably not been the area
4206.06 -> we focused on the most angular is at the
4208.219 -> heart of it of reactive framework and
4209.96 -> we're all and we focused on making it
4212.179 -> easy to build reactive applications
4214.58 -> that doesn't mean it's not something we
4216.739 -> shouldn't be considering more on whether
4218.239 -> or not we should be supporting more of
4219.679 -> that it's just not on the most immediate
4221.96 -> part of our roadmap given the fact that
4224.42 -> as at the core of it what we're trying
4225.98 -> to work on is reactive applications
4228.38 -> rather than static
4230.36 -> um generation but it's a good call out
4233.06 -> that it's a way that the web is changing
4235.159 -> and so we should keep an eye on it right
4237.38 -> fantastic all right friends well
4240.56 -> here on the angular team we are
4242.3 -> extremely grateful for you folks out
4243.8 -> there being a part of our vibrant and
4246.02 -> thriving angular Community a big thank
4248.9 -> you to Matt Lina Alex the whole team who
4251.239 -> spent time hanging out with us today and
4253.46 -> just being here now this stream is
4256.34 -> coming to an end but this is not the end
4259.46 -> for you now if you're new to angular we
4261.98 -> just launched a brand new course on the
4264.44 -> angular YouTube channel that'll help you
4266.36 -> build your first angular app and we hope
4269.719 -> that you will enjoy it be sure to NG
4272.48 -> update to get the latest version of
4274.1 -> angular for your next project and from
4277.28 -> all of us here on the Anglo team thank
4279.44 -> you and go build great apps we'll catch
4283.04 -> you in the next one
4288.159 -> hey there friends it's Mark from the
4290.659 -> Anglo team back again and bringing you
4292.52 -> the latest updates from the angular V16
4295.4 -> launch angular's momentum is real and
4299.06 -> we've been hard at work creating the
4301.1 -> best developer experience possible for
4303.739 -> you the Fantastic angler community
4306.44 -> we have a lot of features to discuss so
4308.78 -> let's get to it first up I hope your
4311.9 -> components are thirsty because the team
4313.94 -> has just released a developer preview
4315.92 -> for non-destructive hydration with
4318.14 -> server-side rendering that's right long
4320.54 -> gone are the days of your angular apps
4322.76 -> having to re-render the server render
4324.5 -> Dom when your app gets to the browser
4326.84 -> with this feature being in developer
4328.82 -> preview you can try it right now here's
4331.76 -> how for Standalone apps add a call to
4334.76 -> provide client hydration to the
4336.739 -> providers list in the bootstrap
4338.36 -> application configuration and if you are
4341.3 -> using NG modules add a call to provide
4344.12 -> client hydration to the providers list
4346.1 -> in the apps main module remember this is
4349.52 -> a developer preview and there will be
4351.38 -> some features we haven't implemented
4353 -> just yet be sure to check out the
4355.219 -> release notes and angular release blog
4357.5 -> for more details links in the
4359.48 -> description of this video next let's
4362.36 -> discuss recent updates to angular's
4364.4 -> reactivity model up to this point we've
4367.159 -> relied solely on change detection
4368.96 -> powered by Zone JS but over time we
4371.96 -> found that at scale it isn't the optimal
4374.12 -> solution now we spent a lot of time
4376.88 -> trying to figure out a better way and
4379.159 -> you know what with Nick we found one
4381.02 -> angular signals if you haven't heard of
4383.9 -> signals before that's totally fine
4386.06 -> because we got you covered
4388.04 -> signals have three Core Concepts that we
4390.739 -> call reactive Primitives signal computed
4393.86 -> and effect a signal is like a variable
4396.86 -> and holds a value that can change unlike
4399.8 -> variables signals can notify angular
4402.26 -> when they change a computed is a kind of
4405.62 -> signal that calculates its value from
4408.02 -> other signals and only updates if the
4411.02 -> value it depends on change
4413.78 -> then we have effects effects are
4416.6 -> functions that execute when the values
4418.699 -> of the signals they use change and this
4421.219 -> gives developers the opportunity to
4423.14 -> respond to changes in a meaningful way
4425.78 -> and now the biggest question when can we
4428.42 -> use them right now we just launched in
4431.96 -> developer preview and we're going to
4433.88 -> link some helpful docs and Q and A's
4436.04 -> with the developers where you can find
4437.84 -> more information and remember as with
4440.659 -> all developer previews things are likely
4443.3 -> to change over time as we continue
4445.52 -> building out this feature set remember
4448.219 -> last year when we introduced Standalone
4450.199 -> apis for components directors and pipes
4452.54 -> allowing developers to have optional
4454.699 -> modules and everybody loved it well get
4457.34 -> ready to love it more because we're
4459.26 -> introducing some awesome upgrades you
4462.14 -> may have wanted to migrate existing
4463.94 -> applications to use Standalone apis well
4466.58 -> we've got something for that scenario
4468.14 -> say hello to the new Standalone
4470.659 -> migration schematics now you can migrate
4473.3 -> your applications all at once or bypass
4476.3 -> using the new schematic to get started
4479.48 -> run NG generate at angular forward slash
4483.62 -> core colon Standalone in your project
4486.32 -> but we didn't stop there you can now
4489.8 -> generate applications that are
4491.42 -> configured to use Standalone apis from
4493.58 -> the start that's right no need to
4495.56 -> manually convert your app code to
4497.42 -> bootstrapping a component and removing
4499.94 -> modules it's all handled for you with
4502.76 -> the new Standalone command line option
4505.219 -> for NG new routing is a vital part of
4508.52 -> nearly every app out there so we've
4511.04 -> decided to make it a bit better for
4512.96 -> everyone you've asked to be able to bind
4515.54 -> parameters to a component's inputs
4517.46 -> alright you got it in V16 you can now
4521.3 -> Define find properties to map to inputs
4523.58 -> in the resolve configuration for your
4525.62 -> routes you can pass resolver and data
4528.56 -> properties path parameters and even
4530.9 -> query parameters very cool stuff let's
4534.08 -> turn our attention to updates around
4535.82 -> developer tooling we have a crisp new
4538.4 -> developer preview of our es build based
4540.8 -> build system furthermore we're using V
4543.38 -> for the development server of NG serve
4545.78 -> now this is only for Dev servers to
4549.38 -> enable Veet in es build head over to
4551.96 -> angular.json to configure this feature
4554.3 -> we'll include instructions in the
4556.159 -> description to this video surveys and
4558.56 -> Community feedback tell us that just
4560.239 -> support is high on the wish list for
4562.64 -> angular devs well today we're happy to
4564.98 -> announce that we're enabling
4566.44 -> experimental support for just nv16
4570.26 -> details on how you can try out this new
4572.3 -> experimental feature can be found in the
4574.52 -> links in the description here's another
4576.5 -> feature that we've received a lot of
4578.84 -> requests for the community has been
4581.06 -> asking for required inputs for a while
4583.219 -> and we are happy to announce that
4585.38 -> components now support required inputs
4588.62 -> to mark an input as required at the
4591.199 -> required flag to the input decorators
4593.659 -> configuration and you are ready to use
4595.82 -> this new feature okay honestly there are
4598.4 -> too many features to cover in just this
4600.56 -> update so it's time for a lightning
4602.78 -> round
4603.62 -> by default new projects will start with
4606.38 -> fewer files and we've added a schematic
4609.14 -> to generate your environments file if
4611.3 -> you need it the angular language service
4613.699 -> can now auto complete Imports and
4616.46 -> templates the NG undestroyed lifecycle
4619.219 -> Hook is now injectable and it provides
4621.679 -> you with more flexibility in registering
4623.719 -> cleanup Logic for your app
4625.699 -> and while angular has always been
4627.86 -> compatible with the vast majority of
4629.54 -> content security policy settings we've
4632.239 -> just added stricter style Source CHP
4634.88 -> support across our packages to allow
4637.4 -> developers to specify a non-to attribute
4639.92 -> for component Styles at angular inline
4642.56 -> and can you believe that there are even
4645.02 -> more updates in this release to learn
4647.48 -> more check out the official angular
4649.58 -> release blog at
4651.58 -> go.gle forward slash angular Dash V16
4655.78 -> alright everyone angular V16 is out now
4659.3 -> with some fantastic updates that we
4661.4 -> think you are really going to love be
4664.1 -> sure to NG update today to take
4666.08 -> advantage of all of these great features
4668.36 -> thanks for watching and go build great
4671.36 -> apps
4676.28 -> foreign
4681.75 -> [Music]
4688.64 -> foreign
4690.25 -> [Music]
4720.39 -> [Music]
4731.51 -> [Music]
4735.56 -> thank you
4743.23 -> [Music]

Source: https://www.youtube.com/watch?v=sJzCy8pRU5g