Saltar al contenido

Categoría: Desarrollo web

Documental sobre la creación de Angular

De nuevo Honeypot nos sorprende con un nuevo documental sobre la creación de Angular. El cual nos narra desde sus inicios en Google hasta su evolución como uno de los frameworks más utilizados en el desarrollo web de gran calidad, esta vez le toca a Angular, el famoso framework creado por Google y del cual fui parte de su comunidad en Venezuela (ngVenezuela).

¿De qué se trata este documental sobre la creación de Angular?

Este documental explica la interesante historia sobre cómo este proyecto nació dentro de Google para resolver los problemas que enfrentaban al desarrollar aplicaciones en JavaScript. Sin embargo, no todo fue fácil: en sus inicios, Angular tuvo dificultades para conseguir apoyo interno dentro de la empresa. Fue solo cuando un ejecutivo lo vio en acción que comprendió su verdadero potencial y quedó sorprendido, decía que no era real lo que habían hecho.

El documental reúne a todas las personas clave en la creación y difusión de Angular. Es interesante ver cómo evolucionó el framework, desde su primera versión hasta el lanzamiento de Angular 2, un cambio radical que redefinió su arquitectura y luego su posterior adopción del compilador Ivy que fue controversial su. También se habla de la creación de ng-conf, la conferencia que ayudó a consolidar su comunidad.

Uno de los momentos que más me llamó la atención fue recordar viejas tecnologías como AtScript, que sirvió como base antes de que TypeScript tomara su lugar definitivo. También me sorprendió cuando hablaron de la migración a Angular 9, y un ingeniero mencionó que Google tenía 2,500 aplicaciones basadas en este framework. ¡Una cifra impresionante!

En definitiva, si alguna vez has trabajado con Angular, este documental es imperdible. Ofrece una perspectiva única sobre su evolución y el impacto que ha tenido en el mundo del desarrollo web.

Angular: The Documentary | An origin story

Palabras finales

Angular es uno de los frameworks más sólidos y versátiles en el desarrollo web. Google lo utiliza en múltiples proyectos internos, y aunque algunos piensan que ha perdido relevancia, en realidad ha ganado cada vez más impulso en los últimos años.

Así que, ¡disfruta de este documental y anímate a explorar todo el potencial de este poderoso framework!

Deja un comentario

Documental de la creación de TypeScript

TypeScript Origins: The Documentary es un documental creado por Keyboard Stories que explora el proceso de creación de TypeScript. Lo más me gustó de ese documental, es que cuenta con comentarios de sus creadores y de las personas involucradas en su desarrollo, presentación y difusión, ofreciendo una visión completa de la historia detrás de este lenguaje. Este documental de TypeScript es algo que no se deben perder si están involucrados de alguna forma con el mundo de la programación.

¿Qué tiene de importante TypeScript?

Si te parece extraño que hayan hecho un documental de TypeScript de este calibre, es porque actualmente es uno de los lenguajes mas populares. JavaScript probablemente es el lenguaje mas popular actualmente, pero tiene muchas carencias como la falta de tipado/tipos (para mí es una de las cosas por las cuales opino que no es un buen lenguaje) que permite entre muchas cosas, crear código mas complejo, ayudar a los programadores escribir mejores programas limitando el tipo de datos que se pueden guardar o pasar en funciones, optimizar la velocidad de ejecución de los programas, entre otros.

TypeScript nace como solución a este problema, expandiendo su uso rápidamente e inclusive siendo sustituto de JS en muchas compañías. Ademas de ser el lenguaje que hizo posible en su día a tecnologías como Angular y Visual Studio Code.

Mi opinión del documental de TypeScript

El documental comienza con los principales creadores narrando cuáles fueron las causas para desarrollar este lenguaje dentro de Microsoft. Luego, muestra un poco el proceso de desarrollo y, posteriormente, el lanzamiento al público. En estas partes, podemos recordar las conferencias en las que fue anunciado.

Me llamó la atención, cómo comentan que querían liberarlo bajo una licencia abierta pero Microsoft no estaba acostumbrado a eso. Pero con la nueva gerencia les tocó evolucionar y lo consiguieron.

En el proceso de creación de TS, vemos como el lenguaje fue usado para construir Visual Studio Code; posteriormente el equipo de Angular (del rival Google), se unió para hacer que TypeScript soportara decoradores gracias al proyecto AtScript.

Pero en vez de contarte mas, te recomiendo que lo veas a continuación:

TypeScript Origins: The Documentary

Me pareció muy inspirador ver este documental de TypeScript. Ver la historia contada por los mismos creadores, observar como creció desde una idea para poder terminar otro proyecto, hasta ser uno de los principales lenguajes de programación, es muy placentero.

Ojalá hagan mas documentales de este tipo, tal vez uno de Visual Studio Code. Pues luego de ver este documental me dio curiosidad de cómo desarrollaron este editor.

Finalmente, te recomiendo aprender este lenguaje y hacer tu experiencia con JS mas placentera.

Deja un comentario

React vs Vue: ¿Cuál usar?

Este es un artículo que quería publicar hace un par de años. Quería escribir una comparación breve de React vs Vue para que cualquier persona con deseos de empezar con un nuevo proyecto o aprender front-end tenga una base de cual elegir. Pero siempre quedaba en borrador porque sentía que necesitaba mas experiencia con React (Vue lo uso diariamente en mi trabajo). Pero con la actualización de mis plugins de WordPress he logrado trabajar mas con React y poder hacer una comparación.

Comparación inicial entre React vs Vue

Algo que tienes que tener claro es que ambas tecnologías son librerias. No incluyen todos los componentes para hacer SPA. Pero si permiten crearlas y son la base para crear buenas interfaces dinámicas y ligeras.

Ambas tienen una funcionalidad similar pero con una sintaxis y forma de resolverlo diferente. Por ello, cuando quieres saber de React vs Vue debes enfocarte en cual se te hace mas fácil o te beneficia para tu próximo proyecto.

Ninguna es mejor que la otra, y todo se reduce a facilidad de conseguir programadores, documentación y cual se adapta a tu manera de pensar. Por eso lee los siguentes puntos que me parecen importante para que puedas elegir tu próxima librería de frontend.

Curva de aprendizaje y sintaxis

En mi opinión Vue es el mas fácil de aprender. La sintaxis es HTML con unos atributos especiales como v-if, v-if, v-model que permiten controlar el flujo de ejecución o generación del HTML, de resto es HTML estándar usando {{ }} (doble llaves) para mostrar las variables.

Actualmente posee dos formas de crear los componentes: usando Composition API y Options API. La diferencia entre ellas, es que la primera es parecida a la de React y esta enfocada en la facilidad de importar y reutilizar código. El otro, es la versión clasica donde creamos un objeto del componente con llamadas a los metodos, propiedades, datos, entre otras cosas.

También Vue tiene conceptos como variables computadas y asignación de modelos, que abstraen procesos que se harían manuales en otras librerias pero aqui se hacen de forma automática y podemos, por ejemplo, tener una variable que se compute automaticamente ante cambios, sin preocuparnos por desarrollar el proceso de actualización de la misma.

Aquí puedes ver un ejemplo de un componente sencillo que usa Composition API:

import { ref } from 'vue';

export default {
  setup() {
    const mostrarMensaje = ref(false);
    const nombre = 'María';

    const toggleMostrarMensaje = () => {
      mostrarMensaje.value = !mostrarMensaje.value;
    };

    return {
      mostrarMensaje,
      nombre,
      toggleMostrarMensaje
    };
  },
  render() {
    return (
      <div> 
        <h1>¡Bienvenido/a, {nombre}!</h1>
        <button onClick={toggleMostrarMensaje}>
          <span v-if="mostrarMensaje">Mostrar mensaje</span>
          <span v-else>Ocultar mensaje</span>
        </button>
        <p v-if="mostrarMensaje">Este es un ejemplo de sintaxis de renderización en Vue.</p>
      </div>
    );
  }
};

En cambio React usa JSX para renderizar los componentes. Es una sintaxis que mezcla XML con JS. Utiliza JS para controlar la lógica de renderizado y luego etiquetas HTML para definir los componentes y elementos de la página. Pero no es 100% igual, hay atributos como las clases que se llaman className, en vez de class y otros detalles que debes aprender.

Respecto a la parte de datos, utiliza algo llamado hooks que nos permite reutilizar el código mas facilmente. Aqui la data se maneja con estados. En mi opinión en React como no se abstraen tantas cosas, puedes tener mayor control de tu componente pero requiere que comprendas mejor el ciclo de video de ellos para obtener mejores resultados.

Aquí puedes ver un ejemplo de un componente sencillo que usa hooks:

import React, { useState } from 'react';

const Saludo = () => {
  const [mostrarMensaje, setMostrarMensaje] = useState(false);
  const nombre = 'María';

  const toggleMostrarMensaje = () => {
    setMostrarMensaje(!mostrarMensaje);
  };

  return (
      <div>
        <h1>¡Bienvenido/a, {nombre}!</h1>
        <button onClick={toggleMostrarMensaje}>
              { mostrarMensaje ? 'Ocultar mensaje' : 'Mostrar mensaje'}
        </button>
        { mostrarMensaje && <p>Este es un ejemplo de React JSX.</p> }
      </div>
  );
};

export default Saludo;

Aunque si observan ambos casos la sintaxis es muy similar, con saber buen HTML, no importa si es React vs Vue. Respecto a la sintaxis general

Documentación y comunidad

React debido a su popularidad posee una comunidad mas grande que provee mayor información y contenido. La documentación oficial es muy buena y enseña su uso sin importar que no tengas experiencia en la librería. Está dirigida a todo publico y me parece que nunca tuve dificultad para conseguir información para resolver problemas con React.

Vue también tiene una documentación muy buena, pero no es tan detallada. La comunidad es mas pequeña y en algunos casos debido a esto, no encontrarás mucha información o tutorial como los que existen en React.

En realidad ambos tienen documentación que te permiten aprender a usar estas tecnologías, solo que la de React tiene mas forma de tutorial y por el tamaño de su comunidad, te será mas fácil de encontrar solución a tus problemas.

Developer tools

Ambas librerías poseen herramientas para los navegadores a través de una extensión. En mi opinión las de Vue son mas cómodas, soporta gran variedad de tecnologías, permite ver mejora la información y son mas sencillas.

En cambio las de React, me pareció menos potente. A pesar de que puedes ver todos los componentes, no puedes editarlo o hacer operaciones avanzadas sobre los componentes. Y hay limitaciones como no poder usarlas dentro de un iframe que le quitan puntos.

Herramientas de desarrollo de React en Firefox

Pero ambas funcionan correctamente, permiten interactuar con los componentes y cumplen con el objetivo principal de ayudar al programador ver como se renderizan los componentes y ver las variables internas.

Mis recomendaciones

Si estás comenzando en el desarrollo front-end, considero que Vue es la opción ideal debido a su curva de aprendizaje suave y el uso de HTML simple para la creación de componentes visuales. No obstante, si tu objetivo es adquirir habilidades que te ayuden a conseguir trabajo, React es la elección más acertada debido a su mayor popularidad en el mercado laboral. Además, es posible encontrar una mayor cantidad de recursos e ejemplos para aprender, aunque es importante tener en cuenta que se requerirá un dominio previo de JavaScript y mayor esfuerzo inicial para dominarlo por completo.

¡Elige el que te parezca mas cómodo y se ajuste a tus necesidades! Comenta cual usas tú y por qué.

Deja un comentario

Mi opinión del documental de React.js de HoneyPot

React ha revolucionado el desarrollo web, ofreciendo a los desarrolladores una poderosa herramienta para crear interfaces de usuario dinámicas e interactivas. Gracias a Honeypot, una plataforma tecnológica reconocida, recientemente lanzó un excelente documental de React.js que profundiza cómo fue el nacimiento de esta tecnología

¿De qué se trata?

Puedo decir que me encantó este documental de React.js debido a que la historia es narrada por los participantes de la creación del proyecto. El documental abarca desde que fue una idea, el inicio de su desarrollo, las motivaciones tecnológicas para hacer React, qué cosas pasaron dentro de Facebook y como el proyecto fue adoptado por la compañía hasta ir poco a poco avanzando sobre la evolución de la librería a lo largo del tiempo, hasta llegar al futuro del mismo.

Las entrevistas son interesantes, variadas y con el contenido fácil de entender. No posee mucho contenido de alto grado tecnológico por lo que puede verlo todo tipo de público interesado en React.

Para quienes llevamos rato en el mundo del desarrollo web. Este documental de React.js nos traerá nostalgia de como funcionaban las cosas en el 2010-2012, a pesar que allí lo muestran como algo viejo y lejano, para uno es como si fuese ayer (creo que me estoy volviendo viejo al escribir estas cosas).

¿Cómo ver el documental de React.js?

El documental de React.js está disponible de forma gratuita en Youtube. Te recomiendo verlo con calma y tiempo porque es bueno, muy interesante y podría ser motivador, sobre todo si quieres llevar adelante tu proyecto de código abierto.

Así que mira el documental a continuación:

How A Small Team of Developers Created React at Facebook | React.js: The Documentary

Espero que te guste este grandioso documental de React.js y compártelo con tus amigos en las distintas redes sociales. Si deseas ver otro documental similar, te recomiendo ver el documental de la creación de Vue. Es igual de bueno y te encantará.

Finalmente, te invito a dejar tu comentario sobre el vídeo, si has trabajado con React.js o tu opinión de este framework que es mas actualizado actualmente para el desarrollo web.

Deja un comentario