[MUSIC PLAYING] EMMA TWERSKY: Hi, I'm Emma,
a senior developer relations engineer on the Angular team. ALEX RICKABAUGH: And I'm Alex,
the technical lead for the Core Angular Framework. EMMA TWERSKY: And today we're
going to develop our first app with Angular signals. Let's get started. Angular signals introduce
three reactant primitives to the Angular that
you know and love, simplifying your development
and helping you build faster apps by default. But Alex,
what is a reactive primitive, and why should we care? ALEX RICKABAUGH: Primitives
are the building blocks the framework gives you
to build applications. Angular's getting some
new reactive primitives, which you can use to tell
the framework about what data your UI cares about
and when that data changes. With that kind of
information, Angular can easily keep your
application's UI in sync with that data as it changes. Our three new
reactive primitives are writable signals,
computed signals and effects. EMMA TWERSKY: I
think that the best way to understand those
Angular signals is to start building with them. Today we're going
to start by building a game powered by signals. ALEX RICKABAUGH: Oh,
that's a great idea. Games have a lot
of state, so I'm sure we can find some
places to use signals. EMMA TWERSKY: I think we can. We'll be building an
Angular cipher game. Ciphers are systems for
encrypting and decrypting data. In this game, users can
decode a secret message by dragging and dropping
clues to solve a cipher. And you can even
customize your own message and share the URL
with your friends to send your own
secret messages. ALEX RICKABAUGH:
Everything you need to follow along to this workshop
is in the description box below. To get started, make a
fork of the Stackblitz to create your own
editable workspace. You can pause the workshop and
play with the code a little. Unpause and join us when
you're ready to define your first signal. [MUSIC PLAYING] EMMA TWERSKY: Step 1,
defining our first signal. So Alex, what is a signal? ALEX RICKABAUGH: A signal
is kind of like a variable. It holds a value for us and
we can change that value whenever we'd like. Unlike a variable,
though, a signal knows where in the
application it's used, like which
components are displaying its value in their
templates, and it can signal to those
components whenever we change the value inside. EMMA TWERSKY: Very cool. In our app, a great candidate
to become our very first signal is the superSecretMessage. ALEX RICKABAUGH:
superSecretMessage is a value in MessageService
that defines the secret message that we're decoding. Currently, this value doesn't
notify the application of changes, so our customize
button is a little bit broken. We can solve this by
making it a signal. By making
superSecretMessage a signal, we make it so that
any dependencies on it can be notified
whenever we customize the message in a dialog. You can find each
of these places under the comments
that say TODO(1) Define your first signal. Doing this will automatically
prompt you to import signal from Angular core. And if you try to refresh
the page at this point, you'll likely run into
errors where you previously referred to superSecretMessage. This is because we've
changed its type from a string to a writable
signal, which is a function, and we can fix these
by changing all of the references of
superSecretMessage to call that function instead. [MUSIC PLAYING] We have two other signals
in our application. The CipherService
defines a cipher signal. This is a randomly
generated mapping of key value pairs of one
letter of the alphabet to a new ciphered letter. We use this to
scramble the message and to determine if we found a
successful match for a letter on the keyboard. We also have a decodedCipher
signal of the key value pairs that we've successfully
decoded, and we'll add to that as we solve the cipher. A unique and powerful
feature of Angular signals library is that
we're introducing reactivity everywhere. We've defined these three
signals once in our services, and we can use them in
our templates, components, and other services-- basically, anywhere you
can write application code. They're not limited to or
bound to a single component. EMMA TWERSKY: And there you go-- your first signal. You can pause the workshop and
play with the code a little, and then unpause
and join us when you're ready to define
your first computed. [MUSIC PLAYING] Step 2, defining
our first computed. So Alex, you mentioned something
about writable and non-writable signals. What's a computed? ALEX RICKABAUGH: Ah, computeds. Well, some signals we
want to change directly, but that's not always the
easiest way to do things. If I know the
temperature in Celsius, I can always calculate
it in Fahrenheit, but it'd be nice to not
have to do that manually. Computed signals
also hold values, but instead of
changing them directly, they derive their values from
the values of other signals. And because signals can notify
consumers when they change, computed signals
are automatically kept up to date without us
having to set them ourselves. EMMA TWERSKY: In our
app, a great candidate to become our very first
computed is solvedMessage. ALEX RICKABAUGH: solvedMessage
is the in-progress result of decoding the secretMessage
with the decodedCipher key. Currently, the
solvedMessage doesn't change whenever the
secretMessage changes, so we don't see any
updates on the screen when we solve our cipher. Using a computed is going
to fix this problem. Rather than having to manually
redecode the message every time the user drags a new
letter into their key, we can use a computed
to automatically keep the solvedMessage up to
date as the key changes. And when you first
use a computed, you'll be prompted to import it
from the Angular core package. If you try and
refresh the page here, you'll run into errors
where you previously referred to solvedMessage. Just like with the
writable signals, we've changed the
type of solvedMessage, so we can fix this by changing
all of those references to call it instead
as a function. [MUSIC PLAYING] Just like decoded
message, secretMessage is also a great
candidate for a computed. This is the superSecretMessage
encoded by our cipher that we'll work to solve
and display to users. And lastly, the CipherService
defines an unsolved alphabet computed, which calculates
a list of all the letters which are not yet solved. This is derived from
the decodedCipher. EMMA TWERSKY: Awesome. We can now verify
that our app works. You can pause the workshop
and play with the code or decipher your own message,
and then unpause and join us when you're ready to define
your very first effect. [MUSIC PLAYING] Step 3. So I get signals and I get
computeds, derived on signals. But what's an effect? ALEX RICKABAUGH: Effects
are the last piece of the signal puzzle. An effect is something
you want to have happen whenever some signals change. With the effect API,
we can tell Angular to run a function
which is going to use the values of some
signals, and Angular will take care of automatically
rerunning that function if those signals are updated. EMMA TWERSKY: I have
something that I want to occur when a signal is updated-- confetti. ALEX RICKABAUGH: Now that our
application is functional, we'll add some fun to
it by adding confetti when the cipher is solved and
the secret message is decoded. [MUSIC PLAYING] Notice how this effect
depends on a signal and on a computed value-- the superSecretMessage
and the solvedMessage. [MUSIC PLAYING] And when these messages
match, we get confetti. [BANG] EMMA TWERSKY: Whoa! I didn't realize effects
worked in real life. ALEX RICKABAUGH: You
can pause the workshop and play with the code a little. We'll be cleaning up
all this confetti. [MUSIC PLAYING] Congratulations. Your Angular cipher is now
ready to decode and share secret messages. EMMA TWERSKY: Have a message
for the Angular team? Tag us on social media
@Angular so we can decode it. ALEX RICKABAUGH: You now have
three new reactive primitives in your Angular toolbox to
simplify your development and build faster
apps by default. EMMA TWERSKY: We're
excited to see what you'll build using Angular signals. Ng update to v16 for Angular
signals in developer preview today. And learn more at all the
links in the description box. Thank you. [MUSIC PLAYING]
