README-es.md

atomic-core

Librería Javascript con POO para la creación de Componentes bajo el Sistema de Diseño Atómico para el Proyecto Atomic.

Traducciones

• Inglés

Cómo funciona

Esta librería funciona bajo el concepto de diseño atómico, por lo que su unico propósito es el de darnos una forma de manejar la parte funcional de este concepto, para la creación de componentes.

Si no conoces nada de el Proyecto Atomic, te recomiendo que primero leas "Partes de un Componente Atomic".

Características

• Creación de Clases de los Componentes por medio de Herencia.
• Localización de la vista enviando el Nombre del Componente (name) a través del constructor de la clase.
• Manejo de la comunicación entre componentes a través del Despachador de Acciones.
• Acceso global hacia los componentes.

Empezando

Instalación

Node

npm install atomic-core --save

Creando un Componente

1ro Crear un Componente

En un nuevo archivo, vamos a crear una clase Button que extienda de Atom.

//- button.js

'use strict';

import Atom from 'atomic-core';

/**
 * Componente Button
 *
 * @author Luis Sardon
 *
 * @type atom
 *
 */

class Button extends Atom {
  constructor(name) {
    super(name);
  }
}

extends default Button;

2do Instanciando un Componente

Para este caso la única forma de instanciar un Átomo es dentro de una Molécula o un Organismo, por lo que en un nuevo archivo, vamos a crear la clase Menu que extienda de Molecule para conseguirlo.

//- menu.js

'use strict';

import Molecule from 'atomic-core';
import Button from 'button.js';

/**
 * Menu Component
 *
 * @author Luis Sardon
 *
 * @type molecule
 *
 */

class Menu extends Molecule {
  constructor(name) {
    super(name);

    this.miBoton = new Button('miBoton');
    // Donde 'miBoton' es el valor del atributo data-name del componente
    // desde la vista html.
  }
}

extends default Menu;

... actualmente en desarrollo...