Svelte is a JS library for building reactive UI components. But unlike React, Angular, and Vue, it does not ship a runtime like Virtual DOM to the browser https://svelte.dev/

Also see...

Full Svelte Tutorial https://fireship.io/lessons/svelte-v3-overview-firebase/
Svelte Kit https://svelte.dev/blog/sveltekit-beta

#js #webdev #100SecondsOfCode

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T05:53:52.134Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
cb47c235-9440-4040-b0bb-f0bde487c8cd
bac0984ceaef393c3555097732e776a23eb3ca9f0259f60aa20ee6ae9c61c2a0
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Svelte, it's a JavaScript tool for building UI components just like React, Angular, or Vue.
But unlike its peers, which ship a JavaScript runtime to the browser to make your code work, Svelte is a compiler.
It converts the declarative code that you love to write as a developer into imperative code that works with native browser APIs.
As a result, you get highly performant code in a very small package.
But, most importantly, it's the only JavaScript framework that's actually enjoyable to use.
Very Nice.
We create components in dot Svelte files, which contain 3 main parts.
A script for your JavaScript code, which can also be TypeScript.
A style tag for your CSS, which can also use a preprocessor like Sass and the main template represented as regular HTML.
But it's no ordinary HTML.
It's been empowered with all kinds of extra syntax for writing declarative code.
Need reactive state?
Simply define a variable with the let keyword, then reference it dynamically in the HTML using braces.
If we wanna change the state, we can do that by defining a function, then listen to an event in the DOM with on, and bind the function to it as the handler.
Now, when the value of that variable changes, the component will automatically rerender to show the updated state.
In many cases, you'll need to run conditional logic or loops in your template.
Instead of fighting against JavaScript functions, it empowers you with a syntax where you can clearly create an if else statement or a for each loop when working with a list.
Now, when it comes to cross component communication, Svelte provides multiple different strategies for sharing data between components.
To pass data from a parent a child, you can use props by adding the export keyword to a variable.
And, now, you can pass data into this component.
And, if you have a ton of props, you can use the read syntax to keep your code looking fit and healthy.
Now, for more complex component trees, you have a context API just like React.
And if that wasn't enough, Svelte also has a really nice mechanism called stores, which are like observables that can be shared anywhere in the component tree and subscribe to in the template by putting a dollar sign in front of them.
After you've built an awesome UI, you can then use the compiler to convert it to vanilla JavaScript.
And if you're building a full blown web application, you can use SvelteKit to quickly implement server side rendering, routing, and code splitting.
This has been felt in 100 seconds.
Hit the like button if you wanna see more.
Thanks for watching, and I will see you in the next one.

Speaker 0: Svelte, it's a JavaScript tool for building UI components just like React, Angular, or Vue. But unlike its peers, which ship a JavaScript runtime to the browser to make your code work, Svelte is a compiler. It converts the declarative code that you love to write as a developer into imperative code that works with native browser APIs. As a result, you get highly performant code in a very small package. But, most importantly, it's the only JavaScript framework that's actually enjoyable to use.

Very Nice. We create components in dot Svelte files, which contain 3 main parts. A script for your JavaScript code, which can also be TypeScript. A style tag for your CSS, which can also use a preprocessor like Sass and the main template represented as regular HTML. But it's no ordinary HTML.

It's been empowered with all kinds of extra syntax for writing declarative code. Need reactive state? Simply define a variable with the let keyword, then reference it dynamically in the HTML using braces. If we wanna change the state, we can do that by defining a function, then listen to an event in the DOM with on, and bind the function to it as the handler. Now, when the value of that variable changes, the component will automatically rerender to show the updated state.

In many cases, you'll need to run conditional logic or loops in your template. Instead of fighting against JavaScript functions, it empowers you with a syntax where you can clearly create an if else statement or a for each loop when working with a list. Now, when it comes to cross component communication, Svelte provides multiple different strategies for sharing data between components. To pass data from a parent a child, you can use props by adding the export keyword to a variable. And, now, you can pass data into this component.

And, if you have a ton of props, you can use the read syntax to keep your code looking fit and healthy. Now, for more complex component trees, you have a context API just like React. And if that wasn't enough, Svelte also has a really nice mechanism called stores, which are like observables that can be shared anywhere in the component tree and subscribe to in the template by putting a dollar sign in front of them. After you've built an awesome UI, you can then use the compiler to convert it to vanilla JavaScript. And if you're building a full blown web application, you can use SvelteKit to quickly implement server side rendering, routing, and code splitting.

