3.0 / 5
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.
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
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