Next.js 14

In recent years, the development of web applications has become increasingly complex, requiring more sophisticated approaches to guarantee optimal performance and a seamless user experience. Next.js has emerged as a leading framework for modern web application development, providing a powerful and flexible development environment based on React.

The JavaScript realm is constantly undergoing disruption, driven by the introduction of cutting-edge technologies and the advancement of existing ones. While React’s introduction revolutionized JavaScript frameworks, newer technologies have emerged from the initial disruption.

At the time of this article’s publication, the official React documentation discourages the conventional usage of React and the generation of standard projects using create-react-app, instead recommending several frameworks, including Next.js.

In the forthcoming paragraphs, we will delve into the core features of Next.js, particularly in its latest version, and guide you through the process of creating a project.

What is Next.js?

Next.js stands as a revolutionary React framework that seamlessly blends Client-Side Rendering (CSR) and Server-Side Rendering (SSR) techniques. Led by Vercel, Next.js has gained popularity in the web development community for its user-friendly approach and the robust features it offers. Its comprehensive set of features empowers developers to create high-performance and SEO-friendly web applications with ease.

What are the main features of Next.js?

Server-Side and Client-Side Rendering for Optimal Performance
Next.js’s ability to render pages on both the server and the client side offers a unique advantage. The ability to generate precompiled HTML on the server side ensures ultra-fast initial page loads and improves search engine indexing.

Automatic Routing for Seamless Navigation
Next.js simplifies navigation by employing a file-based routing system. Simply create files named “page” or “route” within the designated folder structure, and the routing is handled automatically.

Hot Module Replacement (HMR) for Enhanced Development Efficiency
Next.js supports HMR, allowing developers to make code changes without refreshing the entire page. This feature significantly expedites the development process.

Built-In Image Optimization for Responsive Content
Next.js built-in image optimization system ensures that images are loaded in the most efficient format and size based on the user’s device and screen resolution, enhancing site performance.

Effortless API Integration for Data Management
Integrating external or internal APIs into a Next.js application is straightforward. This simplifies data management and eliminates the need to maintain a separate server application. Next.js version 14 further simplifies API integration, making it ideal for externalizing functionalities.

Special Pages for Enhanced Routing and Layout

Next.js introduces a unique feature: the automatic detection of files named in a specific pattern. This capability enables developers to efficiently structure their applications and enhance the overall user experience. For instance, Next.js recognizes files named “page.*” as the source for the page component that should be rendered for a specific route.  The “layout.tsx” file, located at the root of the app directory and/or in the pages structure, plays a crucial role in defining a common layout structure that can be applied across multiple pages. Next.js automatically injects the page component into this layout, providing a consistent presentation across the application.

Server and Client Component

Traditional React components, familiar to front-end developers, are known as Client Components. They function identically to their counterparts. NextJs introduces the concept of Server Component which generates an HTML file on the server side before delivering it to the client. This reduces the amount of JavaScript that the browser needs to compile. Now, let’s delve into the home page.

Upon inspection, it’s evident that this component resembles a conventional React component. Indeed, it is! However, there is a hidden distinction: this is a server component. This implies that it  is compiled and rendered on the server side, delivering only the pre-rendered HTML to the client.

This type of component offers  several advantages, including enhanced SEO, increased security due to its placement within a more protected portion of the code, and simplified development. For instance, server components can efficiently fetch data from the database without adhering to the traditional component lifecycle, enabling the utilization of straightforward asynchronous await statements. However, certain functionalities, such as user interactions, cannot be handled on the server side. To address this, Next.js introduces the concept of Partial Rendering, which involves rendering the HTML on the server side while leaving “empty” spaces for specific components designated for client-side management.

As an example, let’s examine the following component:

This component will be rendered as:

This distinction proves beneficial in scenarios like the ShoppingCart component, which requires accessing client-side browser data to retrieve saved items. 

It’s crucial to acknowledge that this approach also presents certain restrictions. For example, functions cannot be passed as props from server components to client components, and client components cannot have server components as their direct descendants. For more in-depth information, refer to the official Next.js Official Documentation.

It’s worth noting that using actions instead of an API system requires more effort than simply adding a callback function to interact with the server. While callbacks are common and straightforward for front-end developers, they can introduce development and security challenges. Actions, on the other hand, introduce additional complexity due to the need to use forms for even basic buttons. 

If you need to send additional information (such as a  slug), actions force you to create a hidden input to send it. Both approaches have their advantages and disadvantages, so the choice  depends on project and development preferences.

Deployment with Vercel

Now that you’ve created your Next.js app, it’s time to put it online for the world to see. Next.js is owned by Vercel, a leading deployment platform that seamlessly integrates with Next.js to make the deployment process even easier. To get started, you’ll need to create a Vercel account. This is a straightforward process that takes just a few minutes.

Once you’ve created your account, you can connect it to your GitHub or GitLab repository to automatically deploy your Next.js app whenever you push changes to your code.

This process can undoubtedly be used to generate one of the pre-designed templates, providing a head start with several components of the project already set up.

The system prompts you to enter the values to use for environment settings and the git branch to use  for deployment (main is the default). Once you provide the final confirmations, the deployment process will start. Any errors encountered will be reported and stored in an appropriate section.  Additionally, if you haven’t modified the default settings, Vercel will automatically trigger a deployment process, significantly expediting the online deployment cycle. By default, Vercel  provides a free domain, but the developer can purchase and replace it with a domain of their preferences. And with that, our dashboard is ready for users, who may inevitably encounter bugs.

Conclusions

We’ve completed the foundational elements of our application; leaving us to decide its content and replicate the steps we’ve covered thus far. While this is a very simple dashboard, it effectively illustrates Next.js’s distinctive features compared to others, particularly React. We’ve witnessed a fully functional structure that’s effortlessly implementable, SEO-compliant, and integrated with robust security measures, all within the framework of React’s flexibility. 

Currently, version 14 is in its early stages,  with frequent enhancements every few months. It’s an ever-evolving realm, vastly different from prior versions. Nonetheless, the advantages are already apparent, particularly the seamless handling of aspects that have long challenged developers.


Main Author: Davide Filippi, Front-End Developer @ Bitrock

Read More
Solid.js

Reactivity has become increasingly popular in recent months, with many frameworks and libraries incorporating it into their core or being heavily influenced by it. Vue.js has reactivity at its core, while idiomatic Angular has adopted RxJS, and MobX has become popular among React developers as an alternative to the common Redux pattern. Reactivity has been one of the leading inspirations behind the original philosophy of React.

However, most libraries still use the VDOM or use some sort of batching process in the background to replicate responsive behavior, even when reactivity is first class.

Solid.js is a reactive library that prioritizes deep, granular reactivity and is designed to offer excellent performance and responsiveness without relying on the VDOM or batching processes. While Solid.js offers a developer experience similar to React, it requires a different approach to component reasoning. Let’s take a close look.

SolidJS in three words: reactive, versatile and powerful

Upon initial inspection, Solid.js code may appear to be similar to React code with a unique syntax. However, the API provided by Solid.js is more versatile and powerful, as it is not limited by the VDOM and instead relies on deep, granular reactivity. In Solid.js, components are primarily used to organize and group code, and there is no concept of rendering. We can explore a simple example:

Our React component is going to re-render endlessly. We render our interface, only to make it immediately stale by calling setValue. Every local state mutation in React triggers a re-rendering as components produce the nodes of VDOM. The process of re-rendering the interface is complex and resource-intensive, even with the use of the VDOM and React’s internal optimizations. While React and Vue.js have implemented techniques to avoid unnecessary work, there are still many complex operations happening in the background.

Solid.js updates the value and that’s it; once the component is mounted, there is no need to run it again. Unlike React, Solid.js will not call the component again. Solid.js doesn’t even care for createSignal to be in the same scope of the component:

In Solid.js, components are referred to as “vanishing” because they are only used to organize the interface into reusable blocks and do not serve any other purpose beyond mounting and dismounting. 

Solid.js provides more flexibility than React when it comes to managing component state. Unlike React, Solid.js does not require adherence to the “rules of hooks”, and instead allows developers to reason around scopes of modules and functions to determine which components access which states. This fine granularity means that only the element displaying the signal’s value needs to be updated; all the operations needed to maintain a VDOM are unnecessary.

Solid.js uses proxies to hide subscriptions within the function that displays the value. This allows elements consuming the signals to become the contexts that are actively called again. In contrast to React, Solid.js functions are similar to constructors that return a render method (like the JSX skeleton), while React functions are more like the render method itself.

Dealing with props

In Solid JS, getters are more than just a value, so to maintain reactivity, props need to be handled in a special way. Using the function deriveProps retains reactivity, while spreading the parameter object breaks it.  This process is more complex than using the spread and rest operators in React.

Note that we aren’t using the parenthesis to call for a getter in the case below:

We can also access the value directly.

 Although the process may seem familiar, the underlying mechanism is completely different. React re-renders the child components when the props change, which can cause a lot of work in the background to reconcile the new virtual DOM with the old. Vue.js  avoids this problem by doing simple comparisons of props, similar to wrapping a functional component inside React’s memo method. Solid.js propagates down the hierarchy of the signals, and only the elements that consume the signal are run again.

Side effects

Side effects are a common concept in functional programming that occur when a function relies on or modifies something outside its parameters. Examples of side effects include subscribing to events, calling APIs, and performing expensive computations that involve external state. In Solid.js, effects are similar to elements and subscribe to reactive values. The use of a getter simplifies the syntax compared to React.

In React, the useEffect hook is used to handle side effects. When using useEffect, a function that performs the work is passed as an argument, along with an optional array of dependencies that might change. React does a shallow comparison of the values in the array and runs the effect again if any of them change.

When using React, it can be frustrating to pass all values as props or states to avoid issues with the shallow comparison that React does. Passing an object is not a good solution because it may reference an anonymous object that is different at each render, causing the effect to run again. Solutions to this problem involve declaring multiple objects or being more literal, which adds complexity.

 In Solid.js, effects run on any signal mutation. The reference to the signal is also the dependence.

Just like React, the effect will be run again when the values change without declaring an array of dependencies or any comparison in the background. This saves time and work, while avoiding bugs related to dependencies. However, it is still possible to create an infinite loop by mutating the signal that the effect is subscribed to, so it should be avoided.

createEffect is to be thought of as the Solid.js equivalent of subscribing to observables in RxJS, in which we’re listening to all “consumed” observables – our signals – at the same time.React users may be familiar with how useEffect replaces componentDidMount, componentWillUnmount, and componentDidUpdate. Solid.js provides dedicated hooks for handling components: onMount and onCleanup. These hooks run whenever the component returns first or gets booted off the DOM, respectively. Their purpose in Solid.js is more explicit than using useEffect in React.

Handling slice of applications

In complex applications, using useState and useEffect hooks may not be enough. Passing down many variables between components, calling methods down deep, and keeping various elements in sync with each other can be challenging.  The shopping cart, language selector, user login, and themes are just a few examples of the many applications that require some sort of slice of state.

In React, there are various techniques available to handle complex applications. One approach is to use a context to allow descendant components to access a shared state. However, to avoid unnecessary re-renders, it is important to memoize and select the specific data needed. React provides native methods like useReducer and memoization techniques such as useMemo or wrapping components in  React.memo to optimize rendering and avoid unnecessary re-renders. 

Alternatively, many developers opt to define their Redux store and each of the slices. As Redux has evolved, modern Redux has become much easier to work with compared to its early days. Developers now have the option to use hooks and constructor functions, which handle concerns in a declarative manner. This eliminates the need to define constants, action creators, and other related elements in separate files for each slice.

Solid.js provides support for various state management libraries, and offers several  methods to implement different patterns. One useful method is the ability to wrap requests using resources.

Unlike React state hooks that hook into the virtual DOM, Solid.js signals are independent units that allow developers to write idiomatic JavaScript. This enables scoping signals in other modules and restricting access through methods, effectively turning signals into private singletons.

Hence, modules can act as slices of state, exporting public methods to interact with the data without the use of any external library. By declaring signals in a module scope, they can expose publicly available interfaces to shared state in all components. If signals were declared in components instead, they would be scoped to the function context, similar to the behavior of useState in React.

Furthermore, in Solid.js, API calls can be easily handled using the createResource method. This method allows developers to fetch data from an API and check the request status in a standardized manner. This function is similar to the createSignal method in Solid.js, which creates a signal that tracks a single value and can change over time, and the popular useQuery library for React.

While it may work to handle signals as different getters, at some point, it will be necessary to deal with complex, deep objects, mutating values at different levels, accessing granular slices, and in general operating over objects and arrays. The solid-js/store module provides a set of utilities for creating a store, which is a tree of signals to be accessed and mutated individually in a fully reactive manner. This is an alternative to stores in other libraries such as Redux or Pinia in Vue.js.

To set data in a Solid.js store, we can use the set method, which is similar to signals. The set method has two modes: we can pass an object that will be merged with the existing state, or pass a number of arguments that will explore our store down to the property or object that will be mutated.

For instance, let’s suppose that we have the store shown below:

We can set the user’s age to 35 by passing an object with the properties we want to update, along with a path that specifies where in the state tree to apply the update:

This will update the age property of the user object in the state tree. Furthermore, we can update the store object by passing an object that will be merged into the current one.

If we were to omit the user attribute as first parameter, we would replace the user object entirely:

Since the store is a tree of signals, which is itself a proxy, we can access the values directly using the dot syntax. Mutating a single value will cause the element to render again, just like subscribing to a signal value.

Store utilities

We have two useful methods to update our state. If we’re used to mutating a Redux store using the immer library, we can mutate the values in place using a similar syntax with the produce method:

The produce method returns a draft version of the original object, which is a new object, and any changes made to the draft object are tracked similarly to using immer. We can also pass a reconcile function call to setState. This is particularly useful when we want to match elements in the array based on a unique identifier, rather than simply overriding the entire array. For instance, we can update a specific object based on its id property by passing a reconcile function that matches the object with the same id:

This will update the object in the array with the same id, or add it to the end of the array if no matching object is found.

We can group multiple state updates together into a single transaction using the transaction utility method. This can be useful when we need to make multiple updates to the state atomically, such as when updating multiple properties of an object:

This will update the name and age properties of the user object in a single transaction, ensuring that any subscribers to the state will only receive a single notification of the change, rather than one for each update.

RxJS interoperability

We can easily work with both SolidJs and RxJS, another popular reactive library by using a couple of adapter functions. The reduce method we just talked about is shown as an example for subscriptions, similar to how services are handled in Angular.

From RxJS into Solid.js

We can turn any producer that exposes a subscribe method into a signal:

This directly handles subscription and cleaning up when the signal is dropped. We can define our signal by passing a function to track the value, and how to clean up. The set method emits the value to the contexts that are listening.

Turning our signals into observables

We can turn our signal into an Observable that exposes a subscription method, allowing it to act like a native RxJS observable.

Next, by utilizing the form method provided by  RxJS, we can transform our signal into a fully-fledged RxJS observable.

A Solid.js choice

Although it is relatively new, Solid.js has gained popularity among developers due to its unique features and exceptional performance. Compared to React, Solid.js provides useful tools out of the box and is as performant as frameworks like Svelte without the need for compilers. It is particularly suited for interfaces that require many updates to the DOM and is consistently fast even in complex applications handling real-time updates.

Solid.js offers a developer experience similar to React, but with cleaner methods and more choices.The library handles many different patterns and provides more transparency in code thanks to how scopes work natively in JavaScript. Unlike using hooks in React, there are no hidden behaviors when creating signals in Solid.js.

Using Solid.js with TypeScript solves many of the struggles developers face with complex applications made with React or Vue.js, reducing the time to market and time spent debugging issues with the VDOM. We would recommend it for any new project starting today.

Author: Federico Muzzo, Senior Front End Developer @ Bitrock

Read More
Bitrock&SheTech React Bootcamp

Last week we organized the first coding Bootcamp in collaboration with SheTech, after the strategic partnership signed in May 2021 with the common goal of bridging the gender gap in STEM and supporting women in the world of technology, entrepreneurship and digital.

More specifically, with this event we wanted to offer a real opportunity to bring girls and women from the digital and technology world closer to the world of programming, and fill the skills mismatch. As the recent Women’s Forum barometer on gender equity showed, indeed, women still play a secondary role in STEM, especially in the tech industry: in G7 Countries, the female presence in Data & AI is around 31%, while in Engineering only 19%.

After an initial briefing on the front-end scenario and Bitrock’s value proposition for Front-end Engineering, the bootcamp entered the battle zone. The participants split up in four different groups, each of one supervised by a Mentor, to start working on concrete exercises based on React Js.

What did we learn?

  • React.Js is not a framework, but a JavaScript library. Although most professionals define it as a JavaScript framework, the Reach website says otherwise: React.Js is a JavaScript library with attributes of a framework. It’s more tilted towards building interfaces than being a framework.
  • It’s the leading Front-End tool. It’s beyond being just one of the most fascinating development tools to learn. React.Js has climbed above Vue.js and Angular as the most in-demand front end development tool.
  • It has a thriving community of users. Many developers have a true love for the tool, which has transformed into close-knitted communities of loyal users. This explains why it is possible to find plenty of React.Js resources everywhere, from YouTube to GitHub.
  • React.Js allows for immutability. Every component built with React Js has two ways of working with data. This means you can build both stateless and stateful components; the choice lies in what you are aiming to achieve with the components.

The event turned out to be a great opportunity to network and meet new people with a strong passion for technology. The questions were numerous, all answered by Bitrock and SheTech Mentors through concrete examples, use-cases and in-depth explanations.
After almost five hours of programming, the event concluded with an interesting Q&A and follow-up session, characterized by an open discussion on all touched points and topics. The general feedback that came from the participants was enthusiastic – many proposals arose for other future events, continuing exploring the world of Front-end and User Experience Engineering with workshops and labs.

Keep reading our Blog and follow us on our social media channels to discover all future events in partnership with SheTech.

If you want to access the bootcamp presentation deck and workshop material, send an email to info@bitrock.it
To find out more about Bitrock’s mission to bridge the gender gap in STEM, tech and digital, and promote a workplace culture based on inclusion and gender equality, please visit https://bitrock.it/blog/equality-in-stem.html

Read More
getting Started with React Push-based Architecture

Getting Started with React Push-based Architecture

When approaching the React world, using Redux or MobX as state management is almost automatic. Or, in any case, the libraries change, but the basic architecture doesn’t: it is always something similar to the Redux Pattern with reducers, actions, selector, middleware, etc.

But is there the possibility of using a different architecture? Something with RxJs as with Angular? By doing some research, it seems so. Let’s see more in detail what we are talking about.

First of all, we need to think outside the classic pull-based pattern and move to something new for those coming from the React world: a push-based architecture.

With data-push architectures, view components simply react to asynchronous data change notifications and render the current data values.

The library that allows us to manage the store in this way is Akita:

“Akita is a state management pattern, built on top of RxJS, which takes the idea of multiple data stores from Flux and the immutable updates from Redux, along with the concept of streaming data, to create the Observable Data Stores model.

So basically, Akita enables us to easily build reactive, asynchronous, data-push solutions for our state management needs.

Another important concept to add is the one related to the Facades. Facades are a programming pattern in which a simpler public interface is provided to mask a composition of internal, more-complex, component usages.

In order to build our application, we rely on RxJS and React Hooks; nothing else is needed.

Let’s now consider a very simple example built on the ideas found in some articles.

In our case we need to have a list of users and to be able to interface through the classic CRUD functions.

Starting from the well-known create-react-app with the addition of TypeScript, we create a folder that will contain our entities; in this case, it will only have a "user" folder as a child.

Inside, we define a simple interface of our "user" entity in the model.ts file:

Let’s now start by initializing the store of our entity, creating a "UsersState" interface and then creating a "UsersStore" store by extending the Akita store, and finally exporting it:

At this point, we can create services to manipulate the store, also relying on the methods that an Akita store provides.

This is where we can use all our knowledge of RxJS in order to be able to create more complex flows to act on the store.

Finally, through the "QueryEntity", we can take the whole store – or just a filtered part – and channel it into an observable stream of RxJS.

Last but not least, the creation of a custom Hooks that will internally manage all issues regarding RxJS, Facades, and Akita.

First, we map and expose the services of our "userService", in this case all.Then, we create the internal state of our custom hook. Finally, we need to build the selectors for \users\ and \active\ state changes and manage subscriptions with auto-cleanup.

Now our user entity should have everything needed. We import our custom Hooks, and that’s it.

To play a little bit, let’s divide the application into several components in order to test it. The result? Well, it works!

And here’s the child component:

Here’s how the application works in the browser:

Conclusions

Although this example is quite simple, the outcomes are pretty surprising. It was really easy – and also quite logical – to connect all the pieces to compose the state management and, as we have seen, no configurations (of any kind) were needed.

For those approaching an architecture like this for the first time, the greatest difficulty is certainly represented by RxJS. To write simple services or queries, it may be enough to know the basics of RxJS; however, in case of large applications with complex services, a good knowledge of technology makes a huge (positive difference), really giving an edge. Furthermore, you need to be very careful where and how you use all the various facades in your application. Being in a push pattern, any change of state triggers the React lifecycle in every component that uses our hooks; watching and controlling performance is thus very important.

Obviously, this is just the beginning: there is a world of things to say about Akita, RxJS, push-patterns etc, and it would take much more than one simple article to explore all of them.

The aim of this contribution was to give you just a little idea of this "new" architecture for state management with React. I hope I’ve hit the target.


Author: Mattia Ripamonti, UX/UI Engineer @Bitrock


Useful Resources:

1 – React Facade Best Practices

2 – React Hooks RxJs Facades

3 – Push Based Architectures with RxJs

4 – Managing State in React with Akita

Read More
React Bandersnatch Experiment

React Bandersnatch Experiment

Getting Close to a Real Framework

Huge success for Claudia Bressi (Bitrock Frontend developer) at Byteconf React 2020, the annual online conference with the best React speakers and teachers in the world.

During the event, Claudia had the opportunity to talk about her experiment called “React Bandersnatch” (the name coming from one of the episodes of Black Mirror tv series, where freedom is represented as a sort of well-designed illusion).

Goal of this contribution is to give anyone that could not join the virtual event the chance to delve into her experiment and main findings, which represent a high-value contribution for the whole front-end community.

Here’s Claudia words, describing the project in detail.

(Claudia): The project starts with one simple idea: what if React was a framework, instead of a library to build user interfaces?
For this project, I built some real applications using different packages that are normally available inside a typical frontend framework. I measured a few major web application metrics and then compared the achieved results.

The experiment’s core was the concept of framework, i.e. a platform where it is possible to find ready components and tools that can be used to design a user interface, without the need to search for external dependencies.
Thanks to frameworks, you just need to add a proper configuration code and then you’re immediately ready to go and code whatever you want to implement. Developers often go for a framework because it’s so comfortable to have something ready and nothing to choose.

Moving on to a strict comparison with libraries, frameworks are more opinionated: they can give you rules to follow in your code, and they can solve for you the order of things to be executed behind the scenes. This is the case of lazy loading when dealing with modules in a big enterprise web application.
On the other hand, libraries are more minimalistic: they give you only the necessary to build applications. But, at the same time, you have more control and freedom to choose whatever package in the world.

However, this can lead sometimes to bad code: it is thus important to be careful and follow all best practices when using libraries.


The Project

As initial step of my project, I built a very simple web application in React in order to implement a weekly planner. This consisted of one component showing the week, another one showing the details of a specific day, and a few buttons to update the UI, for instance for adding events and meetings.

I used React (the latest available release) and Typescript (in a version that finally let users employ the optional chaining). In order to style the application, I used only .scss files, so I included a Sass compiler (btw, while writing the components, I styled them using the CSS modules syntax).

Then I defined a precise set of metrics, in order to be able to measure the experimental framework. More specifically:

  • bundle size (measured in kilobytes, to understand how much weight could be reached with each build) ;
  • loading time (the amount of time needed to load the HTML code in the application);
  • scripting time (the actual time needed to load the Javascript files);
  • render time (the time needed to render the stylesheets inside the browser);
  • painting time (the time for handling media files, such as images or videos)

The packages used for this experiment can be considered as the ingredients of the project. I tried to choose both well-known tools among the React scenario and some packages that are maybe less famous, but which have some features that can improve the overall performance on medium-size projects.

The first implementation can be considered as a classic way to solve a project in React. An implementation based on Redux for the state management, and on Thunk as Middleware solution. I used also the well-known React router and, last but not least, the popular Material UI to have some ready-to-use UI components.
The second application can be considered more sophisticated: it was actually made of Redux, combined with the Redux-observable package for handling the middleware part. As for the ROUTER, I applied a custom ROUTER solution, in order to let me play more with React hooks. As icing on the cake, I took the Ant library, in order to build up some UI components.

As for the third application, I blended together the MobX state manager with my previous hook-based custom router, while for the UI part I used the Ant library.
Finally, for the fourth experimental application, I created a rather simple solution with MobX, my hook-based custom router (again) and Material UI to complete the overall framework.


Main Findings

Analyzing these four implementations, what I found out is that, as State manager, Redux has a cleaner and better organized structure due to its functional paradigm. Another benefit is the immutable store that prevents any possible inconsistency when data is updated.

On the other hand, MobX allows multiple stores: this can be particularly useful if you need to reuse some data (let’s say the business logic part of your store), in a different – but similar –application with a shareable logic.
Another advantage of MobX is the benefit of having a reactive paradigm that takes care of the data updates, so that you can skip any middleware dependency.

Talking about routing, a built-in solution (such as the react-router-dom package) is pretty easy and smooth to apply in order to set-up all the routes we need within the application. A custom solution, however, such as our hooks-based router solution, let us keep our final bundle lighter than a classic dancer.

Moving on to the UI side of the framework, we can say that Material is a widespread web styling paradigm: its rules are easy to apply and the result is clean, tidy and minimalistic.
However, from my personal point of view, it is not so ‘elegant’ to pollute Javascript code with CSS syntax – this is why I preferred to keep things separated. I then searched for another UI library and I found Ant, which is written in Typescript with predictable static types – a real benefit for my applications. However, in the end, we can say that MaterialUI is lighter than Ant.
Anyway, both packages allow you to import only the necessaries components you need for your project. So, in the end, it is a simple matter of taste which library to use for the UI components (anyway: if you’re looking more at performance, then go for Material!)


Comparing the Results

As final step, I compared the achieved results for each of the above-mentioned metrics.
From the collected results, it’s quite significant that the most performant application is built with the lighter bundle size and, in particular, when using Redux coupled with Thunk; MaterialUI for the UI components and our custom router, then the resulting application has a smaller output artifact and optimized values for loading, scripting and render times.

To cut a long story short, the winner of this experiment is application no. 4.

However, for bigger projects the results may vary.


Ideal Plugins

Frameworks, sometimes, offer useful auxiliary built-in plugins, such as the CLI to easily use some commands or automate repetitive tasks – which can in turn improve developers’ life. That’s why some of my preferred tools available for React (which I would include in a React ideal framework scenario) are:

  • the famous React and Redux extensions for Chrome: I found these essentials and useful as the ruler for an architect;
  • the ‘eslint-plugin’ specifically written for React, which makes it easier to be consistent to the rules you want to keep in your code;

– Prettier, another must-have react plugin if you use VS Code, which helps a lot in getting a better formatted code;

– React Sign, a Chrome extension that helps you show a graph and represent the overall structure in order to analyze your components;

– last but not least, the popular React extension pack that you can find as VS code extension, which offers lots of developer automated actions, such as hundreds of code snippets, Intellisense and the option of file search within node modules.


If you want to listen to Claudia’s full speech during the event, click here and access the official video recording available on YouTube.

Read More
Byteconf React 2020

Byteconf React 2020

Byteconf React is a 100% free conference with the best React speakers and teachers in the world.

The first edition was launched by Bytesized Code (whose mission is to innovate developer education online) in March of 2018. The conference, which represented a great resource for React developers of all experience levels, was streamed online on Twitch to over 900 people across the world.

Since then, the event has proved to be increasingly successful and highly appreciated by the audience, thanks to its ability to make the global dev community a small village and provide an awesome experience to everyone, in every corner of the world.

Bitrock was present during this year’s edition thanks to Claudia Bressi, brilliant Frontend Developer belonging to our Team, who was one of the official Speakers presenting her React Bandersnatch experiment project.

A great spotlight for Claudia and a source of pride for our whole frontend Team, whose expertise could be shared on one of the major stages for the global dev community.

The conference was streamed on YouTube, for free, so anyone and everyone could attend.

If you want to listen to Claudia’s speech again, simply click here: https://www.youtube.com/watch?v=hCURSlsjnoA

Read More