Comenzar un proyecto en Angular

En esta publicación vamos a explicar cómo comenzar un proyecto en Ángular de la mano de nuestro compañero Dani G.

Todo programador en algún punto de su vida se ha preguntado con qué lenguaje de programación utilizar a la hora de comenzar un nuevo proyecto. Normalmente, se suelen utilizar aquellos con los que ya se ha trabajado o que se conocen muy bien, pero son muchos más los valores que se deben tener en cuenta antes de escoger uno.

Para ello, tenemos que hacernos una serie de preguntas:

¿Tiene dicho lenguaje una documentación lo suficientemente detallada y clara como para resolver dudas?

¿Tiene comunidad que siga desarrollando extensiones y actualizaciones?

¿Sera fácil encontrar compañeros que conozcan este lenguaje?

¿La curva de aprendizaje sera rápida y sencilla?

¿Podré escalar mi proyecto llegado el momento?

¿Quien se encuentra detrás del lenguaje?

¿Alguna compañía “grande” lo usa?

Si con un par de búsquedas en google eres capaz de responder estas dudas de manera satisfactoria, puede ser que hayas escogido el lenguaje que buscas. En el caso de Dani, esta decisión fue Angular, y a continuación nos explica cómo comenzar un proyecto y sus posibilidades a futuro:

1-Iniciar el proyecto en Angular

Según mi experiencia personal, Angular-cli es la manera más rápida de trabajar. Además, en la propia web tenéis información muy detallada sobre cómo usarlo.

2-Diferenciar componentes en el proyecto

Partiendo de la base de que hemos definido nuestro proyecto y tenemos un diseño, aunque sea de servilleta, debemos trocearlo. Es decir, debemos convertirlo en un “lego” para comenzar a crear componentes (mínima unidad con funcionalidad propia). Un ejemplo de esta acción seria así:


Esto es un pequeño ejemplo que te ayudara a tener un proyecto sin acoplamiento, sin código duplicado y con una buena organización.

Con esta división podríamos empezar a crear “secciones” en nuestro proyecto tipo:

  • Componente Header
  • Componente Sidebar
  • Componente Buscador
  • Componente redes sociales
  • Componente menu mobile
  • Componente Párrafo con titulo
  • Componente Tarjeta
  • etc.

3-No reinventar la rueda

Angular ofrece DirectivasPipes y demás utilidades propias del lenguaje que podréis encontrar en su documentación.

También debéis tener en cuenta las librerías realizadas por terceros que están a vuestra disposición en NPM packages y que os agilizarán el trabajo, aunque tampoco se debe abusar.
Antes de añadir un paquete se debe investigar un poco sobre él (si tiene soporte, cuánta gente lo usa…) y se deben tener en cuenta las dependencias del mismo, ya que al incluirlo en nuestro proyecto las adquirimos, además de los posibles problemas a la hora de actualizar Angular cuando sea necesario.

Otro punto considerar es que a mayor numero de paquetes incluidos en el proyecto, mayor es el «peso» de nuestro proyecto y eso puede suponer un problema.

4-Optimización de Assets

Está claro que al añadir una imagen, vídeo o audio al proyecto se debe optimizar para que ocupe el menor espacio posible, aunque siempre sin bajar de la calidad impuesta por nosotros mismos.

5-A programar

Teniendo todo lo anterior, ya solo quedaría comenzar a crear el proyecto y ahora es cuando debemos preguntarnos: «¿sé programar en Angular?»:

Si sabes programar en javascript no tendrás ningún problema y en el caso de no tener ni idea tranquilo, existen miles de plataformas web que ofrecen cursos interactivos por un bajo o nulo coste. Como: