Technologies that makes JavaScript a beautiful programming language!

gabrielleonte

Gabriel Leonte

Posted on January 13, 2020

Technologies that makes JavaScript a beautiful programming language!

Everybody should know that JavaScript is not just a language used for web pages. Below you are going to find some interesting JavaScript libraries :D

1. ExpressJS

Alt Text

Express its the simplest way to create a web application. Built for Web Apps and API's, it is easy to learn, and provides a huge set of middleware with multiple scopes. Here is a simple Express app.

import express from 'express';

const app = express(); // create a new express object
const port = 3000; // declare express server port

// create a get http route
app.get('/', (req, res) =>{
// Write on localhost:3000/ the string below
   res.send("Hello dev.to user :D I hope you will have a greate and productive day"); 
});

// listen the server on the declared port
app.listen(port, () => {
   console.log(`The most simple and beautiful express app is live on port ${port}`);
});

And this is a simple Express web application!

So let's talk about some Express middlewares.

A. Passport

If you want to build a web app with an authentication system. Passport its the way to go. It uses the concept of strategies to authenticate requests.
Strategies can range from verifying username and password credentials, delegated authentication using OAuth (for example, via Facebook or Google), or federated authentication using OpenID.

B. CORS

Cross-origin requests are made using the standard HTTP request methods. Most servers will allow GET requests, meaning they will allow resources from external origins to read their assets. HTTP request methods like PATCH, PUT, or DELETE, may be denied to prevent malicious behavior. For example, many servers would not allow a request to change their assets.

C. Body Parser

Body Parser parses incoming request bodies in a middleware before your handlers, available under the req.body property.

D. Helmet

Helmet its a set of middleware, built to make your awesome app secure, against different vulnerabilities.

And more, each of them with their unique scope, which is that to make your web application/api the best one.

For more, check out the guys from freeCodeCamp and ExpressJS Documentation

2. ElectronJS

Alt Text

Do you think that building a UI executable application, it impossible for NodeJS? You are wrong my friend! Electron its the way to go!

So let's pretend that you have an index.html file, with some information.

// index.js
const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')
}

app.on('ready', createWindow)

Using the code above, you can build an executable application for any desktop operating system (linux, windows and macos).

Electron comes with apis that allows you to integrate functions inside the html files.
ipcMain is a event emitter build to emit events from the html files and handle it inside the back-end.

Electron.JS can be used with static html files or frameworks like Vue, React or Angular.

3. VueJS

Alt Text

VueJS is a JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

Virtual DOM

VueJS makes the use of virtual DOM, which is also used by other frameworks such as React, Ember, etc. The changes are not made to the DOM, instead a replica of the DOM is created which is present in the form of JavaScript data structures.

Data Binding

The data binding feature helps manipulate or assign values to HTML attributes, change the style, assign classes with the help of binding directive called v-bind available with VueJS.

Components

Components are one of the important features of VueJS that helps create custom elements, which can be reused in HTML.

Event Handling

v-on is the attribute added to the DOM elements to listen to the events in VueJS.

Computed properties

This is one of the important features of VueJS. It helps to listen to the changes made to the UI elements and performs the necessary calculations. There is no need of additional coding for this.

Lightweight

VueJS is very lightweight framework, and also the performance is very fast.

4. TensorFlow

Alt Text

Developed by Google, TensorFlow is a javascript library for deploying and training models using Machine Learning in the Browser or NodeJS.

Find more here!

5. Native VueJS

Vue Native is based on VueJS and is a framework to build cross platform native mobile apps using JavaScript.
Vue native core is designed to connect React and Vue, which help you run Vue in React. But for more about this beautiful framework you can find here

6. Async, Await and promises

I left the gold at the end. In the past, javascript had a big problem, you may heared about callback hell, a callback hell is something like below:

const checkUser= function(username, password, callback){
   dataBase.checkUser(username, password, (error, userInfo) => {
       if (error) {
           callback(error)
       }else{
           dataBase.getRoles(username, (error, roles) => {
               if (error){
                   callback(error)
               }else {
                   dataBase.getAccess(username, (error) => {
                       if (error){
                           callback(error);
                       }else{
                           callback(null, userInfo, roles);
                       }
                   })
               }
           })
       }
   })
};

Is it easy to read? I don't think so!
To avoid it, you have to write it using async await and promises

const checkUser= async function(username, password){
   try {
       const userInfo = await dataBase.checkUser(username, password);
       const rolesInfo = await dataBase.getRoles(userInfo);
       const logStatus = await dataBase.getAccess(userInfo);
       return userInfo;
   }catch (e){
       //handle errors as needed
   }
};

How to convert a callback to a promise? That is simple

database.get(data, (err, data) => {
    if (err) throw new Error(err);
    else console.log(data);
});

converted to a promise looks like that

const get = (data) => {
    return new Promise((resolve, reject) => {
        database.get(data, (err, data) => {
            if (err) reject(err);
            else resolve(data);
        });
    });
}

Is is easy to read now? I think so!

So just a small recap

The JavaScript community its big, and beautiful. Each of these frameworks comes with their unique features, that makes JavaScript a language for almost every kind of operation. If you do not have any experience with it. You should try. I bet that you will love it.

Have a nice and productive day guys!

💖 💪 🙅 🚩
gabrielleonte
Gabriel Leonte

Posted on January 13, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related