Introduction to web frontend

The "web 2.0" is called to the extensive dynamic loading (of web pages based on user interaction), all this "magic is thanks to javascript ... But JavaScript was widely adopted and needed a system of modules to allow the Modular code design; cos the global object was/is error prone and just bad way. 

From the creators of javascrip Nodejs was born , later NPM was integrated, with the growing wave the browserfy was created , then bundlers such as gulp and grunt arrived, and finally today we have the webpack tool.

WHAT IS NODEJS?

Node.js is a runtime environment that includes everything you need to run a program but written in JavaScript. The creators of javascript, made that to run any javascript code like local application, it means instead of requiring a web browser could be defined and even executed as any local application.

If you develop in php, java, net, nodejs .. it is another one like those .. as for example php does, you can run your service with “php -S localhost: 3000”; so, nodejs can do the same with “npx http-server”, or by defining the parameters with an "app.js" and executing "node app.js" according to the port that is defined.

If I have php, java etc, then what is nodejs good for?

Currently because the popular npm comes with it .. it is the quickest reason, however ..

Node.js uses an event-driven non-blocking input (request) and output (response) model.

The original purpose of Node.js is to create fast network applications, since it is capable of handling a large number of simultaneous connections with a high level of performance, which is equivalent to high scalability, but not programming heavy operations like convert 4k videos as an extreme example, but to handle 4 million requests of 30kilobytes as an exact example, to this amount of inputs it will respond quickly to all the responses, which in a web server will produce blocks for all the internal processes that it involves.

What is NPM?

NPM is a package manager for Javascript. It is a kind of GooglePlay (for thos stupids phone depends) or in fact it is a kind of Maven (if you use Java it will sound like you) for Javascript packages, that is, it is used to install and manage versions of packages commonlly made in javascripts now today named libraries.

NPM has long been the benchmark for javascript package managers, but a competitor has emerged for some time: Yarn.

What is YARN?

The javascrit library manager much faster and more powerful, but the same thing happens with whatapps vs telegram, the first one is very bad but common people already have it and don't even know how it really is.

Ironically, but since yarn is faster and more secure, it depends on nodejs, so with having nodejs you already have npm, which saves a lot of learning time and avoids complications.

Tree Shaking

Base term in code modularization. Modules (using in fact js code) are analyzed at the level of imports and exports, and when it finds a module that imports or exports content and is not used, it discards it to avoid having extra code (dead code) and wasting resources. It is based on the static structure of the ES2015 module syntax (alias harmony modules). The name and concept have been popularized by the ES2015 module rollup and integrated recently in webpack.

Understanding is necessary and basis for the manufacture of the "bundlers" which are used to produce CSS / JS for production.

BUNDLERS and js modules

Then to avoid problems.. JS code is modularized, in different files, so that each file has a single responsibility, and they are used with the ES6 imports, these are organized using the Tree shaking and Dynamic imports technique.

Bundlers is packing modules (multiple sources) of JavaScript into a single file. CDNs are an example of this. So bundlers are tools that frontend developers use to package JavaScript modules and they run in the browser (rather than by hand on your website). In short, plus all the JS and CSS and generate a single JS and / or CSS organizing the common code. Today we have webpack, rollup, fusebox, parcel, etc.

• JavaScript grew too big, a lot of code, and it needs to be modular, usage of global variables was prone to overwriting, producing errors.

• The module package helped us to combine various JavaScript modules into one JavaScript file, and even order the way variables and pieces of code are loaded.

• Some ways to do that were defined: CJS and AMD, but also UMD.

  • Synchronous CJS (CommonJS) targeting server-side JavaScript, like nodejs for example.

  • Asynchronous AMD (Asynchronous Module Definition) intended for the browser, such as RequireJS for example.

  • UMD (Universal Module Definition). Common JavaScript code in headers that allows loading js sources no matter their anchor, either at the beginning or at the end.

Most of today's bundlers have very similar features. The only characteristic that varies between them is CJS / ES shaking trees. From all the bundler packages, Webpack has the most consistent built-in tree support for ES and CJS modules. Google has the most mature ... but it is difficult to install ... therefore all people now already adopted Webpack since rollup does not have this standars very mature.

• webpack:

  • use the module map

  • use the wrap function for each module

  • has runtime code that pastes the module together

• rollup:

  • a flatter and smaller package

  • does not use module wrap function

  • Order matters, requires dependency-based sorting

  • circular dependency may not work

WHAT IS WEBPACK?

It is a Module Bundler that allows you to export your modules to static files such as javascript, css, etc., making it possible to pass the code from the server to the browser. Also, it allows you to do similar tasks like Gulp, which lets us conclude that WebPack is the next step to Browserfy and Gulp. Webpack depends on nodejs and installs with npm.

Webpack, Tree Shaking y Dynamic imports

Webpack cannot know in advance if the dynamic import is going to be used at some point, so in those cases it cannot apply Tree Shaking and it cannot discard dynamic imports that will never be used. WHY WHEN USING WEBPACK YOU MUST BE CLEAR WHAT IT WILL BE USED AND IN WHAT WAY.

What is Grunt?

Program to automate repetitive tasks such as the compilation of css, the execution of tests; in a file "grunfile.js" these are defined and with a command we executes them. This is defining task chains, if one breaks the other does follow always if possible. It depends on nodejs and is installed with npm.

What is Gulp?

Program to automate development tasks, not just common repetitive tasks, it is based on a pipe (Unix pipes) in a file, the input "default" towards more inputs instead of chaining tasks, therefore modifying the flow is simple and also the code Resulting is very easy to read: It depends on nodejs and is installed with npm.

For beginners, the recommended ones are Gulp and webpack in order to gain experience.

SO THEN for everything I always need NODEJS:

a) DEBIAN INSTALLATION

curl -sSL https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -

echo "deb https://deb.nodesource.com/node_12.x $(lsb_release -s -c) main" >> \
/etc/apt/sources.list.d/50nodejs.list
echo "deb https://deb.nodesource.com/node_10.x $(lsb_release -s -c) main" >> \
/etc/apt/sources.list.d/50nodejs.list
echo "deb https://deb.nodesource.com/node_9.x $(lsb_release -s -c) main" >> \
/etc/apt/sources.list.d/50nodejs.list
echo "deb https://deb.nodesource.com/node_8.x $(lsb_release -s -c) main" >> \
/etc/apt/sources.list.d/50nodejs.list
apt-get update
apt-get remove nodejs npm
apt-get install nodejs

Note that if you have old debian versions you can still use nodejs version 8.X or 9.X depending on the case, and will skip any new version.

b) ALPINE INSTALLATION

There are two options .. the direct tar: https://unofficial-builds.nodejs.org/download/release/v12.18.3/ or https://unofficial-builds.nodejs.org/download/release/v14.8.0/ choosing the file that contains the word "muslc". Or else installing from the Alpine repos like this:

cat > /etc/apk/repositories << EOF; $(echo)
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/main
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/community
http://dl-cdn.alpinelinux.org/alpine/v3.12/main
EOF

apk update

apk install nodejs npm

cat > /etc/apk/repositories << EOF; $(echo)
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/main
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/community
EOF
apk update

Note that if you have an old alpine linux .. from alpine linux 3.4 to 3.10 you can use the package from alpine 3.12 to install it on old versions of alpine linux and be up to date.

ALSO YARN CAN BE AS A PACKAGE :

a) DEBIAN INSTALLATION

curl -sSL https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" >> \
/etc/apt/sources.list.d/50yarnjs.list
apt-get update
apt-get install --no-install-recommends yarn

The package depends on a type of "node" that can be "nodejs" or the same one that yarn provides, for this it is alias node = nodejs .

b) ALPINE INSTALLATION

There are two options .. the direct curl -o- -L https://yarnpkg.com/install.sh | bash . Or else installing from the Alpine repos like this:

cat > /etc/apk/repositories << EOF; $(echo)
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/main
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/community
http://dl-cdn.alpinelinux.org/alpine/v3.12/main
EOF

apk update
apk install yarn

cat > /etc/apk/repositories << EOF; $(echo)
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/main
http://dl-cdn.alpinelinux.org/alpine/v$(cat /etc/alpine-release | cut -d'.' -f1,2)/community
EOF

apk update

Note that if you have an old alpine linux .. from alpine linux 3.4 to 3.10 you can use the package from alpine 3.12 to install it on old versions of alpine linux and be up to date.