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
<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>
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.
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 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.
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.
Note that these numbers may vary slightly when we do repeated profiling of the application.
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.
This post was originally published on Techshard.com.