3.0 / 5

Un vistazo de App-Shell con Angular 7

3.212K
3

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

o

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.

Y la aplicación con App-Shell tarda en promedio 529ms

Conclusión

Con App-Shell podremos encontrar beneficios en nuestras aplicaciones, y mejorar la experiencia de usuario.

Espero les guste el articulo, desde ya muchas gracias. Saludos

Fuente aqui

THIS IS AN OPTIONAL

Related Post

Actualmente en la documentación oficial de Angular hay 12 páginas largas para explicar cómo func

Hola buenas a todos, hoy les comparto un pequeño tutorial para poder comunicar dos componentes herm

Micro Servicios con JHipster

Hola como están? continuando con los artículos sobre JHipster, vamos a ver como crear micro servic

LEAVE YOUR COMMENTS