Getting Started With App Shell Using Angular 7

We look at how to add an app shell an Angular web application and the added performance this brings to the app.

Swathi Prasad

May. 14, 19 · Tutorial

Likes (2)

Comment

Save

13.0K Views

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

Angular App Shell can improve performance by loading the minimum necessary portion of an application to users while waiting for the entire application to bootstrap. App Shell is built inangular-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 a 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 for 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 for the User

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

Improving Page Startup Time

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

Let's 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

Use the below commands to get started:

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 commands are run, we will see the following two entries in the 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

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 the 'app-without-appshell' project using the ng serve command. Open the application in a browser and start profiling. This shows that the application was loaded at around 755 ms.

App With App Shell

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

Note that these numbers may vary slightly as we perform 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.

mobile app shell AngularJS

Published at DZone with permission of Swathi Prasad, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

Trending