2024-02-04T05:24:19.073Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
817a27f6-2eda-4dc7-82d0-f2530a7ef2b7
b80320dfa68b764c646b0a72af71abcb720233255ae5e7abf73c24a77575e567
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
It is June 29, 2022, and you're watching the code report.
Well, it's that time of the week again.
A fresh new web framework has been born, and I know exactly what you're thinking.
I can't fucking do this anymore.
I its name is fresh and it's dripping.
Like, literally, the logo is dripping.
But more importantly, it has some awesome features.
It ships 0 Java script to the browser by default has no build step during development and is based on the island's architecture, which I'll explain in detail in just a minute.
Fresh is a full stack framework for server side rendering like Ruby on Rails or Laravel.
But you write your apps in TypeScript because it's built on top of Deno, which if you don't know is a JavaScript run time alternative to Node.
Js.
Deno was created by Ryan Dahl, the same guy who created Node.
Js, because he wasn't totally happy with the way things turned out the first time.
And it's my fault, I And I'm very sorry.
And unfortunately, it's impossible to in undo now.
It is officially pronounced dino and not den know as I messed up in this video, but the benefit of using it for a Web framework is that you get first class TypeScript support out of the box.
In addition, you can build and deploy your up without a build step.
While most JavaScript developers are bragging about increasing build times by 10%, Deno developers just don't even have a a step.
Fresh can be deployed to the edge instantly with Deno Deploy.
The simplicity here is really awesome.
One drawback though is that Deno has a much smaller eco a system when compared to Node.
Js, and not all npm packages are compatible.
The most interesting thing about Fresh though, is that it's based on the island's architecture, which is also known as partial hydration.
The idea is that you build a website using a JavaScript framework.
In this case, Fresh uses Preact for the UI.
But instead of sending JavaScript code to the browser, do render everything to static HTML on the server.
That means by default, the only thing the end user gets is a static HTML page, which it is much faster for the browser to load and render.
In many cases though, a website will need more interactivity than just static HTML, and that's where islands come in.
But first, respect to Jason Miller who's the 1st person to describe the island's architecture and also the creator of the Preact framework and a bunch of other stuff that you're probably using for free right now.
When a website needs more interactivity than static HTML, it can opt into JavaScript on individual activity than static HTML, it can opt into JavaScript on individual components.
The way that works in fresh is that any component kept in the islands agree, we'll also ship JavaScript to the browser.
All other components will be rendered as static HTML.
This may look familiar if you've ever used Astro, which also takes a similar approach.
I but one drawback to be aware of is that every page is server side rendered.
It's not like Next.
Js where the client side router takes over after the initial page load, then renders everything else client I'd say, it can be harder to implement libraries like Firebase authentication because you'll have to move your authentication logic to the server.
In other words, preserving state from one route to the next could get tricky.
It's a lot more like a traditional web app as opposed to a modern single page application.
When building an app with Fresh, I really like the simplicity.
You have routes based on the file system and can easily create strongly typed APIs.
It's also based on web standards like the fetch API which allows it to be deployed to edge functions that produce extremely fast response times anywhere in the world.
Another cool thing worth mentioning is that it uses remix style form submissions.
When submitting a regular HTML form, you can write TypeScript code that will handle that form submission directly in the component file for that page.
Overall, you've got a lot of cool stuff in a very a full package.
Now you can take your side project that's 90% done, throw it in the garbage, and give it a fresh start.
This has been the code report.
Thanks for watching, and I will see you in the next one.

Speaker 0: It is June 29, 2022, and you're watching the code report. Well, it's that time of the week again. A fresh new web framework has been born, and I know exactly what you're thinking. I can't fucking do this anymore. I its name is fresh and it's dripping.

Like, literally, the logo is dripping. But more importantly, it has some awesome features. It ships 0 Java script to the browser by default has no build step during development and is based on the island's architecture, which I'll explain in detail in just a minute. Fresh is a full stack framework for server side rendering like Ruby on Rails or Laravel. But you write your apps in TypeScript because it's built on top of Deno, which if you don't know is a JavaScript run time alternative to Node.

