2024-02-04T05:04:42.014Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
a61f1ee1-b168-40d1-8037-e2aa5cb54132
2315953c095bb574a41fffd6a14c5337a63bfe6830a7fdbd6bd5aaaa6fd00438
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
It is June 10, 2023, and you're watching the Code Report.
There's millions of great JavaScript frameworks in the world today, but the most popular choice is still React, even though we have faster alternatives like Solid, Preact, and Quick that also use JSX.
One of React's original innovations was the virtual DOM, but Many modern frameworks have moved away from this approach, and Rich Harris, the creator of Svelte, once called it pure overhead.
Despite this, React will likely still be used on websites 100 of years after we're all dead.
But today, I have some good news.
A recent high school graduate named Aidan Bai just improved React's performance by 70% with million JS, which provides a hyper optimized virtual DOM and chains the original virtual DOM to the radiator, where it can't cause any problems.
When I first saw this, my initial thought was no way.
There's no way a teenager could out render an entire team of top tier engineers at meta, but there are benchmarks to back up these outrageous claims.
Like on the gold standard framework benchmark, it ranks way higher even React itself, and even beat Solid JS.
And it provides a live demo where you can compare React and 1,000,000 side by side.
Now it's important to Now that benchmarks don't really represent real world use cases, and the vast majority of web apps out there will never get to the point where they have rendering issues with a JavaScript framework.
However, it's always fun to do some premature over optimization anyway.
But if you're a highly experienced React developer, you might be wondering, what is the virtual DOM?
I've never heard of it.
Well, to update things in the UI, React makes a lightweight copy of the DOM where it can calculate updates faster and then update everything all at once.
It's kind of like finalizing all your changes on a blueprint before you go tearing out walls in a building.
But all this happens at runtime, and there's a lot of unnecessary work trying to figure out what changed.
Million.
Even JS takes a more surgical approach by introducing a compiler that can perform static analysis to figure out exactly where the dynamic data is in advance.
It creates an edit map to represent the state of the application, which can then determine what has changed with far less computation required.
This approach is inspired by other frameworks like Svelte and Solid, which also rely on a compiler to achieve these surgical DOM updates.
And 1,000,000 was also inspired by the prior work of a library called Block DOM.
What's also cool about 1,000,000 is that it's only 4 kilobytes and extremely easy to use.
All you do is take an existing React component and wrap it inside this block function to create a higher order component, which will block out the virtual DOM and let 1,000,000 magically take over.
Basically, after the component is mounted, it makes a reference to the underlying DOM element, then does all the subsequent rendering and change detection on its own.
In addition, it has a built in for which is used to render a list of blocks.
Pretty simple, but before you get too excited, the creator of this project admits that it's not a silver bullet.
When using Blocks, you need to follow a specific set of rules.
And if you break those rules, it'll revert back to React's virtual DOM, and you'll lose all your massive gains.
Overall, million.
Js looks like an awesome project, But most importantly, it gives me hope that Gen z is not actually tech illiterate, and might actually one day be able to fix React.
This has been the CodeReport.
Thanks for watching, and I will see you in the next one.

Speaker 0: It is June 10, 2023, and you're watching the Code Report. There's millions of great JavaScript frameworks in the world today, but the most popular choice is still React, even though we have faster alternatives like Solid, Preact, and Quick that also use JSX. One of React's original innovations was the virtual DOM, but Many modern frameworks have moved away from this approach, and Rich Harris, the creator of Svelte, once called it pure overhead. Despite this, React will likely still be used on websites 100 of years after we're all dead. But today, I have some good news.

A recent high school graduate named Aidan Bai just improved React's performance by 70% with million JS, which provides a hyper optimized virtual DOM and chains the original virtual DOM to the radiator, where it can't cause any problems. When I first saw this, my initial thought was no way. There's no way a teenager could out render an entire team of top tier engineers at meta, but there are benchmarks to back up these outrageous claims. Like on the gold standard framework benchmark, it ranks way higher even React itself, and even beat Solid JS. And it provides a live demo where you can compare React and 1,000,000 side by side.

Now it's important to Now that benchmarks don't really represent real world use cases, and the vast majority of web apps out there will never get to the point where they have rendering issues with a JavaScript framework. However, it's always fun to do some premature over optimization anyway. But if you're a highly experienced React developer, you might be wondering, what is the virtual DOM? I've never heard of it. Well, to update things in the UI, React makes a lightweight copy of the DOM where it can calculate updates faster and then update everything all at once.

It's kind of like finalizing all your changes on a blueprint before you go tearing out walls in a building. But all this happens at runtime, and there's a lot of unnecessary work trying to figure out what changed. Million. Even JS takes a more surgical approach by introducing a compiler that can perform static analysis to figure out exactly where the dynamic data is in advance. It creates an edit map to represent the state of the application, which can then determine what has changed with far less computation required.

This approach is inspired by other frameworks like Svelte and Solid, which also rely on a compiler to achieve these surgical DOM updates. And 1,000,000 was also inspired by the prior work of a library called Block DOM. What's also cool about 1,000,000 is that it's only 4 kilobytes and extremely easy to use. All you do is take an existing React component and wrap it inside this block function to create a higher order component, which will block out the virtual DOM and let 1,000,000 magically take over. Basically, after the component is mounted, it makes a reference to the underlying DOM element, then does all the subsequent rendering and change detection on its own.

In addition, it has a built in for which is used to render a list of blocks. Pretty simple, but before you get too excited, the creator of this project admits that it's not a silver bullet. When using Blocks, you need to follow a specific set of rules. And if you break those rules, it'll revert back to React's virtual DOM, and you'll lose all your massive gains. Overall, million.

Js looks like an awesome project, But most importantly, it gives me hope that Gen z is not actually tech illiterate, and might actually one day be able to fix React. This has been the CodeReport. Thanks for watching, and I will see you in the next one.
It is June 10, 2023, and you're watching the Code Report. There's millions of great JavaScript frameworks in the world today, but the most popular choice is still React, even though we have faster alternatives like Solid, Preact, and Quick that also use JSX. One of React's original innovations was the virtual DOM, but Many modern frameworks have moved away from this approach, and Rich Harris, the creator of Svelte, once called it pure overhead. Despite this, React will likely still be used on websites 100 of years after we're all dead. But today, I have some good news. A recent high school graduate named Aidan Bai just improved React's performance by 70% with million JS, which provides a hyper optimized virtual DOM and chains the original virtual DOM to the radiator, where it can't cause any problems. When I first saw this, my initial thought was no way. There's no way a teenager could out render an entire team of top tier engineers at meta, but there are benchmarks to back up these outrageous claims. Like on the gold standard framework benchmark, it ranks way higher even React itself, and even beat Solid JS. And it provides a live demo where you can compare React and 1,000,000 side by side. Now it's important to Now that benchmarks don't really represent real world use cases, and the vast majority of web apps out there will never get to the point where they have rendering issues with a JavaScript framework. However, it's always fun to do some premature over optimization anyway. But if you're a highly experienced React developer, you might be wondering, what is the virtual DOM?
I've never heard of it. Well, to update things in the UI, React makes a lightweight copy of the DOM where it can calculate updates faster and then update everything all at once. It's kind of like finalizing all your changes on a blueprint before you go tearing out walls in a building.
home improvement
But all this happens at runtime, and there's a lot of unnecessary work trying to figure out what changed. Million. Even JS takes a more surgical approach by introducing a compiler that can perform static analysis to figure out exactly where the dynamic data is in advance.
It creates an edit map to represent the state of the application, which can then determine what has changed with far less computation required. This approach is inspired by other frameworks like Svelte and Solid, which also rely on a compiler to achieve these surgical DOM updates. And 1,000,000 was also inspired by the prior work of a library called Block DOM.
programming
What's also cool about 1,000,000 is that it's only 4 kilobytes and extremely easy to use. All you do is take an existing React component and wrap it inside this block function to create a higher order component, which will block out the virtual DOM and let 1,000,000 magically take over. Basically, after the component is mounted, it makes a reference to the underlying DOM element, then does all the subsequent rendering and change detection on its own. In addition, it has a built in for which is used to render a list of blocks. Pretty simple, but before you get too excited, the creator of this project admits that it's not a silver bullet. When using Blocks, you need to follow a specific set of rules. And if you break those rules, it'll revert back to React's virtual DOM, and you'll lose all your massive gains. Overall, million. Js looks like an awesome project, But most importantly, it gives me hope that Gen z is not actually tech illiterate, and might actually one day be able to fix React. This has been the CodeReport. Thanks for watching, and I will see you in the next one.
It is June 10, 2023, and you're watching the Code Report. There's millions of great JavaScript frameworks in the world today, but the most popular choice is still React, even though we have faster alternatives like Solid, Preact, and Quick that also use JSX. One of React's original innovations was the virtual DOM, but Many modern frameworks have moved away from this approach, and Rich Harris, the creator of Svelte, once called it pure overhead. Despite this, React will likely still be used on websites 100 of years after we're all dead. But today, I have some good news. A recent high school graduate named Aidan Bai just improved React's performance by 70% with million JS, which provides a hyper optimized virtual DOM and chains the original virtual DOM to the radiator, where it can't cause any problems. When I first saw this, my initial thought was no way. There's no way a teenager could out render an entire team of top tier engineers at meta, but there are benchmarks to back up these outrageous claims. Like on the gold standard framework benchmark, it ranks way higher even React itself, and even beat Solid JS. And it provides a live demo where you can compare React and 1,000,000 side by side. Now it's important to Now that benchmarks don't really represent real world use cases, and the vast majority of web apps out there will never get to the point where they have rendering issues with a JavaScript framework. However, it's always fun to do some premature over optimization anyway. But if you're a highly experienced React developer, you might be wondering, what is the virtual DOM? I've never heard of it. Well, to update things in the UI, React makes a lightweight copy of the DOM where it can calculate updates faster and then update everything all at once. It's kind of like finalizing all your changes on a blueprint before you go tearing out walls in a building. But all this happens at runtime, and there's a lot of unnecessary work trying to figure out what changed. Million. Even JS takes a more surgical approach by introducing a compiler that can perform static analysis to figure out exactly where the dynamic data is in advance. It creates an edit map to represent the state of the application, which can then determine what has changed with far less computation required. This approach is inspired by other frameworks like Svelte and Solid, which also rely on a compiler to achieve these surgical DOM updates. And 1,000,000 was also inspired by the prior work of a library called Block DOM. What's also cool about 1,000,000 is that it's only 4 kilobytes and extremely easy to use. All you do is take an existing React component and wrap it inside this block function to create a higher order component, which will block out the virtual DOM and let 1,000,000 magically take over. Basically, after the component is mounted, it makes a reference to the underlying DOM element, then does all the subsequent rendering and change detection on its own. In addition, it has a built in for which is used to render a list of blocks. Pretty simple, but before you get too excited, the creator of this project admits that it's not a silver bullet. When using Blocks, you need to follow a specific set of rules. And if you break those rules, it'll revert back to React's virtual DOM, and you'll lose all your massive gains. Overall, million. Js looks like an awesome project, But most importantly, it gives me hope that Gen z is not actually tech illiterate, and might actually one day be able to fix React. This has been the CodeReport. Thanks for watching, and I will see you in the next one.
It
it
is
is
June
june
10,
10
2023,
2023
and
and
you're
you're
watching
watching
the
the
Code
code
Report.
report
There's
there's
millions
millions
of
of
great
great
JavaScript
javascript
frameworks
frameworks
in
in
the
the
world
world
today,
today
but
but
the
the
most
most
popular
popular
choice
choice
is
is
still
still
React,
react
even
even
though
though
we
we
have
have
faster
faster
alternatives
alternatives
like
like
Solid,
solid
Preact,
preact
and
and
Quick
quick
that
that
also
also
use
use
JSX.
jsx
One
one
of
of
React's
react's
original
original
innovations
innovations
was
was
the
the
virtual
virtual
DOM,
dom
but
but
Many
many
modern
modern
frameworks
frameworks
have
have
moved
moved
away
away
from
from
this
this
approach,
approach
and
and
Rich
rich
Harris,
harris
the
the
creator
creator
of
of
Svelte,
svelte
once
once
called
called
it
it
pure
pure
overhead.
overhead
Despite
despite
this,
this
React
react
will
will
likely
likely
still
still
be
be
used
used
on
on
websites
websites
100
100
of
of
years
years
after
after
we're
we're
all
all
dead.
dead
But
but
today,
today
I
i
have
have
some
some
good
good
news.
news
A
a
recent
recent
high
high
school
school
graduate
graduate
named
named
Aidan
aidan
Bai
bai
just
just
improved
improved
React's
react's
performance
performance
by
by
70%
70%
with
with
million
million
JS,
js
which
which
provides
provides
a
a
hyper
hyper
optimized
optimized
virtual
virtual
DOM
dom
and
and
chains
chains
the
the
original
original
virtual
virtual
DOM
dom
to
to
the
the
radiator,
radiator
where
where
it
it
can't
can't
cause
cause
any
any
problems.
problems
When
when
I
i
first
first
saw
saw
this,
this
my
my
initial
initial
thought
thought
was
was
no
no
way.
way
There's
there's
no
no
way
way
a
a
teenager
teenager
could
could
out
out
render
render
an
an
entire
entire
team
team
of
of
top
top
tier
tier
engineers
engineers
at
at
meta,
meta
but
but
there
there
are
are
benchmarks
benchmarks
to
to
back
back
up
up
these
these
outrageous
outrageous
claims.
claims
Like
like
on
on
the
the
gold
gold
standard
standard
framework
framework
benchmark,
benchmark
it
it
ranks
ranks
way
way
higher
higher
even
even
React
react
itself,
itself
and
and
even
even
beat
beat
Solid
solid
JS.
js
And
and
it
it
provides
provides
a
a
live
live
demo
demo
where
where
you
you
can
can
compare
compare
React
react
and
and
1,000,000
1,000,000
side
side
by
by
side.
side
Now
now
it's
it's
important
important
to
to
Now
now
that
that
benchmarks
benchmarks
don't
don't
really
really
represent
represent
real
real
world
world
use
use
cases,
cases
and
and
the
the
vast
vast
majority
majority
of
of
web
web
apps
apps
out
out
there
there
will
will
never
never
get
get
to
to
the
the
point
point
where
where
they
they
have
have
rendering
rendering
issues
issues
with
with
a
a
JavaScript
javascript
framework.
framework
However,
however
it's
it's
always
always
fun
fun
to
to
do
do
some
some
premature
premature
over
over
optimization
optimization
anyway.
anyway
But
but
if
if
you're
you're
a
a
highly
highly
experienced
experienced
React
react
developer,
developer
you
you
might
might
be
be
wondering,
wondering
what
what
is
is
the
the
virtual
virtual
DOM?
dom
I've
i've
never
never
heard
heard
of
of
it.
it
Well,
well
to
to
update
update
things
things
in
in
the
the
UI,
ui
React
react
makes
makes
a
a
lightweight
lightweight
copy
copy
of
of
the
the
DOM
dom
where
where
it
it
can
can
calculate
calculate
updates
updates
faster
faster
and
and
then
then
update
update
everything
everything
all
all
at
at
once.
once
It's
it's
kind
kind
of
of
like
like
finalizing
finalizing
all
all
your
your
changes
changes
on
on
a
a
blueprint
blueprint
before
before
you
you
go
go
tearing
tearing
out
out
walls
walls
in
in
a
a
building.
building
But
but
all
all
this
this
happens
happens
at
at
runtime,
runtime
and
and
there's
there's
a
a
lot
lot
of
of
unnecessary
unnecessary
work
work
trying
trying
to
to
figure
figure
out
out
what
what
changed.
changed
Million.
million
Even
even
JS
js
takes
takes
a
a
more
more
surgical
surgical
approach
approach
by
by
introducing
introducing
a
a
compiler
compiler
that
that
can
can
perform
perform
static
static
analysis
analysis
to
to
figure
figure
out
out
exactly
exactly
where
where
the
the
dynamic
dynamic
data
data
is
is
in
in
advance.
advance
It
it
creates
creates
an
an
edit
edit
map
map
to
to
represent
represent
the
the
state
state
of
of
the
the
application,
application
which
which
can
can
then
then
determine
determine
what
what
has
has
changed
changed
with
with
far
far
less
less
computation
computation
required.
required
This
this
approach
approach
is
is
inspired
inspired
by
by
other
other
frameworks
frameworks
like
like
Svelte
svelte
and
and
Solid,
solid
which
which
also
also
rely
rely
on
on
a
a
compiler
compiler
to
to
achieve
achieve
these
these
surgical
surgical
DOM
dom
updates.
updates
And
and
1,000,000
1,000,000
was
was
also
also
inspired
inspired
by
by
the
the
prior
prior
work
work
of
of
a
a
library
library
called
called
Block
block
DOM.
dom
What's
what's
also
also
cool
cool
about
about
1,000,000
1,000,000
is
is
that
that
it's
it's
only
only
4
4
kilobytes
kilobytes
and
and
extremely
extremely
easy
easy
to
to
use.
use
All
all
you
you
do
do
is
is
take
take
an
an
existing
existing
React
react
component
component
and
and
wrap
wrap
it
it
inside
inside
this
this
block
block
function
function
to
to
create
create
a
a
higher
higher
order
order
component,
component
which
which
will
will
block
block
out
out
the
the
virtual
virtual
DOM
dom
and
and
let
let
1,000,000
1,000,000
magically
magically
take
take
over.
over
Basically,
basically
after
after
the
the
component
component
is
is
mounted,
mounted
it
it
makes
makes
a
a
reference
reference
to
to
the
the
underlying
underlying
DOM
dom
element,
element
then
then
does
does
all
all
the
the
subsequent
subsequent
rendering
rendering
and
and
change
change
detection
detection
on
on
its
its
own.
own
In
in
addition,
addition
it
it
has
has
a
a
built
built
in
in
for
for
which
which
is
is
used
used
to
to
render
render
a
a
list
list
of
of
blocks.
blocks
Pretty
pretty
simple,
simple
but
but
before
before
you
you
get
get
too
too
excited,
excited
the
the
creator
creator
of
of
this
this
project
project
admits
admits
that
that
it's
it's
not
not
a
a
silver
silver
bullet.
bullet
When
when
using
using
Blocks,
blocks
you
you
need
need
to
to
follow
follow
a
a
specific
specific
set
set
of
of
rules.
rules
And
and
if
if
you
you
break
break
those
those
rules,
rules
it'll
it'll
revert
revert
back
back
to
to
React's
react's
virtual
virtual
DOM,
dom
and
and
you'll
you'll
lose
lose
all
all
your
your
massive
massive
gains.
gains
Overall,
overall
million.
million
Js
js
looks
looks
like
like
an
an
awesome
awesome
project,
project
But
but
most
most
importantly,
importantly
it
it
gives
gives
me
me
hope
hope
that
that
Gen
gen
z
z
is
is
not
not
actually
actually
tech
tech
illiterate,
illiterate
and
and
might
might
actually
actually
one
one
day
day
be
be
able
able
to
to
fix
fix
React.
react
This
this
has
has
been
been
the
the
CodeReport.
codereport
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 discusses the popularity of React, including its use in various industries and its use in a variety of programming programming programming apps. They also mention a new high school graduation student who improved React's performance by 70%, and the importance of over optimization in creating a strong foundation for React. The speaker concludes by expressing hope that the new project will not be tech ill luck and allow people to fix React.
High-school student makes React a million times faster
Million.js is a React library that can improve rendering performance by bypassing the virtual DOM. It is inspired by blockdom and other popular JavaScript frameworks like Solid and Svelte

#javascript #programming #thecodereport 

💬 Chat with Me on Discord

https://discord.gg/fireship

🔗 Resources

Million on GitHub https://github.com/aidenybai/million
Million.js Website https://million.dev
Solid in 100 Seconds https://youtu.be/hw3Bx5vxKl0
10 JS Frameworks Compared https://youtu.be/cuHDQhDhvPE


🔥 Get More Content - Upgrade to PRO

Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Million.js basics tutorial
- How to make React faster
- React vs Solid.js
- React vs Svelte
- What is the virtual DOM in react?
- React performance optimization