DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
The Latest "Software Integration: The Intersection of APIs, Microservices, and Cloud-Based Systems" Trend Report
Get the report
  1. DZone
  2. Coding
  3. Frameworks
  4. Getting Started With App Shell Using Angular 7

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 user avatar by
Swathi Prasad
·
May. 14, 19 · Tutorial
Like (2)
Save
Tweet
Share
12.21K Views

Join the DZone community and get the full member experience.

Join For Free

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

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 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 without App shell
App without App shell

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.

App with App Shell
App with App Shell

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.

Popular on DZone

  • Reliability Is Slowing You Down
  • Cloud Performance Engineering
  • The Path From APIs to Containers
  • Spring Boot vs Eclipse MicroProfile: Resident Set Size (RSS) and Time to First Request (TFR) Comparative

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: