Framework main features - Learn web development | MDN 20.02.
26, 00:50
<figure>
<img src="assets/[Link]" alt="Portrait of Zelda Schiff" />
<figcaption>Zelda Schiff is editor-in-chief of the Library Times.
</figcaption>
</figure>
State
We ta&ked about the concept of state in the previous chapter — a robust state-hand&ing
mechanism is key to an effective framework, and each component may have data that needs its
state contro&&ed. This state wi&& persist in some way as &ong as the component is in use. Like
props, state can be used to affect how a component is rendered.
As an examp&e, consider a button that counts how many times it has been c&icked. This
component shou&d be responsib&e for tracking its own count state, and cou&d be written &ike this:
JSX
function CounterButton() {
const [count] = useState(0);
return <button>Clicked {count} times</button>;
}
useState() is a React hook which, given an initia& data va&ue, wi&& keep track of that va&ue
as it is updated. The code wi&& be initia&&y rendered &ike so in the browser:
HTML
<button>Clicked 0 times</button>
The useState() ca&& keeps track of the count va&ue in a robust way across the app, without
you needing to write code to do that yourse&f.
Events
On order to be interactive, components need ways to respond to browser events, so our
app&ications can respond to our users. Frameworks each provide their own syntax for &istening to
browser events, which reference the names of the equiva&ent native browser events.
[Link] Page 6 of 11
Framework main features - Learn web development | MDN 20.02.26, 00:50
On React, &istening for the click event requires a specia& property, onClick . Let's update our
CounterButton code from above to a&&ow it to count c&icks:
JSX
function CounterButton() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>Clicked {count}
times</button>
);
}
On this version we are using additiona& useState() functiona&ity to create a specia& setCount()
function, which we can invoke to update the va&ue of count . We ca&& this function inside the
onClick event hand&er to set count to whatever its current va&ue is, p&us one.
[Link] components
Each framework offers a way to define sty&es for your components — or for the app&ication as a
who&e. A&though each framework's approach to defining the sty&es of a component is s&ight&y
different, a&& of them give you mu&tip&e ways to do so. With the addition of some he&per modu&es,
you can sty&e your framework apps in Sass or Less , or transpi&e your CSS sty&esheets with
PostCSS .
[Link] dependencies
A&& major frameworks provide mechanisms for hand&ing dependencies — using components
inside other components, sometimes with mu&tip&e hierarchy &eve&s. As with other features, the
exact mechanism wi&& differ between frameworks, but the end resu&t is the same. Components
tend to import components into other components using the standard JavaScript modu&e syntax,
or at &east something simi&ar.
Components in components
One key benefit of component-based UO architecture is that components can be composed
together. Just &ike you can write HTML tags inside each other to bui&d a website, you can use
components inside other components to bui&d a web app&ication. Each framework a&&ows you to
write components that uti&ize (and thus depend on) other components.
[Link] Page 7 of 11
Framework main features - Learn web development | MDN 20.02.26, 00:50
For examp&e, our AuthorCredit React component might be uti&ized inside an Article
component. That means that Article wou&d need to import AuthorCredit .
JS
import AuthorCredit from "./components/AuthorCredit";
Once that's done, AuthorCredit cou&d be used inside the Article component &ike this:
JSX
<Article>
<AuthorCredit />
</Article>
Dependency injection
Rea&-wor&d app&ications can often invo&ve component structures with mu&tip&e &eve&s of nesting.
An AuthorCredit component nested many &eve&s deep might, for some reason, need data from
the very root &eve& of our app&ication.
Let's say that the magazine site we're bui&ding is structured &ike this:
JSX
<App>
<Home>
<Article>
<AuthorCredit {/* props */} />
</Article>
</Home>
</App>
Our App component has data that our AuthorCredit component needs. We cou&d rewrite Home
and Article so that they know to pass props down, but this cou&d get tedious if there are many,
many &eve&s between the origin and destination of our data. Ot's a&so excessive: Home and
Article don't actua&&y make use of the author's portrait or by&ine, but if we want to get that
information into the AuthorCredit , we wi&& need to change Home and Article to
accommodate it.
[Link] Page 8 of 11
Framework main features - Learn web development | MDN 20.02.26, 00:50
The prob&em of passing data through many &ayers of components is ca&&ed prop dri&&ing, and it's
not idea& for &arge app&ications.
To circumvent prop dri&&ing, frameworks provide functiona&ity known as dependency injection,
which is a way to get certain data direct&y to the components that need it, without passing it
through intervening &eve&s. Each framework imp&ements dependency injection under a different
name, and in a different way, but the effect is u&timate&y the same.
Angu&ar ca&&s this process dependency injection ; Vue has provide() and inject()
component methods ; React has a Context APO ; Ember shares state through services .
Lifecyc(e
On the context of a framework, a component's (ifecyc(e is a co&&ection of phases a component
goes through from the time it is appended to the DOM and then rendered by the browser (often
ca&&ed mounting) to the time that it is removed from the DOM (often ca&&ed unmounting). Each
framework names these &ifecyc&e phases different&y, and not a&& give deve&opers access to the
same phases. A&& of the frameworks fo&&ow the same genera& mode&: they a&&ow deve&opers to
perform certain actions when the component mounts, when it renders, when it unmounts, and at
many phases in between these.
The render phase is the most crucia& to understand, because it is repeated the most times as your
user interacts with your app&ication. Ot's run every time the browser needs to render something
new, whether that new information is an addition to what's in the browser, a de&etion, or an edit of
what's there.
This diagram of a React component's &ifecyc&e offers a genera& overview of the concept.
Rendering [Link]
Just as with &ifecyc&es, frameworks take different-but-simi&ar approaches to how they render your
app&ications. A&& of them track the current rendered version of your browser's DOM, and each
makes s&ight&y different decisions about how the DOM shou&d change as components in your
app&ication re-render. Because frameworks make these decisions for you, you typica&&y don't
interact with the DOM yourse&f. This abstraction away from the DOM is more comp&ex and more
memory-intensive than updating the DOM yourse&f, but without it, frameworks cou&d not a&&ow
you to program in the dec&arative way they're known for.
The Virtua( DOM is an approach whereby information about your browser's DOM is stored in
JavaScript memory. Your app&ication updates this copy of the DOM, then compares it to the "rea&"
DOM — the DOM that is actua&&y rendered for your users — in order to decide what to render. The
app&ication bui&ds a "diff" to compare the differences between the updated virtua& DOM and the
current&y rendered DOM, and uses that diff to app&y updates to the rea& DOM. Both React and Vue
uti&ize a virtua& DOM mode&, but they do not app&y the exact same &ogic when diffing or rendering.
[Link] Page 9 of 11
Framework main features - Learn web development | MDN 20.02.26, 00:50
You can read more about the Virtua& DOM in the React docs .
The >ncrementa( DOM is simi&ar to the virtua& DOM in that it bui&ds a DOM diff to decide what to
render, but different in that it doesn't create a comp&ete copy of the DOM in JavaScript memory.
Ot ignores the parts of the DOM that do not need to be changed. Angu&ar is the on&y framework
discussed so far in this modu&e that uses an incrementa& DOM.
You can read more about the Oncrementa& DOM on the Auth_ b&og .
The G(immer VM is unique to Ember. Ot is not a virtua& DOM nor an incrementa& DOM; it is a
separate process through which Ember's temp&ates are transpi&ed into a kind of "byte code" that
is easier and faster to read than JavaScript.
Routing
As mentioned in the previous chapter, routing is an important part of the web experience. To
avoid a broken experience in sufficient&y comp&ex apps with &ots of views, each of the
frameworks covered in this modu&e provides a &ibrary (or more than one &ibrary) that he&ps
deve&opers imp&ement c&ient-side routing in their app&ications.
Testing
A&& app&ications benefit from test coverage that ensures your software continues to behave in the
way that you'd expect, and web app&ications are no different. Each framework's ecosystem
provides too&ing that faci&itates the writing of tests. Testing too&s are not bui&t into the frameworks
themse&ves, but the command-&ine interface too&s used to generate framework apps give you
access to the appropriate testing too&s.
Each framework has extensive too&s in its ecosystem, with capabi&ities for unit and integration
testing a&ike.
Testing Library is a suite of testing uti&ities that has too&s for many JavaScript environments,
inc&uding React, Vue, and Angu&ar. The Ember docs cover the testing of Ember apps .
Here's a quick test for our CounterButton written with the he&p of React Testing Library — it
tests a number of things, such as the button's existence, and whether the button is disp&aying the
correct text after being c&icked _, 1, and 2 times:
JSX
[Link] Page 10 of 11
Framework main features - Learn web development | MDN 20.02.26, 00:50
import { fireEvent, render, screen } from "@testing-library/react";
import CounterButton from "./CounterButton";
it("Renders a semantic button with an initial state of 0", () => {
render(<CounterButton />);
const btn = [Link]("button");
expect(btn).toBeInTheDocument();
expect(btn).toHaveTextContent("Clicked 0 times");
});
it("Increments the count when clicked", () => {
render(<CounterButton />);
const btn = [Link]("button");
[Link](btn);
expect(btn).toHaveTextContent("Clicked 1 times");
[Link](btn);
expect(btn).toHaveTextContent("Clicked 2 times");
});
Summary
At this point you shou&d have more of an idea about the actua& &anguages, features, and too&s
you'&& be using as you create app&ications with frameworks. O'm sure you're enthusiastic to get
going and actua&&y do some coding, and that's what you are going to do next!
Previous Overview: JavaScript frameworks and &ibraries Next
Your b&ueprint for a better internet.
[Link] Page 11 of 11