A study on client-side frameworks (as a beginner) Part II

[8bitzz]

2. Framework main features

Reference: Framework main features

2.1 Domain-specific languages

All frameworks allow developers to use domain-specific languages (DSLs) in order to build web applications. DSLs can't be read by the browser directly; they must be transformed into JavaScript or HTML first using Transformation tools. However, framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. When embracing DSLs, it would be easier to find help from the communities around those frameworks

Example of JSX syntax as the DSL of ReactJS framework

1. The curly braces around subject on line 4 tell the application to read the value of the subject constant and insert it into our h1

   const subject = "World";
   const header = (
   <header>
   <h1>Hello, {subject}!</h1>
   </header>
   );

2. When used with React, the JSX from the previous snippet would be compiled into this:

   var subject = "World";
   var header = React.createElement("header", null,
   React.createElement("h1", null, "Hello, ", subject, "!")
   );

3. When ultimately rendered by the browser, the above snippet will produce HTML that looks like this

   <header>
   <h1>Hello, World!</h1>
   </header>

   2.2 Writing components

   Most frameworks have some kind of component model. Each framework's components offer a way to describe

   • the external properties they may need
   • the internal state that the component should manage
   • and the events a user can trigger on the component's markup

Example of writing a Component with props, states and events using ReactJS framework

Properties

Properties, or props, are external data that a component needs in order to render.

1. Define a representation of the Component with props, given where our props will be inserted into the component

   function AuthorCredit(props) {
   return (
   <figure>
     <img src={props.src} alt={props.alt} />
     <figcaption>{props.byline}</figcaption>
   </figure>
   );
   }

2. Render a specific component (which will probably be inside another component) by giving it their props

   <AuthorCredit
   src="./assets/zelda.png"
   alt="Portrait of Zelda Schiff"
   byline="Zelda Schiff is editor-in-chief of the Library Times."
   />

3. When ultimately rendered by the browser, the above snippet will produce HTML that looks like this

   <figure>
   <img
   src="assets/zelda.png"
   alt="Portrait of Zelda Schiff"
   >
   <figcaption>
   Zelda Schiff is editor-in-chief of the Library Times.
   </figcaption>
   </figure>

State

• A robust state-handling mechanism is key to an effective framework
• Each component may have data that needs its state controlled
• This state will persist in some way as long as the component is in use

1. Use useState Hook to give an initial data value, will keep track of that value as it is updated

   function CounterButton() {
   const [count] = useState(0);
   return (
   <button>Clicked {count} times</button>
   );
   }

2. When ultimately rendered by the browser, the above snippet will produce HTML that looks like this

   <button>Clicked 0 times</button>

Event

• In order to be interactive, components need ways to respond to browser events, so our applications can respond to our users
• Frameworks provide syntax for listening to browser events

1. React listen to the onClick event, then use the useState hook to create the setCount function to update the state count

   function CounterButton() {
   const [count, setCount] = useState(0);
   return (
   <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
   );
   }

2. More info React useState Hook: How does setState know what to do

2.3 Styling components

1. Use an entirely different language and have it transformed into a web-compatible language

   • Sass/SCSS: This CSS extension allows developers to use variables, nested rules, mixins, functions, and many other features, some of which are available in native CSS (such as variables), and some of which aren't.

2. Write code using the latest language features and have that transformed into code that works on everyday devices

   • PostCSS: Transpile the CSS stylesheets. If there isn’t an equivalent way to do something using older CSS features, PostCSS will install a JavaScript polyfill to emulate the CSS effect.

3. Use UI-libraries for frameworks

   • TailwindCSS, Material UI, Chakra UI, etc: Provide ready-to-use components for frameworks

2.4 Handling dependencies

• Handling dependencies <=> using components inside other components
• Components tend to import components into other components using the standard JavaScript module syntax

Dependency injection

import AuthorCredit from "./components/AuthorCredit";

<App>
  <Home>
    <Article>
      <AuthorCredit {/* props */} />
    </Article>
  </Home>
</App>

• Our App component has data that our AuthorCredit component needs --> we need to pass the props down from the App --> Home --> Article in order to use the props in the AuthorCredit. The problem of passing data through many layers of components is called prop drilling
• Frameworks provide functionality known as dependency injection, which is a way to get certain data directly to the components that need it, without passing it through intervening levels.
• ReactJS has ContextAPI, Angular calls this as dependency injection, Vue has provide() and inject() component methods

LifeCycle

• Refer to this blog

2.5 Rendering Elements

Document Object Model (DOM)

• Refer to this blog
• All framework track the current rendered version of the browser's DOM
• Developers typically don't interact with the DOM, but

Virtual DOM