[MUSIC PLAYING] EMMA TWERSKY: Hi, I'm Emma
from the Angular team. SIMONA COTIN: And I'm Simona,
also from the Angular team. EMMA TWERSKY: And
today, Simona and I will be rethinking
reactivity with Signals. To be able to
rethink reactivity, first, I think we need to take
a step back and understand what we mean by "reactivity." Reactivity is a
declarative way to express the propagation of change. Take a spreadsheet, for example. If you update Mark's last name,
you'd expect the full name to update too. That's because our spreadsheet
knows that full name depends on first and last name. That's exactly what reactivity
allows us to bring to the web. Reactivity enables a
framework to understand change propagation through
dependency tracking. That's a simple example. But what about when you
have more than one value? You can think of the
values or state in your app as nodes in a graph. They rely and update
based on one another. If one value is changed,
that dependency is tracked, and the observable state
notifies any derived values which depend on this value. When these values change, a
side effect, like a render, is triggered. But the change propagation
only notifies dependent values. That is, values in the graph
that don't depend on the change value are not impacted. These precision updates are
important for performance. We'll dig into this a
little bit more later. In Angular, we're introducing
reactivity everywhere with Angular Signals, available
in developer preview in version 16 today. One of our major motivations
behind introducing Signals is simplification. Let's dig in to
the three reactant primitives we're introducing
to simplify your development-- signal, computed, and effect. A signal is a value that can
tell Angular when it changes. When a signal is read
with interactive context, it's capable of notifying or
signaling that reactive context of future changes in its value. In our spreadsheet,
first and last name would be signal values, ready
to notify their reactive context if they're changed
in the future. Some signals can be
changed directly, while others calculate
their value based on the values of other signals. I'll signal Simona to talk
about this a little bit more. SIMONA COTIN: Thanks, Emma. Together, signals create a graph
of dependencies which model how data flows in your application. Reactive context lets you
do some pretty cool things. In many situations, you might
find yourself deriving state from existing
values, with the goal to have the derived
state update when the dependent value changes. With computed, we
can declaratively express that full name depends
on the first name and last name and expect it to be updated
automatically when they change. There are times when
we might want something to occur when a signal
has a new value. With effect, we can run
a side effectful function as a result of a signal change. Effects have a
variety of use cases, including triggering
network requests, performing rendering
actions, reading or mutating the dom after
Angular is finished rendering. In our spreadsheet, we
want to log to the console when last name has changed. We can do that inside an effect. Here, an execution will be
triggered every time last name changes. Let's look at a more powerful
example of these three primitives at work. EMMA TWERSKY: We're going to
use Angular signals to build a cipher game and have
a little fun, shall we? Ciphers are systems for
encrypting and decrypting data. In this demo, we're going
to decode a secret message by dragging and dropping
clues to solve a cipher. You can even
customize the message and share their URL
with your friends to send your own secret message. Decipher our message or
send your own custom message at the link in the
description box. Let's dive into how signals
are powering this game. This app has three signals
provided in two root services. First, we define
a cipher signal, a randomly generated
mapping of key value pairs from one letter of the alphabet
to a new, encoded letter of the alphabet. We'll use this to
encode the message. We also have a
decodedCipher signal of the key value pairs
from the cipher signal that we've successfully decoded. And finally, we
have my favorite, a superSecretMessage signal
that defines the secret message we're decoding. A unique and powerful attribute
of Angular Signals library design is that we're introducing
reactivity everywhere. We define our signals
once in our services, and we can use them in a
template, component, pipes, other services-- basically,
anywhere that you write your application code. We're not limited or bound
to a component scope. Here, we're using the
superSecretMessage in a template to help
display our message. But we're using the
exact same signal across multiple
component classes to create the URL, set a new
superSecretMessage, and more. SIMONA COTIN: Now, let's
look at our computed values. Remember, computed signals
create derived values based on one or more
dependent signal values. The derived value is
updated in response to changes in the
dependent signal values. In our application,
the secret message is displayed on the
screen and represents the value of the
superSecretMessage encoded using the cipher. Every time you change the value
of the superSecretMessage, the value of the secret message
is recomputed automatically, and the UI updates with
the new secret message. So our secret message
depends and is computed from our
superSecretMessage and the cipher signals,
while solvedMessage decodes the secret message with the
cipher into what a user sees on the screen using
the decoded cipher. Together, signals create
a graph of dependencies which models how data
flows in your application. Our dependencies graph
maps how we're deriving values based on other signals. Angular can use the
notifications from signals to know which components
need to be change detected or to execute effect
functions which you define. Here, we're using effect
to launch confetti when our cipher message is solved. Want to explore
this demo's code? Head to StackBlitz
to dig in and debug. With precision updates and
lightweight dependencies, Signals enables you
to build faster apps by default. Signals
unlocks better performance by minimizing the work Angular
performs to keep your dom up to date with precise writes. Signals give fine-grained
information about which parts of the model have
changed, and Angular understands which signals
are used in different parts of the componentry. Change detection runs
when and only when a signal read in the
template notifies Angular that it has changed. Signals are two kilobytes
and fast, with no requirement to load third-party dependencies
and no upfront startup costs when your
page first loads. EMMA TWERSKY: Angular V16
is only the beginning. Our team is committed to
experimentation and feedback as we continue to
evolve into the future. And since we're
Angular, we're committed to the same model of
backwards compatibility that we've always had. We want you to be able to
use Signals in your app, no matter how you
currently manage state. We are building Signals
with first-class support for interoperability in mind. In fact, we're taking
this one step further, and we're excited to announce
that we are partnering with some of your favorite
state management libraries to ensure that you can work
with Signals from day one. SIMONA COTIN: Angular Signals
is in developer preview starting with
version 16, and we're excited for you to try it
out and share feedback. This is only the first step. Next steps include
updating component APIs to include support for
inputs, outputs, and queries and enabling fully
zoneless apps. Throughout the
process, we'll make sure that we publish
requests for comments, RFCs, on the Angular GitHub
repository so you get full insights
and opportunities to share feedback. Reactivity gives you
three powerful, yet simple primitives-- signal,
computed, and effect. They enable you to
simplify your development with conceptual simplicity,
familiar concepts, and first-class support
for interoperability. You will constantly
be on the optimal path to build faster apps by
default with precision updates and lightweight
dependencies powered by reactivity everywhere. We're excited to see what you'll
build using Angular Signals. ng update to V16 and
start coding with us at the link in the description. In fact, if you're
eager to start today, we just launched the
workshop on getting started with Angular Signals. Develop your first app powered
by Angular Signals, which might look very familiar. That's my signal to wrap up. Thank you. [MUSIC PLAYING]
