4Geeks logo
4Geeks logo

Courses

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Coding Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Buscar en lecciones


IngresarEmpezar
← Regresar a lecciones

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast
Editar en Github

¿Qué se puede hacer con JavaScript?

Desarrollo Frontend
  • 1. React

JavaScript es uno de los lenguajes más versátiles y populares en la industria del desarrollo de software, este lenguaje te permite desarrollar aplicaciones tanto de Front-end como de Back-end e incluso IoT (Internet of things). Si aún no sabes que es JavaScript, te recomendamos esta lectura que te explicará más a profundidad qué es y cómo empezar a aprender a programar JavaScript. En este artículo veremos algunos de los frameworks más populares de JavaScript y también veremos algunos ejemplos sobre qué tipo de aplicaciones puedes crear con este lenguaje de programación.

Desarrollo Frontend

El desarrollo Front-end se refiere a la parte visual e interactiva de una página web o aplicación móvil, JavaScript es el lenguaje más popular y utilizado para el desarrollo Front-end ya que te permite interactuar y manipular el HTML y el CSS (La estructura y estilos) de una página web, añadir efectos visuales como transiciones, animaciones, validaciones, eventos y mucho más. A continuación veremos algunos de los frameworks más populares para desarrollar aplicaciones Front-end con JavaScript.

1. React

React es un framework de JavaScript desarrollado por Facebook que te permite crear interfaces de usuario reactivas y dinámicas utilizando componentes (porciones de código) reutilizables, este es posiblemente el framework más popular de JavaScript para el desarrollo Front-end junto con la librería de Next.js que está desarrollada por encima de React. Además React cuenta con una gran comunidad de desarrolladores y recursos disponibles. A continuación te dejamos un breve ejemplo de código que muestra como hacer un contador con React:

1import React, { useState } from "react"; 2 3const App = () => { 4 const [count, setCount] = useState(0); 5 return ( 6 <> 7 <h1>Desarrollo Front-end</h1> 8 <p>Me has clickeado {count} veces</p> 9 <button onClick={() => setCount(prev => prev + 1)} > 10 Incrementar Contador 11 </button> 12 </> 13 ); 14} 15 16export default App;

2. Angular

Angular es un framework desarrollado por Google que te permite crear interfaces de usuario reactivas y dinámicas de una sola página (SPA, Single Page Application), utilizando el modelo de arquitectura MVC (Modelo Vista Controlador). Angular ofrece una serie de características como el enlace de datos bidireccional, la inyección de dependencias, el enrutamiento, las directiva y muchas más. En el siguiente código hecho con Angular podrás ver un ejemplo de un contador:

1import { Component } from "@angular/core"; 2 3@Component({ 4 selector: "app-root", 5 template: ` 6 <h1>Desarrollo Front-end</h1> 7 <p>Me has clickeado {{ count }} veces</p> 8 <button (click)="incrementCount()"> 9 Incrementar Contador 10 </button> 11 `, 12}) 13export class AppComponent { 14 count = 0; 15 incrementCount() { 16 this.count++; 17 } 18}

3. VueJS

Vue es un framework de JavaScript que te permite crear aplicaciones de usuario de una manera sencilla, utilizando una sintaxis declarativa y reactiva. Vue se caracteriza por su facilidad de uso, su rendimiento y su escalabilidad. A continuación verás el mismo ejemplo del contador pero hecho con VueJS:

1<template> 2 <h1>Desarrollo Front-end</h1> 3 <p>Me has clickeado {{ count }} veces</p> 4 <button @click="incrementCount"> 5 Incrementar Contador 6 </button> 7</template> 8 9<script> 10import { ref } from "vue"; 11 12export default { 13 setup() { 14 const count = ref(0); 15 const incrementCount = () => { 16 count.value++; 17 }; 18 return { count, incrementCount }; 19 }, 20}; 21</script>

Desarrollo Backend

El desarrollo Backend se refiere a la parte lógica y manipulación de datos de una página web o aplicación, es decir los que se ejecuta en el servidor y se comunica con la base de datos. JavaScript también puede ser utilizado para el desarrollo Back-end gracias a Node.js que permite ejecutar JavaScript fuera del navegador utilizando el motor V8 de Google Chrome.

El desarrollo de APIs con Node.js ofrece una serie de ventajas como la programación asíncrona y basada en eventos, el uso de un solo lenguaje para el desarrollo de toda la aplicación web, entre muchas otras. A continuación veremos algunos de los frameworks o librerías más populares para el desarrollo de aplicaciones Back-end utilizando JavaScript.

1. ExpressJS

Express.js es un framework de JavaScript que te permite desarrollar aplicaciones de Back-end de una manera flexible y sencilla. Este framework proporciona una serie de características esenciales para el desarrollo de aplicaciones web, como el manejo de rutas, el middleware entre muchas otras características.

1const express = require('express'); 2const app = express(); 3const port = 3000; 4 5app.get('/', (req, res) => { 6 res.send('Desarrollo Back-end'); 7}); 8 9app.listen(port, () => { 10 console.log(`El servidor está escuchando en http://localhost:${port}`); 11});

2. NestJS

Nest.js es un framework de JavaScript inspirado en Angular que te permite crear una aplicación Back-end de manera robusta y escalable, utilizando el patrón de arquitectura MVC (Modelo Vista Controlador) y TypeScript, una extensión de JavaScript que añade tipado estático. Además también te permite escoger entre crear la aplicación con ExpressJS o con Fastify otro framework que te permite crear aplicaciones de Back-end.

app.module

1import { Module } from '@nestjs/common'; 2import { AppController } from './app.controller'; 3import { AppService } from './app.service'; 4 5@Module({ 6 imports: [], 7 controllers: [AppController], 8 providers: [AppService], 9}) 10export class AppModule {}

app.controler

1import { Controller, Get } from '@nestjs/common'; 2 3@Controller() 4export class AppController { 5 6 @Get() 7 getHello(): string { 8 return "Desarrollo Back-end"; 9 } 10}

IoT (Internet de las Cosas o Internet of Things)

El IoT (Internet de las cosas o Internet of Things) se refiere a un conjunto de dispositivos conectados a internet que pueden comunicarse entre sí y con otros servicios como micrófonos, cámaras, sensores, electrodomesticos, etc... El internet de las cosas tiene múltiples aplicaciones en campos como la salud, la agricultura, entre muchos otros.

A continuación veremos algunas de las aplicaciones que puedes utilizar para desarrollar IoT junto con JavaScript.

1. Johnny-Five

Johnny-Five es una plataforma de JavaScript para la robótica y el IoT, creada por Rick Waldron en el 2012. Esta plataforma permite controlar y programar dispositivos hardware como Arduino, Raspberry Pi, BeagleBone, etc. Johnny-Five se basa en el protocolo Firmata, que permite la comunicación entre el software y el hardware y ofrece una API sencilla y consistente para interactuar con diferentes componentes como LEDs, motores, sensores, etc.

2. CylonJS

Cylon.js es una plataforma de JavaScript que permite controlar y programar dispositivos hardware utilizando una sintaxis declarativa y fluida. Cylon.js soporta más de 40 plataformas y dispositivos, como Arduino, Raspberry Pi, BeagleBone, Sphero, Leap Motion, etc, y ofrece una serie de características como el manejo de eventos, el paralelismo, el clustering y mucho más.

3. Node-RED

Node-RED es una plataforma de JavaScript basada en Node.js, que permite crear flujos de datos y lógica para el IoT, utilizando una interfaz gráfica basada en nodos. Node-RED permite conectar fácilmente diferentes dispositivos y servicios, como MQTT, WebSocket, HTTP, TCP, UDP, etc, y ofrece una serie de nodos predefinidos y personalizables para realizar diferentes funciones.

Conclusión

En este artículo vimos como la versatilidad de JavaScript te permite crear diferentes tipos de aplicaciones, desde páginas web, aplicaciones móviles, IoT y mucho más. JavaScript es uno de los lenguajes de programación más populares actualmente y cuenta con una gran comunidad de desarrolladores y recursos disponibles.

Si quieres aprender más conceptos sobre JavaScript y llevar tus habilidades al siguiente nivel te invito a que te registres de forma totalmente gratuita en el curso empieza a programar con JavaScript de 4Geeks, donde aprenderás los conceptos basicos de este lenguaje y además tendrás acceso a cursos y otros beneficios e incluso podrás acceder a la interacción con IA que estará constantemente revisando tu código y dándote feedback para que puedas seguir mejorando.