• contacto@bambu-mobile.com
  • +52 1 55 2155 4687

Trabaja con nosotros   |

logo_slogan_azul_y_menta
  • Nosotros
  • Proyectos
    • Transformación Digital
    • Modelo de negocio
      Modelo de negocio
      Transformación Digital
  • Servicios
    • Diseño UX UI
    • Desarrollo de Apps
    • Desarrollo Web a la Medida
    • eCommerce Integral
    • Staff Augmentation
    • RFID
    • Blockchain
    • IoT (Internet de las cosas)
      Diseño UX UI
      RFID / Beacons
      Desarrollo de apps
      Blockchain
      Desarrollo web a la medida
      loT (Internet de las cosas)
      eCommerce / mCommerce
  • Productos
  • Contacto
  • Blog
Bambu-Mobile | logo
Bambu Mobile | Logo
  • ENEN
  • Nosotros
  • Proyectos
    • Transformación Digital
    • Modelo de negocio
      Modelo de negocio
      Transformación Digital
  • Servicios
    • Diseño UX UI
    • Desarrollo de Apps
    • Desarrollo Web a la Medida
    • eCommerce Integral
    • Staff Augmentation
    • RFID
    • Blockchain
    • IoT (Internet de las cosas)
      Diseño UX UI
      RFID / Beacons
      Desarrollo de apps
      Blockchain
      Desarrollo web a la medida
      loT (Internet de las cosas)
      eCommerce / mCommerce
  • Productos
  • Contacto
  • Blog
Bambu-Mobile | logo
Uncategorized

¿Qué es Angular Universal?

Bambu Editorial 18 de mayo de 2022 0 Comments

Durante mucho tiempo se pensó que ciertas tecnologías tendrían que emplearse desde el lado del cliente; sin embargo, el avance en este rubro cambió esto, por lo cual han salido al mercado distintas soluciones que permiten realizar cambios desde el servidor. Uno de las mejores soluciones se llama Angular Universal, pero ¿qué es Angular Universal?

¿Qué es?

Antes de hablar de Angular Universal (AU) es necesario hablar de Angular, este es un framework de JavaScript de código abierto y fue escrito en TypeScript. Tiene por objetivo es el desarrollo de aplicaciones de una sola página.

Por su parte, Angular Universal es una tecnología que permite ejecutar la aplicación de Angular desde el servidor, y genera páginas de aplicaciones estáticas en el servidor mediante SSR (server side rendering o en español, renderizado de lado del servidor).

¿Qué es Angular Universal?

Se podría decir que en el centro está la aplicación de Angular, y está recubierto con la renderización, misma que ocurre gracias a Angular Universal y tiene varios beneficios:

✔ Facilita la indexación del SEO

✔ Mejora el rendimiento de la aplicación en dispositivos de baja potencia

✔ Muestra la primera página de forma más rápida

✔ Pre-rendering: precarga los elementos de una página

AU permite al usuario pre-renderizar alguna aplicación de Angular desde el servidor. Por lo cual, en caso de querer ver una página y esta no cargue, la carga se dará a través del servidor, solucionando el problema. Además, esto brinda tiempo para que la página de la aplicación arranque de manera correcta y funcione.

¿Por qué Angular necesita de Angular Universal?

¿Qué es Angular Universal?

Angular presentó una serie de inconvenientes cuando ciertos equipos querían visualizar contenido, lo mismo pasaba cuando se indexaban páginas, por lo cual se optó por implementar una tecnología que resolviera estas problemáticas.

Mientras que la aplicación Angular se ejecuta desde el navegador y muestra las páginas web en el DOM, Angular Universal, ejecuta la página de la aplicación desde el servidor y muestra las páginas de forma estática, por lo cual se ve el diseño de la app y sitios web de forma más rápida antes de volverse interactiva.

Los beneficios que ha proporcionado AU frente a Angular son bastantes; sin embargo, destacan tres rubros.

Función

Angular

Angular Universal

Facilitar los rastreadores web (SEO):

Los rastreadores no podrán lograr la navegación e indexar la aplicación de Angular

Con Angular Universal es posible generar una versión estática de la aplicación. Esta se puede buscar, enlazar y navegar sin utilizar JavaScript.

También ayuda a visualizar un sitio de manera previa porque la URL devuelve la página renderizada.

Mejorar el rendimiento de los dispositivos móviles y de baja potenciaAlgunos dispositivos no permiten JavaScript (o no lo ejecutan), por lo cual la experiencia de usuario es mala.Lanzar versiones de apps sin necesidad de JavaScript y que estén renderizadas en el servidor. Con esta versión sería posible ver la app y usarla.
Mostrar la primera página rápidamenteEn ocasiones, las aplicaciones Angular no se muestran de manera rápida, por lo cual los usuarios optan por abandonar la página web.Se generan páginas para la aplicación que se aparecen a la app completa. Estas son HTML, y puede mostrarse incluso aunque JavaScript no esté activado.

