Angular 19 blew me away

00:36:14
https://www.youtube.com/watch?v=pYKAngWoyVw

摘要

TLDRAngular version 19 is a significant release that aligns its version number with React, showing a commitment to staying abreast of industry standards. This version introduces several important features aimed at improving development experience (DX) and performance. Notably, Angular 19 offers a developer preview of incremental hydration, which promises to enhance performance for applications requiring high efficiency. Changes include improved server-side rendering (SSR) capabilities and the introduction of new reactive programming concepts like signals. The Angular team is also focusing on better integration with the developer community by addressing popular feature requests. With these changes, Angular aims to reduce the gap between its framework and others like React, acknowledging past issues in responsiveness and performance.

心得

  • ✨ Angular 19 aligns versioning with React, bridging gaps.
  • 🚀 Major focus on developer experience and performance.
  • 🌐 New features like incremental hydration introduced.
  • 📈 Improved server-side rendering capabilities.
  • 💡 Greater attention to community feature requests.
  • 🔄 Introduction of signal-based reactivity.
  • 🛠 Enhanced build and tooling systems.
  • 📚 Modernization without disrupting existing code.
  • 🔧 Developer tools integrations improved.
  • 🎉 Angular stepping up to meet modern dev needs.

时间轴

  • 00:00:00 - 00:05:00

    The speaker discusses the new Angular 19 release, noting the alignment of versions between Angular and React, and highlights the community-focused changes that address prior criticisms of Angular's responsiveness to developer needs. They praise the dedication to improving developer experience and performance, and express excitement about detailing the updates.

  • 00:05:00 - 00:10:00

    The speaker introduces the sponsor of the video, mentioning the capabilities of the browser automation tool Stagehand, which simplifies tasks by allowing developers to use English language prompts. The speaker appreciates its potential for simplifying complex tasks and improving serverless development experiences.

  • 00:10:00 - 00:15:00

    The speaker expresses enthusiasm for the changes in Angular 19, particularly the focus on developer experience and performance. They reflect on Angular's historical influence, like its early adoption of TypeScript, and the community's positive response to ongoing improvements. Concerns are still noted about the relevance of creating new Angular apps today.

  • 00:15:00 - 00:20:00

    The new Angular features are highlighted, including incremental hydration, improved server-side rendering, and updated reactivity primitives. The discussion emphasizes Angular's commitment to aligning more closely with current web standards and practices, with examples drawn from other frameworks like Next.js and React. The notion of community-driven feature development is praised.

  • 00:20:00 - 00:25:00

    The conversation continues with a comparison of Angular's updates to other frameworks, emphasizing new incremental hydration capabilities and server-side rendering improvements. The speaker notes performance enhancements, community feature involvement, and signals-based optimizations, while expressing interest in Angular's competitive dynamics with tools like React and Quick.

  • 00:25:00 - 00:30:00

    Angular's move towards incremental hydration and performance optimization is discussed in depth. The speaker considers the broader implications of these features, such as load balancing of JavaScript resources, and how they might boost Angular's perception and actual speeds compared to the competition. They express a desire for similar innovations in React.

  • 00:30:00 - 00:36:14

    The speaker concludes by summarizing Angular's advancements and their focus on improving both developer and user experiences. They highlight Angular's attempt to evolve without alienating existing users, by introducing changes thoughtfully. The speaker appreciates Angular's community shift toward openness and accessibility, and questions if this excites or worries current Angular developers.

显示更多

思维导图

视频问答

  • What is the main highlight of Angular 19 release?

    The big news is the alignment with React version 19 and a focus on performance and development experience enhancements.

  • How is Angular 19 different from previous versions?

    It involves integrating aspects from frameworks like React and addressing the community's growing demands.

  • What new features does Angular 19 introduce?

    They add a developer preview of incremental hydration, improve server-side rendering, and introduce new reactivity features.

  • What is the "stageand" project mentioned in the video?

    It's a tool that allows writing prompts in plain language for browser automation, simplifying tasks like end-to-end testing.

  • Why is Angular 19 important for developers?

    Angular 19 emphasizes improvements in developer experience and performance, which were seen as weaknesses in previous versions.

  • Is Angular becoming more community-focused with this release?

    Yes, Angular has started considering community feedback more seriously, which is a shift from past practices.

  • What is "incremental hydration" in Angular 19?

    Incremental hydration allows portions of a page to load at different times, improving perceived performance.

查看更多视频摘要

即时访问由人工智能支持的免费 YouTube 视频摘要！
字幕
en
自动滚动:
  • 00:00:00
    it's that time of year again looks like
  • 00:00:01
    there's a new angular release and this
  • 00:00:03
    one's actually really exciting not just
  • 00:00:05
    because the react and angular versions
  • 00:00:06
    are finally synchronized at 19 but
  • 00:00:08
    because they're actually seeming to pay
  • 00:00:10
    more attention to both what we're doing
  • 00:00:12
    in other Frameworks as well as what the
  • 00:00:14
    angular Community itself is looking for
  • 00:00:16
    historically angular has not been that
  • 00:00:18
    uh I don't want to say reactive because
  • 00:00:20
    that has other implications but not as
  • 00:00:22
    responsive to what's going on both
  • 00:00:24
    inside and outside I've personally been
  • 00:00:26
    horrified seeing some of the really
  • 00:00:27
    talented engineers in that ecosystem
  • 00:00:29
    whose work was getting ignored but that
  • 00:00:31
    really seems to have changed the angular
  • 00:00:33
    19 release is genuinely pretty exciting
  • 00:00:36
    and I can't wait to tell you all about
  • 00:00:37
    it but first a quick word from today's
  • 00:00:39
    sponsor today's sponsor is browser based
  • 00:00:41
    they're making a new browser it's not
  • 00:00:42
    one for you or me it's for AI and our
  • 00:00:45
    code we've all had to deal with
  • 00:00:46
    playwriter Puppeteer in the past it's no
  • 00:00:48
    fun imagine if it was as easy as command
  • 00:00:51
    enter it actually is you're on the
  • 00:00:53
    hotkey it loads and now you can go
  • 00:00:55
    across the entire web not by writing
  • 00:00:58
    really complex code but by prompting I
  • 00:01:00
    can tell it go to Hacker News click on
  • 00:01:02
    the first search result or any basic
  • 00:01:04
    English query like that and it does the
  • 00:01:06
    right thing but it's not just for doing
  • 00:01:08
    weird things in the browser like this
  • 00:01:10
    it's also fully programmatic so you can
  • 00:01:12
    call your own code in your code base to
  • 00:01:14
    trigger these things as well great for
  • 00:01:16
    us serverless devs who are tired of
  • 00:01:18
    trying to spin up Puppeteer inside of a
  • 00:01:19
    lamb dud hitting limits on the size of
  • 00:01:21
    the folders I've been there I'm sure we
  • 00:01:23
    all have at some point in my opinion
  • 00:01:26
    that's cool enough but where they go way
  • 00:01:27
    further is the new open source project
  • 00:01:29
    they just dropped stageand stageand lets
  • 00:01:31
    you write prompts to do what you used to
  • 00:01:33
    with playwright yes you don't have to
  • 00:01:35
    write all the crazy selectors anymore
  • 00:01:37
    it's a web browsing framework focus on
  • 00:01:38
    Simplicity and Sensibility and honestly
  • 00:01:41
    I can already see myself using this for
  • 00:01:42
    our end to- end testing you literally
  • 00:01:44
    write English instructions for what you
  • 00:01:46
    want it to do and give it a Zod schema
  • 00:01:48
    to validate the data it gives back so
  • 00:01:50
    you go to website in this case we go to
  • 00:01:51
    the browser based stageand GitHub repo
  • 00:01:53
    we tell it to click the contributors you
  • 00:01:55
    don't tell it which element you just
  • 00:01:57
    give it the action in English and it
  • 00:01:59
    figures it out then you tell it in the
  • 00:02:00
    instruction to extract the top
  • 00:02:02
    contributor and it should give it to you
  • 00:02:04
    in this schema format what just for
  • 00:02:07
    comparison's sake here is what you'd
  • 00:02:09
    have to write before even using
  • 00:02:11
    something really nice like playwright to
  • 00:02:12
    do it you would still have to evaluate
  • 00:02:14
    the page select all of the elements by
  • 00:02:17
    hand create an array out of it increment
  • 00:02:19
    through all of them keeping track of
  • 00:02:21
    what their values are selecting these
  • 00:02:23
    weird sub elements with uls and Lis and
  • 00:02:26
    all that chaos now you can literally
  • 00:02:28
    just write an English instruction and it
  • 00:02:30
    does the right thing automating browsers
  • 00:02:32
    should never have been so hard browser
  • 00:02:34
    base makes it almost too easy check them
  • 00:02:36
    out today at so of.ink browser base
  • 00:02:39
    let's dive in the first thing that threw
  • 00:02:41
    me if you didn't know the creator of
  • 00:02:43
    angular specifically angularjs was
  • 00:02:46
    mishko and my who's also the creator of
  • 00:02:50
    quick qwi the framework so seeing minkco
  • 00:02:53
    writing this and not mishko threw me for
  • 00:02:55
    a second but unnecessary tangent let's
  • 00:02:58
    dive in because they are doing some huge
  • 00:03:00
    things in the past two years we doubled
  • 00:03:02
    down on our investment in Dev experience
  • 00:03:05
    and performance which is fun these are
  • 00:03:06
    the two things I would argue angular was
  • 00:03:09
    lacking the most and they're really
  • 00:03:10
    focused on fixing that finally believe
  • 00:03:13
    it or not there was a point in time
  • 00:03:14
    where angular was kind of leading the
  • 00:03:16
    industry in DX they were the first
  • 00:03:18
    framework to go all in on typescript
  • 00:03:20
    even though angular was a Google
  • 00:03:22
    framework and typescript was a Microsoft
  • 00:03:24
    Project I could even make the argument
  • 00:03:26
    we might never have seen the success
  • 00:03:27
    typescript has today if it wasn't for
  • 00:03:30
    and it hurts me to say that but it's
  • 00:03:31
    true in every single release we've been
  • 00:03:33
    consistently shipping improvements that
  • 00:03:35
    multiply their impact when combined
  • 00:03:37
    together seeing the positive Community
  • 00:03:38
    response and increased engagement in our
  • 00:03:40
    developer events is validating that
  • 00:03:42
    we've been moving in the right direction
  • 00:03:43
    today's release is bringing a series of
  • 00:03:45
    improvements that will make it even
  • 00:03:46
    easier for you to deliver fast web apps
  • 00:03:48
    with confidence this is interesting as I
  • 00:03:51
    am suspicious of the number of new
  • 00:03:52
    angular apps being created compared to
  • 00:03:55
    other tools and Technologies but the
  • 00:03:57
    value of angular is that code bases for
  • 00:03:59
    10 years ago suck the exact same amount
  • 00:04:02
    today as they sucked 10 years ago which
  • 00:04:04
    is great where there's a lot of react
  • 00:04:05
    code bases that have had new things
  • 00:04:07
    added layer upon layer that now suck
  • 00:04:09
    worse than they used to angular to its
  • 00:04:12
    benefit and detriment has historically
  • 00:04:14
    moved slow enough to not end up with
  • 00:04:15
    that Rift of quality of experience
  • 00:04:17
    across the code base which has benefits
  • 00:04:19
    and negatives thankfully they are
  • 00:04:21
    focused on making sure the whole angular
  • 00:04:24
    Community gets to come along for the
  • 00:04:25
    ride to these improvements which is huge
  • 00:04:27
    and it's not just interop it's a lot of
  • 00:04:28
    code mod type stuff stuff we'll get to
  • 00:04:30
    that and we'll compare it to how react
  • 00:04:31
    handled things with hooks in just a
  • 00:04:33
    minute first the highlights they
  • 00:04:35
    introduce a developer preview of
  • 00:04:36
    incremental hydration supporting the
  • 00:04:38
    most performance demanding use cases
  • 00:04:40
    incremental hydration is going to be
  • 00:04:41
    real fun the fact that angular knows
  • 00:04:43
    what a server is and that HTML as a
  • 00:04:46
    thing is a huge change that they been
  • 00:04:47
    working towards that we're finally
  • 00:04:49
    seeing the light at the end of the
  • 00:04:50
    tunnel for they add a control for which
  • 00:04:52
    routes render on client server or during
  • 00:04:55
    build and the ability to resolve route
  • 00:04:57
    parameters during those pre-rendering
  • 00:04:58
    steps we don't even really have this in
  • 00:05:00
    nextjs right now so that's going to be
  • 00:05:02
    fun to read they have new schematics to
  • 00:05:04
    keep you up to date with the latest best
  • 00:05:06
    practices uh I don't want to talk about
  • 00:05:07
    dependency injection especially if put
  • 00:05:09
    the word inject the front the new build
  • 00:05:10
    system stuff going to be real cool
  • 00:05:12
    stabilization of core reactivity
  • 00:05:13
    Primitives and the introduction of some
  • 00:05:15
    new ones like linked signal and resource
  • 00:05:17
    this is huge by the way angular went all
  • 00:05:19
    in on signals they almost like built
  • 00:05:21
    solid into the framework in a lot of
  • 00:05:23
    ways and it's allowed for a lot of
  • 00:05:25
    meaningful improvements to Performance
  • 00:05:27
    as well as the way that you can get this
  • 00:05:28
    on your code base which we'll get to in
  • 00:05:30
    a bit probably my favorite call on this
  • 00:05:31
    list though they're actually going
  • 00:05:33
    through feature requests on GitHub they
  • 00:05:35
    set a weird bar of 2700 thumbs up which
  • 00:05:38
    means there was one thing with 25 200
  • 00:05:40
    thumbs up they didn't want to do that's
  • 00:05:41
    why they drew the line there that's
  • 00:05:42
    always how it goes but I get it they
  • 00:05:44
    wanted to use the community signals to
  • 00:05:46
    figure out what people do and don't
  • 00:05:48
    actually care about which is great now
  • 00:05:50
    they have a Time picker component unused
  • 00:05:52
    Import Auto removal running schematics
  • 00:05:54
    via the language server and a bunch of
  • 00:05:56
    other cool things o HMR for Styles is
  • 00:05:58
    huge I can't believe they didn't have
  • 00:06:00
    that what that means is if I have my
  • 00:06:01
    page open and I have my editor open next
  • 00:06:03
    to it and I change something that isn't
  • 00:06:05
    a style it would update the page without
  • 00:06:07
    me refreshing but if I wanted to screw
  • 00:06:09
    around with the Styles like I'm playing
  • 00:06:11
    with the Border color of a chat box and
  • 00:06:14
    I save a CSS change I wouldn't see it in
  • 00:06:17
    the browser until I refresh HMR for
  • 00:06:19
    Styles is huge it's actually one I would
  • 00:06:21
    argue one of the best use cases for hot
  • 00:06:23
    module replacement because if I get my
  • 00:06:25
    page into a state and it doesn't look
  • 00:06:27
    how I want it to I want to be able to
  • 00:06:28
    change the style without losing that
  • 00:06:30
    state and that wasn't popular in angular
  • 00:06:32
    before to their credit this only got
  • 00:06:34
    added to remix like a year ago it was
  • 00:06:36
    one of my biggest issues with it so it's
  • 00:06:37
    not like everyone has this but it's cool
  • 00:06:39
    seeing them catch up to these what I
  • 00:06:41
    would call modern tools standards and
  • 00:06:43
    expectations evolving angular we see the
  • 00:06:45
    opportunity to enable best performance
  • 00:06:47
    practices out of the box so that we can
  • 00:06:49
    support your performance sensitive use
  • 00:06:51
    cases in the past 2 years we kicked off
  • 00:06:53
    a project to enable zoness angular made
  • 00:06:55
    serers side rendering an integral part
  • 00:06:57
    of the angular CLI we worked closely
  • 00:06:59
    with Chrome Aurora on hydration and the
  • 00:07:01
    image directives okay Aurora is the
  • 00:07:03
    collab between Frameworks and chrome
  • 00:07:06
    it's the reason that like next is
  • 00:07:07
    finally getting some nice things with
  • 00:07:10
    pre-rendering and pre-fetching and
  • 00:07:11
    images and all that like added in on all
  • 00:07:13
    sides it's been a nice change and Aurora
  • 00:07:15
    is the the name for this collab weird
  • 00:07:18
    that I haven't heard other Frameworks
  • 00:07:19
    calling it by that name just saying they
  • 00:07:20
    collaborations with chrome but it makes
  • 00:07:22
    sense they're the Google framework
  • 00:07:23
    they're going to use all the proper
  • 00:07:24
    nouns for everything version 19 we're
  • 00:07:26
    elevating angular server side rendering
  • 00:07:28
    to another level with incremental
  • 00:07:29
    hydration server route configuration
  • 00:07:32
    event replay enabled by default and more
  • 00:07:35
    these are huge changes angular up until
  • 00:07:38
    recently had no concept of server
  • 00:07:40
    rendering almost all of it was coming
  • 00:07:42
    from Brandon Roberts with analog JS
  • 00:07:44
    which was his attempt at making a nextjs
  • 00:07:47
    equivalent for angular before angular
  • 00:07:49
    even had proper SSR support he hacked
  • 00:07:51
    all of it in himself now more and more
  • 00:07:54
    of these parts are ending up in angular
  • 00:07:56
    itself I wish it'd give him more credit
  • 00:07:58
    for the work he did and pull him in more
  • 00:07:59
    often but at the very least the progress
  • 00:08:01
    is finally happening is it too little
  • 00:08:03
    too late that's all for me to decide I'm
  • 00:08:05
    just happy it's here the event replay is
  • 00:08:07
    a big one if you're not already familiar
  • 00:08:09
    with what hydration is it means that you
  • 00:08:11
    run JavaScript code on the server to
  • 00:08:13
    generate a page the user gets that page
  • 00:08:16
    but then none of the JavaScript is there
  • 00:08:18
    yet so if I have a button with an
  • 00:08:19
    onclick and I click it but the JS isn't
  • 00:08:22
    loaded yet nothing happens until the JS
  • 00:08:24
    loads and hydrates which means it binds
  • 00:08:26
    all the right JS to the right places on
  • 00:08:28
    the page so it replay does is it allows
  • 00:08:30
    me to when I click a button and the JS
  • 00:08:33
    isn't there yet the HTML has inlined
  • 00:08:35
    some js that caches and puts all of the
  • 00:08:38
    things you do on a queue so when the JS
  • 00:08:41
    finally all loads in at that point it
  • 00:08:43
    can just execute everything in the que
  • 00:08:45
    so if you click a button you have to
  • 00:08:47
    wait a second for all the JS to load and
  • 00:08:49
    bind and everything but the event
  • 00:08:50
    doesn't get lost it just gets buffered
  • 00:08:52
    waiting for the JS that can actually
  • 00:08:54
    process it this is the case in most
  • 00:08:56
    serers side rendered Frameworks which is
  • 00:08:58
    why hydration is isn't a big problem
  • 00:09:00
    sorry mishko we just disagree on this
  • 00:09:02
    one this is the right fix for most of
  • 00:09:04
    the time to be fair that means you'll
  • 00:09:06
    click a button and nothing will happen
  • 00:09:08
    until everything else loads in and with
  • 00:09:10
    angular some of those payloads some of
  • 00:09:12
    those JS files are massive but you're
  • 00:09:14
    not losing events and once that JS loads
  • 00:09:16
    it's all cached and you have no problems
  • 00:09:18
    at all going forward so it's a nice
  • 00:09:20
    thing especially when you combine it
  • 00:09:21
    with incremental hydration which means
  • 00:09:22
    different parts of the page can be
  • 00:09:24
    hydrated in different orders depending
  • 00:09:26
    on what's the most important thing like
  • 00:09:27
    if I go to the Amazon page for a random
  • 00:09:30
    item the add to cart button probably
  • 00:09:32
    needs to work way faster than anything
  • 00:09:33
    else on the page or the buy now button
  • 00:09:35
    versus the leave a review button
  • 00:09:37
    probably doesn't need to be filled in
  • 00:09:39
    quite as early so if you can choose
  • 00:09:42
    which Things become active and have
  • 00:09:44
    their behaviors bound first versus what
  • 00:09:46
    does later that can save you a lot of
  • 00:09:48
    that giant JS chunk to make sure the
  • 00:09:51
    right parts are responsive quicker but
  • 00:09:53
    none of this matters if once the JS is
  • 00:09:54
    loaded things are still slow and they've
  • 00:09:56
    done some really cool things for that
  • 00:09:58
    too which I'm sure we'll get to soon if
  • 00:09:59
    not immediately after building large web
  • 00:10:01
    apps increases the amount of JavaScript
  • 00:10:03
    that we ship to the user do you know
  • 00:10:05
    what else does that begins with an a and
  • 00:10:07
    ends in angular anyways it does
  • 00:10:09
    negatively impact the user experience to
  • 00:10:10
    have too much JS I think we all
  • 00:10:12
    hopefully agree on this at this point if
  • 00:10:14
    not I don't know how I can help you in
  • 00:10:16
    version 17 we made it trivial to lazily
  • 00:10:18
    load code using defer views for client
  • 00:10:21
    side rendered apps for serers side
  • 00:10:23
    rendered apps we introduced full app
  • 00:10:24
    hydration which requires all of the JS
  • 00:10:26
    associated with a given page to make it
  • 00:10:28
    Interactive so what this means if you
  • 00:10:30
    had an element that required a ton of JS
  • 00:10:33
    you could lazily load that JS in later
  • 00:10:35
    so everything else for the page is there
  • 00:10:36
    immediately but as soon as you introduce
  • 00:10:38
    SSR you have to load all the JS now you
  • 00:10:42
    can use defer views to say no don't load
  • 00:10:45
    the JS for this part don't render that
  • 00:10:47
    part yet let the client deal with it
  • 00:10:48
    when it gets there I don't want to block
  • 00:10:50
    on this which is a nice change the way
  • 00:10:52
    to do this in react to nextjs is you use
  • 00:10:55
    their next Dynamic wrapper and pass SSR
  • 00:10:57
    Co and false and in order to do this
  • 00:11:00
    type of behavior cool to see it built in
  • 00:11:03
    to angular directly welcome incremental
  • 00:11:05
    hydration in developer preview okay so
  • 00:11:07
    it's still inev preview it's still very
  • 00:11:08
    new what allows you to do is use their
  • 00:11:11
    at defer directive love or hate
  • 00:11:13
    directives they are what they are wow
  • 00:11:15
    that looks
  • 00:11:17
    familiar okay I I actually genuinely
  • 00:11:20
    love that angular is cloning nextjs
  • 00:11:23
    demos that is such a good sign that
  • 00:11:26
    they're paying attention to what is or
  • 00:11:27
    isn't working I don't care
  • 00:11:29
    how into angular you are nextjs
  • 00:11:33
    react and all the things in that
  • 00:11:35
    ecosystem are innovating much faster and
  • 00:11:37
    bringing us much closer to a better and
  • 00:11:39
    faster web if you're not able to
  • 00:11:41
    acknowledge that you're holding back the
  • 00:11:43
    web angular not only acknowledging this
  • 00:11:46
    but fully embracing it using the
  • 00:11:47
    terminology that was invented on that
  • 00:11:49
    side of the forest and bringing
  • 00:11:51
    it over here is huge and the reason I'm
  • 00:11:54
    going on this tangent is that this demo
  • 00:11:55
    I just watched it looks very familiar
  • 00:11:58
    here is the next JS Commerce
  • 00:12:08
    template pretty funny I love that though
  • 00:12:11
    I like that they're actually paying
  • 00:12:13
    attention to what's going on in the
  • 00:12:14
    ecosystem and making something that
  • 00:12:15
    looks so hilariously similar because all
  • 00:12:18
    of our goals should be the same we
  • 00:12:19
    should be trying to improve the tools
  • 00:12:21
    and Technologies we use to make the web
  • 00:12:23
    and the experience we have building for
  • 00:12:25
    the web better and they're no longer
  • 00:12:27
    living in their own bubble my concern
  • 00:12:29
    here is I don't know how many of the
  • 00:12:31
    angular devs are actually going to like
  • 00:12:32
    this I know a lot of people who picked
  • 00:12:34
    angular because it didn't change and now
  • 00:12:36
    that angular is actually changing and
  • 00:12:38
    improving those people might get upset
  • 00:12:40
    and if you were around long enough to
  • 00:12:42
    know the Red Wedding which was angularjs
  • 00:12:44
    V1 to angular V2 which the dropping of
  • 00:12:47
    JS is because they moved a typescript
  • 00:12:49
    that shift was so big that it makes a
  • 00:12:52
    lot of devs who are around then hesitant
  • 00:12:54
    to any major update ever they just
  • 00:12:57
    assume it's going to break everything
  • 00:12:59
    because angularjs to angular was a
  • 00:13:01
    rewrite of your code base period chat
  • 00:13:04
    saying they all love this but to be
  • 00:13:06
    clear if you're an angular Dev and you
  • 00:13:07
    watch my live streams hell if you're an
  • 00:13:09
    angular Dev and you watch my YouTube
  • 00:13:10
    videos you're probably not the person
  • 00:13:13
    I'm worried about here because you're
  • 00:13:14
    already paying attention like you use
  • 00:13:16
    nextjs for fun on the side you're not
  • 00:13:18
    the average angular Dev you get the
  • 00:13:20
    point I hope they're able to get the
  • 00:13:22
    whole Community excited and to move
  • 00:13:24
    along with them because I hate seeing
  • 00:13:26
    people stuck in the past because they're
  • 00:13:28
    scared of change and if they can ease
  • 00:13:30
    these devs into the change that'll be a
  • 00:13:32
    huge huge win into like to their credit
  • 00:13:36
    react kind of failed with this with
  • 00:13:37
    server components the strategy to make
  • 00:13:39
    the average react Dev respect server
  • 00:13:41
    components is for the react team to help
  • 00:13:43
    me and people like me communicate about
  • 00:13:45
    them better I hope it wins I like to
  • 00:13:47
    think that strategy is good but it's
  • 00:13:49
    complex and different enough way of
  • 00:13:51
    thinking and reactiv has spent so much
  • 00:13:53
    time on the client and so little time on
  • 00:13:54
    the server that they struggle with the
  • 00:13:56
    new mental model I don't know if the
  • 00:13:57
    average angular dev has changed their
  • 00:13:59
    mental model for 5 years so I'm curious
  • 00:14:01
    to see if and how they pull this off and
  • 00:14:03
    if they do I hope I can learn a bunch
  • 00:14:04
    from it too as I try to get people on to
  • 00:14:06
    the under the train leading to the
  • 00:14:09
    Future so let's actually pay attention
  • 00:14:11
    to this
  • 00:14:12
    demo okay so he clicked and then it
  • 00:14:15
    hydrated that
  • 00:14:19
    part
  • 00:14:21
    interesting and when you clicked there
  • 00:14:23
    there was a loading spinner there or a
  • 00:14:24
    loading State and that loading State
  • 00:14:26
    wasn't because we were waiting for the
  • 00:14:27
    server to respond with the new p AG it
  • 00:14:29
    was because the JS had to load hydrate
  • 00:14:31
    that spot and then get interactive this
  • 00:14:34
    is actually a really good thing if they
  • 00:14:35
    can get this working for giant angular
  • 00:14:37
    code bases it'll make the perceived
  • 00:14:39
    responsiveness of these old angular apps
  • 00:14:41
    that are huge much better there's a bit
  • 00:14:43
    of backstory here where angular and whiz
  • 00:14:46
    which are the two Google Frameworks one
  • 00:14:47
    is the popular public one angular one's
  • 00:14:50
    the nobody knows about it private one
  • 00:14:52
    whiz whiz is super fast and performance
  • 00:14:55
    and its DX is absolute garbage
  • 00:14:57
    internally they've been trying to fuse
  • 00:14:58
    together angular and whz and merge them
  • 00:15:00
    into one framework with the best of both
  • 00:15:02
    but I have concerns specifically you're
  • 00:15:04
    probably watching me on YouTube right
  • 00:15:05
    now YouTube was written in whiz this
  • 00:15:07
    means they're going to be porting
  • 00:15:08
    YouTube to angular if they can get all
  • 00:15:09
    the stuff in first YouTube will be
  • 00:15:11
    slightly faster if they can't or they
  • 00:15:12
    have to turn off any of these features
  • 00:15:13
    YouTube is going to get way slower so I
  • 00:15:15
    I hope for my own livelihood they pull
  • 00:15:18
    this off because whether or not I use
  • 00:15:20
    angular it's probably going to be the
  • 00:15:21
    single framework most responsible for my
  • 00:15:23
    income in the near future so we're
  • 00:15:25
    rooting for
  • 00:15:26
    them so here's how they describe what's
  • 00:15:29
    going on here a component in grayscale
  • 00:15:31
    filter shows angular hasn't loaded and
  • 00:15:33
    hydrated yet angular downloads a
  • 00:15:34
    component from the network when the
  • 00:15:36
    component starts pulsing angular has
  • 00:15:38
    downloaded and hydrated the component
  • 00:15:39
    when there's a purple border around it
  • 00:15:40
    and the component no longer has a
  • 00:15:42
    grayscale filter okay so all of the gray
  • 00:15:44
    scale isn't just them doing the versel
  • 00:15:47
    theming it's them showing the thing
  • 00:15:49
    hasn't hydrated yet that makes sense
  • 00:15:52
    yeah once you've clicked here now this
  • 00:15:53
    whole thing has been hydrated and now if
  • 00:15:55
    you click other things there it'll be
  • 00:15:56
    way faster okay this is making sense
  • 00:15:59
    it's funny cuz this is like what mishko
  • 00:16:01
    was trying to do with quick and he's
  • 00:16:02
    going to be so mad if angular beats him
  • 00:16:04
    to it oh the demo also has an artificial
  • 00:16:07
    delay of 500 milliseconds for each
  • 00:16:08
    loading operation so that's why it seems
  • 00:16:11
    slow with those things coming in they
  • 00:16:12
    did that to make the demo good if you
  • 00:16:14
    had a shitload of JavaScript and you
  • 00:16:16
    were on a slow internet connection it
  • 00:16:17
    could actually take that
  • 00:16:20
    long here's a cool point though notice
  • 00:16:22
    that at the beginning everything beside
  • 00:16:24
    the top bar is grayed out this means
  • 00:16:26
    that at this point we have not
  • 00:16:27
    downloaded any of the JS ass associated
  • 00:16:29
    with the page when the user engages with
  • 00:16:31
    the filter component at the top left
  • 00:16:32
    angular downloads it which they
  • 00:16:33
    indicated by pulsing and after that it
  • 00:16:35
    hydrates it so by default angular isn't
  • 00:16:38
    loading JS until you start doing things
  • 00:16:41
    then the JS comes in there's a lot of
  • 00:16:43
    benefits and a lot of negatives to this
  • 00:16:45
    approach I think it's pretty hype the
  • 00:16:47
    potential here is huge I am assuming
  • 00:16:49
    that it will start to prefetch things in
  • 00:16:51
    the background if you're not doing
  • 00:16:52
    anything and it will optimize for the
  • 00:16:53
    ones you're clicking on and not just
  • 00:16:55
    rely on these actions because if it only
  • 00:16:57
    downloads the JS when you interact
  • 00:16:59
    everything's going to feel slower until
  • 00:17:00
    everything's been downloaded but I'm
  • 00:17:02
    they're going to find the balance here
  • 00:17:03
    there's a reason it's a preview feature
  • 00:17:05
    that said it's really cool it'
  • 00:17:07
    be cool to see this in react did wait oh
  • 00:17:10
    no I just said it would be cool if react
  • 00:17:12
    gets something that angular has first uh
  • 00:17:17
    I'm going to have an existential crisis
  • 00:17:18
    that's that's a first a first and then
  • 00:17:20
    some even without the artificial delay
  • 00:17:23
    angular now will download and hydrate
  • 00:17:24
    the components asynchronously which
  • 00:17:26
    means that we have to replay the user
  • 00:17:27
    events for this function we're using the
  • 00:17:29
    event Replay that was introduced in
  • 00:17:31
    angular version 18 which Powers Google
  • 00:17:33
    search Google search is powered by
  • 00:17:35
    angular now it's a funny tweet that
  • 00:17:38
    immediately came to mind when I learned
  • 00:17:39
    that angular is being used on
  • 00:17:41
    google.com on Google's own core vital
  • 00:17:45
    scores google.com fails which is pretty
  • 00:17:49
    funny because these are the scores
  • 00:17:50
    Google uses to pick what things it
  • 00:17:51
    should or should index as strongly and
  • 00:17:53
    it fails its own test which is really
  • 00:17:56
    funny and the fact that inp is as low as
  • 00:17:59
    it is that it takes 250 milliseconds
  • 00:18:01
    from when you click something to when
  • 00:18:02
    you get to the next part if they're
  • 00:18:04
    waiting for the JS to load from when I
  • 00:18:05
    click to when I see the result this
  • 00:18:07
    might actually be the reason that score
  • 00:18:08
    was that low like as hilarious as it is
  • 00:18:10
    it might actually be angular introducing
  • 00:18:13
    event replay on google.com that pushed
  • 00:18:16
    back this number like that that's kind
  • 00:18:19
    of funny I'm not saying it's bad I'm
  • 00:18:21
    saying it's interesting that's all of
  • 00:18:23
    course multiflex showing that all of our
  • 00:18:25
    cell stuff
  • 00:18:27
    passes oh next faster does pass didn't
  • 00:18:29
    know that that's cool yeah this is a
  • 00:18:31
    funny call out because uh levels had
  • 00:18:33
    said every website fails Google's core
  • 00:18:35
    web vitals not every website I'd argue
  • 00:18:38
    most versell websites probably don't but
  • 00:18:40
    yeah it is what it is worth
  • 00:18:42
    considering also on the same topic page
  • 00:18:45
    speed. web.dev which is the thing we're
  • 00:18:46
    running the test on scores terribly on
  • 00:18:49
    page speed there is also the call out on
  • 00:18:52
    levels IO thing where he thinks it's
  • 00:18:53
    impossible for anyone to get this
  • 00:18:55
    because the way he builds it's really
  • 00:18:56
    hard to get these scores but can also
  • 00:19:00
    game them and get good ones I thought
  • 00:19:01
    Malta had responded here I can't find it
  • 00:19:03
    but I know a lot of other Engineers
  • 00:19:04
    showed how you get the good scores but
  • 00:19:07
    also that sites that fly like next
  • 00:19:09
    faster which I did a whole video on how
  • 00:19:11
    insanely fast the site is this site
  • 00:19:14
    scores poorly on that because it
  • 00:19:15
    measures weird I really think that
  • 00:19:18
    the page speeds insights needs to be
  • 00:19:20
    overhauled to be a little more modern
  • 00:19:23
    when you update angular 19 you can try
  • 00:19:24
    the new incremental hydration in any
  • 00:19:26
    application that already uses SSR and
  • 00:19:28
    and has full application hydration in
  • 00:19:30
    your client bootstrap you specify the
  • 00:19:32
    following you add the with incremental
  • 00:19:34
    hydration to provide client hydration
  • 00:19:37
    cool you can even apply it to portions
  • 00:19:39
    of your template with at defer I hate
  • 00:19:42
    the syntax so much we're going to ignore
  • 00:19:44
    the syntax because there's cool things
  • 00:19:45
    here if I just don't if I pretend this
  • 00:19:47
    isn't angular I can learn a lot of cool
  • 00:19:49
    things here but if I had to pick between
  • 00:19:50
    page speeds being modernized and angular
  • 00:19:53
    being modernized I hate him saying it
  • 00:19:55
    but I would pick
  • 00:19:56
    angular here we are they have the whole
  • 00:19:59
    section here on event replay I mentioned
  • 00:20:01
    how this works they have their event
  • 00:20:03
    dispatch Library oh are they not using
  • 00:20:05
    angular itself they're just using the
  • 00:20:07
    event dispatcher because it's a separate
  • 00:20:08
    Library that's kind of cool and as I
  • 00:20:11
    mentioned before this is part of the
  • 00:20:12
    convergence of angular and whiz which is
  • 00:20:14
    why these things are happening and being
  • 00:20:16
    broken out this
  • 00:20:17
    way this is exactly what I said before
  • 00:20:20
    where the page starts listing for all JS
  • 00:20:22
    events stores them and then once
  • 00:20:25
    everything else loads the event
  • 00:20:26
    dispatcher can trigger those JS events
  • 00:20:28
    it's cool stuff worth a dig if you're
  • 00:20:30
    curious about it I don't think I could
  • 00:20:32
    possibly make a video about that people
  • 00:20:33
    care
  • 00:20:38
    about are they even using excal draw for
  • 00:20:41
    demos now are they watching
  • 00:20:44
    me I should have worn my angular shirt
  • 00:20:46
    for this for what it's worth the
  • 00:20:47
    angular team's actually been really nice
  • 00:20:49
    for me to chat with and work with
  • 00:20:50
    they've been super friendly and kind and
  • 00:20:53
    good God am I becoming no I I need to
  • 00:20:55
    stop I'm not going to become an angular
  • 00:20:56
    person I'm not going to do it oh wait no
  • 00:20:59
    we know this is an angular because they
  • 00:21:00
    use capital letters for the
  • 00:21:02
    components it is actually cool seeing
  • 00:21:04
    them use excalon things like that for
  • 00:21:05
    this though I love this o they made
  • 00:21:08
    event replay the default that's actually
  • 00:21:10
    huge so this will just work for
  • 00:21:12
    everybody because I'll be real most
  • 00:21:14
    angular devs aren't turning on
  • 00:21:15
    experimental features they're angular
  • 00:21:17
    devs for a reason these things becoming
  • 00:21:19
    the defaults actually going to improve
  • 00:21:21
    the quality of experience on the web
  • 00:21:22
    like Cisco's web connect and their whole
  • 00:21:25
    like whatever it's called their
  • 00:21:27
    Zoom equivalent just got so much better
  • 00:21:29
    once they updated to angular 19 in 2
  • 00:21:31
    years I'm curious about this route level
  • 00:21:33
    render mode oh oh I get this since in
  • 00:21:37
    angular you configure your routes
  • 00:21:39
    instead of it all being path-based uh I
  • 00:21:41
    like route config I like this I wish I
  • 00:21:43
    could do this in next for a lot of
  • 00:21:44
    reasons the fact that you can specify
  • 00:21:47
    how it should render you can say this
  • 00:21:49
    should be server rendered this should be
  • 00:21:51
    client rendered and this should be
  • 00:21:53
    pre-rendered so we render it on the
  • 00:21:54
    server and then the client takes over
  • 00:21:56
    from there that's cool that you can
  • 00:21:57
    configure that I actually really like
  • 00:21:59
    that in nextjs you have to export magic
  • 00:22:01
    variables for their equivalent which is
  • 00:22:03
    not fun they're slowly moving away from
  • 00:22:05
    that with partial pre-rendering and
  • 00:22:06
    dynamic IO but since angular is never
  • 00:22:09
    going to do magic right I like they gave
  • 00:22:11
    me the config here this is good I like
  • 00:22:13
    this a lot I'm not going to say I want
  • 00:22:15
    this in react again it's going to hurt
  • 00:22:16
    me if I do we're going to get this in
  • 00:22:18
    tan stack to be fair So Tan stack starts
  • 00:22:20
    going to be real similar oh God is tan
  • 00:22:22
    stack start the angular of react I don't
  • 00:22:24
    want to think too hard about that
  • 00:22:25
    thought in the past there was no
  • 00:22:26
    ergonomic way to resolve route par
  • 00:22:28
    parameters at pre-render time which
  • 00:22:30
    means like if you have an ID in the URL
  • 00:22:32
    or you have a query pram the end of the
  • 00:22:34
    URL those types of things you couldn't
  • 00:22:36
    get them when you did pre-rendering not
  • 00:22:38
    that you can and it's funny you could
  • 00:22:40
    actually do this relatively easily with
  • 00:22:42
    page router with nextjs but app router
  • 00:22:44
    does not make it friendly at all it's
  • 00:22:46
    nice you can just specify I want these
  • 00:22:48
    IDs I'm going to grab them and then I'm
  • 00:22:49
    going to return a map of them because
  • 00:22:51
    now it's going to go through all the
  • 00:22:53
    values here and generate HTML for them
  • 00:22:55
    during build so when a user goes to the
  • 00:22:57
    pages been generated nice quality change
  • 00:23:02
    serers side rendering was zoness angular
  • 00:23:04
    Zone JS has historically been a critical
  • 00:23:06
    component in angular's SSR notifying the
  • 00:23:08
    serving stack when the framework is
  • 00:23:09
    completed rendering and all of the
  • 00:23:11
    markup on the page is ready we identifi
  • 00:23:13
    the main reason to wait for apps are
  • 00:23:14
    pending requests in navigation we
  • 00:23:16
    introduce a primitive that we use in
  • 00:23:17
    angular with HTP client as well as the
  • 00:23:19
    router which delays sending the page to
  • 00:23:21
    users until the app is ready that means
  • 00:23:23
    you don't need Zone JS which is the
  • 00:23:24
    thing that kept track of all that in the
  • 00:23:25
    past I'm not familiar with how much
  • 00:23:27
    people would be upset with JS and why
  • 00:23:29
    they care so much but if they put it
  • 00:23:30
    this high up it's got to be a big deal
  • 00:23:32
    it is cool that rxjs which might not be
  • 00:23:34
    popular outside of angular anymore still
  • 00:23:36
    very much part of their world that you
  • 00:23:38
    can pipe the event for when the page is
  • 00:23:41
    actually done hydrating so you can
  • 00:23:43
    trigger things at that point very nice
  • 00:23:46
    when the subscription emits a new value
  • 00:23:47
    we'll make the app stable and the
  • 00:23:48
    serving stack will pass the rendered
  • 00:23:50
    markup to the client
  • 00:23:52
    interesting anyways let's dive into DX
  • 00:23:54
    because uh I've been making jokes about
  • 00:23:56
    it the whole time I want to hear the
  • 00:23:57
    actual changes instant edit and refresh
  • 00:24:00
    with HMR that's huge you save and you
  • 00:24:03
    see the change angular 19 supports HMR
  • 00:24:05
    for Styles out of the box and they
  • 00:24:06
    enable experimental support for
  • 00:24:08
    templating H HMR as well oh they had no
  • 00:24:11
    HMR before sty is just the only thing it
  • 00:24:13
    supports by default interesting as a
  • 00:24:16
    react Dev that's been building things in
  • 00:24:18
    other tools especially like I've been
  • 00:24:20
    building a game in phaser.js I didn't
  • 00:24:22
    realize how used to saving checking
  • 00:24:25
    browser saving checking browser I was
  • 00:24:28
    the fact that I have to refresh and
  • 00:24:29
    build systems to get back to the state I
  • 00:24:31
    care about is very strange and I'm not
  • 00:24:34
    like I'm still struggling with the
  • 00:24:35
    mental adjustment to that the fact that
  • 00:24:37
    angular didn't have it is terrifying but
  • 00:24:38
    they're finally taking it seriously
  • 00:24:40
    because they actually care about DX now
  • 00:24:42
    yeah look at that you save a style and
  • 00:24:43
    as soon as you save it you see the
  • 00:24:45
    difference you don't have to refresh it
  • 00:24:46
    or lose the state if you have a counter
  • 00:24:48
    or like a chat widget it holds it in the
  • 00:24:50
    right spot yeah we do Standalone
  • 00:24:52
    components over 2 years ago in v14 wa
  • 00:24:55
    there's been five majors in 2 years for
  • 00:24:58
    ER the we've had one major in 3
  • 00:25:01
    years for react Place developer survey
  • 00:25:02
    over 90% of devs said they're using this
  • 00:25:04
    feature as part of v19 we're providing a
  • 00:25:06
    schematic that will run as part of the
  • 00:25:08
    NG update and it will automatically
  • 00:25:10
    remove the Standalone component metadata
  • 00:25:12
    property for all your Standalone
  • 00:25:13
    directives components in pipes set
  • 00:25:15
    Standalone to false for non-standalone
  • 00:25:17
    abstractions yeah it turns out isolated
  • 00:25:19
    components are a good thing who would
  • 00:25:20
    have thought oh that's the thing I had
  • 00:25:22
    even thought of HMR looks great might
  • 00:25:24
    stop editing Styles and Dev tools I
  • 00:25:26
    forgot people do that I don't change
  • 00:25:29
    Styles in Chrome I change them in my
  • 00:25:31
    editor and look at them in Chrome
  • 00:25:33
    because it's faster to do it that way
  • 00:25:35
    the fact that people still rely on
  • 00:25:36
    Chrome Dev tools for testing Styles is
  • 00:25:38
    insane to me and it shows just how bad
  • 00:25:41
    the DX was at the time I so thankful we
  • 00:25:43
    don't need to do that anymore oh they
  • 00:25:45
    even added a compiler check to say all
  • 00:25:47
    components have to be Standalone CU
  • 00:25:49
    historically components were not as
  • 00:25:51
    fully encapsulated and the relationship
  • 00:25:54
    between them was complex people don't
  • 00:25:56
    want to build that way anymore so they
  • 00:25:57
    let you emphas and specify and compile
  • 00:26:00
    or check that you're not building with
  • 00:26:01
    the weird bridging between elements
  • 00:26:03
    anymore that's a huge change turns out
  • 00:26:05
    again isolated components are a good
  • 00:26:07
    thing state of testing tooling I don't
  • 00:26:09
    care secure from the start I kind of
  • 00:26:12
    care oh there was some weird strict
  • 00:26:15
    content things I I did an angular
  • 00:26:16
    project for a uh a demo at render ATL
  • 00:26:20
    this year where I ran an angular project
  • 00:26:23
    inside of a next project for a demo the
  • 00:26:26
    amount of weird meta tag angular does by
  • 00:26:29
    default around like base URLs and stuff
  • 00:26:31
    is terrifying curious what they changed
  • 00:26:34
    here they automatically will generate a
  • 00:26:36
    hash-based strict kind of security
  • 00:26:37
    policy based on the scripts in your
  • 00:26:39
    index HTML the browser will add the hash
  • 00:26:41
    of every inline script to the CSP each
  • 00:26:43
    script will have a unique hash
  • 00:26:45
    associated with it that will prevent an
  • 00:26:46
    attacker from running a malicious script
  • 00:26:48
    on your page because for the browser to
  • 00:26:49
    execute the script its hash needs to be
  • 00:26:51
    present in that CSP that's cool it's
  • 00:26:54
    more bloat in the angular like metadata
  • 00:26:55
    field but nice they're doing those
  • 00:26:57
    things
  • 00:26:58
    this might break Chrome extensions
  • 00:27:00
    actually interesting evolving
  • 00:27:03
    reactivity here's where we get to the
  • 00:27:04
    real fun signal stuff I was hinting out
  • 00:27:06
    before the stuff that makes angular go
  • 00:27:08
    from the slowest framework to one of the
  • 00:27:09
    fastest in one feature ad Core theme for
  • 00:27:12
    angular over the past two years has been
  • 00:27:14
    evolving our reactivity system in v19
  • 00:27:16
    we're excited to share a couple new
  • 00:27:17
    complimentary apis as well as the
  • 00:27:19
    stabilization of some of the fundamental
  • 00:27:21
    reactivity apis that we introduced in
  • 00:27:23
    the previous versions such as input
  • 00:27:25
    output and view queries I hate these
  • 00:27:27
    names but we'll see what they do this is
  • 00:27:30
    where things start to get real fun the
  • 00:27:33
    stabilization of these new signal-based
  • 00:27:35
    apis so inputs and outputs and view
  • 00:27:37
    queries are how a lot of the data
  • 00:27:39
    management goes in existing angular apps
  • 00:27:42
    they've been moving these apis over to
  • 00:27:44
    use signals so they can be much more
  • 00:27:46
    granular with their updates now that
  • 00:27:48
    they've stabilized the apis and they've
  • 00:27:50
    finished the signals part you can run
  • 00:27:52
    these generate commands that will update
  • 00:27:55
    all of the usage you have of the
  • 00:27:57
    standard inputs queries and outputs apis
  • 00:28:00
    to make them use the new signal based
  • 00:28:03
    apis instead which should be a one run
  • 00:28:06
    and now your app is faster there are
  • 00:28:08
    catches they call out that since signal
  • 00:28:10
    inputs are read only in contrast to
  • 00:28:12
    traditional inputs you might need to
  • 00:28:13
    migrate parts of your app manually if
  • 00:28:15
    you're actually setting inputs directly
  • 00:28:17
    but you can run all of these at once and
  • 00:28:19
    you might end up with an app that runs
  • 00:28:20
    much better that's pretty cool this is
  • 00:28:23
    kind of like what we're seeing in the
  • 00:28:24
    react World with the compiler but it's
  • 00:28:27
    less like we have a new API that's how
  • 00:28:28
    you're going to write react it's more
  • 00:28:30
    the compiler takes your react code and
  • 00:28:32
    makes the actual output different
  • 00:28:34
    different approaches with similar goals
  • 00:28:35
    cool to see them making so much progress
  • 00:28:38
    though o modernize your code via the
  • 00:28:40
    language service and always been really
  • 00:28:42
    deep on the dev tools side like they
  • 00:28:44
    were first to typescript they cared a
  • 00:28:46
    lot about the language server and things
  • 00:28:48
    like VSS code it's not surprising that
  • 00:28:50
    they're going all in on that with these
  • 00:28:51
    huge changes what's cool here is you can
  • 00:28:53
    now click an input and convert it to a
  • 00:28:55
    signal input that's pretty cool there's
  • 00:28:58
    one click to do that now very different
  • 00:29:00
    syntax so input checked is
  • 00:29:02
    false convert input to a
  • 00:29:06
    signal now it's readon checked pretty
  • 00:29:11
    cool readon checked equals input false
  • 00:29:13
    using the input from angular core
  • 00:29:15
    instead of the
  • 00:29:16
    directive entirely different syntax but
  • 00:29:19
    the potential performance here is
  • 00:29:20
    massive cool to see that they have a
  • 00:29:22
    code mod as well as editor tools to help
  • 00:29:23
    you start migrating these things like
  • 00:29:25
    imagine if when class components got
  • 00:29:27
    moved to hooks
  • 00:29:28
    react gave us these tools to
  • 00:29:31
    automatically start migrating things
  • 00:29:33
    over to hooks angular has to because
  • 00:29:35
    nobody wants to be in an old angular
  • 00:29:37
    code base in general but if they're
  • 00:29:39
    going to start making these changes they
  • 00:29:40
    need to make it as easy as possible so
  • 00:29:42
    you don't end up with a split in your
  • 00:29:43
    code base of the old way and the new way
  • 00:29:45
    because that's like the specific thing
  • 00:29:46
    they want to avoid so it's cool to see
  • 00:29:47
    they care this much about these parts
  • 00:29:49
    they also introduced linked signals
  • 00:29:51
    because people called out that they
  • 00:29:53
    needed a solution for this common use
  • 00:29:55
    case CU often in uis there's a need for
  • 00:29:57
    mutable State that's still tracks some
  • 00:29:58
    higher level state so if you have a
  • 00:30:00
    selection UI that is a current selection
  • 00:30:02
    state which changes as the user makes
  • 00:30:03
    selections but it also needs to reset if
  • 00:30:06
    the list of options gets changed the
  • 00:30:08
    linked signal primitive creates a
  • 00:30:09
    writable signal which captures this type
  • 00:30:11
    of dependency so we have a signal with
  • 00:30:14
    apple banana and fig a linked signal
  • 00:30:16
    which picks the first option and now if
  • 00:30:19
    we set our choice to Fig and we call it
  • 00:30:23
    we see it's fig but if we update the
  • 00:30:25
    options so that they're actually Peach
  • 00:30:26
    and kiwi instead of these three options
  • 00:30:28
    if we still had fig that's an invalid
  • 00:30:30
    State because the options doesn't
  • 00:30:32
    include fig hell I've even had this
  • 00:30:34
    problem with pick thing I'll show you
  • 00:30:36
    guys ignore
  • 00:30:37
    Biden if I select actually we won't
  • 00:30:40
    ignore Biden I'll select these now I'm
  • 00:30:42
    going to click white shirt I still have
  • 00:30:45
    two
  • 00:30:46
    selected because I'm not updating the
  • 00:30:49
    selection based on what is or isn't
  • 00:30:51
    visibly available because I'd have to
  • 00:30:53
    double the amount of code to do that I
  • 00:30:55
    will eventually but I haven't yet and as
  • 00:30:58
    a result you have these states where it
  • 00:30:59
    says I have two things selected where I
  • 00:31:01
    don't see anything on the screen that
  • 00:31:03
    can be selected and I can't even
  • 00:31:04
    unselect them until I change the state
  • 00:31:06
    the only way to fix this is a lot of
  • 00:31:08
    annoying update code but now with linked
  • 00:31:11
    signals you can build these like
  • 00:31:15
    derivative layers on top these dependent
  • 00:31:17
    chains to update as things go they're
  • 00:31:20
    derived values with the ability to set
  • 00:31:22
    specific values so I I see that people
  • 00:31:25
    like to name this computed values but
  • 00:31:26
    there's a different because a comp
  • 00:31:27
    computed value can't be set if this
  • 00:31:30
    computed value was just we take the
  • 00:31:32
    first thing from options and then never
  • 00:31:34
    let you change it cool computer value
  • 00:31:36
    works the difference here is once we
  • 00:31:39
    have set this you can now update it
  • 00:31:41
    later on to not be the first value but
  • 00:31:44
    if the dependent value changes it will
  • 00:31:46
    reset with functionality that's good
  • 00:31:49
    there are catches there are absolutely
  • 00:31:51
    catches like using this to do what I
  • 00:31:53
    just showed properly requires you write
  • 00:31:55
    a lot of code in this link signal update
  • 00:31:57
    function but will at least work there's
  • 00:31:59
    a lot of potential here to build better
  • 00:32:01
    ux as a result of these changes that is
  • 00:32:03
    quite exciting it's also worth noting
  • 00:32:05
    that angular has its own computed signal
  • 00:32:08
    which is what we were just describing
  • 00:32:09
    where it only ever can be the value
  • 00:32:11
    determined in this function I can't
  • 00:32:13
    override double count the only way I
  • 00:32:15
    change double count is by changing count
  • 00:32:17
    because it's a derived value it comes
  • 00:32:19
    from the original what a linked signal
  • 00:32:21
    is is actually a somewhat New Concept
  • 00:32:23
    where it is a derived signal that gets
  • 00:32:26
    rederived whenever the state that it
  • 00:32:28
    depends on changes but can still get
  • 00:32:31
    updated by the developer directly
  • 00:32:34
    separately I ask about this like do you
  • 00:32:36
    get to see the options as well as what
  • 00:32:38
    was previously selected good also
  • 00:32:40
    has an advanced API which allows more
  • 00:32:42
    complex logic such as maintaining the
  • 00:32:43
    user's Choice as long as it exists in
  • 00:32:45
    the new list of options as I was just
  • 00:32:47
    showing signals and angular have focused
  • 00:32:49
    on synchronous data storing State and
  • 00:32:51
    signals computer values inputs queries
  • 00:32:53
    Etc in angular 19 we're taking our first
  • 00:32:55
    steps towards integrating signals with
  • 00:32:57
    the asynchronous operations by
  • 00:32:58
    introducing a new experimental resource
  • 00:33:00
    API it's an asynchronous dependency that
  • 00:33:02
    participates in the signal graph is
  • 00:33:05
    everything just becoming
  • 00:33:06
    solid okay so we get the user ID which
  • 00:33:09
    is an input user service which is an
  • 00:33:11
    inject and then user is a resource that
  • 00:33:14
    uses the user ID and it gets the user
  • 00:33:17
    from user service is this like how Hooks
  • 00:33:20
    and context were trying to kill Redux
  • 00:33:22
    both indirectly and directly angular is
  • 00:33:25
    now trying to kill RX they still it as
  • 00:33:28
    they show here but yeah very
  • 00:33:30
    interesting they have their effect API
  • 00:33:32
    which is kind of like use effect and
  • 00:33:34
    react if you're familiar and if you know
  • 00:33:36
    how foot gun use effect is then you
  • 00:33:38
    might not be surprised to say that they
  • 00:33:40
    are taking their time to make sure they
  • 00:33:42
    get effects semantics right we'll keep
  • 00:33:44
    this API in developer preview to open
  • 00:33:46
    the door for changes if we discover use
  • 00:33:48
    cases we haven't taken into
  • 00:33:49
    consideration yet yep more work on
  • 00:33:51
    zoness apparently everyone hates Zone JS
  • 00:33:54
    it's one of the biggest heaviest parts
  • 00:33:56
    of angular and everyone wants to move
  • 00:33:57
    away from so it's cool to see progress
  • 00:33:58
    there I'm not going to pretend I care
  • 00:34:00
    about material I've talked about
  • 00:34:03
    material theming too much this stream
  • 00:34:04
    already the angular cdk has Dragon drop
  • 00:34:07
    in it
  • 00:34:09
    interesting it's weird seeing these
  • 00:34:11
    things being built into the framework
  • 00:34:12
    I'm so used to react which like doesn't
  • 00:34:14
    even have a concept of styling this is
  • 00:34:16
    actually a cool section evolving apps
  • 00:34:18
    with unfolding best practices it's one
  • 00:34:20
    of our core values to evolve your apps
  • 00:34:22
    together with angular and the web
  • 00:34:23
    platform to ensure your apps are using
  • 00:34:25
    the latest apis as well as best
  • 00:34:27
    practices we shipped multiple
  • 00:34:28
    improvements mentioned before the
  • 00:34:30
    default value of Standalone has now been
  • 00:34:31
    changed so you're more likely to write
  • 00:34:33
    components in the Standalone fashion
  • 00:34:35
    optional schematic transforms for your
  • 00:34:37
    constructor-based dependency injection
  • 00:34:38
    to inject functions yeah all
  • 00:34:41
    words the generator to update to the new
  • 00:34:43
    signal stuff is in there new clustering
  • 00:34:46
    stuff the the point being they are very
  • 00:34:50
    understanding of how big and ancient a
  • 00:34:53
    lot of these old code bases were and
  • 00:34:55
    their goal isn't to just make a new
  • 00:34:57
    angular that makes everyone in the past
  • 00:34:58
    feel bad they are going out of their way
  • 00:35:01
    to avoid another red wedding and they're
  • 00:35:03
    doing that by introducing best practices
  • 00:35:05
    slowly helping the community get used to
  • 00:35:07
    them and then setting them as a default
  • 00:35:08
    a year or two later that's a good
  • 00:35:10
    strategy that's cool to see and when
  • 00:35:12
    your framework prescribes different ways
  • 00:35:14
    to do things like this but the
  • 00:35:16
    framework's realization of the right way
  • 00:35:17
    changes over time it's so important to
  • 00:35:20
    balance this out and it's honestly
  • 00:35:21
    exciting to see them figuring it out
  • 00:35:22
    they have a huge thank you here at the
  • 00:35:24
    bottom which might not seem like that
  • 00:35:26
    big of a deal but for angular it is the
  • 00:35:29
    shift away from angular is the separate
  • 00:35:32
    team living in their Ivory Tower
  • 00:35:34
    building things and maintaining them for
  • 00:35:36
    us to all figure out towards being more
  • 00:35:38
    Community focused has been something
  • 00:35:39
    I've even noticed externally as a react
  • 00:35:42
    Dev we even had this problem and react
  • 00:35:44
    for a bit now the react team is more
  • 00:35:45
    accessible than ever but yeah angular
  • 00:35:48
    just felt like a black box and now it
  • 00:35:51
    doesn't now I have people on the angular
  • 00:35:53
    team reaching out to me to be clear none
  • 00:35:56
    of the mby to cover any of the this
  • 00:35:57
    stuff I'm doing it because I found this
  • 00:35:59
    to be a very interesting release and I'm
  • 00:36:01
    curious if you agree does this make you
  • 00:36:03
    excited about angular or at the very
  • 00:36:05
    least hyped to know the angular devs
  • 00:36:06
    aren't falling behind or is this making
  • 00:36:09
    you disturbed as an angular Dev let me
  • 00:36:10
    know in the comments and until next time
  • 00:36:13
    peace narts
标签
  • Angular
  • React
  • release 19
  • performance
  • developer experience
  • SSR
  • incremental hydration
  • community feedback
  • signals
  • modernization