33

Getting Started with App Shell using Angular 7

 4 years ago
source link: https://www.tuicool.com/articles/hit/qY3Q3u6
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

A good user experience is one of the essential aspects to consider in web or mobile application design. One of the things that impact user experience is application startup performance. To improve startup experience, we have the App Shell to the rescue.

Angular App Shell can improve performance by loading minimum portion of an application to users while waiting for the entire application to bootstrap. App Shell is built in angular-cli which is a huge benefit. In this article, we will see how to add app shell to an Angular project.

Creating Angular App

In this article, I will be creating two projects to show the difference between regular app and an app built with app shell. Using angular-cli , create a new app

ng new app-without-appshell --routing

Build the app using:

ng build --prod

Navigate to dist/app-wihtout-appshell/index.html, notice that the content is almost empty except the application styles and JavaScript bundles.   

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AppWithoutAppshell</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.9ff2bb0896f6fd150fd8.css"></head>
<body>

  <app-root></app-root>

<script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js"></script><script type="text/javascript" src="es2015-polyfills.c5dd28b362270c767b34.js" nomodule></script><script type="text/javascript" src="polyfills.8bbb231b43165d65d357.js"></script><script type="text/javascript" src="main.10505722a9247d9278d6.js"></script></body>
</html>

What it means to user?

User will not see anything for a few seconds when the application is first loaded. The entire content would be dynamic and there would not be any static content. This could impact the user experience significantly in a real-world application.

Improving page startup time

The App Shell can pre-render the static content which improves the page startup time and ensures good performance to users when cached offline on repeated visits.

Let us create an Angular app with App Shell. The application must be set up with routing for App Shell.

ng new app-with-appshell –routing

Create an App Shell

ng generate app-shell –client-project app-with-appshell –universal-project app-with-appshell-server

  • ng generate app-shell creates an App Shell.
  • –client-project indicates the project to which App Shell shall be created.
  • –universal-project indicates the universal application which takes of the pre-rendering part.

Once the above command is run, we will see the following two entries in angular.json file.   

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/app-with-appshell-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
 }

"app-shell": {
          "builder": "@angular-devkit/build-angular:app-shell",
          "options": {
            "browserTarget": "app-with-appshell:build",
            "serverTarget": "app-with-appshell:server",
            "route": "shell"
    }

Verifying App Shell

In order to verify the app shell, we can run one of the following commands.

ng run app-with-appshell:app-shell

or

ng build --prod

Navigate to dist/app-with-appshell/index.html and search for the text “app-shell works!” which indicates that the app shell was rendered as part of the output.

Profiling the app

We can verify the performance for both the sample projects described in this article. We can quickly check using browser developer tools.

App without App Shell

Run app-without-appshell project using ng serve command. Open the application in browser and start profiling. This shows that the application was loaded at around 755 ms.

ArIVFnu.png!web App without App shell

App with App Shell

Run app-with-appshell project using ng serve command. We can see a slight improvement here. The application was loaded at around 711 ms.

Bj2yMni.png!web App with App Shell

Note that these numbers may vary slightly as we do repeated profiling of the application.

Conclusion

We can see more benefits of the App Shell in real-world applications. Let me know if you have any thoughts on this article in the comment section.

The examples used in this article can be found on my GitHub repository .

Advertisements


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK