React vs Angular: la comparación definitiva

React vs Angular: la comparación definitiva

¿Dificil decisión verdad? por eso te traigo esta completa comparación: React vs Angular. Cada framework tiene mucho que ofrecer y no es fácil elegir entre ellos. Tanto si eres un recién llegado tratando de averiguar por dónde empezar, como un diseñador web freelance eligiendo un framework para tu próximo proyecto, o un director de nivel empresarial planificando una visión estratégica para tu empresa, es probable que te beneficies de tener una visión educada sobre este tema.

Para ahorrarte tiempo, déjame decirte algo de antemano: este artículo no dará una respuesta clara sobre qué framework es mejor. Pero tampoco lo harán cientos de otros artículos con títulos similares. No puedo decírtelo, porque la respuesta depende de una amplia gama de factores que hacen que una tecnología en particular sea más o menos adecuada para tu entorno y tu caso de uso.

Como no podemos responder directamente a la pregunta, intentaremos algo más. Una Angular y React, para demostrar cómo se puede abordar el problema de comparar dos frameworks de una manera estructurada por sí mismo y adaptarlo a tu entorno. Ya sabes, el viejo enfoque de “enseñar a un hombre a pescar”. De esta manera, cuando ambos sean reemplazados por un BetterFramework.js dentro de un año, podrás recrear el mismo tren de pensamiento una vez más.

Esta guía acaba de ser actualizada para reflejar el estado de React, Angular, y sus respectivas ventajas y desventajas en el 2020.

¿Por dónde empezar con React vs Angular?

Antes de elegir cualquier herramienta, tienes que responder a dos simples preguntas: “¿Es una buena herramienta en sí misma?” y “¿Funcionará bien para mi caso de uso?” Ninguna de ellas significa nada por sí sola, así que siempre hay que tenerlas en cuenta. De acuerdo, las preguntas pueden no ser tan simples, así que intentaremos dividirlas en otras más pequeñas.

Preguntas sobre la propia herramienta:

  • ¿Qué tan madura es y quién está detrás de ella?
  • ¿Qué tipo de características tiene?
  • ¿Qué arquitectura, patrones y paradigmas de desarrollo emplea?
  • ¿Cuál es el ecosistema que lo rodea?

Preguntas para la reflexión:

  • ¿Podremos yo y mis colegas aprender esta herramienta con facilidad?
  • ¿Encaja bien con mi proyecto?
  • ¿Cómo es la experiencia del desarrollador?

Usando esta serie de preguntas, puedes empezar tu evaluacion de cualquier herramienta, y basaremos nuestra comparacion de React y Angular en ellas tambien.

¿Es justo hacer una comparación de React vs Angular?

Hay otra cosa que debemos tener en cuenta. Estrictamente hablando, no es exactamente justo comparar Angular con React, ya que Angular es un marco completo y rico en características, mientras que React es sólo una biblioteca de componentes UI. Para igualar las probabilidades, hablaremos de React en conjunto con algunas de las bibliotecas que se usan a menudo con él.

Madurez

Una parte importante de ser un desarrollador hábil es ser capaz de mantener el equilibrio entre los enfoques establecidos y probados a lo largo del tiempo y la evaluación de la nueva tecnología punta. Como regla general, debes tener cuidado al adoptar herramientas que aún no han madurado debido a ciertos riesgos:

  • La herramienta puede ser un fracaso e inestable.
  • Puede ser abandonada inesperadamente por el distribuidor.
  • Puede que no haya una gran base de conocimientos o comunidad disponible en caso de que necesites ayuda.
  • Tanto React como Angular provienen de buenas familias, así que parece que podemos confiar en este sentido.

React

React es desarrollado y administrado por Facebook y utilizado en sus productos, incluyendo Instagram y WhatsApp. Existe desde el año 2013, así que no es exactamente nuevo. También es uno de los proyectos más populares de GitHub, con más de 150.000 estrellas en el momento de escribir este artículo. Algunas de las otras empresas que usan React son Airbnb, Uber, Netflix, Dropbox y Atlassian.

Angular

Angular existe desde 2016, lo que lo hace un poco más joven que React, pero tampoco es un novato en el tema. Es administrado por Google y, como mencionó Igor Minar, incluso en 2018 fue usado en más de 600 aplicaciones en Google como la Base de Datos de Fire, Google Analytics, Google Express, la plataforma de nube de Google y más. Fuera de Google, Angular es usado por Forbes, Upwork, VMWare y otros.

Características de ambos: React vs Angular

Como mencioné antes, Angular tiene más características que Reaccionar. Esto puede ser algo bueno y malo, dependiendo de cómo se mire. Ambos frameworks comparten algunas características claves en común: componentes, unión de datos, y plataforma de representación agnóstica.

Angular

Angular proporciona muchas de las características requeridas para una aplicación web moderna nada más sacarla de la caja. Algunas de las características estándar son:

  • Inyección para dependencia
  • Plantillas, basadas en una versión extendida de HTML
  • Componentes de clase con ganchos de ciclo de vida
  • Enrutamiento, proporcionado por @angular/router
  • Solicitudes de Ajax usando @angular/common/http
  • @angular/forms para construir formularios
  • Encapsulación del componente CSS
  • Protección XSS
  • División del código y carga perezosa
  • Corredor de prueba, marco y utilidades para la prueba de la unidad.

Algunas de estas características están incorporadas en el núcleo del framework y no tienes la opción de no usarlas. Esto requiere que los desarrolladores estén familiarizados con características como la inyección de dependencia para construir incluso una pequeña aplicación Angular. Otras características como el cliente HTTP o los formularios son completamente opcionales y pueden ser añadidas según sea necesario.

React

Con React, estás empezando con un enfoque más minimalista. Si estamos viendo sólo a React, esto es lo que tenemos:

  • En lugar de las plantillas clásicas, tiene JSX, un lenguaje similar a XML construido sobre JavaScript
  • Componentes de clase con ganchos de ciclo de vida o componentes funcionales más simples
  • Gestión del estado usando setState y ganchos.
  • Protección XSS
  • División del código y carga perezosa
  • Error en el manejo de los límites
  • Utilidades para los componentes de pruebas unitarias

Fuera de la caja, React no proporciona nada para la inyección de dependencia, el enrutamiento, las llamadas HTTP o el manejo avanzado de formularios. Se espera que elijas cualquier librería adicional para añadirla en base a tus necesidades, lo cual puede ser tanto bueno como malo dependiendo de la experiencia que tengas con estas tecnologías. Algunas de las bibliotecas populares que se utilizan a menudo junto con React son:

  • React-router para el enrutamiento
  • Fetch (o axios) para peticiones HTTP
  • Una amplia variedad de técnicas para la encapsulación de CSS
  • Biblioteca de Pruebas para utilidades adicionales.

