Archivo de la etiqueta: js

PureComponent vs Component

Component vs PureComponent

El elemento principal del desarrollo con react son los componentes, ya sean componentes funcionales o sean basados en clases, todas las aplicación en React hacen uso de estos y conocer las diferencia de uno y del otro nos hara sentir bastante seguridad y confianza a la hora de programar nuestras aplicaciones web y/o mobiles.

Sigue leyendo

Promises All – Typescript

El poder trabajar con procesos asíncrono (Async) es una de las cosas mas usadas hoy día en el desarrollo, no importa si es algo web o un api con node, o incluso una llamada a un backend desde una aplicación móvil con React-Native las promesas son útiles y nos ayudan a encadenar nuestro código para que funcione de forma magnifica sin tener que estorbar en el main thread de nuestra aplicación.

Para todo eso,  Javascript tiene una API bastante fácil de usar y flexible al mismo tiempo «Promises», el cual consta de varios métodos, podríamos pasarnos la vida entera solo con Then y Catch pero podríamos sacarle mas provecho aun si conocemos las funciones de Race o All

Sigue leyendo

Fuente personalizada utilizando React-Native

El propósito de este tutorial sera el utilizar una fuente personalida a nuestro proyecto móvil, eso surge casi siempre por que el cliente o el equipo de diseño tomo la decisión de utilizar una fuente no por defecto del sistema operativo.

El poder utilizar una fuente en los proyecto es bastante fácil, pero para que este tutorial no sea tan corto le agregare varios puntos donde este proceso puede ser caótico y para que no les pase a alguien mas.

Sigue leyendo
Cover - React Provider pattern

React Provider – Patron de diseño

Los patrones de diseño son una super herramientas a la hora de desarrollar alguna funcionalidad en nuestras aplicaciones si son usados con sabiduría al igual que pueden ser un gran problema si lo implementamos simplemente por usarlo y no por necesitarlo, en este tutorial estaremos implementando el patron Provider junto a React.

Recientemente mientras trabajaba con react-redux, me hice la pregunta cómo funcionaba la función connect que me permite acceder al store de la aplicación mediante dicha función, y quise ver como funcionaba, al final me gusto mucho y lo encontré bastante útil así que me decidí a escribir para que demás personas pueda ver la magia detrás de esto.
Sigue leyendo

WebSockets (SocketIO & Express)

SocketIO una vez salió a la luz revoluciono la forma en la que las aplicaciones se realizaban, y nos brindo a los desarrolladores una herramienta bastante poderosa en cuanto al desarrollo de aplicaciones web se refiere. Brindándonos la capacidad de poder comunicarnos con nuestros clientes de forma directa en tiempo real.

Aprovechando la acogida de las apis de HTML5 socket.io nos brinda una interface para poder utilizar WebSockets y ademas a eso nos abstrae de usar metodos alternativos a WebSockets para navegadores que no lo soporten y aun así brindar a todos nuestros usuarios aplicaciones en tiempo real. Esta libreria cae perfecto para aplicaciones como Chats, Juegos, Analitica y demás, se puede ser bien creativo cuando tiene una comunicación bi-direccional con nuestros usuarios.

Sigue leyendo

Angular Logo

Service & Factory Angular

Como todo proyecto organizado no podemos tener toda la logica y/o funcionalidades core en controladores y mucho menos en vistas, AngularJs tiene el concepto de Servicio esto lo implementan de 2 formas, Service y Factory, ambos podrian ser usados del la misma manera pero es bueno tener en cuenta como funcionan para así sacarles el mas provecho.

Antes de hablar de service y demás cosas es bueno saber que AngularJS maneja el concepto/funcionalidad de inyección de dependencia (dependency injection), Angular utiliza esto a la hora de requerir cierto componente desde cualquier parte de la aplicación este es inyectado a nuestro controlador (Digamos). Este concepto lo usamos desde el principio, un ves decimos en nuestro controlador:
Sigue leyendo

Angular Logo

Compartir data entre controladores AngularJS

Algo que sucede bastante mientras se esta usando AngularJS es querer que 2 controladores interactuen con la misma data, esto se puede hacer de varias maneras, o con un servicio o una factoría (La verdad es la misma forma de hacer digamos).

Ejemplo:

Digamos que tenemos un template con su app test con 2 controladores main y main2 y ambos estan pintando la variable service.message.

HTML

<div ng-app='test'>
    
    <div ng-controller='main'>
        
        {{ service.message }}
        
    </div>
    
    <div ng-controller='main2'>
        
        <p>{{ service.message }}</p>
        
        <input type="text" ng-model='service.message'/>
    </div>
    
</div>

JavaScript

    var app = angular.module('test',[])

    app.controller('main',function($scope,ServiceTest,serviceFactory){
        $scope.service = ServiceTest.data;
    })
    
    app.controller('main2',function($scope,ServiceTest,serviceFactory,){
        $scope.service = ServiceTest.data;
    })
    
    app.service('ServiceTest',function(){
        this.data = {
            message : "From service init"
        }
    })

    app.factory('serviceFactory',function(){
    
        return {
            message:"nice"
        } 
    });

Para ambas formas funcionara de la misma manera, una vez inyectemos el service o la factoría tendremos la referencia de la misma variable y si cambiamos el valor de dicha variable sera reflejado en ambos lugares por que es la misma referencia.

Referencia

Codigo completo