Now Reading
Constructing a Frontend Framework; Reactivity and Composability With Zero Dependencies

Constructing a Frontend Framework; Reactivity and Composability With Zero Dependencies

2023-05-14 07:26:36

<br /> Constructing a Frontend Framework; Reactivity and Composability With Zero<br /> Dependencies<br />

Earlier than I begin—to set some context—by frontend framework what I imply is, a
framework that enables us to keep away from having to put in writing common
outdated HTML and JavaScript resembling this:




Proxy Objects

Proxy permits us to create a proxy object from a
common object:

setter, I’ll let you know the deal:

  • The proxy technique is generalized, and handlers may be reused, which suggests
  • Any worth you set on a proxied object may be recursively
    transformed right into a proxy, which implies that…
  • You now have this magical object with the power to react to
    information updates irrespective of how nested it’s.

Aside from this you possibly can
a number of different entry occasions resembling when a property is
deleted, and so on.

Now that we have now the power to hearken to hearken to operations, we have to
react to them in a significant approach.

Updating the UI

In case you recall, The second a part of reactivity was
replace the UI mechanically. For this we have to fetch the
acceptable UI component to be up to date. However earlier than that that we
must first mark a UI component as acceptable.

To do that we’ll use
data-attributes, a characteristic that enables us to set arbitrary values on a component:

Web Components, who knew!

Few use it trigger it’s a little bit of a ache within the ass to make use of (and in addition as a result of
most attain out for the standard frameworks as a default when beginning a
challenge, no matter the scope).

For composability we first must outline the parts.

Defining parts utilizing template and slot

The <template> tags are used to include markup which is
not rendered by the browser. As an illustration, you possibly can add the next
markup in your HTML:


range input, or a
video element.

The shadow DOM of a component is hidden by default which is why we will’t
see it within the dev console, however right here’re we’re setting the
mode to 'open'.

This enables us to examine component and see that the purple coloured h1 is
hooked up to the

Calling customElements.outline will permit us to make use of the
outlined element like a daily HTML component.

template syntax
in Vue, and
in React that makes writing complicated frontends comparatively extra concise that
it in any other case could be.

Since this specialised syntax is just not common JavaScript or HTML, it’s not
parsable by a browser and they also all want specialised instruments to compile
them right down to common JavaScript, HTML, and CSS earlier than the browser can
perceive them. And so,
no body writes JavaScript any more.

Even with out specialised syntax, you are able to do loads of what the standard
frontend framework does—with related conciseness—simply through the use of
Proxy and WebComponents.

The code right here is an over simplification and to transform it right into a framework
you’d need to flesh it out. Right here’s my try at doing simply that: a
framework known as

As I develop this, I plan on sustaining two onerous constraints:

  1. No dependencies.
  2. No build-step earlier than it may be used.

And a gentle constraint of holding the code base tiny. On the time of
writing it’s only a
single file
with fewer than 400
CLOC, let’s see the place it goes. ✌️

Source Link

What's Your Reaction?
In Love
Not Sure
View Comments (0)

Leave a Reply

Your email address will not be published.

2022 Blinking Robots.
WordPress by Doejo

Scroll To Top