Curso de Angular Universal

Aprende a usar la tecnología con la que ejecutar tu aplicación Angular desde el servidor convirtiéndola en una aplicación Universal
Material disponible
Intermedio
4 Clases 5 h
A éste y otros 200+ cursos
Angular Universal es el nombre de una tecnología que permite a las aplicaciones Angular comportarse de manera más amistosa para usuarios y buscadores. Buscan resolver o mitigar dos inconvenientes importantes de las aplicaciones Javascript modernas, también conocidas como SPA o PWA.  

      -El alto coste de la primera visita a una aplicación, que requiere la carga de gran cantidad de código antes de que la página esté disponible para ver o interactuar con su contenido. 
      -La escasa o nula cantidad de contenido en las URL de la aplicación, lo que hace que las SPA sean muy difíciles de posicionar en buscadores.   

Para ello, de un modo generalizado se aplica una solución, denominada Server Side Rendering. Esta solución permite que el renderizado de la página de entrada de una Single Page Application o Progressive Web App se realice en el servidor.   

Qué aprenderé en el Curso de Angular Universal

En el Curso de Angular Universal vamos a aprender a usar la tecnología disponible en Angular para el server side rendering, que nos permitirá mejorar sensiblemente el SEO y la experiencia de usuario en la aplicación. Aprenderemos a escoger y combinar las posibilidades que nos ofrece Angular Universal para adaptarlas a las necesidades de la aplicación. Durante el curso de Angular Universal además aprenderás:

  • El index.html: vacío o precargado mediante la tecnología Shell
  • Renderizado dinámico en el servidor con node Express
  • Renderizado estático de páginas html

Objetivos del curso

Aprenderemos a escoger y combinar las posibilidades que nos ofrece Angular Universal para adaptarlas a las necesidades de la aplicación. Durante el curso de Angular Universal además aprenderás: ๏ El index.html: vacío o precargado mediante la tecnología Shell ๏ Renderizado dinámico en el servidor con node Express ๏ Renderizado estático de páginas html

Por qué debes aprender Angular Universal

En el Curso de Angular Universal vamos a aprender a usar la tecnología disponible en Angular para el server side rendering, que nos permitirá mejorar sensiblemente el SEO y la experiencia de usuario en la aplicación.

Gracias al Server Side Rendering, en la primera página consultada en una SPA se entrega al navegador una cantidad menor de código, pero sobre todo, un código HTML donde se puede encontrar reflejado el contenido que tendría la página una vez iniciado su procesamiento por Javascript.

El renderizado del lado del servidor permite que el SEO de las aplicaciones Javascript sea muy adecuado, equiparando sus posibilidades a las de las páginas web tradicionales. Esta tecnología está incluida entre las funcionalidades que ofrece el framework Javascript Angular, de modo que los desarrolladores, con un esfuerzo mínimo, la pueden incorporar en los proyectos. Con ello conseguimos aplicaciones más rápidas, potentes y versátiles, a la vez que aumenta la capacidad de descubrimiento y posicionamiento de la aplicación en los buscadores.

Qué tengo que saber

  • Imprescindible experiencia previa con Angular e versión 6 o superior
  • Deseable conocimientos básicos de Node/Express

Clases y contenidos

Angular Universal y Server Side Rendering + práctica con App Shell

En esta clase explicamos qué es Angular Universal y cómo es el camino que se ha recorrido en las tecnologías hasta llegar a él. Veremos qué necesidades tienen las aplicaciones modernas frontend (SPA o WPA) para un mejor posicionamiento e indexación en buscadores, así como una primera carga más rápida. Luego veremos cuáles son las opciones que tenemos actualmente para mejorar estas situaciones y cómo se realizaría en las aplicaciones desarrolladas con el framework Javascript Angular. Esto incluye el Server Side Rendering e incluso la generación de un sitio estático.

Server Side Rendering con Angular

Realizamos todo el proceso para dotar a una aplicación Angular del sistema necesario para implementar Server Side Rendering. Veremos que en muchos de los casos no será necesario cambiar ni una línea de código. Luego realizamos una serie de modificaciones en la aplicación, justamente para que el sistema de Server Side Rendering nos de fallos, de modo que los corregiremos de la manera más sencilla posible.

Universal service y Static Site Generation en Angular

En esta clase vamos a ver cómo organizar mejor el código necesario para el server side rendering, creando un servicio que sea capaz de proveer la lógica necesaria para gestionar las situaciones donde el código ejecutado del lado del servidor pueda dar problemas. Además vamos a ver una demo de lo que sería el rending de una serie de páginas en ficheros estáticos, que sería una alternativa diferente para server side rendering, haciendo lo que se conoce como static site generation en Angular, usando una herramienta llamada Scully

Scully, generador de sitios estático para Angular

En esta sesión trabajamos con Scully, un static website generator para Angular con el que optimizar visitas de primer usuario.

Valoraciones

Jhon Doe Joe

Miguel

muy interesante. voy a aplicarlo a un proyecto personal

Eduard Gallofré Asens

Alvaro Ramirez Castillo

Visualnacert

José Humanes Humanes

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete