Frontend Frameworks

As my main role, frontend development is a my passion. They can be done using what we call frameworks and with native code (HTML, CSS and Javascript). Those frameworks are dominating market because they can deliver more, and faster. Most of their advantages are componentization, reactivity and the ability fit architectures with ease.

Below I will list each of the frameworks I am proficient with.

REACT AND NEXT.JS

As the main framework nowdays, React is a common choice in industry apps. React.js uses what we call Virtual DOM and populates the whole page based in a JavaScript script (which, unfortunely is a flaw).

Next.js came to fix those flaws. It does something called SSR (Server-Side Rendering) which populates the HTML file directly using the frontend server.

I can develop with both with ease. All code I make is documented and Type-defined using TypeScript and JSDoc. Most of the cases my components will be something like that:

App.d.ts

/**
*Adds one number to the counter
*@param counter - The counter state value
*@param setCounter - The dispatcher to update the counter state
*@returns {void}
   */
const addCounter : (counter: React.State<number>,
                    setCounter: React.setDispatchAction<number>);
/**
*The counter component
*/
const Component : React.FC;

App.tsx

///<reference-path=”./component.d.ts”>
const addCounter = (counter, setCounter) => () => {
     setCounter(counter + 1);
}
/** @type { React.FC } */
const Component = () => { 
     const [counter, setCounter] = React.useState(0);
     return <div>
           {counter}
           <button onClick={addCounter(counter, setCounter)}>
                Add
            </button> 
         </div> }

Angular

Angular is a Google made framework, because of it, it supports many features and has MaterialUI really well-implemented in it. But in most of the time, people tend to create their own UIs to it. It's a well typed framework with many built-in features that makes easier to work with, like easily creating, validating and handling forms without any external tool (opposing React and Svelte in this aspect).

It's well organized in Modules, Directives and Components. This framework can be quite slow to develop because of it's verbosity.

Svelte + Kit

The most favorite one of the community and mine too. Svelte is a minimal, but powerful, framework. It handles complex tasks like reactivity like no other else.

It has built-in listening to changes, events and more using native HTML completely eliminating the Virtual DOM. It also supports SSR for rendering elements from a database.

It is one of the only that can create awesome webapps even with Javascript turned off.

This website is made using SvelteKit. Take a look of how a minimal component looks (compare to the React one):

App.svelte

<script>
  let counter = $state(0);
</script>
<div>
       {counter}     
       <button onclick={counter = counter + 1}>
           Add
       </button>
</div>

Storybook

For me documentation is the most important part of the code. Because someone else will read my code and I think make de DX better is really important.

Storybook is a documentation framework that integrates with many others like React, Svelte and Angular. It also can perform Component Testing inside of it to ensure they work properly.

Considerations

I really hope those frontend skills match your company (or yourself) pleased. Don't hesitate to contact me through any channel (I will answer). We can work together to build great stuff.

`1`	`/**`
`2`	`*Adds one number to the counter`
`3`	`*@param counter - The counter state value`
`4`	`*@param setCounter - The dispatcher to update the counter state`
`5`	`*@returns {void}`
`6`	`*/`
`7`	`const addCounter : (counter: React.State<number>,`
`8`	`setCounter: React.setDispatchAction<number>);`
`9`	`/**`
`10`	`*The counter component`
`11`	`*/`
`12`	`const Component : React.FC;`

`1`	`///<reference-path=”./component.d.ts”>`
`2`	`const addCounter = (counter, setCounter) => () => {`
`3`	`setCounter(counter + 1);`
`4`	`}`
`5`	`/** @type { React.FC } */`
`6`	`const Component = () => {`
`7`	`const [counter, setCounter] = React.useState(0);`
`8`	`return <div>`
`9`	`{counter}`
`10`	`<button onClick={addCounter(counter, setCounter)}>`
`11`	`Add`
`12`	`</button>`
`13`	`</div> }`