Distintas formas de escribir módulos en JavaScript

Clase 23 de 51 • Fundamentos de JavaScript 2017

Clase anteriorSiguiente clase

Resumen

Sistemas de Módulos

¿Qué es un módulo?
¿Por qué queremos escribir un módulo?

Encapsulamiento

Cada módulo debe ser pequeño y enfocado en una funcionalidad.

Capsulas de código que se pueden reutilizar.

Ejemplos de esto son Angular y Node.

Un módulo es un paquete de código.

moises mannarino

student•

Que es un modulo en javascript?

Básicamente un modulo es un paquete de codigo. Un modulo es un pedazo de código encapsulado que se encarga de resolver alguna cosa en particular.

Las razones por las cuales nosotros vamos a querer escribir un modulo son dos, la primera es encapsulamiento, todo lo que pasa en un pedazo de codigo tiene que ser local a ese pedazo de codigo, de esa manera cada parte del codigo se hace responsable de cumplir una tarea. NO es que hacemos un modulo que hace un monton de cosas , sino que cada modulo debe ser pequeño y encargarse de una sola responsabilidad.
La segunda razon por la cual nosotros queremos escribir un modulo son las dependencias.

Como crear un modulo

Existen varias manera de escribir un modulo, como por ejemplo con commonjs, amd, y el nuevo metodo de ecmascript 2015.
La manera de crear modulos usando el metodo de ecmascript 2015 es la manera mas utilizada y mas facil de implementar. Basicamente hacemos import y export en cada modulo. Por ejemplo si tenemos un modulo que se llama cuadrado que sirve para calcular cosas de un cuadrado podemos utiliar este modulo en otro modulo importandolo

Julian Ferronato

student•

gran resumen crackk!

Gabriel Alejandro Nuñez Natera

student•

Habia leido un poco antes sobre este tema de los modulos, pero es primera vez que me queda claro, y en mi idioma.

Julio J Yépez

student•

Como yo lo veo,

El concepto de Ḿodulo viene del principio de modularidad de la programación orientada a objetos:

La modularidad es, en programación modular y más específicamente en programación orientada a objetos, la propiedad que permite subdividir una aplicación en partes más pequeñas (llamadas módulos), cada una de las cuales debe ser tan independiente como sea posible de la aplicación en sí y de las restantes partes.

Fuente: Wikipedia

Al igual que encapsulamiento, herencia y polimorfismo … son conceptos y principios que se han ido portando hacia lenguajes que no son propiamente OOP, desde por ejemplo C, Java, etc.

Adicionalmente, en las estrategias de programación más recientes, la modularidad se ve mas claramente en el hecho de que una vez hecha la codificación, y gracias al apoyo de instrucciones de linea de comando de “integradores de módulos” (o module bundlers) como por ej. webpack … terminamos obteniendo un codigo unificado y optimizado donde todos los modulos y sus dependencias han sido integradas en un único archivo fuente (o varios según el tipo: js, css, html, etc.) e incluso aplicando técnicas de optimización de post-procesamiento como minificación u obfuscación …

Julio J Yépez

student•

… así pues, y por simplificación de conceptos, si tenemos un archivo app.js que tiene el código principal (y punto de inicio) de nuestra aplicación; todos los demás archivos de tipo .js programados correctamente y teniendo en cuenta el encapsulamiento y la máxima independencia posible, serían entonces módulos, llámese framework, librería, plugin, addon, módulo o cómo se quiera llamar.

Julio J Yépez

student•

Re-usabilidad es también un concepto relacionado con la modularidad …

Jaime Diaz

student•

Mi humilde aporte consiste en en minuto ++4:45 ++ exactamente, Sasha menciona un concepto para lograr encapsular código en el scope de una función donde lo llama “módulo”, pese a su deficiencia en cuanto a DEPENDENCIAS, es un patrón de diseño que se llama “MODULO REVELADOR” o también llamado: “Revealing Module Pattern” el cual lo aprendí con Angular JS, en lo personal me parece un patrón de diseño muy organizado, y si se establecen buenos lineamientos de desarrollo es perfectamente esacalable, saludos a toda la comunidad y a los compañeros del curso.

Alexis Antonio Moraga Gallardo

student•

Hola les comparto mi repositorio en GitHub con el avance del curso

Repositorio

En el están los ejercicios realizados en clases comentados, ademas de mis notas personales

/*Para que escribir modulos
->escribimos modulos para tener nuestro codigo encapsulado y de esta forma tener
  un codigo mas limpio, que no se esta duplicando en otros lugares

->cada modulo deve ser pequeño y tener una responsavilidad clara

->escribimos modulos por las dependencias, de esta forma podemos usar modulos ya
  creados para solucionar un problema, sin tener que escribirlo desde cero
-> un modulo es un pedaso de codigo que se encarga de resolve algo
*/

//====================FUNCTION SCOPE====================
/*Una forma de hacerlo es encapsular el codigo en una funcion
*/
 var miModulo = (function miModulo(){
   var nombre ="Alexis"

   function setNombre(otroNombre){
     nombre = otroNombre
   }

   function getNombre(){
     return nombre
   }

   return {
     setNombre,
     getNombre
   }
 })()

 miModulo.setNombre("eric")
 console.log(miModulo.getNombre())
/* el problema es que esto fue muy usado hace un tiempo pero no funciona bien
para manejar las dependencias*/


//====================CommonJS====================
/*Otra forma de hacerlo es unsando commonjs lo que nos permite exportar una funcion */

//esta funcion estaria en un archivo llamado triangle.js
module.exports = function area( base = 0, height = 0){
  return base = height / 2
}
const triangle = required('./triangle.js')

const base = 5
const height = 7

console.log(`el area de un triangulo de base ${base} y altura ${height} es ${triabngle(base, height)}`)
/*si queremos exportar mas de una cosa desde nuestro archivo triangle.js basta con cambiar module.export por
export.function() y pasarle las funcionex que deseamos importar*/

/*Si bien esto tiene un mejor manejo de dependencias, ya que dentro de un modulo podemos
espesificar que dependencias necesita este para funcionar

el problemacon esta metodo es que es sincrono, y necesitariamso una libreria encargada de ensamblar todos
los required en el banding
 */


 //====================AMD====================

/*AMD es una forma de escribir los modulos de forma asincrona
es un poco diferente y la sintaxis no estan limpia como la anterior
*/

//esta modulo estaria en un archivo llamado triangle.js
define('triangle', function(){
  return function triangle(base = 0, height = 0){
    return base = height / 2
  }
})

//archivo desde el cual llamamos al modulo
require('./triangle.js', function (triangle) {
  const base = 5
  const height = 7
  console.log(`el area de un triangulo de base ${base} y altura ${height} es ${triabngle(base, height)}`)

})


//====================Modulos ES 2015====================
/*esta es la forma mas usada ya que es bastante sencillo
y consiste en importar y exportar las referencias*/
//este codigo estaria en un archivo llamado squere.js
import triangle from 'triangle'

export function area(x){
  return x * x
}

export function perimeter(x){
  return 4 * x
}

export function diagona(x){
  return triangle.hypotenuse(x,x)
}

//desde este archivo llamaremos al modulos
import squere from 'square'

const slide = 7

console.log(`la diagonal de un cuadrado de ${slide}x${slide} mide ${square.diagonal(slide)}`)

//Adicionalmente nos permite importar modulos de forma asincrona

system
  .import('triangle')
  .then(triangle =>{
    //code here..
  })
  .catch(error =>{
    //error here ...
  })



  //====================SystemJS====================
 /*SystemJS nos permite requerir modulos tanto de CommonJS como de AMD o de ES 2015*/

<script type="text/javascript" src="system.config.js"></script>

System.config({
  paths: paths,
  map:map,
  packages:packages,
  transpiler:'ts',
  typescriptOptions:{
    tsconfig:true
  },
  meta:{
    typescript:{
      exports:'ts'
    }
  }
})

System
  .import('map')
  .then(() => {/*...*/})
  .catch((err) => {/*...*/})

  /*El problema con esta es que la sinstanxis es poco amigable, y para póder usar la
  variable system es necesario un archivo de configuracion*/


  /*Estas son las formas de escribir modulos en javascript*/

Wiliam Quispe

student•

¿Qué es un modulo?
Es un paquete de código
¿Porqué es importante usar módulos?

Permiten el encapsulamiento y de esa manera lograr que un pedazo de código pueda hacer una tarea específica y de una forma óptima-
Se puede tener una mejor administración de las dependencias.

Emmanuel Rangel Jiménez

student•

Significado de Bundle(Mencionado por el profesor en el minuto 07:47): Sirve para agrupar todos los ficheros de Javascript en uno solo, para que el navegador no haga tantas peticiones HTTP.

Emerson Cedeño

student•

se podría decir que la minificación es una técnica para hacer bundles?

Juan Diego Silva Garcia

student•

No exactamente aunque hace parte y va mucho más allá de solo minificar código. Un package Bundler Agrupa todo tu código para que pueda ejecutado por el navegador, porque se hace esto? porque los navegadores no leen módulos, los navegadores solo entienden HTML, CSS y JavaScript y lo que hace un package bundler como Webpack o Gulp es precisamente eso, agrupar todo tu código en un solo archivo para que se pueda ser interpretado en un navegador.

Eduardo Rasgado Ruiz

student•

La modularidad dió paso a NodeJS, como se ve en el curso de NodeJS Avanzado. Cada módulo es tan pequeño que permite su reutilización en distintos proyectos. El módulo contendría lo esencial para solamente la función que se planea desarrollar, agregar más cosas, extras o features que se desvían de la función principal del módulo lo hace dejar de llamarse módulo. Al menos en NodeJS.
NodeJS powered by V8 Engine and JS.
Un tip: primero este curso y luego el de NodeJS Avanzado.

Juan Diego Silva Garcia

student•

Tienes razón con tu tip. Yo hice el de nodeJs avanzado, porque creía que era un programador JavaScript nivel “medio” y ese curso me explotó el cerebro, porque no tenía claro los fundamentos, suponía que los entendía muy bien y no era así
Otro tip: Aprende los fundamentos de un lenguaje antes de hacer cosas avanzadas y no supongas que lo sabes todo, especialmente con JavaScript.

Julio Velasquez Guatemala

student•

Buena explicación!

Victor Alfonso Caballero Cabrera

student•

Nunca había tocado este tema, sabia conceptos, pero bien explicado.!

Enrique Villafane

student•

Si vienes de otros lenguajes de programacion, un modulo basicamente es un trozo de codigo que esta en otro archivo que puedes utilizar como dependencia.

from archivo import loquesea en python por ejemplo.

Andres Mora Vanegas

student•

había estado usando angular 4 pero tratando de entenderlo de a poco pero gracias a esta explicación ya entiendo más su estructura, muy buena la explicación.

Victor Eduardo Aguilera Gomez

student•

En una semana estarán publicando el curso de angular 4 aquí en platzi, vamos a ver que tal.

Miguel Márquez Serrano

student•

Buena clase Sacha

KEVIN BRAYAN LUNA FIGUEROA

student•

Excelente explicación!! no sabia muchos conceptos que hablo Sacha

Jaime Diaz

student•

Sasha es un gran profesor! sabe bastante y lo más importante es que sabe transmitir el concepto mediante ejemplos con mucha agilidad.

Carlos Sampol

Team Platzi•

Así es!

David Santiago González Ramos

student•

Muy interesante y bien explicada la clase. No pensé que existirán tantas formas para crear e importar módulos

Jaime Diaz

student•

Javascript como lenguaje es muy flexible a ello, y permite usar ciertos patrones de diseño, saludos.

Oney Ortiz Roman

student•

¿Porque escribir módulos?

Jaime Arcos

student•

“Escribimos módulos por dos razones:
Encapsulamiento: para que cada módulo resuelva una tarea especifica.
Dependencias: para que podamos requerir módulos desde otros módulos y así nuestro código va a ser mucho más limpio y a parte no vamos a tener código duplicado entre varios módulos” @slifszyc

Juan Diego Silva Garcia

student•

Y para facilitar nuestra vida, un código escrito en un solo módulo se vuelve inmanejable y hay que recordar que escribimos código para humanos también.

Iván Toro

student•

Otra característica a favor de la modularidad es que aplicaciones muy grandes son mas fáciles de mantener.

Fco Castro

student•

No he entendido nadaaaaaa! jajajaja.
La verdad. Algunas cosas creo que sí, como son la de los import, etc.
Esta teoría confío en que a lo largo del curso se desarrolle y lo entienda sobre la marcha. Que sobre la marcha es como se aprenden las cosas.
Creo que voy bien aunque algunos conceptos no termine de asimilarlos.
¿Alguien opina como yo? ¿Soy de los pocos que va a contrarreloj en este curso?

Diego Forero

Team Platzi•

Los conceptos se van afianzando a medida que avanzas y prácticas, muchas de las cosas como los imports se vuelven mecánicos, una vez aprendes a hacer los imports y entiendes las formas es algo que es muy repetitivo. Incluso los IDE’s como WebStorm ya hace los imports por ti.

Aaron Boske

student•

Te comprendo amigo, a mi me pasa lo mismo

Iván Darío Sánchez Jiménez

student•

Para quienes no manejabamos el concepto de Dependencias puede consultar el siguiente enlace para más información

Carlos Sampol

Team Platzi•

Muchas gracias por tu aporte!

Juan Sebastián Angarita

student•

cual es la diferencia entre modulo, librerias, y frameworks?

Diego Forero

Team Platzi•

Framework son un conjunto de librerías que están unidas para realizar algo, un ejemplo de un framework un ejemplo de ello es Angular, donde tienes modelos, controladores y templates para poder hacer una aplicación frontent.

Una librería es algo que hace una cosa en particular, por ejemplo tenemos React que es una librería para construir interfaces web, lo único que hace es eso, no se preocupa de nada más.

Un módulo es la forma de modularizar tu aplicación, si un modulo te queda bien hecho, se puede reusar en varias partes de tu aplicación sin problema, un ejemplo puede ser una caja de búsqueda que tenga un autocomplete, o en el caso del sistema de este sistema de comentarios un módulo puede ser el editor donde escribes, otro el de dar votos a los comentarios, etc, son módulos reusables en tu aplicación o incluso los vuelves un paquete de npm y puedes usarlos en varios proyectos.

Distintas formas de escribir módulos en JavaScript

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial