viernes, 31 de octubre de 2014

Javascript avanzado: objetos, clases y prototipos. Introducción

Javascript es un lenguaje muy completo y muy complejo de aprender, sobre todo la parte referente a objetos, clases, herencia, prototipos, etc. Y esto es porque si bien Javascript no soporta de forma nativa esos conceptos de la orientación a objetos que tan claros están en otros lenguajes como Java, C++ o PHP, todos ellos pueden simularse con las funciones nativas del lenguaje.

Por ello voy a iniciar una serie de artículos sobre Javascript Avanzado.


Creación de un objeto simple

var stack = {
    elements: [],
    push: function(elem) {
        this.elements.push(elem);
    },
    pop: function() {
        var elem = this.elements.pop();
        return elem;
    }
};

En Javascript se puede usar la notación JSON para crear objetos sin tener que crear antes una clase. En el ejemplo creamos un objeto llamado stack que tiene un array de elementos y dos métodos: push() y pop(). La variable resultante es directamente un objeto. La mayoría de los lenguajes orientados a objeto no permiten crear objetos sin haber creado antes una clase, pero Javascript sí.

NOTA: Es innecesario crear un objeto stack en Javascript pues la clase Array ya tiene las funciones push() y pop() de forma nativa, pero me sirve para ilustrar el ejemplo.

stack.push(1);
stack.push('string');
stack.push({ id: 1, name: 'test' });
console.log(stack.pop());

Como se ve podemos usar directamente los métodos del objeto stack, pero en cambio no podemos crear nuevos objetos stack, ya que stack es un objeto y no una clase. Por lo tanto el siguiente código dará error:

var s = new stack;

Además en este tipo de objetos simples todos los métodos y miembros son públicos, lo cual quiere decir que podríamos acceder directamente a la lista de elementos elements, lo cual no suele ser correcto desde el punto de vista de la programación orientación a objeto.


Añadiendo miembros y métodos a un objeto simple

Javascript, a diferencia de otros lenguajes de programación orientados a objetos más tradicionales permite añadir nuevos miembros y métodos a un objeto simple tras su creación. Por ejemplo:

stack.top = function() {
    if(this.elements.length < 1) {
        return null;
    }
    else {
        return this.elements[this.elements.length - 1];
    }
};

Así añadimos el método top() al objeto stack que funcionará exactamente igual que si lo hubiéramos puesto desde el principio.


Creación de una clase

En Javascript no podemos crear una clase como tal, pero sí que podemos simularlo mediante una función. Sí, sí... has leído bien: una función. Esa función además funciona como constructor de la clase. Veamoslo con el mismo ejemplo:

var Stack = function() {
    var elements = [];
    this.push = function(elem) {
        elements.push(elem);
    },
    this.pop = function() {
        var elem = elements.pop();
        return elem;
    }
};

En el constructor de la clase Stack inicializamos un array de elementos y definimos las funciones push() y pop(). Ahora Stack es una clase, no un objeto y por lo tanto no podemos hacer lo siguiente:

Stack.push('elem1');
console.log(Stack.pop());

La forma correcta de hacerlo sería creando primero un objeto de clase Stack.

var st = new Stack;
st.push('elem1');
console.log(st.pop());

Además se da el caso de que ahora el miembro elements es privado lo cual significa que no puede ser accedido desde fuera de la clase.


Añadiendo miembros y métodos a una clase Javascript

Anteriormente vimos como añadir métodos a un objeto Javascript. Aquí también podemos añadir miembros y métodos directamente al objeto st, pero como la variable elements no es un miembro de la clase no podremos acceder a ella. Tendríamos que hacer que la variable elements fuera un miembro de la clase

var Stack = function() {
    this.elements = [];
    this.push = function(elem) {
        this.elements.push(elem);
    },
    this.pop = function() {
        return this.elements.pop();
    }
};

var st1 = new Stack;

st1.top = function() {
    if(this.elements.length < 1) {
        return null;
    }
    else {
        return this.elements[this.elements.length - 1];
    }
};

st1.push('e1');
console.log(st1.top());

Hemos añadido el método top() al objeto st que funcionará como si se hubiera añadido en la definición de la clase (función constructora). Sin embargo ese método es exclusivo del objeto st y no estará disponible para otros objetos Stack. ¿Y podemos añadir un método a una clase? Sí; a través del prototipo:

Stack.prototype.top = function(){
    if(this.elements.length < 1) {
        return null;
    }
    else {
        return this.elements[this.elements.length - 1];
    }
};

Ahora tanto st1 como cualquier otro objeto de clase Stack creado con posterioridad tendrán top() entre sus métodos.


Herencia de clases en Javascript

El concepto de la herencia en Javascript también es extraño si estas acostumbrado a otros lenguajes orientados a objeto. Al no existir clases como tales tampoco hay palabras clave como extends o implements. La herencia se hace asignando el prototipo de una función (clase) a otra. Pero la explicación detallada la vamos a dejar para otro artículo.


Referencias

miércoles, 22 de octubre de 2014

Más sobre Composer

El otro día os hablaba de Composer el gestor de dependencias para proyectos en PHP que permite incorporar a nuestros proyecto en PHP multitud de librerías, gestionando sus dependencias de forma magistral. Pues hoy he encontrado el artículo Composer, gestor de dependencias para PHP que amplía la información que yo mismo puse aquí. Os recomiendo su lectura.

Actualización (23/10/2014): Los chicos de desarrolloweb.com han publicado hoy una segunda parte del artículo de Composer llamada Cómo Instalar Composer, donde se detallan las distintas formas de instalar Composer en los más populares sitemas poerativos: Windows, Linux, Max OSX, ...

jueves, 16 de octubre de 2014

Función javascript para formatear un número de teléfono

El título de este artículo lo dice todo: Función javascript para formatear un número de teléfono. Así pues ahí va:

String.prototype.formatPhone = function(sep) {

    if(typeof sep == 'undefined') {
        sep = ' ';
    }

    var num = this.replace(/[^\d\+]/g, '');
    var len = num.length;

    if(len < 7) {
        return num;
    }
    else if(len < 10) {
        return num.replace(
            /(\d{1,3})(\d{3})(\d{3})/,
            '$1' + sep + '$2' + sep + '$3'
        );
    }
    else {
        return num.replace(
            /(\d+)(\d{3})(\d{3})(\d{3})/,
            '$1' + sep + '$2' + sep + '$3' + sep + '$4'
        );
    }
};

Y para usarlo...

    var phone = '[+34] 93 6665544'.formatPhone(' ');
    document.write(phone);

Resultado: +34 936 665 544.

lunes, 13 de octubre de 2014

Manual de buenas prácticas en Symfony2

Me acabo de enterar a través del fabuloso blog Symfony.es de Javier Eguiluz de la presentación del manual oficial de buenas prácticas para desarrollar aplicaciones en Symfony2. Si estás interesado puedes descargarlo en formato PDF en inglés o en español, aunque el propio Javier advierte que el contenido cambiará en los próximos días pues por ahora sólo se ha publicado una versión preliminar. También puedes consultar on-line el manual en Español.

Se trata de una serie de reglas que configuran un conjunto de buenas prácticas que recomiendan desde SensioLabs y que han sido aprobadas por el propio Fabien Potencier. Puedes estar de acuerdo o no con esta guía por lo que si eres desarrollador experto no es necesario que las sigas. Tampoco es obligatorio modificar un proyecto existente para seguirlas. Sin embargo me parece una gran ayuda especialmente para principiantes y para proyectos nuevos. Personalmente no estoy totalmente de acuerdo con todas pero me parece muy interesante especialmente las recomendaciones sobre como crear el bundle de aplicación, y donde poner los recursos como las vistas o las traducciones.

jueves, 28 de agosto de 2014

Herramientas para desarrollo web: Composer

Composer es una de las herramientas fundamentales para desarrollar aplicaciones y páginas web en lenguaje PHP, ya que permite administrar las dependencias de nuestro proyecto con las distintas librerías externas que necesitemos usar. Composer instala las librerías que el proyecto necesita en una carpeta del propio proyecto. Vamos a ver como funciona con un ejemplo:

Supongamos que nuestro proyecto PHP necesita generar archivos Excel. En lugar de crear todo el código necesario desde cero, miramos en Packagist si alguien ha creado una herramienta open-source que haga lo que necesitamos y vemos que existe una librería llamada PHPExcel. Esa librería a su vez necesitará otras, probáblemente. En lugar de descargar el código fuente de la librería y buscar las dependencias dejamos que sea Composer el que resuelva el problema.

Para ello lo primero será tener instalado Composer en el PC, ya sea de forma global o en el directorio raíz del proyecto. Composer es un programa escrito en php que descargaremos y ejecutaremos.

$ curl -sS https://getcomposer.org/installer | php

Obtendremos un archivo llamado composer.phar que luego para instalarlo globalmente podemos moverlo a un directorio del path como /usr/bin o /usr/local/bin, dándole permisos de ejecución.

$ mv composer.phar /usr/local/bin/composer
$ chmod a+x /usr/local/bin/composer

Una vez tenemos Composer instalado de forma global, creamos el archivo composer.json en la raíz de nuestro proyecto:

{
    "require": {
        "phpoffice/phpexcel": "dev-master"
    }
}

Y entonces usamos composer para que resuelva las dependencias:

$ composer install

La ejecución de composer crea la carpeta vendor y descarga automáticamente la librería phpexcel y las dependencias de ésta si las hay. También crea un archivo llamado autoload.php que será necesario incluir en nuestro proyecto para usar las librerías creadas por composer.

<?php
require __DIR__ .'/vendor/autoload.php';

Requerimientos:

Al ser un programa escrito en PHP Composer es multiplataforma por lo que funciona tanto en Linux como en OSX y en Windows. Necesita una versión de PHP 5.3.2 o superior y puede requerir modificar alguna configuración en php.ini, pero el propio instalador informa de cualquier incompatibilidad. Además es conveniente tener instalado Git, Svn u otras herramientas para el control de código fuente.


Enlaces:

martes, 29 de julio de 2014

Silex, un micro-framework para PHP basado en Symfony2

Symfony2 es uno de los frameworks para PHP más completos, versátiles y potentes que existen actualmente en el mercado. Pero, ¿Qué ocurre si no necesitamos tanta potencia? ¿Que hacemos si queremos desarrollar una pequeña página corporativa donde la potencia de Symfony2 es más un estorbo que una ayuda? En esos casos en lugar de usar Symfony u otro framework potente como Zend se suele optar por personalizar un Wordpress, un Joomla o cualquier otro CMS. El problema entonces es que perdemos el control del desarrollo en temas como gestión de permisos, teniendo que adaptar nuestros requerimientos a lo que pueda hacer el CMS elegido. Sin embargo existe una tercera vía: El uso de un micro-framework que sin ser tan potente como un Symfony o un Zend nos proporcione la suficiente versatilidad para desarrollar una pequeña página web de forma ágil. Y en este caso la propia SensioLabs y Fabien Potencier, creadores de Symfony, nos dan la solución: Silex.

Silex es un micro-framework para lenguaje PHP basado en componentes de Symfony2. Funciona con PHP 5.3 o superior y tiene licencia MIT (código fuente libre). La gran potencia de Silex es que aprovecha gran parte de los componentes del núcleo de Symfony2, que están sobradamente probados, pero en cambio en mucho más fácil de usar que Symfony2. El paquete básico de Silex permite desarrollar páginas web desde cero, proporcionando un sencillo sistema de definición de rutas propio y poco más. Sin embargo es posible añadir a Silex multitud de componentes externos que también usa Symfony: desde Twig hasta Doctrine, pasando por Swiftmailer y algunos de los componentes más potentes de Symfony como sus formularios, su sistema de validación, su sistema de traducciones, etc.

La documentación de Silex es muy completa, en la línea de los otros productos de SensioLabs.


Ejemplo: Hola mundo en Silex

require_once __DIR__ . '/../vendor/autoload.php';

$app = new Silex\Application();

$app->get('/', function() {
    $output = 'Hola mundo.';
    return $output;
});

$app->run();

viernes, 11 de julio de 2014

Nueva imágen corporativa y nueva web

Este mes estamos de celebración en iFraktal pues estrenamos, logotipo, imagen corporativa y página web. El diseño y las tendencias están en constante cambio y eso nos obliga también a nosotros a seguir esa ola de renovación constante.

Nosotros somos los primeros en aconsejar a nuestros clientes que una vez la página web está acabada, lo que hay que hacer es un proceso de renovación constante, algo que atraiga siempre la atención hacia su carta de presentación, es decir, su página web. Es por ello que nosotros nos hemos aplicado nuestro própio consejo y "nos hemos lavado la cara".

Así mismo hemos inaugurado un nuevo blog corporativo integrado dentro de la nueva página web, dejando este blog, que también renovaremos estéticamente, como herramienta de soporte técnico para desarrolladores internos y externos. Seguiremos por supuesto publicando información técnica, artículos y trucos siempre que podamos.


Enlaces de interés