This is the Devtoberfest 2021 Coding Challenge of week 6. The repository contains a web application that displays all current services available on the SAP Business Technology Platform:
Unfortunately, this app doesn't have the best loading performance. The Lighthouse performance score is way below the achievable 100 points. Luckily, this is not the fault of the framework used but happened due to a bad implementation and disregard of common best practices. It’s up to you to fix this web application and to push the performance score above 70.
Possible areas where you can achieve performance boosts are:
- Optimize Media Files
- Avoid or Minimize Blocking JS and CSS / On-demand Loading of Assets
- Reduce the Network Load
- Reduce the Perceived Loading Time
For more details, watch this video:
Node.js LTS version 14 is installed: https://nodejs.org/en/download
You can submit your solution as follows:
-
Fork and clone this repository
-
Turn GitHub Actions on for this repository to allow the included workflows, e.g., to build the web app on every push.
-
Turn GitHub Pages on as well to host the improved web app there.
-
Install all dependencies
npm install
-
Start a local server and run the application (http://localhost:8080/index.html)
npm start
-
Trigger the Lighthouse Performance Scoring (e.g. with Google Chrome)
-
Optimize the app until the performance score is above 70.
-
Commit and push your edits
git commit -am "Fix performance issues" git push -
Create a pull request and make sure your web app is exposed as with GitHub Pages and available under
https://${{ Your GitHub User }}.github.io/devtoberfest-2021-frontend-coding-challenge/. Our CI/CD actions will take it from here and let you know if your app passed the test.
In case you still have questions: Check out this video where I create an example contribution.
Please note that we won't merge any pull requests. It is sufficient if your PR earns the green "passed" label and you entered your SAP Community ID in the pull request after the label was assigned. If everything goes well, your pull request will be closed then.
We don't want to be too prescriptive in this fun challenge, but there are a few things that we need to ask you to do so that things have a chance of running smoothly.
For this challenge, please abide by these rules:
- You have a week to complete the challenge, i.e. to submit a pull request with your changes. This means that any PR submitted after Saturday 13 Nov will not be considered.
- Please ensure you specify your SAP Community user name in your pull request (either in the title or when prompted for it after the GitHub Actions passed).
- You only need to send modifications to the content in the
/docsand/webappfolders and possibly thepackage.json. You should not need to modify any other files in this repository (especially not the.githubfolder). - We will not merge your pull request as the base repository remains the starting template for everyone. Instead, we will just judge your submissions based upon what is contained within the pull request.
-
Clone this repository and navigate into it
git clone https://github.com/SAP-samples/devtoberfest-2021-frontend-coding-challenge cd devtoberfest-2021-frontend-coding-challenge -
Install all dependencies
npm install
-
Start a local server and run the application (http://localhost:8080/index.html)
npm start
Start the Karma Test Runner with the UI5 Plugin and execute the tests
sh npm test
This content is provided "as-is" with no other support.
This project got a terrible Lighthouse performance score. As part of this coding challenge, it's up to you to improve this web app.
Copyright (c) 2021 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0, except as noted otherwise in the LICENSE file.