Consejos para aprender a programar con Ember JS

Supongamos que estás tranquilamente en el sofá y recibes la llamada de un reclutador que te ofrece una gran oportunidad para trabajar en un proyecto ambicioso. Supongamos que entre las tecnologías y lenguajes que describe aparece el nombre de un framework llamado EmberJS que aunque no te suena de nada pues piensas, qué diablos, y dices que sí a todo. Supongamos que ahora tienes entre 1 a 2 semanas para preparar tu entrevista y aprender tanto como sea posible para mejorar tus habilidades tanto como sea posible. ¿Por dónde comenzar? ¿Qué necesitamos saber y dónde podemos encontrarlo?

Aunque parezca un escenario inventado un tanto disparatado esto mismo le ocurrió a una compañera de trabajo que tuvo esa suerte. Y aunque ya contaba con una dilatada experiencia aquella fue una semana bastante intensa. Si te encuentras en una situación similar quizá este artículo te ayude a sentar las bases.

¿Qué es EmberJS?

Antes de comenzar conviene describir qué es EmberJS y su marco de aplicación. Se trata de un framework front-end orientado al desarrollo de proyectos de modo ágil y productivo y que puedan ser mantenidos a largo plazo como por ejemplo aplicaciones web o móviles. EmberJS se encuentra licenciado bajo una licencia de código abierto, lo que significa que cuenta con un ecosistema de herramientas que se extienden más allá de lo imaginable gracias al aporte de muchas personas.

Al igual que muchos otros marcos front-end populares, es una aplicación "SPA" o de una sola página, por lo que en lugar de recargar todo el contenido a medida que navega a cada página nueva en un sitio (con pantallas en blanco mientras espera a que se cargue la página siguiente), la aplicación se carga una vez y después de eso, todo es "mágicamente" ágil y rápido.

EmberJS es una librería muy similar a las otras que hemos discutido y que también se integra con Handlebars para esquematizar el marcado, un lenguaje de plantillas para construir páginas estáticas, muy parecido a Jekyll que puede serte familiar, y así usar JavaScript para implementar un comportamiento personalizado para los diferentes componentes.

Para hacernos una primera idea podemos ver una aplicación Ember de ejemplo en acción simplemente visitando Ember Docs. Por supuesto y dado que Ember es un marco front-end, si deseamos que en nuestra aplicación se guarden datos, que tenga elementos de inicio de sesión, etc, necesitaremos también crear una API de back-end.

Por último y no menos importante, debes saber que Ember sigue el principio de “convention over configuration” lo que significa que ofrece formas realmente fáciles de implementar tareas y funcionalidades comunes a nuestro proyecto, si no hacemos cosas raras. Como es lógico si inyectamos diferentes componentes, framework y tecnologías en el DOM HTML y es tu primer contacto con Ember entonces es posible que tengas dificultades.

¿Quién usa Ember.js?

¿Todavía con dudas? No te preocupes, es normal. Aunque un marco de desarrollo o biblioteca sea excelente y de sobra conocido, todavía buscamos en Google quién está usando esa tecnología. Si algunas compañías gigantes lo usan, nuestra confianza con esa tecnología se vuelve mucho más fuerte. Esto puede servir como herramienta para nuestra motivación.

Podemos ver una lista de algunas compañías famosas que usan Ember.js desde su página oficial. Algunos gigantes en la lista son:

Instalación del CLI de EmberJS

Dicho todo esto vamos manos a la obra. Para comenzar a trabajar con Ember rápidamente lo recomendable es instalar su herramienta de línea de comandos (CLI). Su utilización será de ayuda para muchas cosas. Desde generar los archivos de tu aplicación, implementar su estructura básica, canalización de enlaces, instalar complementos o ejecutar tu proyecto localmente.

Si eres principiante en Ember, no necesitas crear nuevos archivos copiando, pegando y renombrando. Es demasiado fácil cometer un error en la asignación de nombres, ubicación y repetitivo, entonces, ¿por qué arriesgarse? Siempre siempre siempre es mejor idea usar el Ember-Cli.