Js. Deno was created by Ryan Dahl, the same guy who created Node. Js, because he wasn't totally happy with the way things turned out the first time. And it's my fault, I And I'm very sorry. And unfortunately, it's impossible to in undo now.

It is officially pronounced dino and not den know as I messed up in this video, but the benefit of using it for a Web framework is that you get first class TypeScript support out of the box. In addition, you can build and deploy your up without a build step. While most JavaScript developers are bragging about increasing build times by 10%, Deno developers just don't even have a a step. Fresh can be deployed to the edge instantly with Deno Deploy. The simplicity here is really awesome.

One drawback though is that Deno has a much smaller eco a system when compared to Node. Js, and not all npm packages are compatible. The most interesting thing about Fresh though, is that it's based on the island's architecture, which is also known as partial hydration. The idea is that you build a website using a JavaScript framework. In this case, Fresh uses Preact for the UI.

But instead of sending JavaScript code to the browser, do render everything to static HTML on the server. That means by default, the only thing the end user gets is a static HTML page, which it is much faster for the browser to load and render. In many cases though, a website will need more interactivity than just static HTML, and that's where islands come in. But first, respect to Jason Miller who's the 1st person to describe the island's architecture and also the creator of the Preact framework and a bunch of other stuff that you're probably using for free right now. When a website needs more interactivity than static HTML, it can opt into JavaScript on individual activity than static HTML, it can opt into JavaScript on individual components.

The way that works in fresh is that any component kept in the islands agree, we'll also ship JavaScript to the browser. All other components will be rendered as static HTML. This may look familiar if you've ever used Astro, which also takes a similar approach. I but one drawback to be aware of is that every page is server side rendered. It's not like Next.

Js where the client side router takes over after the initial page load, then renders everything else client I'd say, it can be harder to implement libraries like Firebase authentication because you'll have to move your authentication logic to the server. In other words, preserving state from one route to the next could get tricky. It's a lot more like a traditional web app as opposed to a modern single page application. When building an app with Fresh, I really like the simplicity. You have routes based on the file system and can easily create strongly typed APIs.

It's also based on web standards like the fetch API which allows it to be deployed to edge functions that produce extremely fast response times anywhere in the world. Another cool thing worth mentioning is that it uses remix style form submissions. When submitting a regular HTML form, you can write TypeScript code that will handle that form submission directly in the component file for that page. Overall, you've got a lot of cool stuff in a very a full package. Now you can take your side project that's 90% done, throw it in the garbage, and give it a fresh start.

This has been the code report. Thanks for watching, and I will see you in the next one.
It is June 29, 2022, and you're watching the code report. Well, it's that time of the week again. A fresh new web framework has been born, and I know exactly what you're thinking. I can't fucking do this anymore. I its name is fresh and it's dripping. Like, literally, the logo is dripping. But more importantly, it has some awesome features. It ships 0 Java script to the browser by default has no build step during development and is based on the island's architecture, which I'll explain in detail in just a minute. Fresh is a full stack framework for server side rendering like Ruby on Rails or Laravel. But you write your apps in TypeScript because it's built on top of Deno, which if you don't know is a JavaScript run time alternative to Node. Js. Deno was created by Ryan Dahl, the same guy who created Node. Js, because he wasn't totally happy with the way things turned out the first time. And it's my fault, I And I'm very sorry. And unfortunately, it's impossible to in undo now. It is officially pronounced dino and not den know as I messed up in this video, but the benefit of using it for a Web framework is that you get first class TypeScript support out of the box. In addition, you can build and deploy your up without a build step. While most JavaScript developers are bragging about increasing build times by 10%, Deno developers just don't even have a a step. Fresh can be deployed to the edge instantly with Deno Deploy. The simplicity here is really awesome. One drawback though is that Deno has a much smaller eco a system when compared to Node. Js, and not all npm packages are compatible. The most interesting thing about Fresh though, is that it's based on the island's architecture, which is also known as partial hydration. The idea is that you build a website using a JavaScript framework. In this case, Fresh uses Preact for the UI. But instead of sending JavaScript code to the browser, do render everything to static HTML on the server.
That means by default, the only thing the end user gets is a static HTML page, which it is much faster for the browser to load and render. In many cases though, a website will need more interactivity than just static HTML, and that's where islands come in. But first, respect to Jason Miller who's the 1st person to describe the island's architecture and also the creator of the Preact framework and a bunch of other stuff that you're probably using for free right now.
websites
architecture
ideologies
internet
When a website needs more interactivity than static HTML, it can opt into JavaScript on individual activity than static HTML, it can opt into JavaScript on individual components. The way that works in fresh is that any component kept in the islands agree, we'll also ship JavaScript to the browser. All other components will be rendered as static HTML. This may look familiar if you've ever used Astro, which also takes a similar approach. I but one drawback to be aware of is that every page is server side rendered. It's not like Next. Js where the client side router takes over after the initial page load, then renders everything else client I'd say, it can be harder to implement libraries like Firebase authentication because you'll have to move your authentication logic to the server. In other words, preserving state from one route to the next could get tricky. It's a lot more like a traditional web app as opposed to a modern single page application.
When building an app with Fresh, I really like the simplicity. You have routes based on the file system and can easily create strongly typed APIs. It's also based on web standards like the fetch API which allows it to be deployed to edge functions that produce extremely fast response times anywhere in the world.
software development
Another cool thing worth mentioning is that it uses remix style form submissions. When submitting a regular HTML form, you can write TypeScript code that will handle that form submission directly in the component file for that page.
Overall, you've got a lot of cool stuff in a very a full package. Now you can take your side project that's 90% done, throw it in the garbage, and give it a fresh start. This has been the code report. Thanks for watching, and I will see you in the next one.
crafts
It is June 29, 2022, and you're watching the code report. Well, it's that time of the week again. A fresh new web framework has been born, and I know exactly what you're thinking. I can't fucking do this anymore. I its name is fresh and it's dripping. Like, literally, the logo is dripping. But more importantly, it has some awesome features. It ships 0 Java script to the browser by default has no build step during development and is based on the island's architecture, which I'll explain in detail in just a minute. Fresh is a full stack framework for server side rendering like Ruby on Rails or Laravel. But you write your apps in TypeScript because it's built on top of Deno, which if you don't know is a JavaScript run time alternative to Node. Js. Deno was created by Ryan Dahl, the same guy who created Node. Js, because he wasn't totally happy with the way things turned out the first time. And it's my fault, I And I'm very sorry. And unfortunately, it's impossible to in undo now. It is officially pronounced dino and not den know as I messed up in this video, but the benefit of using it for a Web framework is that you get first class TypeScript support out of the box. In addition, you can build and deploy your up without a build step. While most JavaScript developers are bragging about increasing build times by 10%, Deno developers just don't even have a a step. Fresh can be deployed to the edge instantly with Deno Deploy. The simplicity here is really awesome. One drawback though is that Deno has a much smaller eco a system when compared to Node. Js, and not all npm packages are compatible. The most interesting thing about Fresh though, is that it's based on the island's architecture, which is also known as partial hydration. The idea is that you build a website using a JavaScript framework. In this case, Fresh uses Preact for the UI. But instead of sending JavaScript code to the browser, do render everything to static HTML on the server. That means by default, the only thing the end user gets is a static HTML page, which it is much faster for the browser to load and render. In many cases though, a website will need more interactivity than just static HTML, and that's where islands come in. But first, respect to Jason Miller who's the 1st person to describe the island's architecture and also the creator of the Preact framework and a bunch of other stuff that you're probably using for free right now. When a website needs more interactivity than static HTML, it can opt into JavaScript on individual activity than static HTML, it can opt into JavaScript on individual components. The way that works in fresh is that any component kept in the islands agree, we'll also ship JavaScript to the browser. All other components will be rendered as static HTML. This may look familiar if you've ever used Astro, which also takes a similar approach. I but one drawback to be aware of is that every page is server side rendered. It's not like Next. Js where the client side router takes over after the initial page load, then renders everything else client I'd say, it can be harder to implement libraries like Firebase authentication because you'll have to move your authentication logic to the server. In other words, preserving state from one route to the next could get tricky. It's a lot more like a traditional web app as opposed to a modern single page application. When building an app with Fresh, I really like the simplicity. You have routes based on the file system and can easily create strongly typed APIs. It's also based on web standards like the fetch API which allows it to be deployed to edge functions that produce extremely fast response times anywhere in the world. Another cool thing worth mentioning is that it uses remix style form submissions. When submitting a regular HTML form, you can write TypeScript code that will handle that form submission directly in the component file for that page. Overall, you've got a lot of cool stuff in a very a full package. Now you can take your side project that's 90% done, throw it in the garbage, and give it a fresh start. This has been the code report. Thanks for watching, and I will see you in the next one.
It
it
is
is
June
june
29,
29
2022,
2022
and
and
you're
you're
watching
watching
the
the
code
code
report.
report
Well,
well
it's
it's
that
that
time
time
of
of
the
the
week
week
again.
again
A
a
fresh
fresh
new
new
web
web
framework
framework
has
has
been
been
born,
born
and
and
I
i
know
know
exactly
exactly
what
what
you're
you're
thinking.
thinking
I
i
can't
can't
fucking
fucking
do
do
this
this
anymore.
anymore
I
i
its
its
name
name
is
is
fresh
fresh
and
and
it's
it's
dripping.
dripping
Like,
like
literally,
literally
the
the
logo
logo
is
is
dripping.
dripping
But
but
more
more
importantly,
importantly
it
it
has
has
some
some
awesome
awesome
features.
features
It
it
ships
ships
0
0
Java
java
script
script
to
to
the
the
browser
browser
by
by
default
default
has
has
no
no
build
build
step
step
during
during
development
development
and
and
is
is
based
based
on
on
the
the
island's
island's
architecture,
architecture
which
which
I'll
i'll
explain
explain
in
in
detail
detail
in
in
just
just
a
a
minute.
minute
Fresh
fresh
is
is
a
a
full
full
stack
stack
framework
framework
for
for
server
server
side
side
rendering
rendering
like
like
Ruby
ruby
on
on
Rails
rails
or
or
Laravel.
laravel
But
but
you
you
write
write
your
your
apps
apps
in
in
TypeScript
typescript
because
because
it's
it's
built
built
on
on
top
top
of
of
Deno,
deno
which
which
if
if
you
you
don't
don't
know
know
is
is
a
a
JavaScript
javascript
run
run
time
time
alternative
alternative
to
to
Node.
node
Js.
js
Deno
deno
was
was
created
created
by
by
Ryan
ryan
Dahl,
dahl
the
the
same
same
guy
guy
who
who
created
created
Node.
node
Js,
js
because
because
he
he
wasn't
wasn't
totally
totally
happy
happy
with
with
the
the
way
way
things
things
turned
turned
out
out
the
the
first
first
time.
time
And
and
it's
it's
my
my
fault,
fault
I
i
And
and
I'm
i'm
very
very
sorry.
sorry
And
and
unfortunately,
unfortunately
it's
it's
impossible
impossible
to
to
in
in
undo
undo
now.
now
It
it
is
is
officially
officially
pronounced
pronounced
dino
dino
and
and
not
not
den
den
know
know
as
as
I
i
messed
messed
up
up
in
in
this
this
video,
video
but
but
the
the
benefit
benefit
of
of
using
using
it
it
for
for
a
a
Web
web
framework
framework
is
is
that
that
you
you
get
get
first
first
class
class
TypeScript
typescript
support
support
out
out
of
of
the
the
box.
box
In
in
addition,
addition
you
you
can
can
build
build
and
and
deploy
deploy
your
your
up
up
without
without
a
a
build
build
step.
step
While
while
most
most
JavaScript
javascript
developers
developers
are
are
bragging
bragging
about
about
increasing
increasing
build
build
times
times
by
by
10%,
10%
Deno
deno
developers
developers
just
just
don't
don't
even
even
have
have
a
a
a
a
step.
step
Fresh
fresh
can
can
be
be
deployed
deployed
to
to
the
the
edge
edge
instantly
instantly
with
with
Deno
deno
Deploy.
deploy
The
the
simplicity
simplicity
here
here
is
is
really
really
awesome.
awesome
One
one
drawback
drawback
though
though
is
is
that
that
Deno
deno
has
has
a
a
much
much
smaller
smaller
eco
eco
a
a
system
system
when
when
compared
compared
to
to
Node.
node
Js,
js
and
and
not
not
all
all
npm
npm
packages
packages
are
are
compatible.
compatible
The
the
most
most
interesting
interesting
thing
thing
about
about
Fresh
fresh
though,
though
is
is
that
that
it's
it's
based
based
on
on
the
the
island's
island's
architecture,
architecture
which
which
is
is
also
also
known
known
as
as
partial
partial
hydration.
hydration
The
the
idea
idea
is
is
that
that
you
you
build
build
a
a
website
website
using
using
a
a
JavaScript
javascript
framework.
framework
In
in
this
this
case,
case
Fresh
fresh
uses
uses
Preact
preact
for
for
the
the
UI.
ui
But
but
instead
instead
of
of
sending
sending
JavaScript
javascript
code
code
to
to
the
the
browser,
browser
do
do
render
render
everything
everything
to
to
static
static
HTML
html
on
on
the
the
server.
server
That
that
means
means
by
by
default,
default
the
the
only
only
thing
thing
the
the
end
end
user
user
gets
gets
is
is
a
a
static
static
HTML
html
page,
page
which
which
it
it
is
is
much
much
faster
faster
for
for
the
the
browser
browser
to
to
load
load
and
and
render.
render
In
in
many
many
cases
cases
though,
though
a
a
website
website
will
will
need
need
more
more
interactivity
interactivity
than
than
just
just
static
static
HTML,
html
and
and
that's
that's
where
where
islands
islands
come
come
in.
in
But
but
first,
first
respect
respect
to
to
Jason
jason
Miller
miller
who's
who's
the
the
1st
1st
person
person
to
to
describe
describe
the
the
island's
island's
architecture
architecture
and
and
also
also
the
the
creator
creator
of
of
the
the
Preact
preact
framework
framework
and
and
a
a
bunch
bunch
of
of
other
other
stuff
stuff
that
that
you're
you're
probably
probably
using
using
for
for
free
free
right
right
now.
now
When
when
a
a
website
website
needs
needs
more
more
interactivity
interactivity
than
than
static
static
HTML,
html
it
it
can
can
opt
opt
into
into
JavaScript
javascript
on
on
individual
individual
activity
activity
than
than
static
static
HTML,
html
it
it
can
can
opt
opt
into
into
JavaScript
javascript
on
on
individual
individual
components.
components
The
the
way
way
that
that
works
works
in
in
fresh
fresh
is
is
that
that
any
any
component
component
kept
kept
in
in
the
the
islands
islands
agree,
agree
we'll
we'll
also
also
ship
ship
JavaScript
javascript
to
to
the
the
browser.
browser
All
all
other
other
components
components
will
will
be
be
rendered
rendered
as
as
static
static
HTML.
html
This
this
may
may
look
look
familiar
familiar
if
if
you've
you've
ever
ever
used
used
Astro,
astro
which
which
also
also
takes
takes
a
a
similar
similar
approach.
approach
I
i
but
but
one
one
drawback
drawback
to
to
be
be
aware
aware
of
of
is
is
that
that
every
every
page
page
is
is
server
server
side
side
rendered.
rendered
It's
it's
not
not
like
like
Next.
next
Js
js
where
where
the
the
client
client
side
side
router
router
takes
takes
over
over
after
after
the
the
initial
initial
page
page
load,
load
then
then
renders
renders
everything
everything
else
else
client
client
I'd
i'd
say,
say
it
it
can
can
be
be
harder
harder
to
to
implement
implement
libraries
libraries
like
like
Firebase
firebase
authentication
authentication
because
because
you'll
you'll
have
have
to
to
move
move
your
your
authentication
authentication
logic
logic
to
to
the
the
server.
server
In
in
other
other
words,
words
preserving
preserving
state
state
from
from
one
one
route
route
to
to
the
the
next
next
could
could
get
get
tricky.
tricky
It's
it's
a
a
lot
lot
more
more
like
like
a
a
traditional
traditional
web
web
app
app
as
as
opposed
opposed
to
to
a
a
modern
modern
single
single
page
page
application.
application
When
when
building
building
an
an
app
app
with
with
Fresh,
fresh
I
i
really
really
like
like
the
the
simplicity.
simplicity
You
you
have
have
routes
routes
based
based
on
on
the
the
file
file
system
system
and
and
can
can
easily
easily
create
create
strongly
strongly
typed
typed
APIs.
apis
It's
it's
also
also
based
based
on
on
web
web
standards
standards
like
like
the
the
fetch
fetch
API
api
which
which
allows
allows
it
it
to
to
be
be
deployed
deployed
to
to
edge
edge
functions
functions
that
that
produce
produce
extremely
extremely
fast
fast
response
response
times
times
anywhere
anywhere
in
in
the
the
world.
world
Another
another
cool
cool
thing
thing
worth
worth
mentioning
mentioning
is
is
that
that
it
it
uses
uses
remix
remix
style
style
form
form
submissions.
submissions
When
when
submitting
submitting
a
a
regular
regular
HTML
html
form,
form
you
you
can
can
write
write
TypeScript
typescript
code
code
that
that
will
will
handle
handle
that
that
form
form
submission
submission
directly
directly
in
in
the
the
component
component
file
file
for
for
that
that
page.
page
Overall,
overall
you've
you've
got
got
a
a
lot
lot
of
of
cool
cool
stuff
stuff
in
in
a
a
very
very
a
a
full
full
package.
package
Now
now
you
you
can
can
take
take
your
your
side
side
project
project
that's
that's
90%
90%
done,
done
throw
throw
it
it
in
in
the
the
garbage,
garbage
and
and
give
give
it
it
a
a
fresh
fresh
start.
start
This
this
has
has
been
been
the
the
code
code
report.
report
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 new web framework, Fresh, which uses the island's architecture and is designed to be a full stack framework for server side rendering. Fresh is a full stack framework for server side rendering, with the ability to build and deploy your app without a build step. The developers are advised to use Pre Act for the UI, which uses Preact for the UI, and the developers are encouraged to use the Pre Act framework for building and deploying your app.
a fresh new web framework is out
Fresh is a fullstack web framework for Deno that allows developers to build fast server-rendered webapps. It uses the "Islands Architecture" to limit JavaScript to specific components and can be deployed to the edge. 

#webdevelopment  #javascript #TheCodeReport

🔗 Resources

Fresh Announcement https://deno.com/blog/fresh-is-stable
Fresh on Github https://github.com/denoland/fresh
Deno in 100 Seconds https://youtu.be/F0G9lZ7gecE

🔥 Get More Content - Upgrade to PRO

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

🎨 My Editor Settings

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

🔖 Topics Covered

- Fresh web framework tutorial
- Web frameworks for demo
- What is islands architecture?
- What is partial hydration?
- Fresh vs Next.js
- Fresh vs Remix