El otro día en el Máster Front End Lemoncoders, Eirik Rasmussen nos dió una sesión muy interesante sobre server side rendering y como implementarlo usando React y Next. Eso nos ha animado a escribir una serie de posts en la que explicamos como funciona esto de manera detallada.
En este primer artículo de la serie vamos a centrarnos en es explicar bien el problema que viene a resolver "Server side rendering" así como conceptos de base, en siguientes entrega nos meteremos de lleno en una implementación utilizando Next y React.
En la entrega anterior vimos como podíamos usar webpack-bundle-analyzer para ver que librerías de terceros hacían que nuestro "bundle" estuviera gordo.
En esta entrega vamos a ver como habilitar treeshaking en esas librerías y reducir su tamaño de forma considerable. Como ejemplo trabajaremos con una librería de componentes popular: material_ui, crearemos un aplicacíon simple y veremos como reducimos el espacio que ocupa esta librería en nuestra aplicación, pasaremos de un peso de 960 Kb a 56 Kb.
Abrimos una serie de posts en lo que nos centramos en aligerar el peso de nuestros bundles, en este primer post os presentamos una herramienta que os ayudará a identificar que paquetes son culpables del "sobrepeso" de tu aplicación.
Ya tenemos la resolución de la beca Yes We Tech. Lo primero pediros disculpas por el retraso en resolverla, la fecha oficial era el 5 de Febrero, nos hemos retrasado unos días, porque hemos recibido un buen número de solicitudes muy interesantes y nos ha costado mucho decidirnos... tanto que hemos ampliado el número de plazas becadas de una a dos.
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.
En colaboración con YesWeTech ofrecemos nuestra primera beca de estudios para ayudar aportar nuestro granito de arena a conseguir que haya más diversidad e igualdad de oportunidades en esta profesión. ¿En que consiste? En cubrir el 100% del coste del Máster Front End Online Lemoncode a un alumno que pertenezca a una minoría con baja representación en el sector profesional. Ofrecemos una plaza, y para ello hemos resuelto unas bases para poder inscribiros y seleccionar el aspirante.
En cada edición del Máster Front End Online Lemoncode nos toca pararnos, evaluar temario y ver que debemos incluir para tener esta iniciativa 100% orientada al mercado laboral y a las nuevas tecnologías que estén pegando fuerte.
En este post vamos a aprender manejarnos con el cliente de Git de Visual Studio Code, para ello nos clonaremos un repo de Github que contiene una aplicación web del tipo "Hola Mundo", e iremos trabajando con ella. Cada paso irá acompañado de gifs animados que nos harán más facil aprender a como usar esta herramienta.
El Máster Front End Lemoncode va ya por su cuarta edición, desde que arrancamos teníamos claro que debía tener un enfoque 100% orientado al mercado laboral, y que los alumnos crecieran profesionalmente: tanto en capacitación en sus puestos de trabajo, así como prepararlos para probar nuevas aventuras. Fruto de esta actitud, hemos mantenido siempre contactos con empresas del sector y puesto en contacto oferta con demanda.
Como novedad en esta cuarta edición formalizamos dicha cooperación, hemos abierto una bolsa de trabajo, con empresas interesadas en contratar a estudiantes del Máster Lemoncode.
Seguro que recientemente has oído y leído sobre este paradigma de programación que está atrayendo a muchos seguidores. En este post podrás aprender en qué consiste y ver algunos ejemplos que seguro te harán reflexionar sobre tu manera de programar y quizás te animen a aplicarlo en algún proyecto.
En este post aprenderás las maravillas que nos trae lodash/fp (fp viene de functional programming, genial para asegurar inmutabilidad). Lo mostramos mediante ejemplos con una guía paso a paso y usando CodePen.
Cuando trabajamos con array es muy normal que llenemos nuestro código de bucles, que si...
“Mirar si este elemento está en el array...”
“Mirar si la suma de ventas es mayor de X para ofrecer gastos envío cero...”
“Sacar la media de ventas anuales...”
“Si uno de los indicadores está en rojo dispara la alarma...”
“Cerrar el pedido cuando todos los artículos hayan sido enviados...”
¿Qué solemos hacer JavaScript ES5? Tirar de bucle y ‘palante’, ¿Que desventajas tiene esto?
- El código es menos legible.
- Es más fácil que nos equivoquemos.
- Estamos repitiendo una y otra vez trozos de código parecidos.
Otra opción era utilizar una librería como lodash, pero... ¿no hay forma de hacer lo mismo sin tener que usar librerías de terceros? La respuesta es sí, con JavaScript ES6 tenemos un montón de métodos de ayuda que están muy bien, algunos son bien conocidos (map, reduce...) y otros no tanto, en este post damos un buen repaso a los más importantes para ayudarte a que tu código sea más fácil de leer y mantener.
Cada X años un grupo de desarrolladores, cogen piezas y buenas prácticas de aquí y allá y montan un patrón que cambia las reglas del juego. En esta ocasión le toca a Redux revolucionar el mundo del desarrollo ¿Pero que tiene este patrón de especial que no tenga MVC, MVV, MV*^...? En este artículo vamos a ver sus puntos fuertes.
Hasta hace no mucho en Lemoncode ofrecíamos un máster especializado en Front End, y recibimos varias propuestas de desarrolladores que estaban interesados en tener la foto completa de como desarrollar un proyecto web de cabo a rabo, así que nos liamos la manta a la cabeza y montamos el máster Full Stack con un buen temario y un estupendo plantel de profesores (8 docentes cada uno especialista en su área).
Seguro que más de una vez te ha dado el “calentón” y has dicho ¡Un día me tengo que montar por mi cuenta! Es más hasta habrás buscado información aquí y allá y habrás visto que esto de ser desarrollador nos hace ser” bichos raritos” ya que no encajamos en los estándares de lo que se considera montar un negocio.
Hace unas semanas incorporamos a nuestra oferta formativa un Máster Full Stack. Al ver este término más de uno habréis pensado:
¡Anda, esto lo he visto en un montón de ofertas de trabajo!, pero ¿en qué consiste esto exactamente? ¿es un tipo de trabajo atractivo y en el que pueda tener proyección?
En este post vamos a intentar aclararte dudas y que veas si esto del "Full Stack" está hecho para ti.
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:
