Frontend Acceleration

Frontend Acceleration

Day by day, there might be suggestions for improvement in certain graphic interfaces of our application, or particular problems of user experience. These problems require a quick solution to meet deadlines that make impossible the use of tools and/or standard development procedures.

Also, many times we find ourselves doing repetitive tasks or reiterating lines of code that we have already used in other developments.

That’s why as frontend developers we need to be able to detect and try to automate recurring tasks. This way we will be able to concentrate on the specific improvements and the development of your solution. That’s why today I want to tell you about some tools that I have in mind in day to day and I use to streamline the processes and save efforts in basic structures for the development of any interface or when creating a Web application:

  • NODEJS & NPM – Server with ECMAScript language in which we can rely to run as a server and app.js. Along with “Node Package Manager” we can automate the downloading of libraries, codes, etc. required for our app.
  • BOWER – Unlike Npm, Bower focuses on component packages to be used in the browser. For example, it is possible to use Bower to install packages containing HTML, CSS and Javascript such as Bootstrap or AngularJS.
  • COMPOSER – It is a dependency manager, not a package manager, but it deals with packages and libraries. Composer is able to install the libraries that your project requires with the versions needed. In turn, if your library depends on another library it is able to resolve it and download everything necessary to make it work and consequently avoid the headache from doing all by hand.
  • JADE – It is an HTML preprocessor that help us when we handle HTML in large quantity and frequently, mostly when we use the same code in several files.
  • SASS OR STYLUS – CSS preprocessors that allows us to create new features in our CSS code. They not only give us an easier syntax but also allow us to handle CSS programming concepts, such as creating variables, constants, functions, etc.
  • GRUNTJS o GULPJS – Automate tasks. With a simple .js file we indicate the tasks we want to automate with a simple command and write them in JSON format. The main objective is to recognize what we can automate in our development and what are the processes that we repeat every time we initialize a new challenge.
  • YEOMAN – It helps to create Web projects, making available a series of workflows and best practices, not only optimizing the final result but also the order and structure of our project. It can also implement other features such as managing bower & grunt.

The altogether use of these tools, depending on the requirement, result in having a Web application that is better structured and easily scalable (Frontend level).


En el día a día pueden surgir propuestas de mejora en determinadas interfaces gráficas de nuestra aplicación, o bien problemas particulares de experiencia de usuario. Dichos problemas requieren una solución rápida  por deadlines a cumplir que hacen inviable la utilización de herramientas y/o procedimientos estándar de desarrollo.

A su vez, muchas veces nos encontramos haciendo tareas repetitivas o reiterando líneas de código que en otras ocasiones ya utilizamos en otros desarrollos.

Es por eso que como Frontend developers necesitamos poder detectar las tareas repetitivas e intentar automatizarlas. De esta forma podremos concentrarnos en las mejoras  puntuales y el desarrollo de su solución. Es por eso que hoy quiero contarles algunas herramientas que tengo en cuenta en el día a día y que utilizo para poder agilizar y ahorrar fuerzas en estructuras básicas para el desarrollo de alguna interfaz o la creación de una aplicación Web:

  • NODEJS & NPM – Servidor con lenguaje ECMAScript en el cual podemos apoyarnos para ejecutar como servidor y app.js. Juntamente con “Node Package Manager” podremos automatizar la descarga de librerías, códigos, etc. que necesitemos para nuestra app.
  • BOWER – A diferencia de Npm, Bower se concentra en paquetes de componentes a utilizar en el navegador. Por ejemplo, es posible usar Bower para instalar paquetes que contienen HTML, CSS y Javascript como Bootstrap o AngularJS.
  • COMPOSER – Es un manejador de dependencias, no un gestor de paquetes. Pero trata con paqueteslibrerías. Composer es capaz de instalar las librerías que requiere tu proyecto con las versiones que necesites. A su vez, si tu librería depende de otra es capaz de resolver eso y descargar todo lo necesario para que funcione y así quitarnos del dolor de cabeza de hacer todo eso de forma manual.
  • JADE – Es un preprocesador HTML que nos puede ayudar cuando manejamos HTML en gran cantidad y de forma repetida, más que nada cuando utilizamos el mismo código en varios archivos.
  • SASS OR STYLUS – Preprocesadores CSS que nos permitirán crear nuevas funcionalidades en nuestro código css. No solo nos darán una sintaxis más fácil sino que nos permitirán manejar conceptos de programación en CSS, como crear variables, constantes, funciones, etc.
  • GRUNTJS o GULPJS – Automatizador de tareas. Con un simple archivo.js indicamos las tareas que queremos automatizar con un simple comando y las escribimos en él en formato JSON. El objetivo principal que debemos plantearnos es ir reconociendo qué podemos ir automatizando en nuestro desarrollo y cuáles son aquellos procesos que repetimos cada vez que inicializamos un nuevo desafío.
  • YEOMAN – It helps to create Web projects, making available a series of workflows and best practices, not only optimizing the final result but also the order and structure of our project. It can also implement other features such as managing bower & grunt.

La utilización en conjunto de estas herramientas, dependiendo de la necesidad, derivan en tener una aplicación Web mejor estructurada y fácilmente escalable (a nivel de Frontend).

 

Share This