Sigue el camino rápido (pero no seas un Jedi oscuro)

Cuando iniciamos nuestros pasos en programación se suele decir que hay dos caminos, el camino corto y fácil (cortar y pegar) y el camino largo y difícil (escribir nuestro propio código desde cero y si hace falta a mano en una libreta). Resulta evidente que el segundo camino es bastante largo para nuestro propósito y que la mejor opción parece comenzar a tomar código prestado de los ejemplos que podemos encontrar en la guía rápida.

Mi consejo es que si optas por este camino debes tener en cuenta que muchas cosas y conceptos básicos pueden perderse por el camino. Lo mejor es que si tienes problemas en esta etapa busques primero entender qué está pasando en el código, que estés ejecutando los comandos correctos usando ember-cli en el directorio de trabajo y qué puedes verificar que no falte nada. De lo que se trata es que tras esto, si el problema persiste, puedas ingresar a los chat o foros de Ember y explicar correctamente qué ocurre, cuál es el error, entender las soluciones que se ofrecen. Y lo más importante, si conoces la solución a los problemas de otras personas puedas compartir tus soluciones con ellos y que éstos puedan entenderte. A la larga esto te ayudará en tu aprendizaje y siempre es mejor que recluirse en una cueva mientras construyes tu estrella de la muerte.

Por supuesto que hay otros muchos lugares donde puedes obtener ayuda. Una búsqueda rápida en Google con nuestro mensaje de error puede arrojarnos resultados y posiblemente la solución a problemas comunes. Para filtrar cierto ruido de fondo intenta no hacer busquedas relacionadas con versiones antiguas, por debajo de la versión 2.x pues el código puede resultar confuso.

Siempre es una buena idea, repasar las guías y documentos relativos a Ember y su API antes de comenzar. Esto también nos ayudará. También consultar en los foros internos o si estamos suficiente confianza en nuestras habilidades abrir un problema en el repositorio EmberJS o Ember Learn GitHub correspondiente. También existe un canal dedicado para dudas, #dev-ember-learning en la comunidad Discord.

Y ya por último piensa que una buena práctica consiste en compartir tu código. En sitios como Stack Overflow casi podríamos decir que es requisito imprescindible. No querrás que de tanto ocultar tus planos de tu estrella de la muerta esta acabe destruida a la primera de cambio de la mano de un puñado de hackers rebeldes por culpa de un pequeño “detalle sin importancia”, ¿verdad?

Sigue los tutoriales

La web oficial de Ember cuenta con un tutorial que podemos seguir para adquirir habilidades básicas. Con lo que podemos aprender tendremos la suficiente base de conocimiento para crear nuestra propia aplicación más adelante. Como decía antes Ember es un marco de desarrollo front-end para JavaScript fácil de usar pero que, para adquirir suficiente dominio, necesitaremos invertir algo de tiempo en esta parte.

Es posible que podamos omitir algunos pasos pero hasta que no entiendas sus conceptos básicos es casi seguro que nuestro proceso de aprendizaje sea un poco confuso por lo que definitivamente recomiendo que hagas todos los pasos incluidos las secciones de prueba. Tener una idea de las pruebas a realizar te ayudará a tomar soltura y moverte mucho más rápido una vez que hayas terminado con el tutorial.

Aprende a instalar complementos de Ember y paquetes npm

Dado que Ember ha existido durante mucho tiempo, tiene un enorme ecosistema de paquetes específicos de ascua que puede usar. Se les conoce como complementos.Muchos complementos son contenedores para bibliotecas populares con las que ya puede estar familiarizado, incluidos elementos como Moment, JQuery, gráficos y más.

