Node.js

An attempt to explain, so even laymen will understand it.

    Inhaltsangabe
  1. What is Node.js?
    1. Example
    2. How it looks
  2. My favorite: webpack
  3. Conclusion

The Internet is developing incredibly fast and you can not keep up with it as a normal programmer. With the development of a platform has now developed, which should revolutionize the whole Internet. It’s called Node.js.

What is Node.js?

Node.js is a javascript platform that allows you to do simple things, such as doing your programming tasks easier, but also more complex things like setting up a web server.

You can install Node on your workstation or on the server and download packages. These packages can be thought of as apps on smartphones. Every package has its own function and you can integrate it into your website / app.

Example

If several programmers work on one and the same project, it can very quickly happen that each of them writes very different codes. That must of course be prevented. You can use a linter for that. It ensures that a common structure is maintained when writing code.

In a project you write a lot of functions and style features. All these functions can be combined and scaled down to make the page load faster.

Then you can upload the programmed automatically to the server and automatically reload the browser, so you can see the changes immediately.

The example of what I wrote above is very easy to implement with node packages. You just have to say do this and that to your system.

How it looks

First, you create a package.json. It indicates which packages you need for your programming. As already mentioned, every package has its own task:

{
  "name": "MyProject",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "*",
    "grunt-contrib-concat": "*",
    "grunt-contrib-jshint": "*",
    "grunt-contrib-nodeunit": "*",
    "grunt-contrib-sass": "*",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-watch": "*",
    "grunt-ftp-push": "*",
    "grunt-sass": "*"
  }
}

Here I say for example: I need the last version of:

  • grunt
  • grunt-contrib-concat
  • grunt-contrib-jshint
  • grunt-contrib-sass
  • grunt-contrib-uglify
  • grunt-contrib-watch
  • grunt ftp push

With grunt and grunt-contrib-watch I say: Hey I’ll work right now. Please watch the files I am working on and depending on the file I will give you specific tasks.

From then on my work will be monitored and supported by the computer.

grunt-contrib-jshint ensures that a certain standard is observed during programming. If I dodge the norm, the computer says: In the xyz.js file on line 234, something is wrong. Please correct that.

After successful tests, grunt-contrib-concat merges all javascript files and gathers all functions in one file.

grunt-contrib-uglify takes all merged files and shrinks them. It becomes unreadable for humans but the computer can then read and interpret this smaller file better.

grunt-contrib-sass takes all styling elements and merges them into one file. He also creates a so-called map, which ensures that I can look at all the styling elements in the browser and can read in which file and in which line it has been programmed. If I want to make a change, I can work directly on this file.

If all of the above processes are done grunt-ftp-push is used. It automatically uploads all the files prepared above to the server and the only thing I have to do is reload the page.

My favorite: webpack

Webpack is an open source JavaScript module packer. Webpack actually does everything that Grunt does, but adds some more features. It is much more flexible and can do many more things.

The most innovative feature that Webpack provides is clustering of your scripts. This can be explained as follows: If you go to a conventional website, all functions and styling elements are loaded, which are most likely even on different servers. This then ensures an increased page load time. Webpack helps out by loading only what is needed. If you scroll down, the additional features will be loaded. If you then click on a picture gallery, the picture gallery functions will be loaded. This means that you only ever load the most necessary and the load times are incredibly shortened.

Conclusion

I first came into contact with node through vue.js and the programming of Gutenberg blocks. In the beginning, it is incredibly complicated and you can not imagine that it can be a relief. However, the more you deal with it, the easier it is for the processes to occur.

Node has achieved a worldwide impact that succeeds in very few open source projects. It has completely changed the thinking and programming peculiarities. I see even more potential in the node project and think that any programmer who wants to be equipped for the future would have to master node and webpack before it’s too late.

Topics

Grunt Javascript node Program technology Webpack website

Beitrag teilen

WhatsApp it

Folgen Sie uns