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
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
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
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
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!
Top comments (9)
Not a React-fan? :)
Jsx is beautiful. Hooks too
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
*.htmlviaraw-loader.I reality, use Pug in Vue.
JSX is just too forced and popularized by marketing, I think.
"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.
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
lit-htmlor pug -- I just love Pug, BTW.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.
Not really :) I would rather chose Vue instead of React, for some of my projects.
You can convert callback based functions to promise based ones using promisify from the built in utils module
Yes. You are right. There are multiple methods to convert IT.