Un vistazo de App-Shell con Angular 7

31 mayo, 2019
Category : Angular,programacion

Veremos como funciona Angular Shell usando Angular 7 y el rendimiento adicional que obtenemos en nuestra aplicación.

Una buena experiencia de usuario es un aspecto esencial en el diseño de aplicaciones web o aplicaciones móviles. Una de las cosas que afecta la experiencia de usuario es el rendimiento de la misma. Para mejorar esto, se creo App-Shell.

Ejemplos

Vamos a crear dos proyectos para poder visualizar la diferencia entre una aplicación simple y una con app-shell. Vamos a usar angular-cli.

Vamos a crear un proyecto, donde mas nos quede comodo, y ejecutamos lo siguiente:

ng new app-sin-shell --routing

Ahora vamos a hacer build de la app con el siguiente comando:

ng build --prod

Nos vamos al directorio “dist/app-sin-shell” y vamos a observar el contenido del index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AppSinShell</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.3ff695c00d717f2d2a11.css"></head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js"></script><script type="text/javascript" src="es2015-polyfills.8324bb31dd8aa5f2460c.js" nomodule></script><script type="text/javascript" src="polyfills.8bbb231b43165d65d357.js"></script><script type="text/javascript" src="main.2d4296d99ce55c20c947.js"></script></body>
</html>

Veremos que esta casi vacío sin contar los estilos y paquetes JavaScript.

¿Que significa esto?, El usuario no vera nada durante unos segundo mientras la aplicación se carga por primera vez. El contenido sera dinámico y no habrá ningún contenido estático. Esto podría afectar la experiencia de usuario.

App-Shell puede pre-renderizar contenido estático, lo que mejora el tiempo de inicio de nuestra aplicación y garantizar un buen rendimiento para el usuario cuando se guarda en cache.

Vamos a crear una aplicación nueva, ahora usando App-Shell de Angular:

ng new app-con-shell -routing

Ejecutamos lo siguiente para agregar App-Shell:

ng generate app-shell --client-project app-con-shell --universal-project app-con-shell-server

ng generate app-shell crea el App-Shell en nuestro proyecto.
–client-proyect indica el proyecto al cual se va a crear App-Shell
–universal-project indica la aplicación universal que se va a encargar del pre-renderizado.

Una ves que se ejecuto el comando anterior, podremos ver lo siguiente en el archivo angular.json

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/app-con-shell-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": false,
              "optimization": {
                "scripts": false,
                "styles": true
              }
            }
          }
        },
        "app-shell": {
          "builder": "@angular-devkit/build-angular:app-shell",
          "options": {
            "browserTarget": "app-con-shell:build",
            "serverTarget": "app-con-shell:server",
            "route": "shell"
          },
          "configurations": {
            "production": {
              "browserTarget": "app-con-shell:build:production",
              "serverTarget": "app-con-shell:server:production"
            }
          }
        }

Vamos a ejecutar la aplicacion con el siguiente comando:

ng run app-con-shell:app-shell

ng build --prod

Si vemos el archivo index.html en dist/app-con-shell y buscamos “app-shell-works!”

<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <title>AppConShell</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<style ng-transition="serverApp">
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL2FwcC5jb21wb25lbnQubGVzcyJ9 */</style><style ng-transition="serverApp">
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzcmMvYXBwL2FwcC1zaGVsbC9hcHAtc2hlbGwuY29tcG9uZW50LmNzcyJ9 */</style></head>
<body>
  <app-root _nghost-sc0="" ng-version="7.2.15"><div _ngcontent-sc0="" style="text-align:center"><h1 _ngcontent-sc0=""> Welcome to app-con-shell! </h1><img _ngcontent-sc0="" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" width="300"></div><h2 _ngcontent-sc0="">Here are some links to help you start: </h2><ul _ngcontent-sc0=""><li _ngcontent-sc0=""><h2 _ngcontent-sc0=""><a _ngcontent-sc0="" href="https://angular.io/tutorial" rel="noopener" target="_blank">Tour of Heroes</a></h2></li><li _ngcontent-sc0=""><h2 _ngcontent-sc0=""><a _ngcontent-sc0="" href="https://angular.io/cli" rel="noopener" target="_blank">CLI Documentation</a></h2></li><li _ngcontent-sc0=""><h2 _ngcontent-sc0=""><a _ngcontent-sc0="" href="https://blog.angular.io/" rel="noopener" target="_blank">Angular blog</a></h2></li></ul><router-outlet _ngcontent-sc0=""></router-outlet><app-app-shell _nghost-sc1=""><p _ngcontent-sc1=""> app-shell works!
</p></app-app-shell></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="es2015-polyfills.js" nomodule=""></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script>

</body></html>

Esto nos indica que app-shell se proceso como parte de la salida.

Podremos verificar el rendimiento de los dos proyectos que creamos usando herramientas de cualquier navegador a mano.

Podremos ver que la aplicación sin app-shell tarda unos 559ms en promedio en cargar la aplicación.