# Front-End

# Introduction

In this chapter, I am going to list all those skills that concern the appearance of what I develop: essentially everything that is visible.

# Node & NPM

For the management of dependencies I use NPM (which is the Composer of the front-end) and Node.js which is the server necessary for the development of the apps.

# Vue.js

The Javascript framework that I use for the front end is Vue.js. Inspired by Angular, it adopts a more immediate approach in its understanding and use, thus becoming an excellent ally as regards productivity.

Creating your own components is very useful. In addition to the obvious fact that they can be reused, they allow the creation of a more semantic and clear HTML for those who must keep the code.

# Vuex

Vuex is the "centralized brain" that I use to allow the management of the states of the components that I use (for example to decide whether a pop-up is visible or not). All the information of the components is centralized in Vuex (which also takes care of updating by connecting to the API), a mandatory requirement to manage large projects, leaving the components the only task to show the information.

# Vuepress

The "engine" that I used for the construction of luca-pezzino.tech is Vuepress. Combine the Markdown code with the possibility of using Vue components and it is an excellent tool for rapidly implementing small projects. It would not have made any sense to bother the heavy artillery used for the construction of Pollini by Luca Pezzino, when just a slingshot advances 😉

# E6/7/8

Being originally a back-end dev, I couldn't not appreciate the use the various versions of ES. I definitely appreciate the convergence with the back-end languages (in addition to the classes, I would say that the modules certainly deserve a mention, for a clear improvement of the maintenance of the code, as well as the arrow functions that allow a cleaner and more synthetic code).

# Webpack & CSS PreProcessors

Finally, as regards the generation of CSS, I rely on various PreProcessors (lately Stylus). The advantage is always inherent to any changes: if, for example, I wanted to switch from the red that characterizes the accentuated writings of luca-pezzino.tech to blue, it would be enough for me to change ONE variable in ONE single file. All this is feasible thanks to Webpack, which also takes care of transforming the Javascript source code, into what is then delivered by the server to the user who views the site.