Los equipos con los que he trabajado han encontrado liberadora la libertad de elegir sus bibliotecas. Esto nos da la capacidad de adaptar nuestra pila a los requisitos particulares de cada proyecto, y no hemos encontrado el costo de aprender nuevas bibliotecas tan alto.

Lenguajes, paradigmas y patrones

Dando un paso atrás de las características de cada framework, veamos qué tipo de conceptos de alto nivel son populares en ambos frameworks.

React

Varias cosas importantes vienen a la mente cuando se piensa en React: JSX, componentes y ganchos.

JSX

A diferencia de la mayoría de los frameworks, React no tiene un lenguaje de plantillas separado. En lugar de seguir el enfoque clásico de separar el marcado y la lógica, React decidió combinarlos dentro de los componentes utilizando JSX, un lenguaje similar al XML que permite escribir el marcado directamente en el código JavaScript.

Aunque los méritos de mezclar el marcado con JavaScript pueden ser discutibles, tiene un beneficio indiscutible: el análisis estático. Si cometes un error en tu marcado JSX, el compilador emitirá un error en lugar de continuar en silencio. Esto ayuda al detectar instantáneamente errores de escritura y otros errores tontos. El uso de JSX atrapado en diferentes proyectos – como MDX, que permite usar JSX en archivos de marcas de revisión.

Componentes

En React puede definir los componentes utilizando funciones y clases.

Los componentes de clase permiten escribir el código usando clases ES y estructurar la lógica del componente en métodos. También te permiten utilizar los métodos tradicionales del ciclo de vida de React para ejecutar la lógica personalizada cuando un componente se monta, actualiza, desmonta, etc. A pesar de que esta escritura es más fácil de entender para las personas familiarizadas con la programación OOP, es necesario ser consciente de todos los sutiles matices que tiene JS – por ejemplo, cómo funciona, y no olvidar de vincular los controladores de eventos.

Los componentes de funciones se definen como funciones simples. A menudo son puros y proporcionan un claro mapeo entre los apoyos de entrada y la salida renderizada. El código funcional suele estar menos acoplado y es más fácil de reutilizar y probar. Antes de la introducción de los ganchos, los componentes funcionales no podían tener estado y no tenían una alternativa a los métodos de ciclo de vida.

Hay una tendencia entre los desarrolladores de React a abandonar los componentes de clase en favor de componentes funcionales más simples, pero como los ganchos son una característica más reciente, normalmente se verá una mezcla de ambos enfoques en los proyectos más grandes de React.

Ganchos

Los ganchos son una nueva característica de React que se introdujo en la versión 16.8. Son funciones que permiten clasificar el estado de los componentes y las características del método de ciclo de vida en componentes funcionales. Hay dos ganchos proporcionados por React: useState para gestionar el estado, y useEffect para crear efectos secundarios – como la carga de datos o la edición manual del DOM.

Los ganchos han sido introducidos para hacer los componentes funcionales más simples y más compatibles. Ahora se pueden dividir las grandes funciones en partes atómicas más pequeñas, lo que permite dividir las piezas funcionales relacionadas, separándolas de la lógica de representación y reutilizándolas en diferentes componentes. Los ganchos son una alternativa más limpia a la utilización de componentes de clase y otros patrones, como las funciones de renderizado y los componentes de orden superior, que pueden complicarse demasiado rápidamente.

React ofrece formas de estructurar su aplicación sin implicar muchas capas de complicadas abstracciones. La utilización de componentes funcionales junto con los ganchos te permite escribir código que es más simple, más atómico y reutilizable. Aunque la idea de combinar el código y las plantillas pueda parecer controvertida, la separación de la lógica de presentación y de aplicación en diferentes funciones permite obtener resultados similares.

Angular

Angular también tiene algunas cosas interesantes bajo la manga, empezando por las abstracciones básicas como componentes, servicios y módulos, hasta TypeScript, RxJS y Angular Elements, así como su enfoque de la gestión del estado.

Conceptos principales

Angular tiene un nivel de abstracción más alto que React, introduciendo así más conceptos fundamentales con los que familiarizarse. Los principales son:

  • Componentes: definidos como clases ES especialmente decoradas que se encargan de ejecutar la lógica de la aplicación y de renderizar la plantilla
  • Servicios: clases responsables de la implementación de la lógica de negocio y de aplicación, utilizadas por los componentes
  • Módulos: esencialmente Contenedores de DI para el cableado de componentes relacionados, servicios, canalizaciones y otras entidades juntas.

Angular hace un uso intensivo de clases y conceptos como DI, que son menos populares en el mundo del desarrollo front-end, pero que deberían ser familiares para cualquiera con experiencia en el desarrollo back-end.

TypeScript

TypeScript es un nuevo lenguaje construido sobre JavaScript y desarrollado por Microsoft. Es un superconjunto de JavaScript ES2015 e incluye características de las nuevas versiones del lenguaje. Puedes usarlo en lugar de Babel para escribir JavaScript de última generación. También cuenta con un sistema de escritura extremadamente poderoso que puede analizar estáticamente tu código usando una combinación de anotaciones e inferencia de tipos.

También hay un beneficio más sutil. TypeScript ha sido fuertemente influenciado por Java y .NET, por lo que si tus desarrolladores tienen una formación en uno de estos lenguajes, es probable que encuentren que TypeScript es más fácil de aprender que el simple JavaScript (observa cómo cambiamos de la herramienta a tu entorno personal). Aunque Angular fue el primer gran framework en adoptar activamente el TypeScript, ahora está obteniendo impulso en muchos otros proyectos también, como Deno (un tiempo de ejecución nativo de TypeScript), Puppeteer, y TypeORM.

También es posible (y prudente) usar TypeScript junto con React.

RxJS

RxJS es una biblioteca de programación interactiva que permite un manejo más flexible de las operaciones y eventos asíncronos. Es una combinación de los patrones observador e interrogador mezclados con programación funcional. RxJS permite tratar cualquier cosa como un flujo continuo de valores y realizar varias operaciones en él como mapear, filtrar, dividir o fusionar.

La biblioteca ha sido adoptada por Angular en su módulo HTTP también para algún uso interno. Cuando realizas una petición HTTP, devuelve un observable en lugar de la promesa habitual. Este enfoque abre la puerta a interesantes posibilidades, como la capacidad de cancelar una petición, reintentarla varias veces, o trabajar con flujos de datos continuos como WebSockets. Pero esto es sólo la superficie. Para dominar el RxJS, necesitarás conocer los diferentes tipos de Observables, Sujetos, así como un centenar de métodos y operadores.