Con esto, se muestra la página al usuario mientras se carga la aplicación Angular.

Como se aprecia, gracias a la solución de Angular Universal se tiene velocidad, rastreo y rendimiento, de esta forma, se mejora la experiencia de usuario y es posible realizar SEO sin interrupciones.

Funcionamiento

Contar con Angular Universal es muy sencillo, la página oficial ya cuenta con el esquema para la instalación de la dependencia deseada. La más utilizada es @nguniversal/express-engine. Además, esto permite que los ficheros se modifiquen.

Para iniciar:

  1. Se verifica que la aplicación de Angular se esté ejecutando y desde la consola se detiene el servidor.
  2. En la consola se añade el comando ng add @nguniversal/express-engine (o el nombre del package elegido). 
  3. Inicia la instalación del package elegido, así como la creación y modificación de ciertos ficheros.Funcionamiento de Angular Universal
  4. Una vez que los ficheros estén listos, se pueden efectuar varias modificaciones con el DOM, así como instalar ciertas dependencias que permitan el trabajo libre del DOM.
  5. Para comprobar, en la consola se agrega el comando ng build– prod, se da enter y así se puede visualizar el build de la producción.
  6. Después se ingresa el comando cd list en la consola, una vez que abra el proyecto, se visualiza si está activo en una carpeta browser, esta carpeta ayudará a ejecutar del lado del cliente.
  7. De nuevo en la consola, se ejecuta el comando npm run prerender y una vez que haya concluido, se podrá revisar que en el proyecto ya existe una nueva carpeta server con otros ficheros. A partir de aquí, Angular sabrá dónde tiene que ejecutarse por su cuenta.

El proceso anterior tiene por packeage a Express-Engine, pero, en caso de querer efectuar el renderizado desde cero, se puede instalar alguno de los packages permitidos por Angular. 

Angular Universal se convirtió en una de las herramientas más utilizadas en cuanto a páginas de aplicaciones, pues permite realizar un trabajo más efectivo con respecto al usuario.

En Bambú Mobile nos hemos dado a la tarea de implementar esta y otras soluciones tecnológicas dentro de nuestros proyectos, con la finalidad de ofrecer servicios que sean eficientes y confiables, tanto para nuestros clientes como los usuarios que usan cualquiera de nuestras implementaciones tecnológicas.

Fuentes

Introducción a Angular Universal

Angular

Server-side rendering (SSR) with Angular Universal

Angular Universal: a Complete Practical Guide

Big Data en la Industria 4.0PrevBig Data en la Industria 4.016 de mayo de 2022
¿Qué es Kubernetes?20 de mayo de 2022¿Qué es Kubernetes?Next

Related Posts

Uncategorized

¿Cuáles son las mejores certificaciones TI en 2022?

Una certificación TI puede convertirse en el mejor aliado para validar los...

Bambu Editorial 13 de abril de 2022
Uncategorized

¿Para qué sirve el RFID?

En los últimos años, el sistema RFID ha tomado revuelo entre las empresas que se...

Bambu Editorial 21 de abril de 2022

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Buscar
Recent Posts
  • El escritorio como servicio (DaaS)
    El escritorio como servicio (DaaS)
  • ¿Qué tecnologías usan los unicornios mexicanos?
    ¿Qué tecnologías usan los unicornios mexicanos?
  • VDI: Infraestructura de Escritorios Virtuales
    VDI: Infraestructura de Escritorios Virtuales
  • SCORM vs. xAPI: Estándar de e-learning
    SCORM vs. xAPI: Estándar de e-learning
Categorías
  • Aplicaciones móviles 29
  • Comercio Electrónico 7
  • Organizaciones exponenciales 7
  • Tecnologias 69
  • Uncategorized 31
  • UX/UI 13
Twitter
Facebook
Linkedin
Instagram

Servicios

Diseño UX UI
Desarrollo de Aplicaciones iOS y Android
Desarrollo Web a la Medida
Ecommerce/Mcommerce
Consultoría
RFID/Beacomes
AR/RV
Blockchain
IoT (Internet de las cosas)
Drones
Data Mining
Mantenimiento Evolutivo

Contacto

Email:

contacto@bambu-mobile.com

 

Teléfonos: 

+521 55 2155 4687

 +521 55 8036 4126

Newsletter

Términos y Condiciones | Aviso de Privacidad

Términos y Copyright © 2021 Bambú Mobile. Todos los derechos reservados