**M**onorepository is a hot topic at the table. Though the concept first appeared about a decade ago, it took so many years for this tool to evolve at a large scale. You would be amazed to know that Google was among the very first companies that embraced this approach along with all its downsides.



>A monorepo is a repository that contains code for many projects and packages.



With monorepo, all you have to do is to manage one repository instead of struggling with multiple different repositories. Facebook and Google present themselves as perfect examples of using Monorepo.

In this blog, we will get a brief insight about monorepo-



## What is Monorepo??



>Monorepo is a combination of two syllabic abbreviations, i.e. mono and repo, where ‘mono’ refers to monolithic and ‘repo’ means repository.



In unison, we’re talking about the monolithic repository which can further be defined as- _A software development strategy to store all the isolated code parts from multiple projects, in a single repository_.



These projects in a monorepo don’t have to be related to each other, in one way or another. But they can still be connected via other means such as dependency management tools.



Monorepo has nothing to do with monolithic apps. Unlike monolithic apps, you can store as many logical apps inside it as you need, irrespective of whether they are website applications or iOS apps.



=> While Git is a version control system used to solve issues around various code versions, Monorepo is a source control pattern which somewhat performs a similar function but with several projects/codebases.


=> You may also compare it with your ‘office work’ folder containing several files, right from documents, packages, servers, applications, etc. In non-technical language, monorepo is nothing but a folder containing the code of several projects in different files (Well, not exactly but close!)


## Why Use Monorepo??



In the programming world, simplicity is everything. A good developer keeps his code as simple as he can. And monorepo is one such approach that helps you to keep your code as simple as possible.



It allows you to follow three basic rules of coding, described as-



- Keeping the code simple
- Reducing the code repetition- DRY Approach (Don’t Repeat Yourself) -
- Rule of composition — Separating out the simple objects and putting them together to form complex ones.


Other than maintaining the code-simplicity and keeping it clean & organized, it also carries some additional features, like-

- Simplified dependency management
- Changes can easily be coordinated across modules.
- Simplified organization of projects.
- Great Tools
- Easier Testing Process
- All-in-one process for lint, build, test, and release.
- Easy to make cross-project changes


Do you know that we can even use react web, react native, and react native Expo project in one **_[monorepo](https://www.habilelabs.io/blog/react-native-react-web-and-expo-together-in-one-monorepo)_**!!

## Tools for Monorepo.



There are a few sets of tools that are excessively used nowadays to manage JavaScript projects having multiple packages in a monorepo. These tools follow the following approach-


![monorepo_1.jpg](https://backend.habilelabs.io/uploads/monorepo_1_a2ec9121dc.jpg)


### Lerna


![monorepo_2.jpg](https://backend.habilelabs.io/uploads/monorepo_2_8cb609bb69.jpg)


It’s a tool that splits up large and complex codebases into smaller and separate packages and publishes each of them on NPM independently. This whole fission is very useful and makes the code sharing process easier. It internally links all the dependencies through symlinking.



>Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm. It can also reduce the time and space requirements for numerous copies of packages in development and build environments.

![monorepo_3.jpg](https://backend.habilelabs.io/uploads/monorepo_3_9a2bdb14ed.jpg)

Here is how you can install Lerna with npm-


```
$ git init lerna-repo && cd lerna-repo
```

Now, you can easily turn this repo into Lerna repository, using-

You’ve created a lerna.repo repository which should look like this now-


```
lerna-repo/
packages/
package.json
lerna.json
```

## Yarn Workspace

![monorepo_4.jpg](https://backend.habilelabs.io/uploads/monorepo_4_58c3a0adb4.jpg)


Another awesome JavaScript dependency management tool that manages monorepo across workspaces. It’s a tool to set up multiple packages, a single yarn install command, and all your project dependencies will be installed, all at once.



>Initially, yarn was not built to support monorepo but in new version, i.e. Yarn 1.0, the feature called ‘Workspaces’ was included.



It links the dependencies together which further makes your workspaces depend upon each other while using the available codes and it becomes easier to deal with them without much conflict.

## The How Part.


Once you get to know about how to implement Monorepo in your project, the further part about installing, running, and managing your code in it becomes too easy.


### Clone:



At first, you need to clone the full repository with the git clone command.



### Install:



Install it in the root folder, using-

### Run:


Now, run any of the code from the packages by any of the following commands -


```
yarn workspace your-package-name script-name
```

### Add npm Libraries:


To add a package (Here, react and react-dom)-


```
yarn workspace your-package-name add react react-dom — dev
```

### Remove npm Libraries:


To remove a package-


```
yarn workspace your-package-name remove react react-dom
```

### Test:


To call the test script for each workspace-

### Pros & Cons.



Everything has some pros as well as cons. The same is true in the case of monorepo. In fact, if you do some research you would find that it is facing quite a lot of criticism. Yes, there are a few downsides as well. Everything has. Flaws come complementary with everything.



#### Let’s have a look at its disadvantages-



- Security Issues- Allows read-access to all the stored projects which leads to security vulnerabilities.
- With the number of packages, increases the bootstrap time.
- Inconvenient for productive OSS collaboration and community building.
- Scalability challenges.


_It is not platonic or something. But it’s not unreasonable either. As a matter-of-fact, it would not wrong to say that that the individuals at Google, Facebook, and Twitter must have had some strong reasons to turn to Monorepos instead of going with thousands of smaller repositories._




Rather we should see so many positive sides of monorepo, like-



- Easier Code Sharing
- Deployment Flexibility
- Team Collaboration
- Atomic Commits
- Library creation is easy.
- Large-scale code refactoring.
- Seamless working between different packages.
- Reduces friction of local development.
- Simpler code review.


Etcetera, etcetera, and etcetera.

You can also read _**[Monorepo for React Native Apps](https://www.habilelabs.io/blog/monorepo-for-react-native-apps-with-nx)**_

With so many advantages, one can easily spare some of the drawbacks. Actually, we can expect all these issues to be resolved in the near future.



Thanks for Reading!!



medium_monorepo_feature.jpg

small_monorepo_feature.jpg

thumbnail_monorepo_feature.jpg

A quick look at its what, why & how parts!!

Mono + Repo = Monorepo

According to the latest stats, Chrome is acquiring 60.98%, Internet Explorer by 12.18%, Firefox by 11.47% and Safari by 3.72% of total market shares in the browser uses. Different users use different versions of browsers to open a website as per their comfort levels. Imagine when your websites don’t provide the same user experience with different combinations of browsers and OS. It will be a major drawback for your business, and you do not want that to happen.

On different browsers, a website provides different user experiences. Cross-Browser testing is the procedure of comparing a site or web app’s design and functionality across different platforms and web browsers to make sure consistent functionality and behaviour for the end-user. With so many varieties of web browsers, operating systems and devices, obtainable today, cross-browser testing has become a critical part of _**[software development](https://www.habilelabs.io/custom-mobile-development)**_.

## What to Test?


In this blog, we are going to discuss the role of cross-browser compatibly. With cross browser testing, we can test our website in all available browsers with different versions to provide same experience to our users everywhere.

- **Base Functionality:** Links, dialogs, menus etc.
- **Graphical User Interface:** Look and feel of the application.
- **Response:** How well the website provide response on user inputs.
- **Performance:** Loading of the pages within allowed the time frame.


## How to do Cross-Browser Testing?

![cross-browser-testing-using-selenium-1.jpg](https://backend.habilelabs.io/uploads/cross_browser_testing_make_your_website_universal_using_selenium_grid_1_15bc174a51.jpg)


There are two possible options available for cross browser testing as shown in the above image-

- **Manual:** Perform all test case manually on different combination of operating system and Web Browsers.
- **Automation:** Using Selenium Grid.


## Selenium Grid
Selenium Grid is a part of Selenium suite which is used for executing test scripts, or we can say test cases across different systems, operating systems and web browser in parallel process. Mainly, there are two versions of Selenium Grid-

- Newer Selenium Grid
- Older selenium Grid

## Advantages of Selenium Grid:

- Used to perform test scripts parallelly in distributed way.
- Can perform multi-browser testing.
- Reduces batch processing time.
- Can perform multi-operating system testing.


## Selenium Grid Architecture:


Selenium Grid works on the Hub-Node Principle. There is machine, or we can say a System that is called Hub, the centre part of the Selenium Grid. All the scripts will be executed from Hub. All the systems, where we want to execute our scripts, called NODE. These nodes are handled by the Hub remotely.

![cross-browser-testing-using-selenium-2.jpg](https://backend.habilelabs.io/uploads/cross_browser_testing_make_your_website_universal_using_selenium_grid_2_d0ae64a661.jpg)

## How to Set-up Selenium Grid??


For configuration of selenium grid, firstly, we have to download selenium Java client Driver, which is a Jar file. Currently, its stable version is 3.141.59. Like we have stated earlier, Grid is working on the principle of HUB-Node. Let’s assume here, machine A is hub and Machine B is Node.

- **Step 1–** Download Selenium Server:
Source:  [https://selenium.dev/downloads/](https://selenium.dev/downloads/)

Now, put this Jar file in C drive of the machine A and B.

- **Step 2–** Open the command prompt and navigate to the location where selenium server/jar file is placed.
- **Step 3–** Execute following Command on Command Prompt:
_java –jar selenium-server-standalone-2.43.1.jar –role hub_


The screen should now look something like this-

![cross-browser-testing-using-selenium-3.jpg](https://backend.habilelabs.io/uploads/cross_browser_testing_make_your_website_universal_using_selenium_grid_3_82deb8cf09.jpg)


- **Step 4-** We can also verify whether the hub is running, by using a browser. Selenium Grid generally use port number 4444 for running Grid. Simply open up a browser and go to: http://localhost:4444/grid/console
- **Step 5–** For now, the hub is set, now we have to launch a node. On the Machine B, open a Command prompt.

Move to Drive C and run the code given-below. Here, we have worked with the IP address 192.168.1.3 because our hub is processing from there only. We can use any port number as well. For Ex. We used 5566 here-

java -jar selenium-server-standalone-3.4.0.jar -role webdriver -hub http://192.168.1.3:4444/grid/register -port 5566

![cross-browser-testing-using-selenium-4.jpg](https://backend.habilelabs.io/uploads/cross_browser_testing_make_your_website_universal_using_selenium_grid_4_aa5e9ae1f5.jpg)


- **Step 6–** Now, move to Machine A, refresh selenium web interface, and you will see the following screen.

![cross-browser-testing-using-selenium-5.jpg](https://backend.habilelabs.io/uploads/cross_browser_testing_make_your_website_universal_using_selenium_grid_5_c92578e4c8.jpg)

At the time, we have set up a simple grid with a NODE on machine B, which is controlled by Hub, on machine A.

Now we move to the Gris’s web interface, hover on the icon of the browser that will be automated. We can note the platform name and Browser name shown by hovering.

## Sample Grid Code:


Create Hub and nodes as explained earlier and TestNG should be configured in eclipse. Here, we have taken a sample test to login to Gmail and enter username and password.


```
public class GridExample {
 @Test
         public void mailTest() throws MalformedURLException{
                 DesiredCapabilities dr=null;
                 nodeURL1 = “<a href="http://192.168.1.4:5566/wd/hub">http://192.168.1.4:5566/wd/hub</a>”;
                 nodeURL2 = “<a href="http://192.168.1.4:5566/wd/hub">http://192.168.1.5:5566/wd/hub</a>”;
                 if(browserType.equals("firefox")){
                 dr=DesiredCapabilities.firefox();
                 dr.setBrowserName("firefox");
                 dr.setPlatform(Platform.WINDOWS);
         
                 }else{
                         dr=DesiredCapabilities.internetExplorer();
                         dr.setBrowserName("iexplore");
                         dr.setPlatform(Platform.WINDOWS);
                 }
                         
                 RemoteWebDriver driver=new RemoteWebDriver(new    URL(nodeURL1), dr);
                 driver.navigate().to("http://gmail.com");
                 driver.findElement(By.xpath("//input[@id='Email']")) .sendKeys("username");
                 driver.findElement(By.xpath("//input[@id='Passwd']")) .sendKeys("password");
        
                 
  
                 Thread.sleep(2000);
  
                                   RemoteWebDriver driver=new RemoteWebDriver(new    URL(nodeURL2), dr);
                 driver.navigate().to("http://gmail.com");
                 driver.findElement(By.xpath("//input[@id='Email']")) .sendKeys("username");
                 driver.findElement(By.xpath("//input[@id='Passwd']")) .sendKeys("password");
        
                  Driver.close();         
 }
```

The above code launches chrome browser and navigates to the URL specified in the nodeURL1 and nodeURL2.

To execute test scripts on the Grid, we require two objects, the first one is DesiredCapabilities and the second is RemoteWebDriver object.

- **DesiredCapabilites** is used to choose the browser and OS that we will automate.
- **RemoteWebDriver** is used to choose node in the network where our test scripts will run.

## Conclusion:


So, in this blog, we have understood the cross-browser testing using Selenium Grid. Now you can easily your website in all available browsers with different versions to provide the same experience to our users everywhere with the help of cross-browser testing.

Here you can know the steps to Install Selenium Webdriver in Eclipse IDE and Create Selenium Webdriver project by visit on it.
Hope this information will be helping you and your growth also.

Keep in touch with us for _**[more blogs](https://www.habilelabs.io/blog)**_.

Cross Browser Testing: Using Selenium Grid

medium_cross-browser-testing-make-your-website-universal-using-selenium-grid.jpg

small_cross-browser-testing-make-your-website-universal-using-selenium-grid.jpg

thumbnail_cross-browser-testing-make-your-website-universal-using-selenium-grid.jpg

A UX designer requires multiple tools to complete several stages of the UX workflow, right from designing to prototyping and handoff. If you work with a PC, you would probably have got irritated till now by the constant mention of Sketch.

Not to mention that, if you are a _**[UX designer](https://www.habilelabs.io/ui-ux-designing)**_, you would already be quite acquainted with Sketch, a popular and streamlined vector graphics editor with countless useful plugins. In a very short span of time, it has become an industry-standard but, here comes its limitation that- it is only available on Mac OS. Which means, unless you have an Apple device, you are left out. But Adobe is actively working on a proper cross-platform and competing with Sketch (and a lookalike), known as- Adobe XD.

## What is Adobe XD?
Adobe Experience Design CC, also called Adobe XD, is a lightweight vector graphics-editor and prototype tool. It was launched for preview in March 2016 as part of ‘Creative Cloud’, and these days it’s in beta-phase, receiving updates almost every month.

Earlier, Adobe had been adding features for UX designers on great tools such as Photoshop and Illustrator. Over the years, and especially after 2013, Adobe Fireworks (the classic web-oriented prototype tool derived from Macromedia)- most of the UX designers felt that Creative _**[Cloud ](https://www.habilelabs.io/cloud-infrastructure)**_ could not match market expectations. So, they approached to Sketch.

Although, Adobe’s response to this mass migration was a bit late (Bohemian coding launched Sketch about 6 years back). But it’s worth the wait, especially if you’re limited to use less-adequate equipment on your PC.

Let’s have a fair discussion to make a comparison between Adobe XD and Sketch-

## User Interface and Exclusive Features

When you open Adobe XD for the first time, you get an impression of familiarity with the interface, whether you are a sketch user or a long-time Adobe fan.

As expected, Adobe departed from Creative Cloud’s dark buttons and menus and offered the best of two worlds. Now, you will see a set of tools on the left side of the screen on Adobe, but also, you’ll see the similar pattern in the form of long layers panel and dynamic properties on the right as in Sketch. It is quite simple to learn and easier to use (without much effort), no matter which device you used before.

Here we are talking about Adobe XD and UX Sketch. Both tools are work towards the same objective, but they are different. How different and which is more preferred? The below image attempts to throw more light into it.

![why-to-choose-adobe-xd-over-sketch-1.jpg](https://backend.habilelabs.io/uploads/why_to_choose_adobe_xd_over_sketch_1_6d6c483b06.jpg)

### Prototyping
Unlike Sketch, you won’t require any third-party plugins to create an interactive prototype in Adobe XD. Adobe Prototype Editor allows designers to connect interactive screens to other screens visually, using wires and transitions.

Once the interactive prototype is ready, you can publish and share it, which you can view with the web or Adobe XD mobile apps. XD Prototyping, however, does not provide support for fixed classes yet such as gestures or headers, like Sketch does with ‘InVision’ and its other prototype-only tools.

### Assets Panel

According to August 2017 report, Adobe added the Assets panel to bring together an interactive style guide having a complete pack of colours, character styles and symbols. Whenever something changes in the assets panel, every use of it in your artwork follow the change. Sketch contains character styles, colour variables and symbols, but all of them are limited to their own panel.

Adobe announced the extending of features in the Assets, the features which will allow the designers to publish the project’s style guide with downloadable fonts, assets & colours hexadecimal code as well as interactive prototypes. There are assumptions for an inspection feature in future to support the developer’s survey of elements inside the prototype which is called “handoff for developers”. This feature was already available in in Sketch (and Photoshop) using plugins such as Zepplin. Another feature being teased in the future is the real-time collaboration within XD, which resembles the collaboration feature of Google Docs and is already available on other UX design tools such as Figma.

## Parting Words:
Adobe XD is the first and foremost choice for Windows users and Adobe Creative Cloud subscribers. Many UX designers are already migrating to XD, either because they believe in XD’s potential that it will set the next standard or they are Creative Cloud subscribers even on macOS. If you are an experienced Sketch user, you will enjoy overall better interface, unique XD features, but also have to deal with current limitations and lack of plugin support. In any case, you should try it out and share your views with us!

medium_why-to-choose-adobe-xd-over-sketch.jpg

small_why-to-choose-adobe-xd-over-sketch.jpg

thumbnail_why-to-choose-adobe-xd-over-sketch.jpg

Why Choose Adobe XD Over Sketch??

_“Recently, I came across an announcement on HackerNews stating that Python replaced Java as the second-most popular language on GitHub. Python has taken over the whole programming world as one of the easiest languages, that too, quite rapidly within the past 4 to 5 years only. The reason behind its popularity is its simple syntax, comprehensive standard library, application-rich & productive nature.”_

Although there is a long list of Python’s features, we are not going in detail because we are here to discuss the newest version of Django, i.e. Django 3.0. It’s been a few days only and this version is already winning the developer’s hearts.

Wondering why?? Well, there is nothing to wonder about. Quality always speaks even when people fail to do so.

However, before going deep down into Django 3.0, it is important to know about Django first. If you are a beginner then you will get your basic ‘What’ and ‘Why’ questions about Django answered in this blog.

## Overview About Django — Features & Benefits


Django is an open-source, high-level and free Python-based web framework, used to ****[develop web applications](https://www.habilelabs.io/web-development)**** and _**[database-driven](https://www.habilelabs.io/database-solutions)**_ websites. It comes with all essential libraries & tools thus, often known as the **“Batteries-included”** framework.

One can create a web application with the use of either of any Tkinter GUI toolkit, Flask or Django framework. But which one of these will be the best fit for your project?? When to use Django?? And Why to use Django??

We can use Tkinter GUI for small projects only so, we’ll cancel out this option. Now, we’re left with two more choices, i.e. Flask or Django. As per the very first question, which one will be the best fit for your project, it depends upon your requirements. If you want to create a complex application quickly and easily then Django will be an obvious choice.

In answer to another question as ‘when to use Django’, if you want to build a secure and reliable web application with the least efforts then Django is the best choice to go for. You can also integrate your application with cutting-edge technologies like Machine Learning in the future. In the case of Flask, you will have to do most of the coding by yourself whereas Django makes it easy for you with its built-in libraries.

## Major Features of Django- Why Django??


As we reach the next question, **‘why to use Django’**, I would say that no framework other than Django will offer simplicity, scalability, security, flexibility and reliability to your applications. It is also rich in very intuitive technical features, such as-

- Simple Syntax
- Operating System Independent
- HTTP libraries
- Own web server
- DRY (Don’t Repeat Yourself) Code
- ORM (Object Relational Mapper) Support
- Middleware Support
- MVC (Model-View-Controller) Architecture
- Batteries-included Framework


What’s New with Django 3.0?
As we are already aware that Django is a fast, simple and secure framework. It can be considered as an exemplary framework that allows tackling projects of any size whether it is a complex high-load web application or otherwise.


>“In an annual survey report by Stack Overflow, Django got the Sixth position in Top-most Loved Web Frameworks List.”

With the up-gradation of the framework, the features have also stepped a level up. Django 3.0 is compatible with the latest versions of Python, i.e. Python 3.6, 3.7 and 3.8. It enables faster database and web applications to be created, precisely and efficiently.

## Now, moving aside all your assumptions, we focus our attention towards the intuitive features of Django 3.0 framework, as mentioned below-

### Supports MariaDB


Django 3.0 supports MariaDB 10.1 and higher versions with the use of MySQL backend, which is a great update. MariaDB is an open-source relational database, developed by MySQL developers, built upon three main pillars as openness, stability and performance. It is quite popular in the developers’ world due to its exclusive feature of turning data into a structured format for a number of applications.

### Python Asynch Support


Django has begun its journey being Python Asynch, one of the most powerful features of Python, which makes python programs run faster and efficiently especially in case of networking applications. In addition to the existing WSGI (Web Server Gateway Interface), Django 3.0 now provides full support to run as an ASGI (Asynchronous Server Gateway Interface) application.

For the past few years, ASGI, being a single-callable asynchronous interface, is grabbing a lot of attention, and for many good reasons. It acts as an interface between asynchronous web servers and Python asynchronous applications. While WSGI is intended to be compatible only with the synchronous web applications, it supports HTTP protocol only, which is a limitation.

But now, with the introduction of python-asynch, Django 3.0 can now run multi-queries simultaneously on a single thread.

### Enumerations for Model Field.Choices


Field Choices are now available as a group of custom enumeration types such as **IntegerChoices, TextChoices,** and **Choices**. While it is transparent from the IntegerChoices and TextChoices classes that they are indicating towards integer and text fields respectively, the Choices class enables defining enumeration for other concrete datatypes.

### Adding Exclusion Constraints on PostgreSQL


In this Django 3.0 version, support for _**[PostgreSQL](https://www.habilelabs.io/blog/sequences-in-postgresql)**_ 9.4 has been dropped, rather, it now supports PostgreSQL version 9.5 or higher. The newly included feature, i.e. **ExclusionConstraint** class, allows adding exclusion constraints on PostgreSQL using **Meta.constraints()** option.

### Filter Expressions
It’s indeed a great update for the developers because unlike the previous versions, Django 3.0 can now directly use the expressions resulting **BooleanField** in the **QuerySet** filters. The same was not true earlier, in fact, previously these expressions were first annotated and then filtered against the annotations and it was quite a challenging and time-taking process.

## Backwards Incompatible Changes in Django 3.0


- **Model.save():** In older versions of Django, Model.save() action used to find a row while saving a new model instance and performed either an INSERT or UPDATE based upon whether the row exists or not. But now, it only performs a single INSERT query always.


You need to call **Model.save()** while providing a default primary key value equivalent to pass **force_insert=True** to model’s save(). Any attempts to update an existing row using a new Model instance will result in IntegrityError.

- **Python 2 Private APIs:** While support for Python 2 was dropped with the release of Django 2.0, some private APIs were still in use. Due to the compatibility issue, [some of these APIs](https://docs.djangoproject.com/en/3.0/releases/3.0/) have been removed.

- **New default value for FILE_UPLOAD_PERMISSIONS:** Previously, the setting FILE_UPLOAD_PERMISSIONS default to None but now it defaults to 0o644 to avoid the inconsistency aroused due to the default FILE_UPLOAD_HANDLERS setting.

- **New default values for Security Settings:** To advance the security for Django projects, there have been enhancements in security settings. Now, SECURE_CONTENT_TYPE_NOSNIFF defaults as ‘True’ while X_FRAME_OPTIONS defaults to ‘DENY’.


## Some miscellaneous changes in Django 3.0 are-


- To disambiguate models of same names in different apps, ContentType._ _st2_ _() includes model’s app_label.

- To escape HTML, Django.utils.html.escape() now works as html.escape().

- Rather than working as a shortcut for –keepdb, the django-admin test -k option now works as unittest -k.

- The option urlencode() now encodes the iterable values, as they are when ‘doseq=False’, instead of iterating and bringing them into line with the urllib.parse.urlencode() function, as used to done earlier.

- RegexPattern, as used by re_path(), does not return ‘None’ values keyword-arguments anymore, to be passed to the view for the optional named missing groups.

Well, this is not it, the list of all the miscellaneous changes is quite long, which you can check out in the [Django 3.0 Release Notes](https://docs.djangoproject.com/en/3.0/releases/3.0/).

### Removed Features in Django 3.0


Some features have reached to the end of their deprecation cycle, thus, have been removed in Django 3.0, are as follows-

![python-django-3-0-is-here-check-whats-new_1.jpg](https://backend.habilelabs.io/uploads/python_django_3_0_is_here_check_whats_new_1_7a89d496e4.jpg)


Also,

- Support for PostgreSQL 9.4 has been dropped, now supports versions>= 9.5.
- Support for Oracle 12.1 ended with the release of Django 3.0, now it supports 12.2 and 18c versions.
- Support for pywatchman versions lower than 1.2.0 is removed.
- Support for sqlparse versions less than 0.2.2 is removed.
- Django.contrib.gis: Django 3.0 no longer supports PostGIS 2.1, SpatiaLite 4.1, 4.2, GDAL 1.11 and GEOS 3.4.

## How to Install??


Now, as we come to discuss the downloading procedure of Django 3.0, make sure to install the latest version of Python first. There are certain ways to install Django 3.0, better to go with Git Clone, as you will be notified about all the incoming changes and bugs-


```
git clone https://github.com/django/django.git
python -m pip install .
```

You can also install it with pip command-

Well, we are done here, folks!! I hope you got all the necessary information about Django 3.0 in this blog. Django upholds being rational and contemporary and is evolving all around the world with its latest updates. It keeps upgrading to 3.0.1, 3.0.2 and so on versions, deprecating, removing outdated features and fixing all the bugs, unleashing a wide scope for future applications.

For more similar latest tech release _**[blogs](https://www.habilelabs.io/insights)**_, stay tuned with our frequency!!

Python Django 3.0 is Here — Check What’s New!!

medium_python-django-3-0-is-here-check-whats-new_feature.jpg

small_python-django-3-0-is-here-check-whats-new_feature.jpg

thumbnail_python-django-3-0-is-here-check-whats-new_feature.jpg

Stripe is one of the most popular cloud-based payment gateway service providers that makes individuals as well as corporate businesses to receive payments over the world wide online. It has some client-side libraries in JavaScript and native mobiles. To handle the payment request on server side, it has a collection of rich server-side libraries in various technologies such as Java, Node.js, PHP, Ruby, etc. These libraries help us to reduce the complexity of payment receiving methodology by having the abstracted layers.

So, due to its simplicity, we don’t even have to deal with the card detail directly, instead, we can deal with a token symbolizing an authorization to recharge the card. As Stripe has a lot of useful services, Struts2 offers support for integrating the Stripe API and implementing the payment functionality into your Struts2 applications. Here, we will learn about some useful steps to integrate Stripe payment gateway with struts2 application.

## Integrating Stripe with a Struts2 Application
To start integrating this payment gateway with the API, we require to create an account on Stripe.

### #Create a Stripe Account

Creating an account is very simple, and the only thing you need to do is verify your email address and phone number. Although this will only provide you with a test account while your application is approved by Stripe, which can take anywhere from a few minutes to a few days.

Right at the dashboard, you’ll be able to find the live/test keys for the API:

![struts2-stripe-payment-gateway-integration-and-subscription-1.jpg](https://backend.habilelabs.io/uploads/struts2_stripe_payment_gateway_integration_and_subscription_1_0560f5735f.jpg)

Before getting started to coding, you need to understand a very important that Stripe service is based on tokens. Whenever you want to charge your credit card, all you need to do is to create token passing credit card info as parameters and then use the created token as a source. A token can be used only once, so if you’ll try to use it twice, you will get an error that token is invalid or expired.

A token can be generated on the back-end from Stripe using an appropriate method, but it’s not a good idea to send the credit card details directly to your server, as someone can easily intercept the data (Man-in-the-middle attack).

Sending credit card info directly to Stripe using Stripe.js library is the best and secure way. The flow for such a case is the following:

- Send data from the web page to Stripe.
- Stripe returns token.
- Send a token to the backend server.
- Charge credit card using token.

#### Such an approach has two benefits:

1. You don’t pass any sensitive data to your backend server.
2. Even if the token will be intercepted by a man-in-the-middle he cannot retrieve any credit card info from this token

Here we are using the test API keys for integration. Since the stripe-java dependency isn’t in the initial pom.xml, we’ll add it directly to this file:


```
&lt;dependency>
     &lt;groupId>com.stripe&lt;/groupId>
     &lt;artifactId>stripe-java&lt;/artifactId>
     &lt;version>14.4.1&lt;/version>
 &lt;/dependency> 
```

There are much more payment transaction API for integration, but most of these are having two frequently integration methods of charging a customer:

1. One-time Purchase (I am going explain this way here in this blog)
2. Subscription (Click here to learn about the Stripe subscription for recurring payments.

## One-Time Purchase
To implement the one-time payment, you need to follow the below steps to integrate charge API in the struts2 application.

### #1. Create Checkout Form

Stripe Checkout is a customizable, localizable and mobile-ready widget used to render a form to introduce credit card details. It includes and configures “checkout.js”, which is responsible for:

– “Pay with Card” button rendering

– Payment overlay dialog rendering (triggered after clicking “Pay with Card”)

– Credit card validation

– “Remember me” feature (associates the card with a mobile number)

– Sending the credit card to Stripe and replacing it with a token in the enclosing form


```
&lt;form id="myForm" action="/payment/pay.html" method="POST">
 
&lt;input type="hidden" name="amount" value="500.0" />
 
    &lt;script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="pk_test_v8tRSPbxyEfKTlcJo8uAeEgh"
        data-amount="2000.0"
        data-name="Stripe.com"
        data-description="Widget"
        data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
        data-locale="auto"
        data-zip-code="true">
    &lt;/script>
 
&lt;/form>
```

![struts2-stripe-payment-gateway-integration-and-subscription-2.jpg](https://backend.habilelabs.io/uploads/struts2_stripe_payment_gateway_integration_and_subscription_2_d14eedd4d6.jpg)

The “checkout.js” script automatically triggers a request to Stripe right before submission, which then appends the Stripe token and the user email as the hidden fields “stripeToken” and “stripeEmail”.

The amount (“data-amount”) is used only for display purposes (along with “data-currency”). **Its unit is Cents of the used currency, so we divide it by 100 to display it.**

The Stripe public key is passed to Stripe after the user asks to pay. Do not use the secret key here, as this is sent to the browser.

### #2. Configure struts.xml File
Map the above form action in struts.xml configuration file:


```
&lt;action name="payment/pay" class="paymentAction" method="payNow">
	&lt;result name="error">/WEB-INF/jsp /pay-now.jsp&lt;/result>
	&lt;result name="success" type="redirect">/payout-success.html?topup=true&lt;/result>
&lt;/action>
```

### #3. Create Struts2 Action
Create the PaymentAction.java to handle the stripe request in back-end:


```
import com.stripe.exception.StripeException;
import com.stripe.model.*;
import com.stripe.param.PlanRetrieveParams;
public class PaymentAction extends BaseAction {
    private static final long serialVersionUID = 5745206363886171770L;
    private String email;
    private String phoneNumber;
    private String token;
    private String stripeToken;
    private float amount;
    public String payNow() {
    // Set your secret key: remember to change this to your live secret key in production
    // See your keys here: https://dashboard.stripe.com/account/apikeys
    //Stripe.apiKey = "sk_test_ox1kkZ7ukxBQbPcDSEYYjnM7";
    
    // Charge the user's card:
    Map&lt;String, Object> params = new HashMap&lt;String, Object>();
    params.put("amount", (int) (amount * 100));
    params.put("currency", "usd");
    params.put("description", "Snaprecruit Topup");
    params.put("source", stripeToken);
 
    Charge charge = Charge.create(params);
    if (charge.getPaid()) {
        //Do your stuffs here if payment is successfully done.
        return "success";
    }
    else {
        return "error";
    }
}
```

## Subscription for Recurring Payment
Before we move to integrate the subscription API, we need to have a quick glance at the subscription requirement. A subscription, formally for recurring payments is referred to as Automatic Payment process, which means that a customer has permitted the merchant or retailer to deduct payments for services or goods every month from his/her bank account to automatically charge his/her credit card in the amount due each month.

![struts2-stripe-payment-gateway-integration-and-subscription-3.jpg](https://backend.habilelabs.io/uploads/struts2_stripe_payment_gateway_integration_and_subscription_3_f7dc0ddc7a.jpg)


The merchant needs to get one-time front permission from the customer. The merchant deducts the amount for a scheduled day in every month automatically, so the customer needs not worry about the late fee. The automatic payments continue until the consumer retracts his permission.

In the previous paragraph about One-Time Purchase, we learned about how to create a stripe account and get the publishable key and secret key.

To implement the subscription for a recurring payment, you need to follow the below steps to integrate charge API in the struts2 application.

Use [stripe’s official guide](https://stripe.com/docs/billing/subscriptions/set-up-subscription) to set up a subscription and charge a customer. In this link, you will be able to create some products and plans on your stripe account. Here, we will cover the following points:

1. Using Stripe form element for card details.

2. Create customer by user inputs.

3. Apply Subscription for a selected plan.

### #1. Create Checkout Form for Subscription
Create an HTML form with below UI:

![struts2-stripe-payment-gateway-integration-and-subscription-4.jpg](https://backend.habilelabs.io/uploads/struts2_stripe_payment_gateway_integration_and_subscription_4_80ce503993.jpg)

### #2. Code to Create Subscription Form
Use the following HTML code for the above UI design-


```
&lt;!DOCTYPE html>
&lt;head>
  &lt;title>Stripe Checkout Form&lt;/title>
&lt;/head>
&lt;body>
&lt;form action="/payment/pay-subscription.html " method="post" id="payment-form">
&lt;div id="emaildiv">
  Email: &lt;input type="email" name="email" id="email" class="form-control"   value="" required="required" /> 
&lt;/div>
&lt;div id="phone-number">
  Phone Number:&lt;input type="text" name="phoneNumber" id="phoneNumber"  required="required" />
&lt;/div>
 
 &lt;div id="bill-name">
  Name: &lt;input type="text" name="billingName" id="billingName" class="form-control"  required="required"/>
&lt;/div>
 
&lt;div class="form-group">
  &lt;label for="card-element"> Card Information &lt;span style="color:red;">*&lt;/span>&lt;/label>
  &lt;div id="card-element">
    &lt;!-- A Stripe Element will be inserted here. -->
  &lt;/div>
  &lt;!-- Used to display form errors. -->
  &lt;div id="card-errors" role="alert">&lt;/div>
&lt;/div>
&lt;div id="addline1">
  Address Line1:  &lt;input type="text" name="billingAddressLine1" id="billingAddressLine1” required />
&lt;/div>
&lt;div id="addline2">
  Address Line2: &lt;input type="text" name="billingAddressLine2" id="billingAddressLine2"/>
&lt;/div>
&lt;div id="city">
  City:&lt;input type="text" id="city-select" name="billingCity" placeholder="City" required>
&lt;/div>
&lt;div class="dd-div">
  State:  &lt;select id="state-selectSelectBoxIt” name="billingStateCode" required>
    &lt;option value="">Select a state&lt;/option>
    &lt;option value="A">Alaska&lt;/option>
  &lt;/select>
&lt;/div>
 &lt;div id="zipcode">
 ZIP Code:  &lt;input type="text" name="billingZip" id="billingZip" class="form-control" required="required"/>
&lt;/div>
&lt;div class="dd-div">
 Country: &lt;select id="country-select" name="billingCountry" class="form-control" required>
    &lt;option value="">Select a country&lt;/option>
    &lt;option value="US">United States&lt;/option>
  &lt;/select>
&lt;/div>
&lt;div id="name-on-card" class="cstmcheck">
  &lt;input type="checkbox" id="agreeterm" name="userAgree" value="true" />
  &lt;label for="agreeterm">I Agree to Terms &amp; Conditions&lt;/label>
&lt;/div>
 
&lt;div class="sbmtpayment">
  &lt;!-- Add the amount in hidden field ----->
  &lt;input type="hidden" name="amount" id="amount" value="500"/>
  &lt;!-- Add the stripe plan id in hidden field ----->
  &lt;input type="hidden" name="stripePlanId" id="stripePlanId"  value="plan_adbxodroeXXXX"/>     
  &lt;button class="btn btn-primary green-btn ml-0">Submit Payment&lt;/button>
&lt;/div>
&lt;/form>
 
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">&lt;/script>
&lt;/body>
&lt;/html>
```

### #3. Credit Card Validation and Form Submission
Before the closing body tag in the above code snippet, add the following JavaScript code which handles the client credit card validation and the form submission with the appropriate plan, the amount generated stripe token.


```
&lt;script>
     //var stripe = Stripe('pk_test_v8tRSPbxyEfKTlcJo8uAeEgh');
    var elements = stripe.elements();
    // Custom styling can be passed to options when creating an Element.
    // (Note that this demo uses a wider set of styles than the guide below.)
    var style = {
        base: {
            color: '#32325d',  fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',  fontSize: '16px',  '::placeholder': { color: '#aab7c4'   }
        },
        invalid: {
            color: '#fa755a',  iconColor: '#fa755a'
        }
    };
    // Create an instance of the card Element.
    var card = elements.create('card', {hidePostalCode: true, style: style});
 
    // Add an instance of the card Element into the `card-element` &lt;div>.
    card.mount('#card-element');
    // Handle real-time validation errors from the card Element.
    card.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });
    // Handle form submission.
    var form = document.getElementById('payment-form');
    form.addEventListener('submit', function(event) {
        event.preventDefault();
        if($('input[name="userAgree"]:checked').length == 0) {
            alert("Please accept the Terms and Conditions!!");
        }
        else {
  stripe.createToken(card).then(function (result) {
  if (result.error) {
    // Inform the user if there was an error.
    var errorElement = document.getElementById('card-errors');
    errorElement.textContent = result.error.message;
  } else {
    // Send the token to your server.
    stripeTokenHandler(result.token);
  }
           }); 
        }
    });
    // Submit the form with the token ID.
    function stripeTokenHandler(token) {
 
        // Insert the token ID into the form so it gets submitted to the server
        var form = document.getElementById('payment-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);
        // Submit the form
        form.submit();
    }
&lt;/script>
```

## Conclusion:
In this blog, we’ve shown how to make use of the Stripe Java API to charge a credit card and using the struts2 framework. To test the entire charge and subscription flow, we don’t need to use a real credit card even in test mode. We can use Stripe testing cards instead.

The charge operation is one of many possibilities offered by the Stripe Java API. The official _**[API](https://www.habilelabs.io/api-development)**_ reference will guide us through the whole set of operations.

Struts2 – Stripe Payment Gateway Integration & Stripe Subscription

medium_struts2-stripe-payment-gateway-integration-and-subscription.jpg

small_struts2-stripe-payment-gateway-integration-and-subscription.jpg

thumbnail_struts2-stripe-payment-gateway-integration-and-subscription.jpg

What do you understand by the word Vulnerability?? Liability? Inability to withstand the situation? A weak spot, easy to be exploited? Well, all of them are true. The vulnerability can crop out in terms of physical, social, psychological, technical, financial, legal or any other sector and it is crucial to be assessed to determine its severity and potential impact so that possible security measures could be taken.

The same is true with the case of _**[software application](https://www.habilelabs.io/custom-application-development)**_ vulnerabilities. Thus, it is very important to identify them first in order to process further in the direction of preventing their impact. Here comes the role of CVSS. Let’s move forward to know what is this CVSS-

## Overview About CVSS


The CVSS (Common Vulnerability Scoring System) is the standard scoring system used to estimate the criticality of the vulnerabilities present in the software application.



>In technical language,
CVSS is an open framework that calculates the severity of software vulnerabilities in the form of a numerical value (called Base Score), ranging from 0 to 10. The score value reflects whether the vulnerabilities present in the software are low, medium, high or critical in nature.
However, the whole procedure of calculating the Vulnerability Score is quite complex; first, you have to write a whole lot of code, mention the metrics in string form, apply the formula and then you will get the Base Score.

But these all efforts can be reduced immensely with the help of CVSS Calculator. We’ll get a detailed report about CVSS Calculator in this blog-

## CVSS Calculator: Introduction


As technology is ruling over time, thousands of amazing applications, packages, techniques get released every day and help human minds by significantly reducing their efforts. CVSS Calculator is one of those many tech-applications.

As you can easily deduce from the term ‘CVSS Calculator’, it calculates the Vulnerability Score in an application. From the point of view of a developer, it can greatly diminish your endeavors of calculating the Vulnerability Score. All you need to do is to follow the below-given 4 steps-

- Install the [npm package of the CVSS calculator](https://www.npmjs.com/package/cvss-v3.1-react).
- Hover over the base parameters.
- Select appropriate options from the available metrics (as shown in the image below).
- Click on the ‘Generate CVSS’ key.

And that’s it. You will be provided with the final score. How simple is that!!

![cvss-calculator-software-vulnerability-scoring-process_1.jpg](https://backend.habilelabs.io/uploads/cvss_calculator_software_vulnerability_scoring_process_1_1281cbbc60.jpg)

## Base Matrix Group/ Base Parameters

Before going through the procedure to install the npm package of the calculator, it would be great to refresh our memories about base parameters.

The Base Matrix Group basically reflects the intrinsic characteristics of a vulnerability that are uniform and constant over time, irrespective of user environments. It is comprised of two sets of metrics, together known as Base Parameters, that are-

1. Exploitability Metrics

2. Impact Metrics

### Exploitability Metrics -


The Exploitability Metrics represent the properties of the vulnerable components and the ease by which they can be exploited. In the following sections, we’ll have a look upon various exploitability metrics that define the characteristics of the vulnerability that accomplish successful exploitation-

#### Attack Vector (AV)

This metric evaluates the context by which the vulnerability can be exploited. More remote the attacker is, the larger will be the base score. Instead of writing the whole string, you can just select the metric value from the available options, that are as under-

- Network: <Value 0.85>
- Adjacent: <Value 0.62>
- Local: <Value 0.55>
- Physical: <Value 0.2>


#### Attack Complexity (AC)

This metric reflects how complex/easy it is to exploit the vulnerability i.e. the base score will be greatest for the least complex attacks. You need to select one of the values from ‘Low’ <Value 0.77> and ‘High’ <Value 0.44>.

#### Privileges Required (PR)

It determines the privilege level the attacker must possess for the successful exploitation of the vulnerability. The base score will be highest in case of no privileges. The possible values are:

- None: <Value 0.85>
- Low: <Value 0.62>
- High: <Value 0.27>

#### User Interaction (UI)

It describes whether a vulnerability can be exploited without the participation of a separate user or not. The values it contains are: None <Value 0.85> and Required <Value 0.62>.

#### Scope (S)

It captures whether or not the vulnerability has any impact upon the components beyond its security scope. The base score is lowest when no change occurs. There are two values basically i.e. Changed and Unchanged.

### Impact Metrics -

The impact metrics reflect the impact and consequences of a successfully exploited vulnerability on the components that are affected to the worse and directly associated with the attack, in one way or another. Nevertheless, the final impact is determined by the combined effect of all the three impact-metrics together, described below.

The 3 possible values for each of the impact metrics are as following- High: <Value 0.56>, Low: <Value 0.22> and None: <Value 0>

#### Confidentiality (C)

This metric scales the amount of confidential information that has been compromised in the impacted component due to the exploitation attack. The term ‘Confidentiality’ refers to limiting the disclosure of sensitive information to authorized users only. The Base Score is directly proportional to the loss of confidentiality. Higher the confidentiality loss, the greater the Base Score value.

#### Integrity (I)

Integrity metrics measure the impact of the exploited vulnerability on the integrity of the information, used by the impacted components. When the impact is highest, the Base Score value will be greatest.

#### Availability (A)

The availability metric describes the impact on the availability of the target system. Attacks that consume network bandwidth, processor cycles, memory or any other resources affect the availability of a system. When the consequence of the impacted component is highest, the Base Score value will be greatest.

## How to Calculate the Base Score??

The Base Score reflects the severity of vulnerability as per its exploitability and impact parameters. Earlier, before the release of this package, we have to use all our mathematics knowledge in order to determine the below-given parameters and finally to calculate the Base Score. 

**Let’s see how-**

Base Score depends upon three parameters known as Impact Sub Score (ISS), Impact and Exploitability. So, first, we need to determine the value of these parameters and then only we can use the formula of Base Score.

1. Impact Sub Score (ISS) -

[ISS= 1- [(1- Confidentiality) *(1- Integrity) *(1- Availability)]]

2. The Impact value can be determined with the formula-

- If Scope is Changed, Impact= [7.52 *(ISS-0.029)- 3.25 *[(ISS-0.02) ^15]]
- If Scope is Unchanged, Impact= [6.45 *ISS]

3. Exploitability can be determined from the formula-

[Exploitability = 8.22 × Attack Vector × Attack Complexity × Privileges Required × User Interaction]

After determining all these parameters, the Base Score can easily be found out as under-

- If ISS <=0, the Base Score will be 0.

Else,

- If Score Unchanged=> [Base Score = Roundup (Minimum [(Impact + Exploitability), 10)]]
- If Score Changed=> [Base Score = Roundup (Minimum [1.08 *(Impact + Exploitability), 10)]]


## CVSS Score:

After determining the Base Score, we used to check out the severity level of the vulnerabilities on the basis of tagging the score with the rating scale as mentioned below:

- None: <0>
- Low: <0.1 to 3.9>
- Medium: <4 to 6.9>
- High: <7 to 8.9>
- Critical: <9 to 10>

But, with the introduction of the CVSS Calculator, this whole calculation process, of determining the base score, got limited to a click only. Let’s check out the how-to-install this calculator below-

## Installation Process:

The npm package installation process for CVSS Calculator has been described below in a few easy steps-

- Enter the following command on the Command Prompt-

- After installation, you need to import **cvss-v3.1-react-**


```
import CvssV3 from ‘cvss-v3.1-react’
```

- Now, include the **cvss-v3.1-react** component with the command, as given below-


```
const severityVector = “CVSS:3.1/AV:N/AC:L/PR:N/UI:R/S:U/C:H/I:N/A:L”;
//severityVector is optional variable. It can be used to initialize the calculator.
<CvssV3 severityVector={severityVector} onChange={(data)=>{
//In data variable, you will get cvss score and cvss vector
}}/>
```

You can customize the styles based on your requirements as per the details, given in this article. Check out the npm package of [CVSS Calculator](https://www.npmjs.com/package/cvss-v3.1-react)

## Parting Words:

This was all about the CVSS Calculator, we hope you find it beneficial!! Stay connected with our page for more blogs about _**[Latest Tech Releases](https://www.habilelabs.io/blog)**_. It’s time to part ways but before taking your leave we would like to tell you that we are looking forward to your valuable feedback & suggestions about this blog. Also, you can ask your related queries in the comment box.

CVSS Calculator-Software Vulnerability Scoring Process

medium_cvss-calculator-software-vulnerability-scoring-process_feature.jpg

small_cvss-calculator-software-vulnerability-scoring-process_feature.jpg

thumbnail_cvss-calculator-software-vulnerability-scoring-process_feature.jpg

The Null Object Design Pattern wraps up the null into its own object. Instead of having a null reference for some object, we wrap it into a NULL version of that object which will implement the same interface that of the object, i.e. same methods and properties.

#### According to a Paper on Null Object,

>The intent of a NULL OBJECT is to encapsulate the absence of an object by providing a substitutable alternative that offers suitable default do-nothing-behavior. In short, a design where “nothing will come of nothing”.

We can use this pattern whenever we have the NULL object returned or checked against before accessing the properties of the object. It has a kind of do-nothing behavior on its methods.

## Problem:


We often get a situation where we have to check if an object exists and then we need to get its properties/methods. This kind of code gets messy very easily in medium to large scale applications repeating itself all over the codebase.


```
if (object != null &amp;&amp; object.name != null)
   // do something with name
```

Take a look at the code below, we have a very simple example of a greeting code where we welcome the user by name if the person’s name is set, else, we say it ‘Guest’.


```
class Person {
   constructor(id,name) {
     this.id = id
     this.name = name;
   }
 }
 const persons = [
   new Person(1, "John Doe"),
   new Person(2, "John Papa")
 ]
 function findPerson(id) {
   return persons.find(person =&gt; person.id === id)
 }
 let personOne = findPerson(1)
 if(personOne != null &amp;&amp; personOne.name != null)
 {
    console.log("Welcome, " + personOne.name)
 }
 else
 {
    console.log("Welcome Guest")
 }
 // Again in some other part of code
 let personOne = findPerson(2)
 if(personOne != null &amp;&amp; personOne.name != null)
 {
    console.log("Welcome, " + personOne.name)
 }
 else
 {
    console.log("Welcome Guest")
 }
```

Each time after retrieving the object, we are checking its existence before printing its name.

## Solution:

Null Object Design Pattern will remove the need of having lots of checks for null throughout your code. Let’s rewrite the above code using this pattern.

At first, we create a null wrapper class for the Person class and later we instantiate the null class if the person is not found instead of returning null.


```
class Person {
   constructor(id,name) {
     this.id = id
     this.name = name;
   }
 }
 // Null person wrapper
 class NullPerson {
   constructor() {
     this.id = null
     this.name = 'Guest';
   }
 }
 const persons = [
   new Person(1, "John Doe"),
   new Person(2, "John Papa")
 ]
 function findPerson(id) {
   const person = persons.find(person =&gt; person.id === id)
   if (person)
     return person
   else
     return new NullPerson()
 }
 let personOne = findPerson(1)
 console.log("Welcome, " + personOne.name)
 let personTwo = findPerson(99)
 console.log("Welcome, " + personTwo.name)
```

As we can see above, though this pattern requires you to add a bit extra code at the beginning, it can reduce the code length and minimize complexity a lot in long run, especially in _**[large applications](https://www.habilelabs.io/custom-application-development)**_.

## Conclusion:


When used wisely, the Null Object Pattern will make your program cleaner. It should be used where it needs to, overusing it may cause error/bugs harder to detect and fix.

A Null Object should not be used indiscriminately as a replacement for null references. It is intended to encapsulate the absence of an object where that absence is not profoundly significant to the user of an actual object. If the optionality has fundamental meaning that leads to different behavior, a NULL OBJECT would be inappropriate.

Null Object pattern is often implemented as Singleton as all Null Objects of a class will be identical so there is no need for new instances.

Give it a try in your own project next time. You can connect with us if you need consultancy on Node js. You can know about JavaScript Performance Pattern to improve its performance.

Thanks for reading!

Keep in touch with us for _**[next blogs](https://www.habilelabs.io/blog)**_.

Handling Nulls in JavaScript Using Null Object Design Pattern

medium_handling-nulls-in-javascript-using-null-object-design-pattern.jpg

small_handling-nulls-in-javascript-using-null-object-design-pattern.jpg

thumbnail_handling-nulls-in-javascript-using-null-object-design-pattern.jpg

Extracting out vocals, karaoke, drum, bass, piano or other tracks with clarity, from the original audio source, has been a dream for the music producers, mashup artists, DJs, music signal researchers, etc. They spend a lot of time to isolate tracks from the original source and are even ready to pay a big amount of money for a software/tool to help them do it. Also, every fresher singer wishes to give his/her best performance but struggles due to the unavailability of a good-quality karaoke track.

Deezer has released a really cool piece of software known as Spleeter. This open-source AI audio separation tool has interested the whole MIR (Music Information Retrieval) community and music artists quite a lot because of its exclusively high-quality track separation features. A very interesting fact is that you don’t need to know coding to use it, all you have to do is to type some lines on command-line.

Let’s get a quick detailed view about it-

## Overview About Spleeter


Spleeter is a powerful AI (Artificial Intelligence) tool, released by a French Online Music Streaming Service ‘Deezer’, to isolate tracks from the compiled audio sources. It is a Python & TensorFlow based library that uses Machine Learning to separate audio into stems/layers. In a pretty accurate and precise sentence, “Spleeter is a fast and state-of-the-art music source separation tool with pre-trained models.”

![spleeter-a-tensorflow-based-python-library_1.jpg](https://backend.habilelabs.io/uploads/spleeter_a_tensorflow_based_python_library_1_eb96c24a2a.jpg)

The library comes with three pretrained models, known as:

- 2 Stems- Vocals and other accompaniments separation
- 4 Stems- Vocals, drums, bass and other separation
- 5 Stems- Vocals, drums, bass, piano and other separation


## Key Features:


In a report, the Deezer team states the reason behind releasing Spleeter-


>We release Spleeter to help the Music Information Retrieval (MIR) community leverage the power of source separation in various MIR tasks, such as vocal lyrics analysis from audio, music transcription, any type of multilabel classification or vocal melody extraction.

**Some of its key features are mentioned here-**

- Free & Open Source
- Faster & Easy to Use
- High-Quality Audio Separation in No Time


Deezer itself is using Spleeter for some research applications. Herault said in a report that-


>We’re using it as a pre-processing tool for complex research tasks such as music categorization, transcription and language detection.

Apart from music source separation, Spleeter has some other potential applications such as Upmixing, active listening, manipulating audio files for security reasons, for educational purposes, etc.

## Installation Process -

![spleeter-a-tensorflow-based-python-library_2.jpg](https://backend.habilelabs.io/uploads/spleeter_a_tensorflow_based_python_library_2_7bdf2c9470.jpg)


There are three ways to install Spleeter i.e. by using Conda, Pip and Docker. For installation using _**[Docker](https://www.habilelabs.io/blog/docker-develop-deploy-containerized-applications)**_, you can visit the Deezer’s depositary on GitHub. Here, we’ll only check out the first two methods-

## How to Install Spleeter Using Pip??


Spleeter can be installed directly by using Pip package manager presuming the following dependencies are installed-

- ffmpeg
- libsndfile (will be needed only if you are planning to perform the evaluation.)


**To install ffmpeg on Windows:**

- Download Static Build from this link.
- Extract it in your folder.
- Open the Command Prompt and Run it as Administrator.
- Now, run the following command to set the environment variables-



```
setx /M PATH “path\to\ffmpeg\bin;%PATH%”
```

Note: Make sure that the characters in your system PATH do not exceed 1024.

- Now, run the command **ffmpeg- version** to ensure its working.

**To install Spleeter:**

- Firstly, ensure that pip is running on the command line.

You can install the Spleeter library from PyPI (Python Package Index) repository using-

## How to Install Spleeter Using Conda??


Installation of Spleeter using Conda is probably the easiest and convenient way. Here is the procedure-

- Install Anaconda on your Windows PC from [this link](https://www.anaconda.com/products/distribution#windows).
- Right-click on your Anaconda folder and click on ‘Git Bash Here’.
- A command window will open, you need to run the following command-


```
git clone https://github.com/deezer/spleeter
```

- Close the Git Bash and open the Anaconda Prompt.
- Enter the following commands there-


```
conda env create -f spleeter/conda/spleeter-cpu.yaml
conda activate spleeter-cpu
```

And that is it. Now, you are ready to isolate tracks from the audio files.

## How to Use??


Spleeter can be used in your own development pipeline as a _**[python library](https://www.habilelabs.io/blog/best-python-libraries-for-data-science)**_ or you can use it directly from the command line. We have already read about all three pretrained models of Spleeter that separate out the audio file in layers. Let’s see how-

### 2-Stems Model


Basically, a music audio file consists of two components, a vocal track and its instrumental track called karaoke. This model splits out the audio into 2 very basic layers i.e. vocals and karaoke/accompaniment/other.

This is the default step of the isolation process which means if you just have passed the command to separate the audio and haven’t mentioned anything about which model to use, the audio will get separated as per the 2-stems model by-default.

To accomplish the 2-stems separation, you can run any of the following commands on command-line-


```
spleeter separate -i audio_example.mp3 -o audio_output
spleeter separate -i spleeter/audio_example.mp3 -p spleeter:2stems -o output
```

Here,

- audio_example.mp3 is the name of the music track file you are going to split.
- -i and -o options are indicating towards input and output track respectively.
- -p option is used for providing model preferences.


The output will be generated in the form of a folder audio_output/audio_example containing two .wav files, namely, **accompaniment.wav** and **vocals.wav**.

### 4-Stems Model
This model splits up the audio file into 4 layers. You can extract out the vocals, drums, bass and other tracks in 4 .wav files, i.e. vocals.wav, drums.wav, bass.wav and other.wav respectively, by running the following command on commandline-


```
spleeter separate -i audio_example.mp3 -o audio_output -p spleeter:4stems
```

### 5-Stems Model


As the name suggests, it rips apart the audio file into 5 stems/layers, i.e. vocals, drums, bass, piano and other. The command for the same is as follows-


```
spleeter separate -i audio_example.mp3 -o audio_output -p spleeter:5stems
```

The output will be generated in the form of 5 files: **vocals.wav, drums.wav, bass.wav, piano.wav and other.wav.**

## Final Words -


There are several other audio separation tools and resources available in the market for free but the three pre-trained models of Spleeter are far too easy and able to surpass all of them. These models are like different switches that provide almost all the possible ways to split up an audio file into. What else can you ask for??

We can expect further upgrades in the library in the coming years. Till then, enjoy music mixing and streaming with Spleeter.

Stay tuned with us for similar kinds of _**[blogs](https://www.habilelabs.io/blog)**_ about the latest tech releases.

Spleeter- A TensorFlow Based Python Library

medium_spleeter-a-tensorflow-based-python-library_feature.jpg

small_spleeter-a-tensorflow-based-python-library_feature.jpg

thumbnail_spleeter-a-tensorflow-based-python-library_feature.jpg

Blockchain is evolving quite rapidly for the past few couple of years and has set its empire all around the globe in just a decade. Thanks to Satoshi Nakamoto, a brain behind this amazing concept, whether a person or a group of people, to present a detailed written explanation about it. The technology, having a giant set of applications, has the potential to take the businesses into a new direction.

The concept of blockchain is simple and a bit confusing at the same time. I have seen many people talking about the wide opportunities in the field of Blockchain and still wondering about ‘What is Blockchain??’. So, here I’m going to explain the concept in very simple words-

## Introduction to Blockchain

Blockchain technology was originated in the year 1991 by two scientists i.e. Stuart Haber and Scott Stornetta. Though, it was practically appeared over a decade ago, in the year 2009.

Blockchain is the literal translation of block-chain as per the English dictionary i.e. a chain of blocks. A block is a digital package of information containing data, cryptographic hash and timestamp. These blocks are further linked together in a linear chain using cryptography.

It is basically a decentralized and distributed ledger that stores all the records for economic transactions or data transfer. It is highly secure, anti-fraudulent and incorruptible technology because the blocks are decentralized, immutable and transparent.

With ‘No Transaction Cost’, blockchain carries the information in a very secure manner. As the data is distributed in the form of blocks around the net, one would have to hack the entire chain to manipulate a single record which is virtually impossible.

## Top Emerging Trends of Blockchain??

After so many advents in 2019, the time has come for blockchain to explore its new angles, to take the businesses to the unexpected heights and to reach the very edges in the near future.

**Let’s see what improvements we can expect from blockchain in 2020-**

### Federated Blockchain

![blockchain-top-trends-to-be-followed-in-2020_1.jpg](https://backend.habilelabs.io/uploads/blockchain_top_trends_to_be_followed_in_2020_1_e214bd22bd.jpg)



The term ‘Federated Blockchain’, also known as Blockchain Consortium, can be considered as an upgraded version of private blockchains.

In Private Blockchains, you won’t be able to access the network unless you are authorized to it. Only a single entity has access over the network in the private blockchain. While in the case of Federated blockchain, instead of having the sole influence over the network by a highly trusted node, it can be operated by multiple pre-defined entities simultaneously.

Blockchain Consortium re-establishes the concept of a decentralized system which is ideal for many use cases. You can think of it like, the best way to ensure the security of the highly sensitive data is to divide it into multiple parts and place them separately.

Experts have predicted a solid rise in the use of federated blockchains in financial services, records security, insurance claims and several other sectors in the year 2020.

### Blockchain-As-A-Service (BaaS)

![blockchain-top-trends-to-be-followed-in-2020_2.jpg](https://backend.habilelabs.io/uploads/blockchain_top_trends_to_be_followed_in_2020_2_c6a5675242.jpg)


Blockchain-as-a-Service, BaaS, is another trend of Blockchain that has been playing its part and contributing significantly to the blockchain development. BaaS allows the enterprises to use the cloud platforms to build their own blockchain apps, consequently ease the development process. BaaS companies are the link between the blockchain platforms and the enterprises utilizing blockchain. Currently, the major players in the field of blockchain-as-a-service are -

- Microsoft Azure
- _**[Amazon Web Services (AWS)](https://www.habilelabs.io/managed-aws-services)**_
- IBM Cloud
- Oracle Blockchain
- VMWare

### Future of Stablecoins

![blockchain-top-trends-to-be-followed-in-2020_3.jpg](https://backend.habilelabs.io/uploads/blockchain_top_trends_to_be_followed_in_2020_3_c52ab67e3c.jpg)


Stablecoin is another category of cryptocurrencies designed to minimize price volatility and offer stability. Tether is the best example of a Stablecoin. The major advantage of Stablecoin over other cryptocurrencies is that its value does not get affected by the market’s conditions such as currency crash and remains stable in all circumstances.

Price stability is the key element missing in the cryptocurrencies hindering them to be used for day-to-day payments but with the introduction of Stablecoins, we can expect some growth in this scenario as well in the upcoming years. As of now, the Stablecoins are fresher in the market but have the potential to become one of the largest digital assets.

In some circumstances such as the medium of exchange (MoE) and store of value (SoV), the highly volatile cryptocurrencies like Bitcoin face a great competition with Stablecoins. The future of Stablecoins is very bright due to its following qualities:

- Immunity from issues like currency crashes
- Streamline Recurring and P2P payments
- Fast Remittances and Affordable
- Stable Currency Exchanges
- Can be used as the Regular Currency

### Blockchain with IoT (Internet of Things)

![blockchain-top-trends-to-be-followed-in-2020_4.jpg](https://backend.habilelabs.io/uploads/blockchain_top_trends_to_be_followed_in_2020_4_303943b810.jpg)


Blockchain & IoT, both are considered as the revolutionary technologies of this decade. While blockchain provides an encrypted & distributed filing system to keep the data records secure, the IoT interlinks the internet and the everyday objects, enabling them to send and receive data.

Combining them together brings a whole load of future-possibilities with it. Theoretically, the fusion can create a permanent and secure way of storing data by ‘Smart Devices’. These interconnect devices interact with the surroundings and make decisions on their own, without needing any human assistance.

>At present, there are billions of _**[IoT devices](https://www.habilelabs.io/iot)**_ and this number is only going to be rocketed by 2020. As the IoT devices are interconnected so any failure in the IoT ecosystems causes the failure of multiple devices. In such scenarios, blockchain provides a major advantage by adding an encrypted layer of security that is virtually impossible to crash.

### Blockchain with AI (Artificial Intelligence)

![blockchain-top-trends-to-be-followed-in-2020_5.jpg](https://backend.habilelabs.io/uploads/blockchain_top_trends_to_be_followed_in_2020_5_f3536a9eac.jpg)


Integration of _**[Artificial Intelligence](https://www.habilelabs.io/ai-ml)**_ with Blockchain has unlocked many gateways of future-possibilities towards thriving development solutions. The experts are speculating that in the coming years, the use of the combo of AI and Blockchain can alter the pace of businesses all around the world.

Due to the decentralized nature of blockchain, it may take days to confirm the transaction while transferring a bitcoin from one peer to another. The confirmation time delays further with the increase in the unprecedented bitcoin transactions as the size of a block is limited and the transactions exceeding that capacity get queued for confirmation.

In this scenario, Artificially Intelligent systems can help to bring down this cumulative process by diminishing the computing power required to confirm those transactions. Also, an AI system can improve the hashing algorithms that are used in the blockchain network to confirm any transaction. The amalgamation of both these technologies is just the beginning of a new era of technology.


## Advancement in Applications of Blockchain by 2020


The exchange of Bitcoin cryptocurrencies is still considered illegal in some countries like China. But in order to administrate a very large quantity of data that governments have to deal with, they will also have to adopt blockchain by 2020. Also, we can expect utilization of the blockchain technology in various fields, such as-

**- Finance & Economy:** Many financial institutions are already taking benefit of blockchain and the graph is going to take a hike only. By 2020, most of the transactions are to be transferred to blockchain.

**- Social Networking**: Blockchain will ensure the safety of the user’s data on social networking websites getting hacked or leaked.

- **Voting System**: The voting system can be advanced with the use of blockchain as the votes recorded on blockchain are next to impossible to hack or manipulate.

- **Content Streaming**: Content streaming can become very easy with blockchain. Now, the writers, singers or other artists can place their piece of work directly on blockchain and it will be accessible to all the end-users connected to the blockchain.


## Bottom Line:
Blockchain has far more potential beyond Bitcoin and Ethereum, cryptocurrencies using Blockchain Technology. It’s just a beginning, I can foresee the future where each sector in the market is taking benefit from Blockchain technology in one way or another.

Stay connected with us for similar _**[tech blogs](https://www.habilelabs.io/blog)**_.

Thanks!

Blockchain — Top Trends to be Followed in 2020

medium_blockchain-top-trends-to-be-followed-in-2020_feature.jpg

small_blockchain-top-trends-to-be-followed-in-2020_feature.jpg

thumbnail_blockchain-top-trends-to-be-followed-in-2020_feature.jpg

Next.js is an open-source web application framework based upon Node.js, Vue.js and Babel.js. The applications are built with JavaScript and React instead of PHP. You just need to create some file, add the React/JavaScript code, deploy it and that’s it!!

## Why Next.JS??


Next.js renders some very cool features that make it fast and flexible, like:

- Webpack-based dev environment which supports Hot Module Replacement (HMR)
- Static Exporting
- Intuitive Page-Based Routing System
- Server-Side Page Rendering with blocking data requirements by default
- Automatic Code-Splitting
- Built-in CSS support
- Customizable with Community Plugins, Babel and Webpack configurations
- Simple client-side routing with optimized page prefetching.


## What’s New with Next.js 9??


**Now, the latest version of Next.js i.e. Next.js 9 is available in the market with some advanced features like Dynamic Routing, TypeScript Support, Automatic Static Optimization, API Routes and much more. Let’s check out what’s new with Next.js 9-**

### 1. Built-in Zero-Config TypeScript Support


With automatic TypeScript support and integrated type-checking, it has been very easy to _**[build applications](https://www.habilelabs.io/custom-application-development)**_. Earlier, the user had to use the plugin @zeit/next-typescript for TypeScript Support and customize his .babelrc and enable it in next.config.js. The plugin would allow building .ts and .tsx files by Next.js.

However, the plugin couldn’t integrate type-checking nor the types were provided by Next.js core. That means a separate community package was needed to integrate TypeScript code into the existing or new codebase. Thus, built-in TypeScript support was integrated into the Next.js core to improve the process-speed.

#### Automated Setup

Here is the procedure to get started with TypeScript-

Rename any file or page from .js to .tsx.
Now, run next dev. (With this command, the TypeScript will be detected in your project.)

#### Integrated Type-Checking

Next.js 9 provides you with in-built type-checking in both development and building for production. It will show you type-errors in the form of syntax or compilation errors in development.

Type-checking occurs in the background and allows the user to interact with the updated application in the browser in an instant. Also, it automatically fails the production build, if any type-error is present.

### 2. File System-Based Dynamic Routing


Dynamic routing enables to have separate URLs. Next.js provides route mapping solutions, driven by the pages/ directory. Next.js creates routes with basic named parameters, in the most popular pattern as path-to-regexp. Now, the page having route /post/: pid/ can now be attained by creating a file in ‘pages’ directory with name pages/post/[pid].js.

The requests like /post/1, /post/hello-next.js, etc. are automatically matched by Next.js and further rendered in the page defined in pages/post/[pid].js. The matching URL segment will then be passed to your page as a query parameter with the name defined in between square brackets ‘[]’. Net.js also supports multiple dynamic URL segments.


### 3. Automatic Static Optimization


It is an obvious fact that Static websites are faster and do not require server-side computation. Also, they can be streamed from CDN locations to the end-user. Though Server-Side Rendering also has its benefits, it depends upon the applications.

While a marketing page or a homepage contains static content that’s why a great catch for static optimization, on the other hand, a product dashboard where the content changes frequently can benefit from server-side rendering.

But with the introduction of Next.js 9, users will no longer have to choose between fully server rendering or static exporting. You can experience both worlds now on a per-page basis.

- In Next.js 9, a heuristic has been introduced that determines whether a page can be prerendered to static HTML or not. It is done by checking if the page has blocking data requirements while using getInitialProps.
- Further, this heuristic allows Next.js to release hybrid applications containing both statically generated as well as server-rendered pages.
- The programmatic API (app.getRequestHandler()) and built-in server of Next.js (next start) both support this build output transparently, no case of ‘Special Handling’ required.

![explore-new-features-with-latest-next-js_1.jpg](https://backend.habilelabs.io/uploads/explore_new_features_with_latest_next_js_1_04ff6d3f9a.jpg)


Next.js will hydrate your application to give it full interactivity and update it if it relies on query parameters in the URL.

### 4. API Routes


Sometimes, you need some kind of backend while building _**[React applications](https://www.habilelabs.io/blog/react-query-a-state-management-library-for-react-applications)**_ either to process data provided by the user or to retrieve data from the database.

The Next.js team wrote in a blog that-

**In order to get a backend, users built their API using custom server. But they run into some issues while doing do such as Next.js does not compile custom-server code that means one cannot use import/export or TypeScript. This is why many users ended up implementing their own custom-compilation pipeline above the custom server. But again, while this solved their purpose, it had may pitfalls like if configured incorrectly, tree shaking would get disabled from the entire application. Thus, we introduced API routes in this latest version.**

You can use API routes via the /pages/api/ directory. All the files inside that directory will automatically be mapped to /api/<user route>/. For example, /pages/api/posts.js will get mapped to /api/posts.


### 5. Improved Developer Experience


There are some amendments made to improve the developer experience. Let’s check out what are they-

#### Compiling Indicator

In this new version, an RFC/ ‘good first issue’ has been created to find a potential solution to the problem of indicating that compilation work is being done. In earlier cases, if you were working on styles on some subtle pages then it was hard to know immediately whether they were updated or not.


The Next.js team took this challenge as an opportunity and designed this compiling indicator to improve developer-experience. Now, whenever there will be some compilation work done by Next.js, the user will see a small triangle at the bottom right corner of the page.

#### Console Output

Earlier while making changes in development, Next.js used to show a compiling indicator state and overwrite the changes upon the previous changes by continuously clearing the screen. This behavior used to cause several issues and also cleared the console output from your application code such as while adding console.log to the components.

But Next.js 9 no longer clears the screen and the log output jumps less, which results in a better overall experience as the terminal window will show more relevant information and flicker less. Now, all the changes, current as well as previous, will be shown on the console.

### 6. More Production Optimizations


Automatic _[Prefetching-in-Viewport](https://www.habilelabs.io/blog/data-fetching-in-next-js-pre-rendering-types)_ of <Link> components, thus an improvement in the responsiveness of the apps, as the navigation to new pages has become quick.
By-default AMP Optimization for AMP-first and hybrid AMP pages.
Dead Code Elimination by replacing typeof window with its proper value i.e. undefined or object at the time of client and server builds.

## How to Use??

You can start your Next.js project just like another Node project. You just have to install the npm package for the same. Here is the simple procedure to setup Next.js in your project-

This is the direct command to start Next.js-

We can use npx here, as it comes with npm 5.2 or high

Manually, you can install it in your project with the following command-


```
npm install --save next react react-dom
```

### -> Script Adding

After a successful installation of react, react-dom and Next, you need to open the project with your IDE. Now, add the following script to your package.json:




```
{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}
```

Now, just run npm run dev and go to http://localhost:3000. That’s it folk!! You have successfully installed Next.js.

So far, we have React, automatic transpilation and bundling, hot module loading, routing, server-side rendering, pre-fetching, and many more goodies right here. Now, let’s create our first page-


```
function Home() {
  return <div>Welcome to Next.js!</div>
}

export default Home
```

We are done here!! It’s too simple guys. So, keep coding and keep learning the new frameworks and improve your experience.

## Conclusion:


Next.js is a very simple and feature-rich framework. I hope you enjoyed reading this article and learned about Next.js 9 and it’s features, as much as I did. 

Here you can read _**[Next.js 13 is Here — What’s New?](https://www.habilelabs.io/blog/next-js-is-here-whats-new)**_

For more similar _**[tech blogs](https://www.habilelabs.io/blog)**_, keep connected with us.

Next.JS - Explore New Features with Latest Next.JS 9

medium_explore-new-features-with-latest-next-js_feature.jpg

small_explore-new-features-with-latest-next-js_feature.jpg

thumbnail_explore-new-features-with-latest-next-js_feature.jpg

Next.JS-Explore New Features with Latest Next.JS 9

A framework is nothing but a collection of modules that makes the development process easier and faster. Django is also a framework, a Python-based, free and open-source web framework that follows Model-Template-View (MTV) architectural pattern.

## Why Django?


At first, it might seem difficult to determine which framework you should use for your project to successfully bring it to life. It all comes down to your needs and requirements, though.

**Here are some specific factors and conditions that determine [why to choose Django over other frameworks](https://www.djangoproject.com/start/overview/)-**

- If you need to deploy fast (while making changes as you move forward) and you’re concerned about finding solutions once you get stuck then the answer is very simple- Choose Django.
- Also, think about the actual product you want to create. If your app is likely to scale at any time and must be secure from most common vulnerabilities and attacks — you need a reliable framework, just like Django.
- Plus, it’s a great choice if you’re thinking about integrating cutting-edge technology in the future, i.e. Machine Learning.
- Good documentation and supportive community will also be there for you.


![django-best-framework-for-web-development-in-python_1.jpg](https://backend.habilelabs.io/uploads/django_best_framework_for_web_development_in_python_1_e73f5fbef7.jpg)


## What You Can Do with Django?


Now, this is a very interesting fact because it was first created for the purpose of _**[web development](https://www.habilelabs.io/web-development)**_ for a newspaper publisher. But now, we can use Django in various multiple areas like-

- High-load booking engines or shopping platforms
- Android and iOS mobile apps that support web applications
- Financial platforms with features for analyzing and calculating approximate results.
- Built-in custom CRM systems for internal data
- B2B CRM systems for handling communication between businesses
- Platforms that facilitate communication between two parties, such as a business and a consumer
- Real estate property evaluation systems
- DMS (Documents management system)
- Platforms for handling legal issues like verifying mortgage conditions or lease status.

## Django Website Structure


Django apps are structured so that there is a separation of logic. It supports the Model-Template-View (MTV) architectural pattern on which most of the web frameworks are built. The basic principle is that in each application there are three separate files that handle the three main pieces of logic separately.

- **Model** defines the data structure. This is usually a database and is the base layer of an application.
- **View layer** encapsulates the logic to process the user’s request and returns the response.
- **Template layer** displays some or all of the data to the user with designer-friendly syntax.

![django-best-framework-for-web-development-in-python_2.jpg](https://backend.habilelabs.io/uploads/django_best_framework_for_web_development_in_python_2_592e85cdc5.jpg)


## Django Project Structure


1- Create Project Command


```
django-admin startproject [projectname]
```


```
[projectname]/ - project root
├── [projectname]/ - Django root
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py
```

**manage.py**

The file contains the code for starting the server, migrating and controlling the project through command-line.

**_ _init_ _.py**

The _ _init_ _.py file is empty and it exists in the project for the sole purpose of telling the python interpreter that this directory is a package. That’s one of the standard rules of python packages.

**settings.py**

The settings.py is the main file where we will be adding all our applications and middleware applications. As the name suggests this is the main settings file of the Django project. This file contains the installed applications and middleware information which are installed on this Django project.

**urls.py**

urls.py file contains the project level URL information. URL is a universal resource locator and it provides you with the address of the resource (images, webpages, and web-applications) and other resources for your website.

## Unique Features of Django Framework


### SEO Optimized


This is a special feature of _**[Django](https://www.habilelabs.io/blog/python-django-is-here-check-whats-new)**_ due to which it has edge over others. SEO is Search Engine Optimization that means to optimize your website in order to improve its ranking on search engines. As we know that the search engines do use some algorithms which sometimes don’t cooperate much with the web-developer.

Since we are creating our website in the human-understandable form and they have to add it in the URL form on the server so that it’s best recognized by the search engine. Django clears that concept by maintaining the website through URLs rather than the IP addresses on the server, which makes it easy for SEO engineers to add the website to the server while the _**[web-developer](https://www.habilelabs.io/blog/complete-seo-guide-for-web-developers)**_ doesn’t have to convert the URL into some numeric code.

That’s the gist of it although it’s not the whole and complete process but for our purpose it’s sufficient.

### High Scalability


Scalability means that at what scope or level, our technology gets to implement. For bigger websites like Instagram, having millions of active users, they generate data in huge amounts (terabytes of data/day). This kind of level requires our system or application to be very precise and error-free.

### Offers High Security


Django is super secure. It is so because it covers the loopholes by-default which were once left open for the backend developer to complete. It has one of the best out-of-the-box security systems that help developers to avoid common security issues, including

- SQL Injection
- Cross-Site Scripting
- Clickjacking


## Wrap-up:


Django is a great framework that handles large volumes of content (e.g., media files), heavy traffic, and deals with complex data, functions or technology like _**[machine learning](https://www.habilelabs.io/blog/a-complete-guide-machine-learning-model-to-api)**_. It is also useful to scale your project to a much higher level. Do follow us for more similar Tech Blogs.

Thanks!

Django- Best Framework for Web Development in Python

medium_django-best-framework-for-web-development-in-python_feature.jpg

small_django-best-framework-for-web-development-in-python_feature.jpg

thumbnail_django-best-framework-for-web-development-in-python_feature.jpg

Facebook launched a new open-source JavaScript engine named ‘Hermes’ to improve the performance of React Native mobile apps on Android.

For months, team Facebook was continuously working on improving JavaScript codes and platforms to enhance the performance of Facebook Apps. After analyzing the performance data, they noticed that the JavaScript engine itself was a significant factor in startup performance and download size. So, they worked on optimizing JavaScript performance in the more constrained environments and designed ‘Hermes’. The team has not planned yet to expand the project to browsers or servers such as _**[NodeJS](https://www.habilelabs.io/blog/best-practice-for-node-js-folder-structure)**_.

We’ll learn more about Hermes in here. Let’s dive in then-

## Overview About Hermes-


[Hermes](http://hermesengine.dev/docs/building-and-running/) is specifically built to fasten the startup of applications using static optimization and compact bytecode. It improves the startup time, app size and memory utilization of the applications.

In a blog, Facebook wrote-


>“Hermes improves React Native performance by decreasing memory utilization, reducing download size, and decreasing the time it takes for the app to become usable or “time to interactive” (TTI).”

Hermes improves some core attributes of an application that ensure its high-performance, that are-

- Time to Interact (TTI)- It launches the apps faster decreasing the start-up time by bytecode precompilation.
- Download Size (APK File Size)- Being smaller in size, it starts instantly without weighing down the app.
- Reduction in memory utilization
- Ahead-of-time Static Optimization
- No JIT (Just-In-Time) Compiler
- Compressed Bytecode
- Bytecode Precompilation
- Garbage Collector Strategy with noncontagious, defragmented and On-demand Virtual Address (VA) memory allocation features.
- Lazy Compilation
- Targets the ES6 Specification
- JSI, a lightweight API to embed a JavaScript engine to C ++ applications to ease migration to Hermes.

![javascript-engine-for-react-native_1.jpg](https://backend.habilelabs.io/uploads/javascript_engine_for_react_native_1_53bb2fd23e.jpg)


As you can see in the picture, the TTI has been reduced by 2.29 seconds, the APK file size has been decreased by 19 MB and the memory utilization has been lessened by 49 MB. As a result of this decrement, there has been a substantial improvement for the React Native applications.

## Byte Precompilation


Usually, a JavaScript engine parses the JS source, once it gets loaded and generates bytecode further. This step delays the script execution.

Hermes skips this step and uses an ahead-of-time compiler which runs along with the application build process and optimizes the bytecode and thus makes it smaller and more efficient.

With Hermes, the bytecode is designed in such a way that it can be mapped and interpreted without reading the entire file which leads to improving TTI significantly.


Though this bytecode is a bit larger than the compressed JavaScript code, Hermes reduces the overall application size for React Native Apps.

## How to Use Hermes in React Native App?


To use Hermes in a React Native App includes three main steps-

- Make a Hermes npm Package
- Registering of this npm package with Yarn
- Linking of Hermes with the _**[React Native App](https://www.habilelabs.io/blog/monorepo-for-react-native-apps-with-nx)**_.

Now, let’s discuss how to accomplish all these tasks-

### Make a Hermes npm Package
The Hermes npm package consists of CLI tools, to compile the JavaScript to bytecode, and debugged versions of native Hermes library for Android. However, in order to compile the native libraries for android, you need to set up an appropriate development environment.

- To build a debugged version of Hermes CLI tools, below-given steps should be followed on **macOS/Linux**-


```
mkdir hermes_workingdir
cd hermes_workingdir
git clone https://github.com/facebook/hermes.git
hermes/utils/build/build_llvm.py
hermes/utils/build/configure.py
cd build
ninja
```

- In the case of **Windows,** the following steps should be adhered to-


```
mkdir hermes_workingdir
cd hermes_workingdir
git -c core.autocrlf=false clone https://github.com/facebook/hermes.git
hermes/utils/build/build_llvm.py --build-system='Visual Studio 16 2019' --cmake-flags='-A x64' --distribute
hermes/utils/build/configure.py --build-system='Visual Studio 16 2019' --cmake-flags='-A x64 -DLLVM_ENABLE_LTO=OFF' --distribute
cd build
MSBuild.exe ALL_BUILD.vcxproj /p:Configuration=Release
```

### Register the Package with Yarn


- At the very first step, you need to run the following command to build the cross-compiled LLVM-


```
(cd $HERMES_WS_DIR && ./hermes/utils/crosscompile_llvm.sh
```

- Now, you can build Hermes libraries for Android platforms and package everything together-


```
(cd $HERMES_WS_DIR/build_release && ninja github-cli-release)
(cd $HERMES_WS_DIR/hermes/android && gradle githubRelease)
cp $HERMES_WS_DIR/build_android/distributions/hermes-runtime-android-v*.tar.gz $HERMES_WS_DIR/hermes/npm
cp $HERMES_WS_DIR/build_release/github/hermes-cli-*-v*.tar.gz $HERMES_WS_DIR/hermes/npm
cd $HERMES_WS_DIR/hermes/npm && yarn install && yarn run prepack-dev)
cd $HERMES_WS_DIR/hermes/npm && yarn link)
```

The final command of the **yarn link** will register the Hermes package to Yarn for inclusion to local projects.

### Link the Package with the React Native App


Now, the final step is to link the **npm** Hermes package with your app. Let’s suppose for instance that your project is in the directory **$user_project**, you would run the following command-


```
(cd $user_project/node_modules/react-native && yarn link hermes-engine)
```

Now, you can develop the app in the normal manner.

## Bottom Line


You can download Hermes from Github. The detailed guide of instructions has been provided there as well. Facebook has been quite about using this specific word ‘Hermes’ but you would have heard that Hermes is the god of messenger according to Ancient Greek Mythology.

However, you can make your own assumptions. Stay connected with us for more Latest Tech Releases.

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