Por ejemplo, para crear nuestro Hola Mundo en EmberJS sólo tenemos que hacer uso de ember-cli. Este complemento lo podemos instalar gracias usando npm (npm install -g ember-cli) y ya tendremos el ember-cli en nuestra máquina y ya nos podremos poner manos a la obra con el Hola Mundo en EmberJS con ember new hola-mundo.

Una vez ejecutado veremos que se crean un conjunto de directorios y ficheros sobre los cuales iremos construyendo nuestra aplicación. Podemos ejecutar nuestra aplicación poniendo en la línea de comandos: ember s

Y si cargamos la URL http://localhost:4200/ veremos ejecutándose la aplicación.

Este es solo un ejemplo muy básico de lo cómodo que resulta trabajar con npm. Además muchos complementos están disponibles a través de los servidores de npm listos para instalar como ember-bootstrap, ember-pikaday, y ember-power-select. Aunque habrá quien prefiera instalar complementos usando ember install <package-name>
. Esto es debido a que algunos paquetes tienen una configuración especial que no se ejecutará si simplemente usamos el método npm install.

Leer ciertas partes de las guías con atención

Si bien los tutoriales nos ayudan a tomar un atajo para entender ciertos conceptos y antes de crear nuestra propia aplicación lo más aconsejable es leer la documentación disponible en las guías con atención. Piensa que los ejemplos disponibles seguramente serán más sencillos que cualquier proyecto que quieras realizar. Entran en juego muchos conceptos como el manejo de la API. Si bien bien no recordarás todo lo que aparece en la documentación sí tendrás una idea a futuro de dónde buscar. Es como estudiar para una prueba con el libro abierto.

Yo diría que cada parte de The Guides es importante, ¡pero tienes una semana! Así que aquí están los elementos esenciales para leer y releer. Los enlaces a continuación van a la versión 2.14, la última versión en el momento de este artículo, pero asegúrese de elegir la versión más actualizada. Todas las versiones principales de Ember tienen guías que lo acompañan:

Si esto no te resulta suficiente. Hay algunos recursos fantásticos para ayudarnos en nuestro aprendizaje. Pero volviendo al tema si dispones de poco tiempo quizá lo mejor será pagar un curso completo. Aquí comparto una lista de cursos gratuitos:

  • Ember Screencasts (gratuito)
  • Ember.js Times (gratuito) — boletín oficial del grupo de aprendizaje de Ember
  • YouTube (gratuito) — Interesante recurso para encontrar vídeos, tutoriales o charlas sobre EmberJS
  • Udemy (de pago) — La popular plataforma de formación online cuenta con muy buenos cursos.
  • EmberSherpa: colección de aplicaciones desarrolladas bajo Ember listas para usar.

Conclusión:

¡Tantas opciones y posibilidades! La elección de un framework siempre se reduce a las preferencia personales de codificación y la seguridad en el proyecto a largo plazo. En el caso de Ember es posible que toda esta información te confunda un poco o que te haga sentir abrumado.

Tantos recursos para comenzar a dar tus primeros pasos pueden producir esa sensación. Sin embargo muchas de las aplicaciones disponibles en Ember están licenciadas bajo código abierto, al igual que el propio framework. Esto se traduce en la existencia de una comunidad de usuarios que se ayudan entre sí y mejoran este framework a diario. Así que si necesitas crear una aplicación “avanzada”, que ya no es cosa de sentarse una semana a estudiar, la comunidad siempre puede echarte una mano.

Lo importante ahora es que puedas comenzar a sentirte cómodo desarrollando con este marco de desarrollo para luego subir tus aplicaciones a GitHub por ejemplo y compartir tu código. Esto te ayudará por un lado a tomar contacto con la comunidad, con otros desarrolladores y de paso hacer más atractivo tu currículum.

Y por cierto, si quieres saber cómo terminó la historia. Mi compañera de trabajo tuvo su entrevista técnica y tras 2 semanas de espera le confirmaron que contaban con ella para el proyecto. Para que luego digan que el esfuerzo no vale la pena.