**Z**ero allows you to build applications without having to worry about package management, configuration, or routing. Now, you can write your code in the fusion of multiple languages with zero configuration.




In this blog, I’m going to give you a quick go-through about the Zero server so that you can consider using it in your next project -




## What is Zero Server?



Zero is a unique web framework that bundles applications and simplifies modern **_[web development](https://www.habilelabs.io/web-development)_**. It can support multiple languages in a single project including React.js, Node.js, [Vue.js](https://zeroserver.io/docs/vue), Svelte, [HTML](https://zeroserver.io/docs/html), [Markdown](https://zeroserver.io/docs/mdx), and [Python](https://zeroserver.io/docs/python) so you can write your application code in the hybrid of all these languages.

### Key Features -



Zero facilitates automatic bundling of the code and supports server-side rendering along with many other features, such as -



- Auto Configuration and Dependency Resolution
- Built-in File System
- API Routing
- Automatic Code Splitting
- Multiple Languages Support
- Supports SSR (Server-side Rendering) and SSG
- Better Error Handling



## How Zero Server Works??


Zero was designed to be flexible so that it can support multiple languages and frameworks. It runs each page using handlers, it works just like microservices but locally.



Zero uses file extensions to differentiate between Node.js and React.js frameworks. While react components must use .jsx extension, Node APIs use .js extension. It builds each page, when needed, which is why its load time is longer when you first visit the page. While [running Zero in the production environment](https://zeroserver.io/docs/security#running-in-production-mode), you need to build your pages through _zero build_ command.



👉 [**File-system Based Routing:**](https://zeroserver.io/docs/routing#file-system-based-routing) Routing in Zero applications is based upon the file structure. If your node.js function resides in _./api/login.js_, it will point at _http://<SERVER>/api/login_ and likewise, if your React page is put as _./about.jsx_ and will point at _http://<SERVER>/about_.



👉 **Auto-Configuration:** You don’t need config filed for your project folder as it automatically gets compiled, bundled, and served. You just have to place your code.



👉 **Zero Server API Routes:** You can easily create API routes with Zero by creating an API endpoint in Node.js.



👉 [**Mix and Match languages:**](https://zeroserver.io/docs/#supported-languages) You can mix multiple languages inside a single project. Consider this -



- Exposing Tensorflow model as a python API
- Writing the user login code in Node.js
- Using React pages to consume it
- Your landing pages in a mix of HTML or Markdown/MDX

👉 **Auto Dependency Resolution:** If a file does _require(‘underscore’),_ it gets automatically configured from NPM and resolved. You can even create your own _package.json_ file to install a specific version of a dependency or package.



#### For example -


```
{
  "name": "myapp",
  "dependencies": {
    "underscore": "^1.4.0",
    "private_ui_pkg": "git+https://github.com/user/repo.git"
  }
}
```

👉 [**Dynamic Routing:**](https://zeroserver.io/docs/routing#dynamic-routes-pretty-url-slugs) Zero supports dynamic routing and any file/folder starting with the dollar sign ‘$’ is considered a dynamic route.



👉 [**Proxy Routing:**](https://zeroserver.io/docs/proxy) Zero enables you to proxy routes to any other server and creates a JSON file with the url key with the URL of the server where we’re going to proxy route to.


## Getting Started with Zero Server -



To get started with Zero, you will need the basic knowledge of **_[Node.js](https://www.habilelabs.io/blog/best-practice-for-node-js-folder-structure)_** and **_[React.js](https://www.habilelabs.io/blog/important-lessons-i-have-learned-while-working-with-react-js)_**. Also, you need to install Node v8+ on your device. Also, some knowledge of HTML/CSS would be beneficial.



You can install _zero_ via npm, as -

Now, move ahead and get ready to see the demo where we’ll get a glimpse of what makes Zero special. You need to create a new folder and define a file named _time.js_ inside it. Also, export Request and Response objects and import _moment.js_ inside this file.


```
// time.js
const moment = require("moment");
module.exports = (req, res) => {
  var time = moment().format("LT"); // 11:51 AM
  res.send({ time: time });
};
```

Your API endpoint is ready. Now, run the following command to start the server like this -

When you run the server, zero auto-installs all dependencies like moment.js and makes it available for you to use in the time.js file.



As you can see above, you implemented an API without configuring any routes or installing libraries, zero does all this behind the scenes and reduces a significant amount of workload.



Once you get the API running, we’ll see how to consume it using React.js at the frontend. All you have to do is to create a new _index.jsx_ file and insert the following code in here -


```
// index.jsx
import React from "react";
export default class extends React.Component {
  static async getInitialProps() {
    var json = await fetch("/time").then(resp => resp.json());
    return { time: json.time };
  }
  render() {
    return <p>Current time is: {this.props.time}</p>;
  }
}
```

Here, we initialized the standard React Component with one additional hook getIntitialProps() for the initial data population. Being an async static method, Zero calls getInitialProps when the page loads as it returns a plain object which populates props.



## Closure:



Being as wonderful and unique a framework as it is, Zero has the potential to simplify the process of web development and even make it a fun experience.



Don’t forget to check out the [official documentation](https://zeroserver.io/) to learn more about Zero Server.



Thanks for reading!

Zero Server — Build Web Applications with Zero Configuration

medium_zero-server-build-web-applications-with-zero-configuration.jpg

small_zero-server-build-web-applications-with-zero-configuration.jpg

thumbnail_zero-server-build-web-applications-with-zero-configuration.jpg

**F**or so many years, Angular didn’t have any static site generator. But finally, here it is - Scully.




What exactly is a static site generator? What does it do?



A static site generator is an alternative to CMS and builds static sites to create blog posts.



Scully is an amazing static site generator built for angular projects by Aaron Frost of HeroDevs. It uses Chromium so you would have the need for its installation and execution.



It analyzes the route structure of the compiled angular application and generates a static version of each page. It seems a bit complex at first but when you come to understand it, it’s as easy as a piece of cake.



_“Scully gives developers the necessary tools to JAMstackify any Angular project, including fine-grained control where needed.”_

In this blog, we’re going to learn a few basic things about Scully and how it works. Then, let’s move forward-



## Key Features of Scully :



Among the most popular JavaScript frameworks, Angular was the only one lacking a static site generator. For instance, React.js and Vue have a lot of SSGs but angular didn’t have any.



Scully is quite similar to **_[Gatsby](https://habilelabs.io/blog/gatsby-a-blazing-fast-static-site-generator)_** (React’s SSG), however, it would be cruel to compare these two as Scully has just been created and is still in the alpha phase whereas Gatsby has been here for a while now.



Let’s see what Scully has in-store for us -



### Powerful CLI -



The [Scully CLI](https://scully.io/docs/Reference/command-line-options/) comes with a list of exciting features and command options, such as-



- **configFile:** It enables the loading of different configuration files.
- **proxyConfig:** It takes a relative filename for the proxy config file.
- **baseFilter:** It enables Scully to filter out some specific routes for rendering.
- **scanRoutes:** It scans the application to discover all the unhandled routes.
- **showBrowser:** Chromium renders the application
- **removeStaticDist:** It removes the static folders created from previous renders.
- **stats:** It saves the build statistics to a json file.
- **pluginsError:** It shows errors from plugins without stopping the rendering process.
- **routeFilter:** It filters the handled routes.

There are several other command options that can further extend the functionalities of Scully.



### Rich Built-in Plugins -



Plugins are an important part of SSGs and Scully also has an extensive and flexible set of built-in plugins. The plugin system of Scully provides users new ways to pre-render an application. Here we are going to mention five main plugin types that inject the code into various lifecycle stages of Scully-

**1. router:** The router plugins allow getting the required data to the pre-rendered pages.


**2. render:** The render plugins are used to modify the rendered HTML content.

**3. fileHandler:** The _fileHandler_ plugins are used during the rendering process by the _contentFolder_ plugin. Basically, these plugins are used to process static files.

**4. routeDiscoveryDone:** When all routes are collected and all the router plugins are done, the _routeDiscoveryDone_ are called automatically.

**5. allDone:** These plugins are called when everything gets completed which means after all the processes are finished.


### [Schematics -](https://scully.io/docs/Reference/schematics/overview/)



Scully provides various schematics for three things-



- To create your own blog
- To read markdown files and skeleton
- To create and modify angular projects and run anything needed to support Scully.



There are many other characteristics of Scully that make it even more intriguing, such as third-party integration, centralized configuration, complete data caching, etc.

Now, let’s understand how it works-



## How it Works??



Scully pre-renders every page of your app to plain CSS or HTML with the help of [Guess.js](https://github.com/guess-js) which finds all the routes in the project.



Scully takes an app, analyzes its route structure, and writes down all the static files to create a list of routes of the application. Then, it goes through that list and generates an _index.html_ for each route. It, then, pre-renders each route to HTML and creates a static version of it. As many as the number of routes, it will create the same number of _index.html_ files.



With a pre-rendered application, users do not have to wait for JavaScript to be loaded executed to interact with the website. Instead, they can immediately interact with the page. It gives you a higher conversion rate and fewer abandoned sessions. Also, you do not need to ship your backend to production.



Scully has two types of routes, i.e.-



- [Unhandled Routes](https://scully.io/docs/concepts/unhandled-routes/)
- [Handled Routes](https://scully.io/docs/concepts/handled-routes/)



When the unhandled routes are run through router plugins, a handled route comes out.



>“All unhandled routes with dynamic data need to be handled through route plugins. This means there will be NO STATIC FILES for ROUTES which HAVE DYNAMIC DATA but NO CONFIG.”



### [Prerequisites](https://scully.io/docs/learn/getting-started/installation/) -



To add Scully into your project, make sure you meet the following requirements -



- **_[Angular version](https://www.habilelabs.io/blog/new-angular-versions-using-npx)_** should be v8.x.x or v9.x.x
- Node.js version should be 12 or higher
- Chromium installed in your machine
- Generate a routing.config.module.ts file by this command-



```
ng generate module app-routing --flat --module=app
```

### [Installation](https://scully.io/docs/learn/getting-started/installation/) -



Now, you can add Scully through -


```
ng add @scullyio/init
//if you are using a NX vanilla (non-angular) workspace
npm install @scullyio/init
nx g @scullyio/init:install -- --project=<projectName>
```

It creates a Scully config file with name _scully.<projectName>.config.ts_ where the _projectName_ stands for the name of your angular project. This config file looks like this-


```
import { ScullyConfig } from '@scullyio/scully';
export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: '<projectName>',
  outDir: './dist/static',
  routes: {},
};
```

If you were serving the app during installation, you need to restart it with _ng serve._ Before we start building our angular project, let’s make sure to set the output path-


```
//angular.json
"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/boost-angular-app-seo",
```

Now, the angular build will be added inside the _dist/_ folder in the folder name _boost-angular-app-seo_.




Check out more about Scully [here](https://github.com/scullyio/scully).



## Wrap Up:



Within a year or two, Scully is going to roll over the entire JavaScript community. Team HeroDevs has a lot in its mind and working hard to convert it to the best SSG platform ever created. We just need to wait and watch, there’s a lot yet to be revealed in Scully.



Stay tuned with us for more interesting blogs.



Thanks for reading!

Scully — First-Ever Static Site Generator for Angular.js

medium_scully-first-ever-static-site-generator-for-angular-js.jpg

small_scully-first-ever-static-site-generator-for-angular-js.jpg

thumbnail_scully-first-ever-static-site-generator-for-angular-js.jpg

**B**rahmos is another JavaScript UI library that strives to facilitate better web application development. There are many new concepts used here like template literals, lit-html, concurrent mode, etc. It aims to improve React’s performance by implementing its declarative **_[APIs](https://www.habilelabs.io/blog/relay-hooks-facebook-released-improved-react-hooks-based-apis-for-relay)_**, **_[hooks](react-hooks-why-better-than-classes)_**, context, and more.

In this blog, we’ll get to know about this library in details -

## Introduction to Brahmos.js


[Sudhanshu Yadav](https://twitter.com/_syadav?lang=en), a front-end architect at HackerRank, recently introduced a new and small JavaScript front-end framework ‘Brahmos’ for building interactive UI in web applications.

The key motivation behind it was to improve application performance. It seeks to improve React’s performance. However, it is highly inspired by the concept of lit-html/hyper-html which facilitates the division of an application into static and dynamic parts.

Yadav was most intrigued by this concept as the majority of an application consists of a static portion with only a pinch of dynamic parts that may change. He decided to create something like React with similar declarative APIs and rendering pattern, so he tried two things-

- 👉 Firstly, he tried writing React renderer which was not possible as the React element does not differentiate between the static and dynamic elements and makes it difficult to combine multiple elements into one. It didn’t work.

- 👉 So, the second thing he tried was to use lit-html as the rendering engine and write a React API’s wrapper above it, but React API and lit-html are not directly mappable. It also didn’t work.

Now that both the options were failed, he took a different route and decided to create a whole new library from the scratch by implementing React APIs but with a different rendering pattern.

## Key Features:

Some of the main features of Brahmos are-

- Bundle size of ~12 kb
- React-like Declarative APIs with JSX
- Supports concurrent mode
- Fast alternative to Virtual DOM (JSX without VDOM)
- Tagged template literals
- Better application bundle performance
- Faster rendering


Most of the front-end frameworks are using either fully-fledged render functions as React.js or templates declared in non-JavaScript files like [Svelte](https://habilelabs.io/blog/svelte-a-magically-fast-javascript-framework) or Vue. Brahmos, on the other hand, leverages a new concept of [tagged template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) like [lit-html](https://lit-html.polymer-project.org/) or [nanohtml](https://github.com/choojs/nanohtml).

Let’s see why there’s so much fuss about this template literal tags-

### What is Tagged Template Literal?


The concept of tagged template literals consists of two parts- template literal and tag function.

- **Template literals** are used to write dynamic expressions to full-extent, unlike custom templates. The template literals can easily separate static and dynamic elements and provide more control over dynamic strings.
- **A tag function** is like any other function where you can pass values. However, an array of strings is passed as a parameter as the first argument and dynamic expressions as the rest arguments. The tag functions enable you to parse the template-literals as you would like.


Now, Brahmos transpile JSX into template literals, where the JSX expressions become the dynamic parts and the native elements become the static parts. This eases the process of identifying the static and dynamic parts and optimizes them separately.

Brahmos combines all the static parts as one virtual node, so the traversal becomes O(dynamic nodes) unlike O(nodes) in React, which in turn reduces the overall traversal time to find and apply changes.

### Concurrent Rendering in Brahmos
The [concurrent mode](https://reactjs.org/docs/concurrent-mode-intro.html#what-is-concurrent-mode) is an intriguing feature of Brahmos. Let me tell you what is so interesting about it-

- To start with, it’s an experimental feature that React has worked on for many years and introduced recently but, is still pending in its official release.
- Secondly, it’s a feature discarded by many frameworks but Brahmos.js embraced it despite the complexity.

#### According to Yadav -

>“Considering the huge potential of concurrency, there was just too much to invest in this pattern that I could not ignore the opportunities it opens.”

Basically, concurrency means that the frameworks can work upon several updates concurrently. Brahmos supports all the features of concurrent mode including fiber architecture, transitions, time-slicing, suspense for data fetch, and suspense list.

The concurrent mode delivers optimal user experience which is what a developer works for the most part. As for the users, what they perceive is what matters the most and not how the library is working or how much time it is taking in processing.

It makes the user-interface interactive while the application is running in the background. Since this is a single-thread application, Brahmos switches between background and foreground to work on them.

Concurrent rendering enables priority updates to process first by providing declarative hints and heuristics to decide how important an update is, improving the user experience. However, working with concurrent rendering is not so easy as there are too many use cases.

Brahmos takes a different approach to tackle this problem. It divides an update into three categories, as-

1. Updates that are to be rendered synchronously without any pause. (like updates caused by events)

2. Updates that can be paused but the updated value must not change. (like updates caused by setState and don’t originate from user interaction)

3. The last category includes the updates that are deferred and can be paused, delayed, and become stale. (Like updates inside transitions and async updates)

Brahmos.js allow the high-priority updates to occur directly in the foreground and maintains a list for all transitions so that every update runs smoothly without hindering the other.

## How to Install?
Add brahmos as dependency and babel-plugin-brahmos as a dev dependency. You can install it directly from npm-


```
npm install brahmos
npm install babel-plugin-brahmos –save-dev
```

Now, add brahmos in your babel configuration -


```
{
  presets: ['@babel/preset-env'],
  plugins: [
    //...
    'brahmos'
  ]
}
```

## Future Aspects of Brahmos.js -
Brahmos was created for the sole purpose of improving the performance of UI rendering in the browser and server. And it has succeeded in it to an extent. Nevertheless, there are some features and improvements that the team is planning to bring forth in the next release, such as-

- To bring async rendering in server-side
- Easier migration from React to Brahmos
- Full support of React APIs
- Support for server-side hydration
- Better support for 3rd party components
- To enable tree-shaking while supporting third-party libraries
- Enabling server-side rendering
- Support for React Dev Tools


Although Brahmos is smaller in size already, the team is working towards reducing it further. You can check out the [talk with Sudhanshu](https://www.youtube.com/embed/GUrL5ovCWyw?rel=0&enablejsapi=1&origin=https%3A%2F%2Fyoutube.videoken.com&widgetid=1) to learn more about [Brahmos.js](https://github.com/brahmosjs/brahmos)

Stay tuned with us and subscribe to our publication for more interesting topics and blogs about the latest tech releases. Also, don’t forget to hit a clap (s) before leaving😊.

Thanks for reading!

Brahmos.js - A New Frontend UI Framework with React-like API

medium_brahmos-js-a-new-frontend-ui-framework-with-react-like-api.jpg

small_brahmos-js-a-new-frontend-ui-framework-with-react-like-api.jpg

thumbnail_brahmos-js-a-new-frontend-ui-framework-with-react-like-api.jpg

In today’s era, the Internet of Things or IoT has become a consistent presence in all the industrial sectors.



As the world has gone too far in technical expertise, the IoT has made it possible for us to connect with these advanced technologies in day-to-day life by connecting the internet to our everyday devices.



From electronic gadgets to mechanical machinery, healthcare tools to kitchen appliances and large vehicles, there is no sector left untouched by the potential of IoT anymore. Together, all these devices transfer data at a global scale.

Something this amazing, which was once considered as the next-generation technology, is now open to everyone in one form or another.



>It is, as per Gartner Research, perhaps the most hyped expressions across business and technology.



React.js, on the other hand, is an all-time favorite and most popular JavaScript front-end framework among the whole stack of other frameworks.



Indeed, the JavaScript community growing up for years with the **_[evolution of technologies](https://www.habilelabs.io/blog/get-employees-comfortable-with-iot-technologies)_**, and currently, it offers a plethora of options for developers to use with IoT applications.



But what is it that’s too special about React.js which makes it a smart choice for IoT projects, we’ll see it here in this blog-



## Why Opt React.js for IoT Project?



There are several features of React that provide gravity to our claim of choosing React.js for IoT, let’s have a close look-



### 1) Lifecycle Methods:



The **_[React.js lifecycle method](https://habilelabs.io/blog/what-are-component-lifecycle-methods-in-react-js)_** is an expedient feature of React which ensures that all the React components are upgrading with data change. So, whenever the application detects any update in the components, it deploys a series of lifecycle methods.



The lifecycle methods ensure that the components are keeping up with any data change and facilitate better interaction of the application with the real world.



It’s like having a temperature sensor at our home so whenever the house grows too hot or too cold, the residents get a forewarning.



The lifecycle methods work in a similar way as every time data alters in the real world, the application acknowledges it and updates the components as necessary.



### 2) Compositional Structure of React:



React has a robust compositional structure rather than structural, which is its true power. It enables you to manage and organize your code in a systemic manner. You can compose functionalities over small components on top of their own doings.



In object-oriented programming, you always need to create a class or object to do anything and then you create another object that takes over the properties of the initial object. This is the process we call ‘inheritance’.



You can apply the properties of inheritance in your IoT projects. You just have to create one parent component and several child components within it. This component-based architecture of React.js makes it a preferable choice for IoT applications.



### 3) Separation of Concerns:



As React components are independent, you can keep them and deal with them in isolation. Changing data in one component will not make any difference to other components.



You can painlessly organize the required data in parent components and move the remaining into children components through props. This property is helpful in IoT because it effortlessly separates components that receive and process data from the sensor components. Therefore, assists you so you do not confuse over the complex interactions happening between data and sensors.

## Benefits of Using React.js for IoT-



Now that we have a basic understanding of React concepts and have an idea as to why to choose React.js for IoT projects, it is time we discuss its advantages-



### #Efficient Development -



The compositional architecture of React.js is the best reason that one may find to choose it for IoT app development.



You can break the complex project into several individual components which makes the project management process far easier. Moreover, the component reusability is another factor that boosts up the developer’s efficiency and accelerates the development process.



With the power of using code elements in your IoT project, the installation process and version management become less painful.



### #Code Stability -



Thanks to the downward data flow in react.js which does not alter data in the parent component with the change in children components, maintaining code stability.



This descending data flow facilitates code strength, guarantees smooth app performance, and ensures continuous application execution.



### #Faster Rendering -



As we know the development of high-load applications is a tedious process and takes too much effort. Furthermore, the DOM model facilitates every component to affect the rendering process. This makes it even more complex and diminishes the application’s performance considerably.



With the aid of virtual DOM, the rendering has become significantly faster. Virtual DOM is the virtual replica of DOM and eliminates this problem as the changes made will first apply to virtual DOM.



It, then, calculates the possible risks accompanied by each modification and reduces them to a minimal level, making rendering faster and improving the app’s performance.

## Bottom Line :



Though React.js also presents several challenges, they get overshadowed by the list of advantages it offers. Considering everything, it would not be wrong to claim that it is a good choice for small-scale IoT applications. However, if you are focusing more upon the user-interface then React.js is probably the best choice you could opt for.



Fortunately, if we take into account the profound number of followers and immense popularity it has gained over the years, there’ll be no doubt that it will overcome all the downsides and will, undoubtedly, emerge as the most preferred choice for **_[IoT](https://www.habilelabs.io/iot)_** applications.



I hope you liked this blog. I’m anxious to hear your suggestions for **_[future posts](https://www.habilelabs.io/blog)_**.




Thanks for reading!!

This is Why You Should Choose React.js for IoT Applications

medium_this-is-why-you-should-choose-react-js-for-iot-applications.jpg

small_this-is-why-you-should-choose-react-js-for-iot-applications.jpg

thumbnail_this-is-why-you-should-choose-react-js-for-iot-applications.jpg

**M**obX is a simple, scalable, and standalone state management library. Although, most popular frontend frameworks, i.e., React, Angular, and Vue use the implementations of MobX.




It is a great tool, especially for React applications. This blog is focused entirely upon the basics of MobX and we’ll discuss its working and core concepts here-

## What is MobX??



An open-source tool that makes state management easier and scalable by applying transparent functional reactive programming (TFRP).



Inconsistent states make applications unmanageable which is why most of the conventional **_[state management libraries](https://www.habilelabs.io/blog/react-query-a-state-management-library-for-react-applications)_** make their states immutable and restrict them in ways that modify their states which becomes a problem because it makes it impossible to use the concept of classes.



[MobX](https://mobx.js.org/README.html), however, simplifies this process by resolving the key issue- it enables referential consistency of the states. It follows a straight strategy — whatever can be derived from an application state, will be derived. As simple as that!



The following features make it a wonderful tool for application state management-



- _Architectural Freedom:_ MobX enables you to manage your application states outside the UI framework, which makes your code portable, decoupled, and easily testable.
- **Straightforward:** With a minimal amount of code, you can do whatever it is that you intend to do. Without needing any special tools, you can update your data in an asynchronous process. The MobX reactivity will track all the changes and propagate them to where they are being used.
- **Optimal Rendering:** All changes in the data are tracked at runtime, building a dependency tree where all the relations between state and output are captured.




## Core Concepts



MobX treats your application like a spreadsheet. The derivations are like formulas and charts of the spreadsheet that can be derived from the data cells, all the data cells having values are considered as the observable states, getting the output of any formula or data cells is called a reaction, and changing the data cells or formula is called an action.


![reactive-application-state-management-with-mobx_1.jpg](https://backend.habilelabs.io/uploads/reactive_application_state_management_with_mobx_1_7e5b09eb2c.jpg)

### [Application State](https://mobx.js.org/observable-state.html)



It refers to the model of the applications that may consist of different datatypes including graphs of objects, numbers, cyclic data structures, arrays, references, primitives. You can store the state in any data structure you like. All you need is to make sure that you have marked all the properties, that you may change over time, as observable to enable MobX to track them.



The state is basically the data that drives your application.



Marking properties observable is actually specifying them as an annotation per property. Some other annotations are-



- Observable: it defines a trackable field to store states.
- Action: it marks a property as an action that will alter the state.
- Computed: Anything that will derive new facts from the state.



### [Derivations](https://mobx.js.org/computeds.html)



Also known as ‘computed values’ as these derivations can be computed from the current application state using a pure function. These derivations can range from simple values to complex ones. They are very useful and act as formulas that help reduce the amount of state you need to store.



The derivations can exist in three forms mainly-



- User interface (UI)
- Derived Data
- Backend integrations



They derive information from other observables and only recompute if one of the underlying undergoes any change.



### [Actions](https://mobx.js.org/actions.html)



Actions in MobX are the methods that manipulate, alter, or modify the application state. Actions occur whenever anything changes like a button clicked, a message arrived, and input changed, etc. MobX ensures that the derivations and reactions automatically process to all the changes caused by _actions_. Actions structure your code and also prevent changing states unintentionally.



However, _makeAutoObservable_ eases your job by automatically declaring the actions.

### [Reactions](https://mobx.js.org/reactions.html)



Reactions are a very important concept in MobX to learn about. They bridge the gaps between the two worlds of imperative programming and reactive programming.



>MobX reacts to any existing observable property that is read during the execution of a tracked function.



Reactions are the side-effects that occur automatically whenever a state changes. In a way, reactions are similar to computed values but instead of deriving information, they cause side-effects. Some common side-effects are-making network requests, printing to console, updating react components, etc.



Reactions can be created using autorun utility. Here’s how it works-



The autorun function accepts a function that runs whenever something relevant changes or when you create autorun itself. It reacts to this change by running the effect.



Once the effect runs, MobX keeps track of all properties marked observable and the derivations which are being read by it and as soon as the function finishes, MobX will subscribe to all the observables that were read and will wait for them to change again. And when it happens, it will trigger the autorun again and the process keeps repeating itself.


![reactive-application-state-management-with-mobx_2.jpg](https://backend.habilelabs.io/uploads/reactive_application_state_management_with_mobx_2_6ef2dbd87a.jpg)



Reaction works very similar to _autorun_ but instead of only one function, it initializes two functions: _data_ function and _effect_ function.



The data function returns data that is used as input to the effect function. The side effect reacts only to the data that was accessed during the data function and in this way, controls when the effect function triggers.

### Installation



MobX works in ES5 environment including browser and **_[Node.js](https://www.habilelabs.io/blog/how-to-install-node-js-on-ubuntu)_**. It can be installed via npm or yarn through this command-


```
yarn add mobx
or
npm install --save mobx
```

You can also install it directly from CDN- [https://cdnjs.com/libraries/mobx](https://cdnjs.com/libraries/mobx)



To learn more about MobX, see through this [documentation](https://mobx.js.org/the-gist-of-mobx.html#1-define-state-and-make-it-observable).



## Wrap Up



MobX is a smart tool and this was just the briefest glimpse into its functionalities. However, I hope that you got the basic concepts here. I would love to see you implement it in your next project.



Happy reading!!

Reactive Application State Management with MobX

medium_reactive-application-state-management-with-mobx_feature.jpg

small_reactive-application-state-management-with-mobx_feature.jpg

thumbnail_reactive-application-state-management-with-mobx_feature.jpg

A new Deno module, called ‘Vno’, was released earlier this year. It’s a third-party module that runs Vue components in the Deno environment.



In this blog, we will get a quick go-through of this module. Let’s get going-



## All About Vno -



>The first build tool for compiling and bundling Vue components in a Deno runtime environment.



Vno is a third-party module for Deno (an alternative to node.js) that brings together two different technologies, i.e., Vue and Deno.



[Deno](https://habilelabs.io/blog/what-is-deno-is-it-the-new-node-js) is a runtime environment, released recently, which improves the shortcomings of Node.js and offers a better alternative.



The idea behind creating Vno was to leverage the Vue.js framework in Deno runtime. As there was no such tool available at that time, the team Vno decided to build their own.

Along with using Vue.js classes, developers can also leverage the simplicity rendered by Deno. With a rich and exciting ecosystem, the Vno framework renders remarkable flexibility and can be used as-



- Adapter
- Bundler
- Compiler
- Parse
- Server-side Renderer


It parses the Vue.js component files and compiles them, in Deno runtime, into bundles of JavaScript files that can be read and rendered by the browser.



## Getting Started



### Installation:



Those who have a pre-built Vue application can simply install vno locally -


```
deno install — allow-read — allow-write — allow-run — allow-net — unstable -f -n vno https://deno.land/x/vno/dist/mod.ts
```

Then, you can create a _vno.config.json_ file that specifies the name and relative path of the root Vue component inside the root directory and run the vno build, which then creates _build.js_ and _style.css_ files inside _vuo-build_ folder.



Those who prefer not to install Vno locally can import it from _deno.land_ into your project -


```
import vno from http://deno.land/x/vno/dist/mod.ts
```

## Creating a New Project:



To initiate a new vno project -

### [Build Process:](https://vno.land/#build)



To create a bundled JavaScript file -

Once you run _vno create_, you can initialize the parsing process by using _vno build_. As long as you provide a _vno.config.json_ file, you need not use the _vno create_ method.



### [Development:](https://vno.land/#run%20dev)


To utilize development server -

This command speeds up the load time and connects components to a pre-built server preventing the need for a multi-step manual rebuild every time a change has occurred and facilitating the changes made to the **_[components](https://www.habilelabs.io/blog/all-about-quality-components-challenges-Benefits)_** reflected quickly in the browser.




To run the server -

### [Configuration:](https://vno.land/#config)



Call the config method inside your server -


```
vno.config({root:’App’, entry:’./path’})
```

## How Vno Works?



The Vno module provides the equivalent of a create-vue app through simple CLI commands and _vno create_ lowers the barrier of entry for builders if they want to use Vue in Deno environment which has been restrained by the incompatibility and newness of the two technologies.



During the parsing process, Vno isolates and stores the individual tags of all _.vue_ components and acknowledges all the necessary connections between the files so that the build occurs in an appropriate order.



After completion of _vno build_, a _vno-build_ folder gets created which contains a _build.js_ and a _style.css_ file. Once the build gets completed, these files are linked to the server and referenced inside the _index.html_ file.



This was a short introduction to vno, you can learn more about it over [here](https://github.com/oslabs-beta/vno).



Thanks for reading this blog!! Stay tuned for more **_[blogs.](https://www.habilelabs.io/blog)_**


medium_vno-bringing-vue-and-deno-together.jpg

small_vno-bringing-vue-and-deno-together.jpg

thumbnail_vno-bringing-vue-and-deno-together.jpg

Vno — Bringing Vue and Deno Together

State management becomes necessary to React when we need to share data among multiple components. Although React.js is self-sufficient, developers tend to use state management libraries for better data handling and there are a number of libraries for exactly this purpose.



So, what is it about Recoil.js that’s so appealing?



Well, the thing is that it feels just like React. The syntax is similar to React and it looks like a part of React API. Other than that, it has many other upsides like it solves the problem of global state management, shared state, derived data, etc.



In this blog, we will get to learn the basics about Recoil and how it is different from other state management solutions like [Redux](https://redux.js.org/).

## What is Recoil.js??



Recoil is an experimental state management library at Facebook, created by Dave McCabe. To better understand Recoil, it is mandatory that you have comprehensive knowledge of React and React Hooks.



While there are many popular libraries like Redux and MobX that handle your state data and bid well with React applications. The problem arises when it comes to complex applications or when we might need something complex to deal with some issues, that’s where the conventional libraries do not come in handy.



Here comes in the picture- Recoil.js. While it solves our complex problems, its configuration is surprisingly simple, unlike Redux. And we do not need to write much boilerplate code.

Team Facebook created Recoil with additional concepts, like-

- Shared State: Sharing the same state in different **_[components in the React](https://www.habilelabs.io/blog/what-are-component-lifecycle-methods-in-react-js)_** tree.
- Derived Data: Computed data through changing states.



The addition of these topics is the real power of Recoil. Let’s check out the features of Recoil.js-



## What’s Special About Recoil?



Developers prefer to use the built-in state management capabilities of React.js over the external global state for the sake of simplicity and compatibility. But there are certain limitations of these built-in solutions, such as-



- Context API can store only one value and not an indefinite set of values.
- The component state cannot be shared unless being pushed up to the common ancestor, which might need a huge tree that needs to be re-rendered.
- These both issues further make code-split the top of the tree difficult from the leaves.



Recoil solves all these problems with its Atoms and Selectors approach as-



>“It defines a directed graph orthogonal to but also intrinsic and attached to your React tree. State changes flow from the roots of this graph (which we call atoms) through pure functions (which we call selectors) and into components.”



Recoil provides several capabilities that are difficult to achieve with React alone while being compatible with the newest features of React-



- Boilerplate-free API
- Compatibility with Concurrent Mode
- Distributed and incremental state definition
- State replacement with derived data without having to modify the components.
- Derived data can move between being synchronous and asynchronous.

Now, let’s [get started with Recoil.js](https://recoiljs.org/docs/introduction/getting-started)-




### Installation



As Recoil is a **_[state management library](https://www.habilelabs.io/blog/react-query-a-state-management-library-for-react-applications)_** for React, you need to make sure that you get React installed and running before getting started. You can install Recoil.js directly from npm or yarn -


```
npm install recoil
//or
yarn add recoil
```

When installed via NPM, it works wonderfully with bundlers like **_[Webpack](https://habilelabs.io/blog/introduction-to-webpack-why-do-we-need-it)_**.



## Core Concepts of Recoil



There are only two core concepts of Recoil that you need to understand: Atoms and Selectors.



### [Atoms](https://recoiljs.org/docs/basic-tutorial/atoms)



Atoms are the pieces of state. They can be updated and subscribed. Whenever an atom is updated, all the subscribed components of it are re-rendered with a new value



You can create atoms by using the atom function, as given here-


```
const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});
```

Atoms use a unique key for debugging, persistence, and mapping of all atoms. Two atoms cannot have the same key, it will be an error so you need to assign globally unique keys for every atom created.



We use _useRecoilState_ hook to read and write an atom from a component. Although it is similar to _useState_ **_[hook in React](https://www.habilelabs.io/blog/react-hooks-why-better-than-classes)_**, you can also share the state between components.

### [Selectors](https://recoiljs.org/docs/basic-tutorial/selectors)



A selector is a piece of derived state, where ‘derived state’ can be defined as the ‘the output of passing state to a pure function that modifies the given state in some way’.



You can declare a new selector as given below-


```
const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);
return text.length;
  },
});
```

Selectors also have a unique ID like atoms but not a default value. A selector takes atoms or other selectors as input and when these inputs are updated, the selector function gets re-evaluated.




It is used to calculate state-based derived data which lets us avoid any redundant states because a minimal set of states is stored in the atoms and others are computed as a function of that minimal state. This whole approach is very efficient because the selectors keep a record of components that need them and which state they depend upon.




When we see atoms and selectors in the light of components, they have the same interface and can be substituted for one another.

This was a quick go through into Recoil.js, you can check out the deep insights [here](https://recoiljs.org/).



## Wrap Up



Like everything else, Recoil has its own downsides. Truth be told, it is a great library but unless you have some specific problems, you don’t really need it. It's nothing that the developer’s world couldn’t survive without. The other libraries you’ve been working with lately are good enough.



You can even use it partially in your application, exactly where you need, without having to adopt it for the entire application.



Just because the hype of something new released puts you on an edge, you don’t really have to try it, do you?? Decide yourself😉



Thanks for reading it till here!

Recoil.js — A New State Management Library for React

medium_recoil-js-a-new-state-management-library-for-react.jpg

small_recoil-js-a-new-state-management-library-for-react.jpg

thumbnail_recoil-js-a-new-state-management-library-for-react.jpg

JavaScript, being single-threaded, cannot run two pieces of script simultaneously, one will have to wait for another to complete then only it can run. But by using Callback functions, it manages these asynchronous operations.



But over the years, Promises replaced Callback functions and are now considered as the most prominent method to handle the results of async operations that haven’t completed yet.

In this blog, we’ll understand the concept of [Promises in better terms](https://javascript.info/promise-basics). So, let’s get going-



## What’s a Promise in JavaScript?



There are several analogies in JavaScript that must be addressed here -



- **Producing code:** A producing code that results in output over time.
- **Consuming code:** A consuming code wants the result of the producing code.



A _promise_ bonds these two analogies, by promising each one something; that is, the producing code will take whatever time it needs to come out with the promised results, while the consuming code will have its results when it’s ready.


>A Promise is an object representing the eventual completion or failure of an asynchronous operation.



A Promise is a means of assurance that a particular operation will occur in the near future. Though, it is not necessary that the promise will be fulfilled every time.



Whenever a particular condition is true, the promise will work and when it’s not, it will not. As simple as that!



## Promise vs Callback



When an asynchronous action triggers, one of these two concepts is used to handle its results. While the purpose is behind both Callback and Promise is the same, they work differently.



Essentially, a promise is a returned object you attach callbacks to, instead of passing callbacks into a function.



A Callback function is passed as an argument in another function, we often use these Callback functions in _setInterval_ functions, in API calls, event listening, etc. These functions are defined somewhere in the code and are called back in another function to notify JavaScript that a certain asynchronous activity has been completed.



These callbacks make sure that our code will not run before the asynchronous task but will run right after it finishes.



But this approach is fruitful only in the short asynchronous operations, but when it comes to large sets, it is not the best practice to use. Thus, came Promises!!



Promises are more flexible and can be used for large sets of async operations.



However, the major difference between Callback and Promises is that promise-based APIs return a promise that is used to declare a function in _then()_ and _catch()_, which further determines what will happen once the async operation has completed. On the other hand, the Callback-based APIs do not return any value, they just carry out the Callback with the result.



However, the interesting fact, here, is that we still use callbacks in promises.

## How does a Promise work?



A promise follows a very simple concept, very much like it works in real life. It promises to do something in the future.



It has two possible outcomes: it will either be kept or it won’t. Once we define a promise in JavaScript, it will either be resolved when the time comes or will get rejected.



A Promise return one of these 3 possible states:



- **pending:** initial state, when the promise has neither fulfilled nor rejected.
- **fulfilled:** Promise resolved successfully.
- **rejected:** Promise failed.



For instance, when a Promise is created to deliver some data, it will stay in _pending_ mode until we get our data. If we receive the promised data, the promise will be in _resolved_ state and if we don’t, it will return to _rejected_ state.



### Basic Syntax -



This is the basic syntax for creating a new Promise-


```
let myPromise = new Promise(function(myResolve, myReject) {
 
   myResolve(); // when successful
   myReject();  // when error
 });
```

A promise handles the asynchronous results of an operation and notifies when it’s done. The concept is similar to callbacks but the approach is different.

## Flow of then() and catch()


Once a promise is handled, whether it got resolved or failed, the next step is to deal with the results. Here comes two methods; _.then()_ and _.catch()_.



![promises-in-javascript-an-introductory-guide_1.jpg](https://backend.habilelabs.io/uploads/promises_in_javascript_an_introductory_guide_1_c34d35d2fc.jpg)



_then()_ is used to pass a function argument which will be run after a promise calls _resolve()_ and _catch()_ after it calls _reject()_.


```
myPromise.then((message) => { 
    console.log(message);
}).catch((message) => { 
    console.log(message);
});
```

Here’s the catch -



You can use _then()_ to make two arguments, first to handle the _resolve()_ case and second to handle the _reject()_ case.




```
promise.then(
  function(result) { /* handle a successful result */ },
  function(error) { /* handle an error */ }
);
```

But if you’re interested more in success cases, you can pass a single argument in then() and if you’re interested only in errors, you can use catch() for error handling.



Furthermore, they are chained as they return a Promise and the process goes on.

One of the most important benefits of promises is that they handle a chain of events better than callbacks through Chaining. While using callbacks in a conventional way creates ‘Callback Hell’, chaining is an effective method where we chain promises and callbacks together.



## Wrap Up:



This was a brief look into the Promises in JavaScript. However, there is more to learn, this was all but a small picture. When you get into a broader perspective, the topic becomes more complex.



But once you have a basic understanding, it will be easier for you to get into the details. Hopefully, this blog polished your basic understanding of JavaScript Promises and Callbacks.



Thanks for reading. 



If you need any help regarding your JavaScript project, feel free to contact out subject experts at _[HabileLabs](https://www.habilelabs.io/)_.

Keep in touch with us and continue reading for further **_[blog updates](https://www.habilelabs.io/blog)_**

Promises in JavaScript- An Introductory Guide

medium_promises-in-javascript-an-introductory-guide_feature.jpg

small_promises-in-javascript-an-introductory-guide_feature.jpg

thumbnail_promises-in-javascript-an-introductory-guide_feature.jpg

Yes, JavaScript also makes promises.

**S**apper, short for Svelte **app** maker, is yet another JavaScript framework. The special thing about it is that it is built upon [Svelte](https://habilelabs.io/blog/svelte-a-magically-fast-javascript-framework). It is inspired by Next.js and follows the same style pattern but way too faster and smaller than it.



It is an amazing framework that builds extremely high-performance web apps of all sizes at considerably fast speed, all the while reducing the amount of code used.



>**The term Sapper is derived from the ancient war times and used specifically to define ‘combat engineer’.**



It possesses all the characteristics that define a web framework to be perfect; which are mentioned here-

- Universal codebase
- Server-side rendering
- Instantaneous navigation to subsequent pages
- Client-side hydrating the server-rendered HTML
- Supports progressive web app characteristics
- Automatic code splitting
- Hot module reloading
- Easy-to-maintain codebase
- Ability to customize every aspect of the system
- High-performance without compromise
- Easy to learn the entire framework within an hour


It has all these properties and therefore qualifies to be called an ‘ideal’ framework for **_[building applications](https://www.habilelabs.io/custom-application-development)_**.

## Why choose Sapper?



We have already discussed that while building advanced **_[web applications](https://www.habilelabs.io/web-development)_**, Sapper takes advantage of all the modern practices. So, we’re going to get a quick look into some of those practices in here. Let’s move then-



### ✔ Server-side Rendering



Sapper supports server-side rendering feature which means that it first pre-renders every sapper component (page) on the server-side. It generates HTML for the page at build time and sends it to the client-side. It then runs the component again at the client-side to update as per the dynamic data.



This way you can ensure that the component can run on both client and server sides.



### ✔ Automatic Code Splitting



Sapper splits up your code into small chunks (one per route). The bundle size of these chunks is smaller than those generated by traditional frameworks like React.js or Vue.js.



The initial download size can be further reduced by code splitting which eliminates the need to download the entire app code when the first page rendered. Instead, when the browser loads a Sapper app, it only downloads the code necessary to render the first page (route). This reduces the initial load time considerably and makes it easy to run even on mobile devices or with slow internet connections.



The code splitting enables the downloading of a page code only when the page is visited for the first time. It also removes the need to download the code for the pages that are never visited.

### ✔ Preloading


Sapper provides a _preload_ function for data loading. The pages that need data from API services can define a _preload_ function to do so. This function runs when the page is loaded and returns an object whose property values are then passed to the page as props.



In Next.js, the equivalent to _preload_ is _getInitialProps_.



The preloading feature enables the page update without letting the user see it, which is generally the case in client-side loading.



### ✔ Prefetching



Sapper uses _prefetching_ to avoid browser lagging and enabling faster page loads. It works by anticipating the next move of the user by the mouse hovers and relevant pages he/she visits and then runs that page’s preload function.



As soon as the user hovers over the page link, Sapper starts downloading the page code, reducing the time required to render the next page and provides a better user experience.



It spares an extra couple of hundred milliseconds which makes all the difference for the user.


### ✔ Static Site Generation


Sapper supports **_[static site generation](https://habilelabs.io/blog/gatsby-a-blazing-fast-static-site-generator)_** as it generates the HTML for each page at build time. This creates a site (static one) where all the pages a user might visit have already been rendered to HTML files.




It improves the app performance as no HTML generation, either client-side or server-side, is needed when a user visits each page.

### ✔ End-to-end Testing using Cypress



Sapper enables end-to-end testing using Cypress and everything needed to run Cypress tests comes preconfigures in Sapper. With this feature, you can write various tests to exercise the functional attributes of the application in ways as the user would.



Other reasons to use Sapper are-



- Typescript-support
- Supports offline usage through [Service Workers](https://sapper.svelte.dev/docs#src_service-worker_js)
- Static site [exporting](https://sapper.svelte.dev/docs#Exporting)
- High-level project structure
- Easy to understand and customize
- Memory efficient
- **_[Improved SEO](https://www.habilelabs.io/blog/complete-seo-guide-for-web-developers)_**
- Amazing development experience



As I said earlier- quite a perfect framework!



## Routing in Sapper



Sapper offers two types of routes i.e., Pages and Server routes. Let’s see what they are and how they work-



### - [Page Routing](https://sapper.svelte.dev/docs#Pages)



Sapper encodes the pages in your app by _.svelte_ filenames inside the _src/routes_ directory and these filenames determine the page’s routes.



For instance, you want to navigate to _/xyz_ page then Sapper renders a _xyz.svelte_ file to the _src/routes_ folder. Any file named _src/routes/xyz.svelte_ or _src/routes/xyz/index.svelte_ will correspond to _/xyz_ route.



It makes the navigation process very easy, predictable, and you can navigate to multiple pages at a time.



For nested routes, you need to create a separate folder for each subroute.


### - [Server Routes](https://sapper.svelte.dev/docs#Server_routes)



Like pages, the source files for server routes reside inside the _src/routes_ directory. The _src/routes_ directory can contain both the _.js_ files for server routes and .svelte files for pages.



These source files define functions for server-side code in .js files. These server-route functions process HTTP requests.



>“Typically, the server route functions receive an HTTP request and response objects as arguments, they analyze the request object and call relevant methods on the response object to provide response data.”



The functions can invoke API services to create, retrieve, update, and delete data. Server routes allow collecting the server-side code with client-side code in the same project.



## Getting Started



To get started to build a new Sapper app, run these commands-


```
npx degit "sveltejs/sapper-template#rollup" my-app
# or: npx degit "sveltejs/sapper-template#webpack" my-app
cd my-app
npm install
npm run dev
```

The above command will create a new project inside the my-app directory, install all the dependencies, and run a server on <u>localhost:3000</u>.

## Project Structure of Sapper-


All the required project files and folders of Sapper are structured as follows-


```
├ package.json
├ src
│ ├ components
│ │ ├ Button.svelte
│ │ ├ Card.svelte
│ │ ├ Header.svelte
│ ├ routes
│ │ ├ _error.svelte
│ │ ├ _layout.svelte
│ │ ├ [id].svelte
│ │ ├ index.svelte
│ │ └ list.svelte
│ ├ client.js
│ ├ server.js
│ ├ service-worker.js
│ └ template.html
├ static
│ ├ global.css
└ webpack.config.js
```

For in-depth details, refer to the [documentation](https://sapper.svelte.dev/docs/).


## How’s Sapper different from Next.js?



While Next.js is among the most loved frameworks and close to perfect, it is not ideal. It follows an amazing concept that all the app pages are files in your-project/pages directory and each file is a React component.



It makes the whole process very easy as you can find the page code just by looking at the filesystem rather than spending hours to guess the right component name.



Besides, it supports astounding features like code splitting and server-side rendering. But unlike Sapper, it surely has some flaws like bigger size and uses a large amount of code, which causes performance lack.



Where Next.js takes 204kb for a simple ‘hello world’ app, Sapper takes only 7kb for the same and it might lower further in the future by exploring the optimization possibilities. In case of an app, Sapper required less than half the size as used by React/Redux implementation, which is quite amazing.



One crucial point is that code-splitting doesn’t come free, it doesn’t cost money of course, but it won’t be of much use in the case of frameworks like React and Vue.js. The reason is that the initial code-chunk size would at least be of the size of the framework, which would be almost like the size of the total app. But Sapper doesn’t follow such a trait and can reduce the initial chunk size considerably!

## **Important Note**



This is a introductory blog to Sapper but here is the spoiler- Team Svelte has rewritten Sapper and replaced it with **_[Sveltekit](https://habilelabs.io/blog/sveltekit-a-new-svelte-framework-to-supersede-sapperjs)_**. So from now on, you’ll have to deal with Sveltekit only and not Sapper.



However, Sveltekit has the same features as Sapper which I hope you understood in this blog. We’ll learn more about Sveltekit in the next blog, till then stay connected.



Thanks for reading this article!! We are eager to hear your suggestions and feedback and do not forget to hit claps before leaving 😛.

SapperJS — A New Framework Powered by Svelte.js

medium_sapperjs.jpg

small_sapperjs.jpg

thumbnail_sapperjs.jpg

The Next Big Step in Web Development!

Most of the developers find the state management in React applications a great pain and end up using general-purpose state management libraries like [Redux](http://redux.js.org/), [MobX](https://mobx.js.org/), or [Flux](https://github.com/facebook/flux). These libraries are a good choice for it but they add more complexity to the code.

Today, we are going to discuss another alternative (and far better than others), which is React Query. In this blog, we will see how it is different from other conventional state management libraries. But first, let’s check out what it is-



## What is React Query?



React Query is a state management tool and used for fetching, caching, synchronizing, and updating your remote asynchronous data in the server state React applications without having anything to do with the ‘global state’.



It reduces the code amount to a surprisingly large extent by providing two simple and important hooks- useQuery and useMutation. These hooks are used to perform queries and mutations respectively.



React Query is also known as the ‘missing-data fetching’ library. Just like the query languages, React Query is based upon three core concepts- Queries, Mutations, Query Invalidation.

It is fully-featured and comes with a stack of devtools. The long list of features is given in the subsequent section-



## Why React Query??



The conventional **_[state management libraries](https://www.habilelabs.io/blog/recoil-js-a-new-state-management-library-for-react)_** work well for the client state but do not fare well when it comes to the server or async state. The blame, entirely, goes to the server state which is very different as well as difficult to deal with.



To start with-



- It requires async APIs for data fetching
- It can easily go out-of-date, if not careful
- Caching (the most tricky part of all)


However, when you come to know about it, even more difficulties you face, such as- updating the out-of-date data, caching, lazy loading, performance optimization, memory management, garbage collection, query results memorizing with structural sharing, etc. The list has not ended. There are so many more challenges that we have to tackle with server state.



But thanks to React Query! It best manages the server state, tackles all these challenges, overcomes them, and provides control over your app data.



👉It replaces the multiple complicated and complex code lines with a few logical and simple ones.



👉 Increases memory performance



👉 Enable lazy loading and pagination- improving overall performance



Other features are given here-



- Auto caching and re-fetching
- View cache in real-time
- Backend agnostic data fetching
- Window focus re-fetching
- Query Key Serialization
- Remove and re-fetch queries manually
- Automatic garbage collection
- Request cancellation
- Multi-layer caching
- Mutation Hooks
- Dedicated [React Query DevTools](https://github.com/tannerlinsley/react-query-devtools)

I’m going to explain a couple of these features here-



### Lazy Loading



While React Query loads the next query loads, it continues to see the existing query’s data. This is an important property, which other libraries do not possess and end up rendering a hard loading state for new queries.



### Partial Query Matching



Due to the query key serialization property of React Query, you can manipulate and match a group of variable queries without having to know each one individually. You can target specific queries by using their nested properties or even by applying a filter to separate out those queries that match your criteria.



## Installation


You can easily install React Query with npm or yarn, via a simple command-


```
$ npm i react-query
#or
$ yarn add react-query
```

One of the most welcoming parts of React Query is that it comes with a set of dedicated devtools. If you want your journey with React Query to be a fun and amazing experience, you’d definitely want to get these devtools. Here’s what you need to do-


```
import { ReactQueryDevtools } from 'react-query/devtools'
```

Now, let’s get a closer look at the two **_[React Query hooks](https://www.habilelabs.io/blog/react-hooks-why-better-than-classes)_** –


### useQuery Hook


The useQuery hook is a function that is used to create and run new queries. It takes a unique query key every time it raises a query and a query function to resolve the data.



The unique query key is internally converted into an array and used for caching, sharing, and re-fetching queries in the application.


```
import { useQuery } from 'react-query'
function App() {
  const { status, data, error, isFetching } = useQuery('key', asynchrousFunction)
}
```

The query results return a few states indicating the current state of the query, e.g., isLoading, isIdle, isFetchhing, isError, or isSuccess. Each of these states tells us whether the query is loading, disabled, successful, or encountered an error. The isFetching indicates whether the query is re-fetching the data or not.



### useMutation Hook



>Mutations in React Query are used for creating/updating/deleting data or perform server side-effects.



The _useMutation_ hook is used for this very same purpose, i.e., to perform mutations.



It uses an asynchronous function to update your data between different requests and returns a mutate function that triggers the mutations.


```
const mutation = useMutation(newTodo => axios.post(‘/todods’, newTodo))
```

Like queries, the state of mutation can be determined by some primary states like _isLoading_, _isIdle_, _isError_, _isFetching_ or _isSuccess_.



The mutate function plays a very important role because it can be used to trigger certain specific mutations when used with certain specific options like _onSuccess_, _onSubmit_, or _onError_.



This was a brief intro to this fantastic library; you can know more about it [here](https://react-query.tanstack.com/).



React Query is not much popular but deserves your attention. After reading this blog, I hope you’ll give it a try.



Thanks for reading!!

React Query — A State Management Library for React Applications

medium_react-query-a-state-management-library-for-react-applications.jpg

small_react-query-a-state-management-library-for-react-applications.jpg

thumbnail_react-query-a-state-management-library-for-react-applications.jpg

**E**very React class component goes through a series of “lifecycle methods”. Basically, everything in React is consist of either components or a part of the components.

These components are subjected to follow a certain lifecycle, almost like that of any living creature on earth. They take birth, grow, and then die at last. The phase when they are born is called mounting, when they grow is called updating, and the last phase of death is known as unmounting.

This whole process is called ‘Component Lifecycle’. For each of these phases, React.js renders certain built-in methods referred to as lifecycle methods which control the behavior of components within an application.

In this blog, we’ll go through this lifecycle and get to know about these lifecycle methods-



## What are Component Lifecycle Methods?



The component lifecycle methods are divided among three different phases, as-


- Mounting
- Updating
- Unmounting



The entire component lifecycle can be understood by this simple visual illustration -


![component-lifecycle-methods-in-react-js_1.jpg](https://backend.habilelabs.io/uploads/component_lifecycle_methods_in_react_js_1_e916bdefb3.jpg)



Now, we’ll discuss each of the phases and their methods in detail. Let’s go then -



## ✔ Mounting lifecycle methods



After completing the component initialization, component mounting begins in which the component is created and inserted into the DOM.



Here, we’ll discuss the most commonly used lifecycle methods-


### 1. constructor()



The _constructor()_ is called first before the mounting begins and is basically used to serve these two purposes-


- To initialize the local state of a component
- To bind [event handling](https://reactjs.org/docs/handling-events.html) methods to an instance


Instead of using _setState()_, you can directly assign the initial state to _this.state()_ in _constructor_ method. Here is how we can define our state-


```
constructor(props) {
  super(props);
this.state = { count: 0 };
  this.handleClick = this.handleClick.bind(this);
  console.log("Constructor!");
}
```

### 2. render()


Next in line is the _render()_ method! It mounts the component onto the DOM and renders them to the UI. This method gets invoked to examine _this.state_ and _this.props_ attributes whenever there is any variation in the component’s _state_ or _props_.



_render_ is the most commonly used method of all in React. If you want to render elements in the DOM, then _render()_ is the method to look forward to because you can write them here.



Whenever called, it can return many types, i.e. strings, numbers, arrays, fragments, Booleans or _null_ value, portal, or React elements. Some examples are given here -


```
class MyComponent extends React.Component {
   render() {
//return string
    return "Hello!!"
//return null value in case you don't want to render anything
    return null
//return fragments   
    return <React.Fragment>
            <div>Hello</div>
            <div>Friends</div>
      </React.Fragment>
//return arrays        
      return [
          <div key="1">Hello</div>, 
          <div key="2">World</div>
      ];
 }
}
```

**Note:** If the _componentShouldMount_ method returns boolean _false_, then the render method will not be evoked.



### 3. componentDidMount()



This method is called immediately after the component is inserted into the DOM via the _render_ method. It is called only once in a lifecycle.



- If you’re looking to set up any subscriptions, then this is as good a place as any to do so. But, you’ll have to unsubscribe in  _componetWillUnmount()_.
- Also, it is a good place to instantiate a network request if you need to load data from a remote endpoint.
- You can even call _setState()_ here. Although it will further trigger a rendering again, you won’t see the intermediate state at least. However, you must be cautious while using this because it causes performance issues. In fact, you should assign the initial state in the _constructor()_ method, as advisable. But this approach comes in handy when you need to measure a DOM node before rendering something that depends upon its size.

## ✔ Updating lifecycle methods



Unlike the ‘Mounting’ phase that occurs only once while mounting the component, the ‘Updating’ phase can occur multiple times.



Whenever there is any change in the props/state of the component that needs to be updated, a timer calls for _render_ and _componentDidupdate_ to acknowledge, update, and render the change, the Updating phase comes into play.



### 1. static getDerivedStateFromProps()


This is the first method that gets called in the updating lifecycle phase. It can be called multiple times because it gets invoked whenever the _render_ method initiates. So, it is obvious that it is called during both mounting and updating phases.


This method is not very common and rarely used in specific cases, for instance when the component’s state varies with changes in props over time. As the name implies, it derives state from props.


### 2. shouldComponentUpdate()


This method is called when the component is about to re-render. It determines whether the current changes in the _states_/_props_ are affecting the component’s output. It is only used as a means of performance optimization and let us know ‘should the component update or not’, which is expressed by Boolean _true_ or _false_ values. By default, it returns _true_.


If _shouldComponentUpdate()_ returns _false_ value, it means you’re telling React to skip this update and thus, _render_ and _componentDidUpdate_ methods will not be called.


![component-lifecycle-methods-in-react-js_2.jpg](https://backend.habilelabs.io/uploads/component_lifecycle_methods_in_react_js_2_1e5fded742.jpg)



However, you can also prevent unnecessary rendering by using built-in _React.PureComponent_ which lets you compare the new and old _state_/_props_ and makes it unlikely for you to skip any necessary update.

### 3. render()


Next comes _render_. Whether or not it will be called depends upon the value returned by _shouldComponentUpdate_. It will trigger only in the case when true is returned.


### 4. getSnapshotBeforeUpdate()



After _render_ is called, _getSnapshotBeforeUpdate_ comes next. It is not commonly used but comes very handy in certain specific cases, such as when you need access to some information in the DOM and change it, right after it has been updated.



This method allows the component to capture some information (scroll height) from the DOM so that it can be adjusted later (after updating). Though, you need to understand that the scroll height captured here indicates the height before it was updated to DOM.



We can pass _prevState_ and _prevProps_ as arguments, as given here -


```
getSnapshotBeforeUpdate(prevProps, prevState) {
return null;
}
```

### 5. componentDidUpdate()



This method gets invoked immediately after the component is updated and re-rendered. It receives the _prevState_ and _prevProps_ as parameters and can also access the newly changed state or props.



However, it is strongly advised to never directly set the state within this function, otherwise, it will further trigger _render_ and _componentDidUpdate_.


Through this method, we get to calculate the _scrollHeight_ difference between what it was before after getting updated.



This is only one use-case, there are several others like -


- 👉 To fetch data from the server

- 👉 To access the DOM nodes of the **_[React component](https://www.habilelabs.io/blog/what-are-react-functional-components)_**


To get details about its use cases, check out the [official documentation](https://reactjs.org/docs/react-component.html).

## ✔ Unmounting lifecycle methods


This is the last phase in which a react component goes through where it gets unmounted from DOM and destroyed. There is only one lifecycle method in this phase.



### 1. componentWillUnmount()


_componentWillUnmount_ method is called first in the unmounting phase, just before the component is destroyed. This is the place where you can perform any cleaning method, essentially canceling network requests, invalidating timers, or cleaning up unwanted subscriptions that were created in the _componentDidMount_ method.



## Summary:



There are some other methods that are invoked in case an error is thrown by a descendant component, these methods are called error handling lifecycle methods. You’ll find them [here](https://reactjs.org/docs/react-component.html#error-handling).



That was all coders!! I hope that you get a better understanding of the React component's lifecycle methods through this blog. Get back to you soon with another insightful blog.



**Till then, happy reading!!**🙃

What are Component Lifecycle Methods in React JS?

medium_component-lifecycle-methods-in-react-js_feature.jpg

small_component-lifecycle-methods-in-react-js_feature.jpg

thumbnail_component-lifecycle-methods-in-react-js_feature.jpg

Like us all, React components also take birth, grow, and die!

What are Component Lifecycle Methods in React JS??

Presently, JavaScript is one of the most prominent technologies in the **_[IT & Software](https://www.habilelabs.io/custom-mobile-development)_** world. Over the course of a decade, we have seen many JS frameworks emerge and go, although the potent ones stayed.

While there are the most popular ones like React.js, Vue.js, or Angular, there are those second most popular ones like Ember.js, Node.js, Svelte, Preact, Gatsby, Next.js, and more.



Who would not go skeptical with so many options?? The result is, the greenie developers end up following their ancestor’s decision and choosing the most popular ones.



An obvious but wise choice, indeed.



On the other hand, the experienced developers decide to try new ones. In this blog, we will get to understand the core concepts of the oldest JS framework- Ember.js. Recently, the team Ember released another version of it- v3.3.

Although, there will be modifications and new additions with each version, the basic core concepts remain the same. So, here we go-



## Overview about Ember.js



First introduced in December 2011 by [Yehuda Katz](https://yehudakatz.com/), Ember is an open-source, productive, JavaScript web framework and is known to be the best choice for _‘ambitious developers’_.



#### In the words by Team Ember, quoted as-



_“Ember.js is a productive, battle-tested JavaScript framework for building modern _**[web applications](https://www.habilelabs.io/web-development)**_. It includes everything you need to build rich UIs that work on any device.”_



Ember follows MVVM (Model-View-Viewmodel) model architecture and is best suited to build complex, large-scale, single or multi-page client-side applications.



Without having been backed by those popular and giant-sized companies like Facebook, Microsoft, Google, it is plausible of it to catch up with the frameworks like React.js so fast and secure 4th place among the most-popular JavaScript front-end frameworks in 2020.

Though, React and Angular own the front-end development department, Ember is not too far to reach there. It has everything one can ask for building an application and much more.



It embraces new additives without discarding the old features. Mostly like A battery that will never run out of energy despite adding additional load.



Maybe that was a terrible way to put it like that but you got my point, right?



The Ember CLI is another marvel that provides code generators that generate whole new entities and put them in the right place.



It follows two principles, i.e. Convention over Configuration (CoC) and Don’t Repeat Yourself (DRY). The first one implies that it is highly opinionated and the second one means that it avoids repeating the software patterns.



There are many other reasons why many developers like to work with Ember-



- Built-in devop environment
- Perfect Routing Solutions
- Convention-over-Configuration Approach
- Fully-featured data access library (Ember Data)
- Faster rebuild
- High-performance and faster rendering (due to Gimmer rendering engine)
- Easy upgrades (in every 6 week cycle)
- Backward compatibility
- Fully-featured modern test runner
- Tight-knit community
- Rich Ember Ecosystem

Many master companies like Microsoft, LinkedIn, Netflix, Heroku, Intercom, etc. are currently using it. Let’s see how to install it-



## Getting Started with Ember.js




In order to get started with Ember.js, there are certain requirements you must meet first-



- Node.js latest LTS version installed
- Npm/yarn v5.2 or higher (you can download it via Git installer)
- Working knowledge of **_[JavaScript Framework](https://www.habilelabs.io/blog/svelte-a-magically-fast-javascript-framework)_**


### Installation-


You can install Ember through npm by this simple command-

To check whether the installation completed successfully, pull the command-

You can go ahead if you are shown any version there. Now, to create a new application, you need to hit this command-

It will create a directory ember-quickstart and setup a new application with all default files and dependencies.

## Basic Flow & Core Concepts of Ember



The basic workflow of Ember is depicted in the image below-


![ember-js_1.jpg](https://backend.habilelabs.io/uploads/ember_js_1_e894d739e3.jpg)


### Routers



Each application states, in Ember, is represented by URLs. Once the URLs are set, the Ember router maps them to a specific Route, the Route Handler, which then renders a template and loads a model.


### Templates



Templates are how Ember organizes the HTML layout in the application. It uses the syntax of [Handlebar](http://handlebarsjs.com/) templates.



### Models



Models are objects defining behavior and properties of application data you want to show the user as per what problem your application is trying to solve. They represent persistent states and persist the information to web servers. Different applications have different models (of course!), as they have different purposes.


### Components



Ember components take care of how the UI acts. The components consist of two main parts- a JS component file defining behavior and a Handlebar template defining markup of the user interface.



### Hooks



**_[Hooks](https://www.habilelabs.io/blog/react-hooks-why-better-than-classes)_** in Ember are methods that are called automatically without having to call them specifically in the application. For example, whenever a component renders, the willRender() hook automatically gets called.



### Add-ons



The addons are third-party plugins that extend the functionalities of Ember. While Ember CLI, obviously, is a great asset and provides an easy way for npm packages, these addons offer flexibility and functionalities way beyond than a conventional npm package might provide.

### Ember Observer


Observers, well, observe various properties. This particular tool assesses the quality of dependencies and chooses the best packages for your project. You’ll never again have to wonder about the maintenance of the dependencies.


Observers stay initially in synchronization with Ember and as soon as any property changes, they observe this change immediately and fire. Also, they fire multiple time when observe multiple changes.



### Ember Inspector



The Ember Inspector is a browser addon that helps you inspect your applications and debug them. You can easily download it from any browser like Chrome, Firefox, etc.


### Ember CLI



Ember CLI creates and manages Ember projects. Its part in Ember can be described by the following functionalities-


- Application Asset Management
- Provides a conventional project layout
- ES6 support
- Generation of classes, components, routes, etc.
- [QUnit](https://qunitjs.com/) test harness
- Support and use Addons
As you see we’ve discussed only the basic things about Ember.js, you can get more details [here](https://emberjs.com/).



## Parting Words



Ember is not a very flexible framework as it was created to build fully-fledged large scale applications. Considering the huge size and complexity of Ember.js, it is impressive how well it fares among the lightweight and highly responsive frameworks.



When we compare the performance graph of Ember with others, it is surprising that it is not far behind from **_[React.js](https://www.habilelabs.io/blog/develop-a-responsive-layout-of-mobile-app-with-react-native)_**.



If you are looking for something conventional and permanent, Ember is the right choice. You should go for it!!!



Well, I hope you liked this blog. 



Thanks for reading!! Stay connected with us for **_[future posts](https://www.habilelabs.io/blog)_**.

Insights for the enthused minds!

Want to know more

How we build pillars to achieve heights

Want to join us ?

Let’s fill the gaps with IT