Lemoncode blog


Artículos, ideas, desarrollos, notas y mucho más

Viewing entries in
Frontend

Javascript Asíncrono: La guía definitiva

La asincronía es uno de los pilares fundamentales de Javascript. ¿Nunca has llegado a entender en profundidad como funciona? ¿Crees que es magia lo que sucede al utilizar promesas? Entra en esta guía definitiva y aprende de una vez por todas como funciona la asincronía en Javascript. Su comprensión mejorará en gran medida tu código y te ayudará a escribir mejores aplicaciones. 

4 Comments

Curso de React: Preguntas y respuestas

Hace unos días que impartimos el curso de React en vivo donde se cubrieron desde conceptos básicos de la propia librería a cómo adentrarnos en el desarrollo de una aplicación web real con esta tecnología.

Durante el curso de esta formación los alumnos realizaron preguntas muy interesantes tanto durante el curso en vivo como por el canal de slack que abrimos para el mismo. Hemos decidido seleccionar un grupo de preguntas y material en este post, espero que te sea interesante.

Por cierto si tienes ganas de aprender React, puedes adquirir la grabación de este curso por sólo 29 € pinchando en este enlace.

¿Cómo arrancar un proyecto con React desde cero? ¿Qué necesito?

Prerrequisitos

Necesitarás tener instalado Node. Al instalar Node, podemos abrir una terminal y ejecutar el comando `npm` para listar los paquetes necesarios.

Boilerplate

Tienes en el repositorio react-training-ts (o react-training-es6 para la versión en ES6) todos los ejemplos estructurados con su código fuente junto con un README.md explicando paso a paso para ejecutarlo. En el ejemplo 02 Sample App / 00 Boilerplate se encuentra una plantilla que puedes utilizar como punto de inicio o configuración inicial.

IDE / editor

Como editor podemos usar, por ejemplo, Atom o VisualStudio Code.

Plugins necesarios para trabajar con Atom:
- En el caso de usar TypeScript: atom-typescript
- En el caso de ES6, language-babel para el highlight del código, auto-complete JSX, etc.

Otros plugins de Atom que te pueden ayudar:

Comment

Typings 1.X y Unable to Find "react"

Hace poco que actualizamos a la versión 1.X de Typings y nos encontramos con una sorpresa, lo que antes funcionaba sin problemas:


typings install react --ambient --save

Nos da ahora un mensaje de error bien feo Unable to find "react" ("npm") in the registry

Después de buscar un poco encontramos varias pistas:

  • En este post nos explica que tenemos que indicar ahora el origen del paquete.
  • En el breaking changes de typings nos comentan cambios en los parametros de la línea de comandos...

Configurando tsconfig en Atom y VS Code

Una de las cosas más apasionantes en el mundo del Front-end es lo rápido que está evolucionando, hace unos meses estábamos usando bower y tags “script” en el html de nuestros sitios web y ahora nos encontramos utilizando “imports” y dejando que una herramienta de bundling nos lo resuelva todo.

Otro tema apasionante es el abanico de herramientas que tenemos disponibles, de utilizar Eclipse o Visual Studio, pasamos a tener una cantidad de opciones muy interesantes: Sublime, Atom, Webstorm, Visual Studio Code…

Ahora viene la parte negativa ¿Cómo narices haces que todo esto funcione bien en los diferentes editores?

Por nuestra parte nos hemos esforzado en que nuestros proyectos publicados se abran correctamente con Atom y Visual Studio Code (nos comentan que con Webstorm también va la cosa bien). En este post vamos a resumir los “tortazos” que nos hemos dado y las soluciones que hemos aplicado, espero que os sea de utilidad...

React: Rethinking Best Practices

Mucha gracias a todos los que asististeis al webinar de “React: Rethinking best practices”. 

En este post os pasamos el material de la charla:

  • La grabación del webinar la tenéis disponible en este link
  • Te puedes descargar la presentación en este link
  • Sobre las demos:
    • Jugando con JSX lo tenéis en este repositorio y tenéis este post disponible
    • Sobre las demos de React y Redux, las tenéis disponibles en este repositorio

Si estáis interesados en profundizar y aprender más sobre React + Redux, tenemos un curso disponible: que además vuestra empresa podría bonificar por la tripartita y hasta saliros a coste cero. Más información en este link o escríbenos un correo a formacion@lemoncode.net

Comment

JSX / TSX ¿Qué tiene de bueno?

Una de las cosas que nos sorprende cuando le echamos un ojo a React es que el “HTML” parece estar embebido dentro de los ficheros JavaScript… De primeras, esto ha hecho que muchos desarrolladores hayamos descartado esta tecnología al considerar que era una vuelta al Spaghetti y rompíamos principios como el de “Separation of concerns”.

En mi caso, no podía entender cómo se rompía tan flagrantemente las buenas prácticas y cómo a la vez, empresas muy grandes como Facebook, Airbnb, Uber, Yahoo y muchas otras, lo abrazaban como estándar ¿Hay algo que nos estamos perdiendo? Vamos a indagar un poco en qué consiste esto...

Comment