angular

/Tag: angular

Angular vs. React: sus componentes

Hoy en día, en el desarrollo de aplicaciones de front nos basamos en librerías o frameworks que nos permiten realizar SPAs (Single Page Application). Hoy vamos a ver una rápida comparación entre las dos más usadas, Angular y React, centrándonos en sus componentes. Lo primero que tenemos que tener en cuenta es qué tipos de componentes tenemos disponibles. React nos ofrece varios tipos de componentes: - Pure Component o class component, es el que extiende del módulo Component de React, tienen ciclo de vida, state y props. - Stateless Component o SFC (Stateless Functional Component) es un componente que no tiene ciclo de vida ni estado, únicamente tiene props que recibe de su padre. - Hight Order Component es un componente que actúa como wrapper de otro, es decir, debe aceptar y devolver un componente como parámetro. En Angular, todos los componentes deben llevar el decorador de Component. Se podría hacer una distinción entre varios tipos de componentes, pero solo al nivel de cómo queremos estructurar la aplicación: - Container Components o componentes listos. Son aquellos que van a [...]

2019-04-16T20:41:11+00:0016 abril, 2019|Categories: Bravent|Tags: , , |0 Comments

30 Abr 2019Webinar: Cómo sobrevivir en el proceso de Angular a React

Cómo sobrevivir en el proceso de Angular a React  Webinar / 30 · Abr / 17:00  Sobre el webinar En este webinar haremos un repaso a las principales diferencias entre Angular y React, viéndolo desde el punto de vista de un desarrollador con experiencia en Angular que ha hecho el paso a React. Se tratarán tanto las diferencias entre Angular y React, como el proceso de intentar ver cuáles son las equivalencias entre uno y otro en el proceso de aprendizaje; así como trucos que se van aprendiendo con el trabajo del día a día. Echa un vistazo a lo que veremos en el webinar sobre Angular vs. React Introducción Diferencias entre componentes Redux Estructura de proyectos Nuestro ponente El webinar estará dirigido por nuestro compañero Sergio Pedersen, Technical Lead en Bravent. 2019 © Bravent. Todos los derechos reservados | www.bravent.net

2019-04-01T14:33:27+00:001 abril, 2019|Categories: landingpage|Tags: , , , , , |Comentarios desactivados en 30 Abr 2019Webinar: Cómo sobrevivir en el proceso de Angular a React

Internacionalización de una aplicación angular con ngx-translate

Cuando se desarrollan aplicaciones con soporte para varios idiomas, es fácil que la traducción de los contenidos suponga un reto para los desarrolladores, para resolver y facilitar esta tarea usaremos la librería ngx-translate. ngx-translate es una librería que permite la carga dinámica de archivos de traducciones en nuestras aplicaciones angular, esta capacidad de carga dinámica de archivos nos permite cambiar el idioma de la aplicación sin necesidad de recargar la pantalla. Paso 1:  Creación de una aplicación angular. Para empezar, crearemos un nuevo proyecto de angular usando angular cli, para lo cual desde nuestra terminal ejecutaremos: >> ng new “my-app” Este comando nos creara una nueva aplicación angular Paso 2: Instalar ngx-translate. Para descargar el módulo de traducciones y el cargador de traducciones de ngx-translate, desde nuestra terminal ejecutamos los comandos: >> npm install @ngx-translate/core --save>> npm install @ngx-translate/http-loader --save Paso 3:  Crear archivos de idiomas. Después de instalar los módulos de traducción crearemos los archivos con las traducciones, dentro de la carpeta assets crearemos una carpeta i18n, que contendrá los archivos con las traducciones. Crearemos dos archivos JSON dentro [...]

2019-02-13T12:46:40+00:0013 febrero, 2019|Categories: Bravent|Tags: , , , , |0 Comments

Mejora el tiempo de carga de tu app Angular con Lazy-loading

Una de las principales ventajas que ofrece una aplicación SPA es intentar trasmitir al usuario una experiencia lo más parecida a una aplicación de escritorio desde el mundo web, eliminando retardos en la navegación intra-páginas y evitando la recarga de estas a cada envío de datos al servidor. La app corre por completo en el navegador del usuario. Estas aplicaciones, y en el caso tratado de Angular de la misma forma, generan un “paquete” JavaScript con todo el contenido de la web en un archivo, tanto el HTML de las vistas como el código JavaScript con su lógica, y este fichero puede crecer de forma alarmante. Normalmente en la de creación del paquete de despliegue se le aplica un proceso de minificado (minify) y de transcripción del código (uglify), de tal manera que reducimos el tamaño del fichero JavaScript, pero, incluso así, el tamaño del fichero puede ser demasiado grande, haciendo que la carga inicial de la aplicación penalice la experiencia de usuario. Angular aplica otras técnicas para reducir aún más el tamaño de paquete, como por ejemplo Tree-shaking, [...]

2019-01-23T09:24:14+00:0023 enero, 2019|Categories: .Net|Tags: , , , , , , |0 Comments