DEV Community

Cover image for Technologies that makes JavaScript a beautiful programming language!
Gabriel Leonte
Gabriel Leonte

Posted on

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!

Discussion (9)

Collapse
frenchcooc profile image
Corentin

Not a React-fan? :)

Collapse
seanmclem profile image
Seanmclem

Jsx is beautiful. Hooks too

Collapse
patarapolw profile image
Pacharapol Withayasakpunt • Edited on

I never think JSX is beautiful. Rather, lit-html, or template strings, is quite similar, but more light-weight. Not sure if JSX is more efficient.

I also like createElement as e, also hyperscript.

I actually like Vue syntax for now, but the alternative is actually importing *.html via raw-loader.

I reality, use Pug in Vue.

JSX is just too forced and popularized by marketing, I think.

Thread Thread
seanmclem profile image
Seanmclem • Edited on

"Forced and popularized by marketing" sounds more like your opinion based on your views of the Facebook corporation involvement in React development, not an actual judgment of JSX from a technical or efficiency perspective.

Also, JSX may have been created by them, but is just an open syntax and is usable outside of React. It works great in preact, or stenciljs.

Thread Thread
patarapolw profile image
Pacharapol Withayasakpunt • Edited on

Actually, I changed my mind. JSX might be nice after all, but please give better reasons first rather than forced. (This one is lit-html. I have only found it today.)

Rather than make it non-obvious by their official reasons. (I found this one ages ago.)

I found the reasons later, though

  • Hyperscript is bad for auto-formatters
  • They didn't even mention lit-html or pug -- I just love Pug, BTW.
Thread Thread
seanmclem profile image
Seanmclem • Edited on

Okay you've lost me. Nobody forces anyone to use jsx, people use react and jsx because they love it. React works without it, and you can use it elsewhere outside react. Lit-html is okay sometimes. It requires more work, looks less clean, and it's less flexible. But personally I don't prefer it. Everyone's different.

Collapse
gabrielleonte profile image
Gabriel Leonte Author

Not really :) I would rather chose Vue instead of React, for some of my projects.

Collapse
mateiadrielrafael profile image
Matei Adriel

You can convert callback based functions to promise based ones using promisify from the built in utils module

Collapse
gabrielleonte profile image
Gabriel Leonte Author

Yes. You are right. There are multiple methods to convert IT.