Gestión del Estado

De manera similar a React, Angular Elements tienen un concepto de estado de componente. Los componentes pueden almacenar datos en sus propiedades de clase y vincular los valores a sus plantillas. Si se quiere compartir el estado a través de la aplicación, se puede pasar a un servicio de estado que más tarde se puede inyectar en los componentes. Dado que la programación reactiva y el RxJS es un ciudadano de primera clase en Angular, es común hacer uso de observables para recalcular partes del estado basado en alguna entrada. Esto, sin embargo, puede ser complicado en aplicaciones más grandes ya que el cambio de algunas variables puede desencadenar una cascada multidireccional de actualizaciones que es difícil de seguir. Hay bibliotecas para Angular que permiten simplificar el manejo de los estados a escala. Las veremos con más detalle más adelante.

Angular Elements

Angular Elements proporcionan una forma de empaquetar los componentes angulares como elementos personalizados. También conocidos como componentes web, los elementos personalizados son una forma estandarizada de crear elementos HTML personalizados que son controlados por su código JavaScript. Una vez que definas tal elemento y lo agregues al registro del navegador, se mostrará automáticamente en todos los lugares a los que se haga referencia en el HTML. Angular Elements proporcionan una API que crea la envoltura necesaria para implementar la API de componentes personalizados y hacerla funcionar con el mecanismo de detección de cambios de Angular. Este mecanismo puede utilizarse para incrustar otros componentes o aplicaciones enteras de Angular en su aplicación host, potencialmente escrita en un marco de trabajo diferente con un ciclo de desarrollo distinto.

Hemos encontrado que TypeScript es una gran herramienta para mejorar la mantenibilidad de nuestros proyectos, especialmente aquellos con una gran base de código o un dominio complejo/lógica de negocios. El código escrito en TypeScript es más descriptivo, y más fácil de seguir y refactorizar. Incluso si no va con Angular, te sugerimos que lo consideres para tu próximo proyecto de JavaScript. RxJS introduce nuevas formas de manejar el flujo de datos en su proyecto, pero requiere que tengas una buena comprensión del tema. De lo contrario, puede traer una complejidad no deseada a tu proyecto. Angular Elements tienen el potencial de reutilizar los componentes angulares, y es interesante ver cómo se desarrolla esto en el futuro.

Ecosistema

Lo bueno de los frameworks de código abierto es el número de herramientas creadas a su alrededor. A veces, estas herramientas son incluso más útiles que el propio framework. Echemos un vistazo a algunas de las herramientas y bibliotecas más populares asociadas a cada framework.

Angular

Angular CLI

Una tendencia popular con los frameworks modernos es tener una herramienta CLI que te ayuda a arrancar tu proyecto sin tener que configurar la estructura por ti mismo. Angular tiene Angular CLI para eso. Te permite generar y ejecutar un proyecto con sólo un par de comandos. Todos los scripts responsables de construir la aplicación, iniciar un servidor de desarrollo y ejecutar pruebas están ocultos en node_modules. También puedes usarlo para generar nuevo código durante el desarrollo e instalar dependencias.

Angular introduce una nueva e interesante forma de manejar las dependencias de tu proyecto. Al usar ng add, puedes instalar una dependencia y se configurará automáticamente para su uso. Por ejemplo, cuando ejecutas ng add @angular/material, Angular CLI descarga Angular Material del registro npm y ejecuta su script de instalación que configura automáticamente tu aplicación para usar Angular Material. Esto se hace usando Angular schematics. Schematics es una herramienta de flujo de trabajo que permite a las bibliotecas hacer cambios en su código base. Esto significa que los autores de la biblioteca pueden proporcionar formas automáticas de resolver los problemas de incompatibilidad con las versiones anteriores que podrías sufrir al instalar una nueva versión.

Ionic framework

Ionic es un framework muy popular para el desarrollo de aplicaciones móviles híbridas. Proporciona un contenedor de Córdova que está bien integrado con Angular y una bonita biblioteca de componentes materials. Usándolo, se puede configurar y construir fácilmente una aplicación móvil. Si prefieres una aplicación híbrida a una nativa, esta es una buena elección.

Angular universal

Angular universal es un proyecto que agrupa diferentes herramientas para permitir la representación del lado del servidor para las aplicaciones Angular. Está integrado con Angular CLI y soporta varios frameworks Node.js, como Express y Hapi, así como con el núcleo .NET.

Augury

Augury es una extensión del navegador para Chrome y Firefox que ayuda a depurar las aplicaciones Angular que se ejecutan en modo de desarrollo. Puedes usarlo para explorar tu árbol de componentes, monitorizar la detección de cambios y optimizar los problemas de rendimiento.

React

Create React App

Create React App es una utilidad CLI para que React pueda crear rápidamente nuevos proyectos. Similar a la Angular CLI, permite generar un nuevo proyecto, ejecutar la aplicación en modo de desarrollo o crear un paquete de producción. Utiliza Jest para pruebas unitarias, soporta el perfilado de la aplicación utilizando variables de entorno, proxies de back-end para el desarrollo local, TypeScript, Sass, PostCSS, y muchas otras características.

React Native

React Native es una plataforma desarrollada por Facebook para crear aplicaciones móviles nativas utilizando React. A diferencia de Ionic, que produce una aplicación híbrida, React Native produce una interfaz de usuario verdaderamente nativa. Proporciona un conjunto de componentes estándar de React que están unidos a sus contrapartes nativas. También permite crear sus componentes y vincularlos a código nativo escrito en Objective-C, Java o Swift.

Next.js

Next.js es un framework para el renderizado del lado del servidor de las aplicaciones de React. Proporciona una forma flexible de renderizar total o parcialmente tu aplicación en el servidor, devolver el resultado al cliente y continuar en el navegador. Trata de hacer más fácil la compleja tarea de crear aplicaciones universales, por lo que la configuración está diseñada para ser lo más simple posible, con una cantidad mínima de nuevas características y requisitos para la estructura de tu proyecto.

React-admin

React-admin es un framework para construir aplicaciones de SPA estilo CRUD sobre las APIs existentes de REST o GraphQL. Viene con características útiles, como una interfaz de usuario construida con Material Design, internacionalización, tematización, validación de datos y más.

Tomando una decisión: React vs Angular

Ya habrán notado que cada framework tiene su propio conjunto de capacidades, tanto con sus lados buenos como malos. Pero este análisis se ha hecho fuera de cualquier contexto particular y, por lo tanto, no proporciona una respuesta sobre qué framework debes elegir. Para decidirlo, tendrás que revisarlo desde la perspectiva de tu proyecto. Esto es algo que tendrás que hacer por tu cuenta.