This has been felt in 100 seconds. Hit the like button if you wanna see more. Thanks for watching, and I will see you in the next one.
Svelte, it's a JavaScript tool for building UI components just like React, Angular, or Vue. But unlike its peers, which ship a JavaScript runtime to the browser to make your code work, Svelte is a compiler.
It converts the declarative code that you love to write as a developer into imperative code that works with native browser APIs. As a result, you get highly performant code in a very small package. But, most importantly, it's the only JavaScript framework that's actually enjoyable to use. Very Nice.
programming
software
software development
We create components in dot Svelte files, which contain 3 main parts. A script for your JavaScript code, which can also be TypeScript. A style tag for your CSS, which can also use a preprocessor like Sass and the main template represented as regular HTML. But it's no ordinary HTML. It's been empowered with all kinds of extra syntax for writing declarative code. Need reactive state? Simply define a variable with the let keyword, then reference it dynamically in the HTML using braces. If we wanna change the state, we can do that by defining a function, then listen to an event in the DOM with on, and bind the function to it as the handler.
Now, when the value of that variable changes, the component will automatically rerender to show the updated state. In many cases, you'll need to run conditional logic or loops in your template. Instead of fighting against JavaScript functions, it empowers you with a syntax where you can clearly create an if else statement or a for each loop when working with a list.
programming
Now, when it comes to cross component communication, Svelte provides multiple different strategies for sharing data between components. To pass data from a parent a child, you can use props by adding the export keyword to a variable. And, now, you can pass data into this component. And, if you have a ton of props, you can use the read syntax to keep your code looking fit and healthy. Now, for more complex component trees, you have a context API just like React. And if that wasn't enough, Svelte also has a really nice mechanism called stores, which are like observables that can be shared anywhere in the component tree and subscribe to in the template by putting a dollar sign in front of them.
data
programming
After you've built an awesome UI, you can then use the compiler to convert it to vanilla JavaScript. And if you're building a full blown web application, you can use SvelteKit to quickly implement server side rendering, routing, and code splitting. This has been felt in 100 seconds. Hit the like button if you wanna see more. Thanks for watching, and I will see you in the next one.
Svelte, it's a JavaScript tool for building UI components just like React, Angular, or Vue. But unlike its peers, which ship a JavaScript runtime to the browser to make your code work, Svelte is a compiler. It converts the declarative code that you love to write as a developer into imperative code that works with native browser APIs. As a result, you get highly performant code in a very small package. But, most importantly, it's the only JavaScript framework that's actually enjoyable to use. Very Nice. We create components in dot Svelte files, which contain 3 main parts. A script for your JavaScript code, which can also be TypeScript. A style tag for your CSS, which can also use a preprocessor like Sass and the main template represented as regular HTML. But it's no ordinary HTML. It's been empowered with all kinds of extra syntax for writing declarative code. Need reactive state? Simply define a variable with the let keyword, then reference it dynamically in the HTML using braces. If we wanna change the state, we can do that by defining a function, then listen to an event in the DOM with on, and bind the function to it as the handler. Now, when the value of that variable changes, the component will automatically rerender to show the updated state. In many cases, you'll need to run conditional logic or loops in your template. Instead of fighting against JavaScript functions, it empowers you with a syntax where you can clearly create an if else statement or a for each loop when working with a list. Now, when it comes to cross component communication, Svelte provides multiple different strategies for sharing data between components. To pass data from a parent a child, you can use props by adding the export keyword to a variable. And, now, you can pass data into this component. And, if you have a ton of props, you can use the read syntax to keep your code looking fit and healthy. Now, for more complex component trees, you have a context API just like React. And if that wasn't enough, Svelte also has a really nice mechanism called stores, which are like observables that can be shared anywhere in the component tree and subscribe to in the template by putting a dollar sign in front of them. After you've built an awesome UI, you can then use the compiler to convert it to vanilla JavaScript. And if you're building a full blown web application, you can use SvelteKit to quickly implement server side rendering, routing, and code splitting. This has been felt in 100 seconds. Hit the like button if you wanna see more. Thanks for watching, and I will see you in the next one.
Svelte,
svelte
it's
it's
a
a
JavaScript
javascript
tool
tool
for
for
building
building
UI
ui
components
components
just
just
like
like
React,
react
Angular,
angular
or
or
Vue.
vue
But
but
unlike
unlike
its
its
peers,
peers
which
which
ship
ship
a
a
JavaScript
javascript
runtime
runtime
to
to
the
the
browser
browser
to
to
make
make
your
your
code
code
work,
work
Svelte
svelte
is
is
a
a
compiler.
compiler
It
it
converts
converts
the
the
declarative
declarative
code
code
that
that
you
you
love
love
to
to
write
write
as
as
a
a
developer
developer
into
into
imperative
imperative
code
code
that
that
works
works
with
with
native
native
browser
browser
APIs.
apis
As
as
a
a
result,
result
you
you
get
get
highly
highly
performant
performant
code
code
in
in
a
a
very
very
small
small
package.
package
But,
but
most
most
importantly,
importantly
it's
it's
the
the
only
only
JavaScript
javascript
framework
framework
that's
that's
actually
actually
enjoyable
enjoyable
to
to
use.
use
Very
very
Nice.
nice
We
we
create
create
components
components
in
in
dot
dot
Svelte
svelte
files,
files
which
which
contain
contain
3
3
main
main
parts.
parts
A
a
script
script
for
for
your
your
JavaScript
javascript
code,
code
which
which
can
can
also
also
be
be
TypeScript.
typescript
A
a
style
style
tag
tag
for
for
your
your
CSS,
css
which
which
can
can
also
also
use
use
a
a
preprocessor
preprocessor
like
like
Sass
sass
and
and
the
the
main
main
template
template
represented
represented
as
as
regular
regular
HTML.
html
But
but
it's
it's
no
no
ordinary
ordinary
HTML.
html
It's
it's
been
been
empowered
empowered
with
with
all
all
kinds
kinds
of
of
extra
extra
syntax
syntax
for
for
writing
writing
declarative
declarative
code.
code
Need
need
reactive
reactive
state?
state
Simply
simply
define
define
a
a
variable
variable
with
with
the
the
let
let
keyword,
keyword
then
then
reference
reference
it
it
dynamically
dynamically
in
in
the
the
HTML
html
using
using
braces.
braces
If
if
we
we
wanna
wanna
change
change
the
the
state,
state
we
we
can
can
do
do
that
that
by
by
defining
defining
a
a
function,
function
then
then
listen
listen
to
to
an
an
event
event
in
in
the
the
DOM
dom
with
with
on,
on
and
and
bind
bind
the
the
function
function
to
to
it
it
as
as
the
the
handler.
handler
Now,
now
when
when
the
the
value
value
of
of
that
that
variable
variable
changes,
changes
the
the
component
component
will
will
automatically
automatically
rerender
rerender
to
to
show
show
the
the
updated
updated
state.
state
In
in
many
many
cases,
cases
you'll
you'll
need
need
to
to
run
run
conditional
conditional
logic
logic
or
or
loops
loops
in
in
your
your
template.
template
Instead
instead
of
of
fighting
fighting
against
against
JavaScript
javascript
functions,
functions
it
it
empowers
empowers
you
you
with
with
a
a
syntax
syntax
where
where
you
you
can
can
clearly
clearly
create
create
an
an
if
if
else
else
statement
statement
or
or
a
a
for
for
each
each
loop
loop
when
when
working
working
with
with
a
a
list.
list
Now,
now
when
when
it
it
comes
comes
to
to
cross
cross
component
component
communication,
communication
Svelte
svelte
provides
provides
multiple
multiple
different
different
strategies
strategies
for
for
sharing
sharing
data
data
between
between
components.
components
To
to
pass
pass
data
data
from
from
a
a
parent
parent
a
a
child,
child
you
you
can
can
use
use
props
props
by
by
adding
adding
the
the
export
export
keyword
keyword
to
to
a
a
variable.
variable
And,
and
now,
now
you
you
can
can
pass
pass
data
data
into
into
this
this
component.
component
And,
and
if
if
you
you
have
have
a
a
ton
ton
of
of
props,
props
you
you
can
can
use
use
the
the
read
read
syntax
syntax
to
to
keep
keep
your
your
code
code
looking
looking
fit
fit
and
and
healthy.
healthy
Now,
now
for
for
more
more
complex
complex
component
component
trees,
trees
you
you
have
have
a
a
context
context
API
api
just
just
like
like
React.
react
And
and
if
if
that
that
wasn't
wasn't
enough,
enough
Svelte
svelte
also
also
has
has
a
a
really
really
nice
nice
mechanism
mechanism
called
called
stores,
stores
which
which
are
are
like
like
observables
observables
that
that
can
can
be
be
shared
shared
anywhere
anywhere
in
in
the
the
component
component
tree
tree
and
and
subscribe
subscribe
to
to
in
in
the
the
template
template
by
by
putting
putting
a
a
dollar
dollar
sign
sign
in
in
front
front
of
of
them.
them
After
after
you've
you've
built
built
an
an
awesome
awesome
UI,
ui
you
you
can
can
then
then
use
use
the
the
compiler
compiler
to
to
convert
convert
it
it
to
to
vanilla
vanilla
JavaScript.
javascript
And
and
if
if
you're
you're
building
building
a
a
full
full
blown
blown
web
web
application,
application
you
you
can
can
use
use
SvelteKit
sveltekit
to
to
quickly
quickly
implement
implement
server
server
side
side
rendering,
rendering
routing,
routing
and
and
code
code
splitting.
splitting
This
this
has
has
been
been
felt
felt
in
in
100
100
seconds.
seconds
Hit
hit
the
the
like
like
button
button
if
if
you
you
wanna
wanna
see
see
more.
more
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains that Svelte is a JavaScript tool that converts JavaScript code into reactive code that is highly performant. Svelte's three main parts are a script, style, and a template. Svelte files contain a set of rules for writing complicate code, and can be shared through a context API or dynamic variables. Svelte provides multiple strategies for sharing data between components, including passting it through props, using the read syntax, and using the store method.
Svelte in 100 Seconds
Svelte, it's a JavaScript tool for building UI components just like React, Angular, or Vue. But unlike its peers, which ship a JavaScript runtime to the browser to make your code work, Svelte is a compiler. It converts the declarative code that you love to write as a developer into imperative code that works with native browser APIs. As a result, you get highly performant code in a very small package. But, most importantly, it's the only JavaScript framework that's actually enjoyable to use. Very Nice. We create components in dot Svelte files, which contain 3 main parts. A script for your JavaScript code, which can also be TypeScript. A style tag for your CSS, which can also use a preprocessor like Sass and the main template represented as regular HTML. But it's no ordinary HTML. It's been empowered with all kinds of extra syntax for writing declarative code. Need reactive state? Simply define a variable with the let keyword, then reference it dynamically in the HTML using braces. If we wanna change the state, we can do that by defining a function, then listen to an event in the DOM with on, and bind the function to it as the handler. Now, when the value of that variable changes, the component will automatically rerender to show the updated state. In many cases, you'll need to run conditional logic or loops in your template. Instead of fighting against JavaScript functions, it empowers you with a syntax where you can clearly create an if else statement or a for each loop when working with a list. Now, when it comes to cross component communication, Svelte provides multiple different strategies for sharing data between components. To pass data from a parent a child, you can use props by adding the export keyword to a variable. And, now, you can pass data into this component. And, if you have a ton of props, you can use the read syntax to keep your code looking fit and healthy. Now, for more complex component trees, you have a context API just like React. And if that wasn't enough, Svelte also has a really nice mechanism called stores, which are like observables that can be shared anywhere in the component tree and subscribe to in the template by putting a dollar sign in front of them. After you've built an awesome UI, you can then use the compiler to convert it to vanilla JavaScript. And if you're building a full blown web application, you can use SvelteKit to quickly implement server side rendering, routing, and code splitting. This has been felt in 100 seconds. Hit the like button if you wanna see more. Thanks for watching, and I will see you in the next one.
The speaker explains that Svelte is a JavaScript tool that converts JavaScript code into reactive code that is highly performant. Svelte's three main parts are a script, style, and a template. Svelte files contain a set of rules for writing complicate code, and can be shared through a context API or dynamic variables. Svelte provides multiple strategies for sharing data between components, including passting it through props, using the read syntax, and using the store method.