¿Qué es React y para qué te puede servir?

Qué es React y para qué te puede servir

Si te preguntas Qué es ReactJS, probablemente ya estés familiarizado con algunos lenguajes de programación comunes. Sin embargo, como cualquier framework de codificación o biblioteca, saber sobre ReactJS requiere un conocimiento básico de JavaScript primero. También es importante entender no sólo lo que es un marco de trabajo o una biblioteca de codificación, sino también cómo puede ser utilizado y aplicado hoy en día por los programadores de todo el mundo.

En esta guía sobre ReactJS, cubriremos dónde entra el JavaScript, qué es lo que es especial en ReactJS, y cuáles son las diferentes aplicaciones para las que puedes usarlo si decides aprender más sobre él para añadirlo a tu propia “caja de herramientas” de codificación.

¿Qué es ReactJS y en qué se diferencia de JavaScript?

Lo primero que hay que saber es que ReactJS es una biblioteca (una plantilla o sistema para usar un lenguaje de codificación particular y trabajar con él) mientras que JavaScript es el lenguaje en sí. Las bibliotecas son colecciones de código JavaScript preescrito que puede ser utilizado para tareas comunes de JS, lo que te permite ahorrar mucho tiempo y energía mental evitando tener que codificar minuciosamente las cosas a mano.

El propio JavaScript es uno de los lenguajes de programación más antiguos, así como el más utilizado y aplicable. (Si quieres aprender más sobre JavaScript, aqui te dejo los fundamentos del JavaScript) Lo que es importante entender es cómo un framework de JavaScript (ya sea React o cualquier otro) es útil para ti.

Por ejemplo, el uso de bibliotecas de codificación de JS ofrece la posibilidad de evitar o resolver o implementar fácilmente tareas repetitivas. Lo más probable es que exista una biblioteca JS para cualquier función genérica de JavaScript que tú y otros desarrolladores hayan tenido que afrontar repetidamente codificando a mano.

Esta misma estructura se utiliza también para otros lenguajes de desarrollo. Por ejemplo, muchos desarrolladores de Ruby utilizan el popular marco de trabajo Rails para sus proyectos, que es lo que significa cuando alguien dice que trabaja con Ruby on Rails.

Hablando sobre qué es ReactJS, el framework fue desarrollado y creado por el ingeniero de Facebook Jordan Walke y compartido por primera vez a través del newsfeed de la compañía en 2011. Desde entonces ha sido de código abierto, y, como la mayoría de los lenguajes de programación y bibliotecas, ha visto numerosas iteraciones y adiciones nuevas desde que fue introducido por primera vez.

Entonces, ¿qué es lo que hace a ReactJS particularmente útil o único?

ReactJS está diseñado específicamente para ayudar a los programadores a desarrollar las UI (interfaces de usuario), que es el lado de una aplicación o sitio web particular que el usuario ve e interactúa. Dado que la experiencia del usuario y la facilidad de uso son algunos de los mejores indicadores y conductores de un sitio o aplicación de éxito, una biblioteca dedicada como React fue diseñada para agilizar este proceso y facilitar la creación de UIs eficientes y atractivas.

Antes de ReactJS, los programadores tenían que construir sus UI “a mano” con el lenguaje JavaScript en bruto solamente. Aunque el lenguaje ofrecía las soluciones que los desarrolladores buscaban, el proceso era a menudo complejo, y se prestaba a ser propenso a los errores.

Además de proporcionar código reutilizable de la biblioteca de React para resolver los problemas mencionados, React tiene dos características clave que se suman a su atractivo para los desarrolladores de JavaScript:

JSX (JavaScript eXtension)

Para entender por qué JSX es un beneficio de ReactJS, necesitas entender los documentos HTML, el núcleo de cualquier sitio web. Los navegadores web leen los documentos HTML y los muestran en cualquier dispositivo que estés usando como páginas web. Mientras esto sucede, los navegadores crean Modelos de Objetos de Documentos (DOMs), un “diagrama de flujo” representativo de la disposición de una página web. Los desarrolladores pueden entonces añadir contenido dinámico a sus proyectos modificando los DOM a través de lenguajes como JavaScript.

Teniendo esto en cuenta, JSX (abreviatura de JavaScript eXtension) es una extensión de React que agiliza el proceso de modificación de un DOM mediante el uso de un código simple, de estilo HTML. Aún mejor, JSX es compatible con cualquier navegador web moderno porque React ha sido diseñado para trabajar con todos ellos.

Virtual DOM

Si un desarrollador usa JSX para manipular y actualizar un DOM, ReactJS crea algo llamado Virtual DOM. El Virtual DOM es una imitación del DOM del sitio, y ReactJS hace referencia a esta copia para ver qué elementos del DOM real necesitan cambiar cuando ocurre un evento (como que un usuario haga clic en un botón en el sitio).

Digamos que un usuario introduce un comentario en un formulario de entrada de un blog y presiona el botón ” comentar”. Sin ReactJS, todo el DOM tendría que actualizarse para reflejar este cambio, consumiendo una valiosa potencia de procesamiento y provocando retrasos en el usuario y, por consiguiente, una experiencia de usuario menos óptima. React, por otra parte, escanea el DOM virtual para ver lo que ha cambiado después de una acción del usuario (en este caso, se añade un comentario) y actualiza selectivamente esa sección del DOM solamente.

¿Por qué es esto tan genial? Porque al simplificar procesos como estos, también puedes mejorar significativamente el tiempo de carga de procesamiento de la aplicación que estás creando o editando, lo que hace que la experiencia del usuario sea mejor y que haya menos retraso en el front-end.

¿Por qué debería aprender y saber qué es ReactJS?

En pocas palabras, trabajar con ReactJS puede ayudarte a crear fácilmente impresionantes IU.

Además, a medida que más y más negocios se trasladan al ámbito digital (y por lo tanto, los escaparates digitales y las aplicaciones se vuelven más importantes para los negocios de éxito), la correspondiente demanda de programadores que dominen ReactJS crece rápidamente. Si imaginas un futuro en la programación como una posible carrera, aprender y saber qué es ReactJS y permitirte adquirir las habilidades necesarias para satisfacer esta creciente demanda es una sabia elección.

Cómo aprender JavaScript desde cero rápidamente

Cómo aprender JavaScript desde cero rápidamente

Antes de comenzar como aprender JavaScript desde cero rápidamente, debemos de comenzar primero en conocer exactamente que es JavaScript y para que lo vamos a utilizar.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación orientado a objetos que se utiliza principalmente para crear interfaces interactivas basadas en la web. ¿Suena demasiado técnico? Bueno, entendamos algunos ejemplos:

  • Cuando pasas el ratón por encima de un botón, o cualquier otro elemento, cuando ese elemento se ilumina o mueve indicando que se puede hacer clic en él.
  • Mientras navegas por Facebook, cuando haces clic en el nombre de tu amigo, aparece una ventana de chat.
  • Cuando buscas un tutorial en muchas páginas web, instantáneamente obtienes los resultados de la búsqueda.

En todos los ejemplos anteriores, realizas alguna acción ( deslizarte, hacer clic, escribir) y a cambio, algo sucede. Esta interactividad es exactamente donde el JavaScript entra en escena. JavaScript captura estas acciones/eventos y en base a eso realiza alguna acción/disparo. Es JavaScript el que te proporciona la interactividad en el frontend.

HTML provee el contenido, CSS provee la apariencia de este contenido, JavaScript provee la interactividad sobre este contenido. Sin JavaScript, la experiencia web sería bastante aburrida.

Otro lugar donde JavaScript es ampliamente utilizado es en el desarrollo de backend utilizando modernos frameworks como NodeJS. De hecho, hay una popular plataforma web llamada MEAN stack que agrupa a MongoDB, ExpressJS, AngularJS, y NodeJS.

Cada aplicación web tiene 2 partes – la parte del backend, que es la lógica del lado del servidor y la parte del frontend, que es lo que los clientes verán en el navegador. Los lenguajes de programación más comunes son PHP, Java (no confundir Java con JavaScript), Python, etc. El problema en el uso de estos lenguajes de programación es que la empresa tiene que contratar a desarrolladores de backend que sean expertos en uno de estos lenguajes de programación y desarrolladores de frontend que sean expertos en JavaScript.

NodeJS es un framework basado en JavaScript que recientemente ha ganado popularidad debido a que ahora las empresas pueden contratar desarrolladores de JavaScript que pueden trabajar tanto en el front-end como en el backend. Esto hace que la contratación sea mucho más fácil y también, ya que el mismo desarrollador conoce tanto el frontend como el backend, se vuelve más fácil el manejo del código base.

Nota al margen: JavaScript no tiene nada que ver con Java. Aunque los nombres son similares, ambos lenguajes no están relacionados. "Java" es tan similar a "JavaScript" como "coche" es a "alfombra".

¿Por qué aprender JavaScript desde cero?

JavaScript en el pasado reciente se ha vuelto muy popular entre la comunidad de desarrolladores. Muchas grandes y pequeñas organizaciones están usando JavaScript como su principal lenguaje de programación tanto para el backend como para el frontend. Ha habido un aumento significativo en el número de anuncios de trabajo en JavaScript.

Claramente, JavaScript ha conseguido posicionarse entre los principales lenguajes de programación y, de hecho, está creciendo rápidamente.

Los sueldos de los desarrolladores de JavaScript también han estado subiendo bruscamente, particularmente en las áreas donde se están desarrollando las nuevas empresas. Muchas startups en estos días se están moviendo a MEAN stack y por lo tanto, la demanda sólo va a aumentar más.

Todos estos factores hacen de JavaScript una excelente elección para aquellos que quieren desarrollar una carrera como Ingeniero de Software.

¿Cómo podemos aprender JavaScript desde cero y rápidamente?

Una de las mejores maneras de aprender JavaScript desde cero es hacer un proyecto basado en JavaScript. Aquí están algunas interesantes ideas de proyectos en JavaScript:

  • Una simple calculadora con operaciones como suma, resta, multiplicación, división, etc.
  • Calculadora de facturación de comercio electrónico.
  • Un sistema de división de facturas que ayuda a dividir las facturas entre amigos.
  • Un juego básico de preguntas y respuestas.
  • Un simple buscador potenciado por JavaScript.
  • Forma un validador que se asegura de que no se proporcione ninguna entrada incorrecta en el formulario.
  • Un cuadro de comentarios con JavaScript en un blog.
  • EchoBot – un robot que se hace eco de lo que acabas de escribir.
  • Una simple aplicación de lista de todo lo que te ayuda a manejar tus tareas.
  • Juego de tres en raya que utiliza JavaScript, HTML y CSS.
  • Galería de fotos.
  • Tu propia página de inicio interactiva.
  • Un simple generador de estadísticas de documentos usando JavaScript – puedes mostrar estadísticas como el recuento de palabras, el recuento del alfabeto, la frecuencia de palabras, el recuento de párrafos, etc.
  • Reloj despertador/temporizador basado en JavaScript.
  • Matriz basada en JavaScript – que puede generar números del 1 al 6.

Los pasos para completar un proyecto basado en JavaScript son los siguientes:

  • Coge una idea de proyecto de las mencionadas anteriormente.
  • Diseña una interfaz de usuario fácil de usar en una hoja de papel.
  • Planifica una lógica del proyecto (por ejemplo, ¿cómo funcionará la fórmula de facturación del comercio electrónico? y anotarla en una hoja de papel.
  • Escribir un pseudocódigo para desarrollar un esquema básico. En este pseudocódigo, debes tomar nota de las funciones que vas a escribir y sus parámetros y el valor de salida. Esto esencialmente te acercará un paso más al código final.
  • Finalmente, comienza a codificar en JavaScript. Para cualquier cosa que te esfuerces, sólo debes buscarlo en Google cómo funciona. Por ejemplo, para la calculadora de facturación, puede que tengas que escribir sobre la lista de elementos de la factura que pueden requerir un bucle. Busca en Google un ejemplo simple de cómo funciona un bucle en JavaScript y rápidamente podrás obtener un código de trabajo ya listo.

Puedes repetir este enfoque que arriba te he sugerido para múltiples proyectos y finalmente estarás muy familiarizado con la sintaxis de JavaScript y su uso. Entonces podrás pasar a proyectos avanzados aprender JavaScript desde cero.

Otro enfoque para aprender rápidamente JavaScript es seguir un conocido tutorial basado en JavaScript. En mi blog puedes leer este artículo sobre los fundamentos de JavaScript. En la mayoría de estos tutoriales, trabajarás en un proyecto real de JavaScript y, por lo tanto, te ayudará a comprenderlo mejor.

Este segundo enfoque es más útil para aquellos que son relativamente nuevos en la programación. Seguir un tutorial paso a paso es bastante ventajoso si eres nuevo en la programación y quieres entender no sólo el lenguaje de programación sino también los conceptos básicos de la programación.

La clave para aprender JavaScript desde cero rápidamente es escribir mucho código basado en JavaScript en forma de proyectos cortos. Esto le ayudará no sólo a familiarizarse con la sintaxis del lenguaje de programación, sino también a entender dónde puede ser utilizado eficazmente y dónde no debe ser utilizado.

Los 5 mejores frameworks para JavaScript para 2020

Los 5 mejores frameworks para JavaScript para 2020

 

Mejores frameworks para JavaScript. Básicamente, JavaScript, a menudo abreviado como JS, se utiliza para potenciar el contenido o los medios interactivos de una página web.

JS te ayuda a hacer más con tu contenido para que puedas proporcionar al usuario animaciones, contenido relevante basado en ciertos parámetros y gráficos especiales. Esto es utilizado a lo largo y ancho del planeta por páginas web y por compañías de todo el mundo para una gran variedad de propósitos. Algunos ejemplos populares incluyen:

Servicios distribuidos de Netflix
Creación de React en Facebook
Amazon Marketplaces

¿Qué es un Framework? Mejores frameworks para JavaScript

Un framework es “una abstracción en la que el software que proporciona funcionalidad genérica puede ser cambiado selectivamente por código adicional escrito por el usuario, proporcionando un software específico de la aplicación“. Los frameworks se construyen sobre lenguajes para acelerar los procesos y desarrollar herramientas específicas.

Lista de los mejores frameworks para JavaScript

En este artículo vamos a analizar los cinco principales frameworks JavaScript en 2019.

Framework Vue.js

Framework Vue.js

Vue es un framework progresivo para la construcción de interfaces de usuario. Vue está diseñado desde el principio para ser adoptado de forma progresiva, lo que facilita las integraciones y la conexión con proyectos existentes.

Este framework también es súper rápido, con 20KB min+gzip de ejecución y la optimización mínima necesaria para alimentar tus aplicaciones.

La forma en la que funciona es a través de estilos de plantillas similares a Angular. Es un lenguaje rápido y fácil de usar para aplicaciones, interfaces de usuario y desarrollo de interfaces interactivas, y también tiene la capacidad de impulsar proyectos de una sola página web.

Una de las mayores razones por las que a la gente le gusta Vue sobre algunos de los otros frameworks es porque se ahorra mucho tiempo durante el renderizado. Vue realiza un seguimiento de las dependencias de los componentes, de modo que el sistema ya sabe qué componentes deben volver a renderizarse cuando algo cambia.

Mira ejemplos de sitios web, aplicaciones y proyectos geniales realizados con vue.js.

Framework Angular

Angular mejores frameworks para JavaScript

Angular se construye para el futuro. El mantenimiento de la estructura está a cargo de un equipo de ingenieros que comparten la pasión por hacer que el desarrollo web parezca sencillo. Ellos creen que escribir buenas aplicaciones debe ser divertido y entretenido.

Angular es útil hoy en día porque utiliza Typescript de última generación para aplicaciones más grandes. La escritura tipográfica se define como “JavaScript que se escala”. Debido a la forma en que se diseñó Typescript, millones de desarrolladores pueden utilizar el código JavaScript existente, incorporar bibliotecas JavaScript populares y llamar a código TypeScript desde JavaScript. Esto hace que el proceso sea mucho más fácil para proyectos grandes con muchos colaboradores. Tener Angular construido encima de esto es eficiente y permite a los desarrolladores concentrarse más en la velocidad y el rendimiento.

Angular sigue un patrón clásico de MVP (Model View Presenter) para aplicaciones complejas. Este es un concepto que la gente usa para dividir los grandes proyectos en áreas específicas de “separación de responsabilidades” y zonas en las que centrarse en el desarrollo.

Echa un vistazo a los proyectos realizados con angular para ver ejemplos interesantes de proyectos construidos sobre este framework.

Framework React

Framework React

React es una librería JavaScript para construir interfaces de usuario. React fue creado por Facebook, inicialmente para su uso en las aplicaciones newsfeed e Instagram. El marco fue de código abierto en JSConf US en mayo de 2013.

Similar a Vue, React es eficiente en el renderizado y sólo cambia los componentes necesarios cuando interactúa con el render. React también cambia la forma en que las personas pueden interactuar con los render y trabaja para hacer evolucionar el proceso de desarrollo. Se basa en componentes, lo que significa que cada sección encapsulada puede gestionar su propio render, lo que es importante en interfaces de usuario a gran escala y complejas.

Framework Express

Express mejores frameworks para JavaScript

Express es un framework minimalista que se ejecuta sobre Node.js, un ejecutable JavaScript construido sobre el motor JavaScript V8 de Chrome y utilizado por muchas aplicaciones a gran escala.

Express es un framework de aplicaciones web rápido y minimalista para aplicaciones web y móviles. Piensa en ello como el framework para construir sitios web. Express te ayuda a poner en marcha tus aplicaciones rápidamente, a la vez que te ofrece una serie de métodos para crear APIs fácilmente.

Muchos otros frameworks populares están construidos sobre Express debido a la simplicidad y facilidad de integración. Puedes ver la lista completa aquí.

Framework Redux

Framework Redux

Redux es un sistema de gestión de datos que se utiliza principalmente con React. Para proyectos a gran escala con muchas partes móviles, Redux ayuda a organizar los datos y a mantener todo funcionando de forma predecible incluso en entornos muy diferentes.

Una cosa importante a tener en cuenta sobre Redux es que no debes usarlo a menos que sea absolutamente necesario! Según las FAQ de Redux, “la necesidad de usar Redux no debe darse por sentada“. Múltiples colaboradores iniciales del proyecto proclaman que es algo que sabrás cuando lo necesites, y que sólo lo necesitarás cuando surjan otros problemas.

Dan Abramov dice: “Me gustaría corregir esto: no uses Redux hasta que tenga problemas con React.

Así que tenlo en cuenta antes de saltar a toda máquina a este potente y un tanto avanzado framework. Sin duda es útil, pero sólo a gran escala y cuando se trata de grandes cantidades de datos que cambian con el tiempo.

Conclusiones finales sobre los mejores frameworks para JavaScript

Desde mi experiencia como desarrollador web freelancer, tengo que decir, que si tengo que recomendarte un framework, te recomendaría sin dudarlo Angular. Porque Angular, porque hoy en día en España existe una gran demanda de profesionales especializados en el.

Si quieres aprender más sobre JavaScript, te recomiendo leas mi artículo ¿Qué Es JavaScript? Esto Te Va A Interesar, donde podrás empezar a conocer el maravilloso mundo de JavaScript 🙂

Fundamentos de JavaScript: Sintaxis y estructura

Fundamentos de JavaScript: Sintaxis y estructura

 

Fundamentos de JavaScript: Sintaxis y estructura. Como con cualquier otro lenguaje, los lenguajes de programación se definen por conjuntos de reglas. Las reglas (o sintaxis) son las que seguimos cuando escribimos nuestro código, que forman la estructura lógica de nuestros programas.

Este artículo marca el comienzo de una serie que voy a escribir sobre el aprendizaje de los fundamentos de JavaScript. Asegúrate de seguirme si quieres seguir la pista!

Vamos a sumergirnos en los bloques de construcción de JavaScript. Estaremos buscando valores (literales y variables), camel casing, unicode, semicolores, sangría, espaciado blanco, comentarios, sensibilidad a las mayúsculas y minúsculas, palabras clave, operadores y expresiones! 😅

Al tomarnos el tiempo para aprender los fundamentos, estaremos en camino hacia la construcción de un código más funcional y legible!

Comencemos con los fundamentos de JavaScript: Sintaxis y estructura.

Valores de JavaScript

En JavaScript hay dos tipos de valores: Valores fijos (o literales) y Valores variables (variables).

Literales

Los literales se definen como valores que están escritos en nuestro código, como números, cadenas, booleanos (verdadero o falso), así como objetos y matrices (no se preocupe demasiado por ellos todavía). Algunos ejemplos incluyen:

10          // A number (can be a decimal eg. 10.5)
'Boat'      // A string (can be in double "" or single '' quotes)
true        // A boolean (true or false)
['a', 'b']                           // An array
{color: 'blue', shape: 'Circle'}     // An object

Nota: Estaré mirando los tipos de datos en detalle en mi próximo artículo, ¡manténte en sintonía!

Variables

Las variables se denominan valores que almacenan datos. En JavaScript declaramos nuestras variables con las palabras clave var, let o const, y asignamos valores con el signo igual =.

Por ejemplo, la clave se define como una variable. Al que se le asigna el valor abc123:

let key;
key = abc123;

¿Cuándo usar var? No lo hagas. En realidad, sólo debería utilizarse cuando se trabaja con código heredado. Es la antigua sintaxis pre-ES6.

¿Cuándo usar let? Utilízalo si tu variable necesita ser actualizada dentro del programa (puede ser reasignada).

¿Cuándo usar const? Úsalo si tu variable tiene un valor constante. Debe asignarse en el momento de la declaración y no puede reasignarse.

Camel Case

¿Qué pasa si nuestro nombre de variable consiste en más de una palabra? Por ejemplo, ¿cómo declararíamos una variable que deseamos llamar “first name”?

¿Podríamos usar guiones? Ejemplo first-name, No, están reservados para las sustracciones en JavaScript.

¿Qué hay de los subrayados? Ejemplo first-name, Podríamos, pero tiene una tendencia a hacer que nuestro código parezca desordenado y confuso.

¿La solución? Camel Case!Ejemplo firstName. La primera palabra es minúscula, la primera letra de cualquier palabra subsiguiente es mayúscula. Esta es la convención dentro de la comunidad.

Nota: Sin embargo, es bastante aceptable nombrar tus variables const en mayúsculas con guiones bajos, por ejemplo, const DEFAULT_PLAYBACK_SPEED = 1; esto dejaría claro a los demás que el valor es fijo. De lo contrario, sólo tienes que seguir con camelCase!

Unicode

JavaScript utiliza el juego de caracteres unicode. Unicode cubre casi todos los caracteres, puntuaciones y símbolos que hay! Comprueba la referencia completa. Esto es genial, ya que podemos escribir nuestros nombres en cualquier idioma, e incluso podríamos usar emojis como nombres de variables (¿por qué no? 🤷🏻).

Semicolores

Los programas JavaScript se componen de una serie de instrucciones conocidas como sentencias. Como por ejemplo:

// These are all examples of JavaScript statements:
let a = 1000;
a = b + c;
const time = Date.now();

Las sentencias JavaScript a menudo terminan en punto y coma.

Sin embargo, los puntos y coma no siempre son obligatorios. JavaScript no tiene ningún problema si no los utiliza.

// Still perfectly valid!
let a = 1000
a = b + c
const time = Date.now()

Sin embargo, hay algunas situaciones en las que son obligatorias. Por ejemplo, cuando usamos un bucle para un bucle, así:

for (i = 0; i < .length; i++) { 
  // code to execute
}

Sin embargo, cuando se utiliza una expresión en bloque, no se deben incluir los puntos y comas después de los refuerzos rizados, por ejemplo:

if (name == "Samantha") {
  // code
}                           // <- no ';'
//o,
function people(name) {
  // code
}                           // <- no ';'

Sin embargo, si estamos usando un objeto, como:

const person = {
  firstName: "Samantha",
  lastName: "Doe",
  age: 30,
  eyeColor: "blue"
};                          // el ';' es obligatorio

Entonces se requieren nuestros ;’s

Con el tiempo comenzarás a memorizar dónde pueden y dónde no pueden usarse los puntos y coma. Hasta entonces, es aconsejable usarlas al final de todas las frases (¡con la excepción de las frases en bloque!).

Además, es una convención común utilizarlos de todas formas, se considera una buena práctica, ya que reduce la probabilidad de errores.

Nota: Una vez que realmente empieces a usar JavaScript, empieza a usar un linter como ESLint. Automáticamente encontrará errores de sintaxis en tu código y te hará la vida mucho más fácil!

Hendiduras

En teoría podríamos escribir todo un programa JavaScript en una sola línea. Sin embargo, esto sería casi imposible de leer y mantener. Es por eso que usamos líneas y sangrados. Usemos una sentencia condicional como ejemplo:

if (loginSuccessful === 1) {
  // code to run if true
} else {
  // code to run if false
}

Aquí podemos ver que cualquier código dentro de un bloque está sangrado. En este caso es nuestro código de comentario // código para ejecutar si es verdadero y luego // código para ejecutar si es falso. Puede elegir entre sangrar las líneas con unos pocos espacios (2 o 4 son comunes) o con una pestaña. Es totalmente su elección, lo principal es ser consistente!

Si estamos anidando nuestro código, lo sangraríamos así:

if (loginAttempts < 5){
  if (loginAttempts < 3){
    alert("< 3");
  } else {
    alert("between 3 and 5");
  }
} else {
  if (loginAttempts > 10){
    alert("> 10");
  } else {
    alert("between 5 and 10");
  }
}

Aplicando la sangría tendrás un código mucho más limpio, más fácil de mantener y más fácil de leer!

Espacio en blanco

JavaScript sólo requiere un espacio entre palabras clave, nombres e identificadores, de lo contrario cualquier espacio en blanco es completamente ignorado. Esto significa que en lo que se refiere a la lengua, no hay diferencia entre las siguientes afirmaciones:

const visitedCities="Melbourne, "+"Montreal, "+"Marrakech";
const visitedCities = "Melbourne, " + "Montreal, " + "Marrakech";

Estoy seguro de que encontrarás la segunda línea mucho más legible. Y otro ejemplo:

let x=1*y;       
let x = 1 * y;

Una vez más, la segunda línea es mucho más fácil de leer y depurar! Así que siéntete libre de espaciar tu código de una manera que tenga sentido! Por esta razón, también es un uso aceptable del espacio en blanco:

const cityName         = "Melbourne";
const cityPopulation   = 5000001;
const cityAirport      = "MEL";

Comentando

Un comentario es un código no ejecutable. Son útiles para proporcionar una explicación de algún código dentro de un programa. Y también para ‘comentar’ una sección de código para prevenir la ejecución – a menudo usada cuando se prueba una pieza de código alternativa.

Hay dos tipos de comentarios en JavaScript:

// Comment goes here
/* Comment goes here */

La primera sintaxis es un comentario de una sola línea. El comentario va a la derecha del //

El segundo es un comentario de varias líneas. El comentario va entre los asteriscos /* aquí *//

Un comentario multilínea más largo:

/* This is 
a comment spanning
multiple lines */

Identificadores

En JavaScript, el nombre de una variable, función o propiedad se conoce como identificador. Los identificadores pueden consistir en letras, números, $ y _. No se permiten otros símbolos y no pueden comenzar con un número.

// Valid :)
Name
name
NAME
_name
Name1
$name
// Invalid :(
1name
n@me
name!

Sensibilidad a las mayúsculas y minúsculas

JavaScript distingue entre mayúsculas y minúsculas! Un identificador llamado test es diferente de Test.

El siguiente paso arrojará un error:

function test() {
  alert("This is a test!");
}
function showAlert() {
  Test();                     // error! test(); is correct
}

Para asegurarnos de que nuestro código es legible, lo mejor es intentar variar nuestros nombres, para que no se encuentren identificadores demasiado similares.

Palabras reservadas

Hay un número de palabras dentro de JavaScript que no pueden ser usadas como identificadores. Esas palabras están reservadas por el idioma, ya que tienen funcionalidad incorporada. Como por ejemplo:

break, do, instanceof, typeof, case, else, new, var, catch, finally, return, void, continue, for, switch, while, debugger, function, this, with, default, if, throw, delete, in, try, class, enum, extends, super, const, export, import.

No necesitas memorizar estas palabras! Si obtienes algún error sintáctico extraño que apunte a una variable, puedes comprobar la lista y cambiar el nombre.

Operadores JavaScript

Los operadores aritméticos + - * y/  se utilizan principalmente cuando se realizan cálculos dentro de JavaScript, como por ejemplo:

(2 + 2) * 100

El operador de asignación = se utiliza para asignar valores a nuestras variables:

let a, b, c;
a = 1;
b = 2;
c = 3;

Expresiones JavaScript

Una expresión es cuando combinamos valores, variables y operadores para calcular un nuevo valor (conocido como evaluación). Como por ejemplo:

10 * 10    // Evalúa a 100
let x = 5
x * 10     // Evalúa a 50
const firstName = "Javi";
const lastName = "Niguez";
firstName + " " + lastName;    //Evalúa a: Javi Niguez

Conclusión sobre fundamentos de JavaScript: Sintaxis y estructura

Y ahí vamos! El objetivo de este artículo (Fundamentos de JavaScript: Sintaxis y estructura) es proporcionar una visión general de la sintaxis y estructura básicas de JavaScript. Hemos analizado muchas de las convenciones comunes, sin embargo, recuerda que puede ser algo flexible, especialmente cuando se trabaja en entornos de colaboración con sus propios estándares particulares.

La sintaxis y la estructuración juegan un papel importante tanto en la funcionalidad de nuestros programas como en la legibilidad y mantenibilidad del código.

Espero que este artículo le haya sido útil! Nos vemos en el próximo artículo y recuerda dejar cualquier pregunta en los comentarios de abajo. Estaré encantado de ayudar!

¿Qué es JavaScript? esto te va a interesar

que es javascript

 

JavaScript (“JS” para abreviar) es un lenguaje de programación dinámico que, cuando se aplica a un documento HTML, puede proporcionar interactividad dinámica en páginas web. Fue inventado por Brendan Eich, cofundador del proyecto Mozilla.

JavaScript es increíblemente versátil. Puedes empezar poco a poco, con carruseles, galerías de imágenes, diseños fluctuantes y respuestas a los clics de los botones. Con más experiencia, podrás crear juegos, gráficos animados en 2D y 3D, aplicaciones completas basadas en bases de datos y mucho más.

JS en sí mismo es bastante compacto pero muy flexible. Los desarrolladores han escrito una gran variedad de herramientas sobre el núcleo del lenguaje JavaScript, desbloqueando una gran cantidad de funciones adicionales con el mínimo esfuerzo.

Algunas de las funciones de Javascript

  • Interfaces de Programación de Aplicaciones de Navegadores (APIs) – APIs integradas en los navegadores web, que proporcionan funcionalidades como la creación dinámica de HTML y la configuración de estilos CSS, la recopilación y manipulación de una secuencia de vídeo desde la cámara web del usuario, o la generación de gráficos 3D y muestras de audio.
  • APIs de terceros – Permiten a los desarrolladores incorporar funcionalidad en sus sitios de otros proveedores de contenido, como Twitter o Facebook.
  • Marcos y bibliotecas de terceros – Puede aplicarlos a su HTML para permitirle crear rápidamente sitios y aplicaciones.

Una oportunidad para tu vida laboral

Debido a que este artículo sólo se supone que es una introducción ligera a JavaScript, no voy a confundirte en esta etapa hablando en detalle sobre cuál es la diferencia entre el núcleo del lenguaje JavaScript y las diferentes herramientas listadas anteriormente. Puedes aprender todo eso en detalle más adelante, en esta sección de aprendizaje de JavaScript.

Poco a poco te iré explicando como funciona Javascript, publicaré un artículo desde el nivel más básico a más avanzado, y recuerda, si tienes cualquier duda deja tu comentario.

Por cierto, aqui te dejo una interesante infografía de la mano de mis amigos de intechractive, espero que te guste;)

infografía javascript

Háblame ;)
¿Necesitas ayuda?
Hola! Necesitas ayuda? hablemos por WhatsApp :)