In our application we load a number of SAPUI5 libraries.
index.html has the following code to load the SAPUI5 resources
<script src="resources/sap-ui-cachebuster/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3,sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-appCacheBuster="./">
</script>
In our web.xml we have mentioned https://sapui5.hana.ondemand.com as the com.sap.ui5.resource.REMOTE_LOCATION to load the resources.
What we are observing is that the application takes a very long time to load for the first time. And network calls give an idea that loading of UI5 resources takes maximum time.
Is there a way we can load the UI5 resources faster? or in the background?
An advice or a code sample will really be helpful here. Thanks.
You can load UI5 resources asynchronously. Use data-sap-ui-preload="async"
<script src="resources/sap-ui-cachebuster/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3,sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-preload="async"
data-sap-ui-appCacheBuster="./">
But you must delay the access to the SAPUI5 APIs by using the attachInitEvent method
var oCore = sap.ui.getCore();
oCore.attachInit(function() {
//do the needful
});
You are trying to load too much at a time :sap.ui.commons,sap.ui.table,sap.ui.ux3,sap.m
Try to load only the essential parts and rest of the parts as async method so user can at least see some action before waiting too long:
Sync
<script src="resources/sap-ui-cachebuster/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-appCacheBuster="./">
ASYNC
<script src="resources/sap-ui-cachebuster/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.table,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-preload="async"
data-sap-ui-appCacheBuster="./">
Related
This question already has answers here:
What is boilerplate code?
(15 answers)
Closed last year.
I have read this word 'boilerplate' in many documents (like equatable plugin in flutter) but don't know what does it mean..! very confused , I thought boilerplate is preparation for code before running the application (like we prepare stuff before cooking food) but now I think I'm wrong , Boilerplates are those codes which repeated in many places in the whole code.
Can anyone make this thing clear to me in flutter (in simple language)?
boilerplate means a piece of code that can be used over and over again in a specifc part of an app, or to do the same operation, maybe with slight modifications. For example all Winforms apps (windows desktop app) start like this
namespace WinFormsApp3 {
internal static class Program {
/// <summary>
/// The main entry point for the application.
/// </summary>
[STAThread]
static void Main() {
// To customize application configuration such as set high DPI settings or default font,
// see https://aka.ms/applicationconfiguration.
ApplicationConfiguration.Initialize();
Application.Run(new Form1());
}
}
}
in fact this is so 'boilerplate' that it is generated automatically by the IDE. Just a few names get changed.
Most devs dont even look at it because they just recognize it as 'biolerplate'
I dont know flutter but I bet there are similar pieces of code that all flutter apps have
I just read about how to create a flutter app. The automatically generated lib/main.dart is classic boilerplate
another example. THis is bootstraps 'getting started ' page
https://getbootstrap.com/docs/5.1/getting-started/introduction/
Look at the bit headed 'starter template', again this is classic boilerplate. I know I just copy pasted it for my first few apps
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Trying like this (full HTML file contents):
<script src="https://unpkg.com/react#16.5.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16.5.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/ag-grid-community#19.0.0/dist/ag-grid-community.min.js"></script>
<script src="https://unpkg.com/ag-grid-react#19.0.0/umd/ag-grid-react.min.js"></script>
But ag-grid-react doesn't load:
Uncaught TypeError: Cannot read property 'ColDefUtil' of undefined
ag-grid-community.min.js has created window.agGrid and there is ColDefUtil there, but ag-grid-react fails to find it.
Please advise.
I ended up dynamically loading (heavy) ag-grid from a CDN and compiling (light) ag-grid-react into one of app chunks and wiring them together via webpack externals.
I have completed an app in SAPUI5 & deployed in FLP. It takes more than a minute to load for the first time after which it takes only 2 to 3 seconds.
When I run Performance in Chrome console, it shows scripting takes too much time. How can I reduce my app's initial loading time?
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Orders</title>
<script id="sap-ui-bootstrap"
src="/sap/public/bc/ui5_ui5/1/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m, sap.ui.core"
data-sap-ui-theme="sap_belize"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{"orders": "."}'
></script>
<script>
sap.ui.getCore().attachInit(function () {
sap.ui.require([
"sap/m/Shell",
"sap/ui/core/ComponentContainer"
], function (Shell, ComponentContainer) {
new Shell({
app: new ComponentContainer({
height : "100%",
name : "orders"
})
}).placeAt("content");
});
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Controller Modules
sap.ui.define([
"./BaseController",
"sap/ui/model/json/JSONModel",
"sap/ui/core/routing/History",
"../model/formatter",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator",
"sap/m/MessageToast"
], function(BaseController, JSONModel, /* ... */) { /*... */ }));
XML Namespaces
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:semantic="sap.m.semantic"
xmlns:core="sap.ui.core"
xmlns:table="sap.ui.table"
xmlns:smartTable="sap.ui.comp.smarttable"
xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
controllerName="orders.controller.Worklist"
>
<!-- ... -->
</mvc:View>
Technical Optimizations
I see you're using sap.ui.comp.smarttable.SmartTable without preloading its dependencies.
You can definitely reduce the app's initial load time massively by:
Preloading the dependent libraries, $metadata, and annotations as mentioned in How to load sap.ui.comp.smarttable.SmartTable faster?
Moving library dependencies from data-sap-ui-libs to sap.ui5/dependencies/libs in manifest.json. See Bootstrap's data-sap-ui-libs vs manifest's sap.ui5/dependencies/libs.
Identifying and reducing the number of synchronous XHRs as mentioned in How to avoid "Synchronous XMLHttpRequest on the main thread"?
Finally, use the UI5 Tooling's ui5 build command - with the applicable command options depending on the use case - to bundle and minimize all relevant component files before deploying the app. By default, a bundle named Component-preload.js will be generated which reduces the app's overall size and the number of requests in the runtime.
The above mentioned points apply generally to all UI5 applications, not only to SmartTable.
For other performance related guidelines, see Performance Checklist.
Psychological Optimizations
Besides technical optimizations, perception management should be also taken into account.
It's important to note that perceived performance is the real performance. The hard number of milliseconds isn't what really matters.
In order to indicate that something is happening, we can make use
of busy state, BusyIndicator, BusyDialog, and
ProgressIndicator according to the graphic below:
Source: Psychological Time: Tolerance Management
Although a minute takes too long, it is normal for a UI5 app to load longer the first time you run it because it downloads the UI5 libraries from the UI5 server -- after the libraries are downloaded, they are then cached to your browser hence, it is much faster in the next runs.
Component Preload file helps in increasing your app performance in intial load. You can create this file easily, for example, from SAP Web IDE: right click on the project → Build → Build Project to create / update the preload file.
I have set up the following bootstap, with data-sap-ui-preload set to "auto"
<!-- Bootstrap the UI5 core library -->
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="auto"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='xxxxxxxxxxx'>
</script>
This creates a Component-preload.js file in all of my 3 separate apps.
Unfortunately, when I run it, the files aren't minified, and I can access the controller etc directly.
Has anyone else came across this issue?
if I understand correctly you are expecting that "data-sap-ui-preload" creates additional files and also minifies the code. Is that correct?
If i read the documentation correctly this is not what this parameter is used for.
If you are looking of ways on how to "minify" your could you should look into GruntJS. There is also a UI5 Grunt task runner that is used by SAP itself.
Is there a way of using Material-UI without having to go through installing all of the dependencies using NodeJS. I would love to use this in an ASP.NET Project but dont know where to begin as per installing dependencies and all of that.
Technically using Material UI without any frontend infrastructure is possible, but it's not recommended.
If you really don't want to use npm and other JS build/bundling tools you can use the UMD distribution of Material UI.
The Getting started (#CDN) page should help.
In short, you can add React, Babel, and Material UI using plain old script tags in your HTML:
<head>
<script
src="https://unpkg.com/react#latest/umd/react.development.js"
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/react-dom#latest/umd/react-dom.development.js"></script>
<script
src="https://unpkg.com/#mui/material#latest/umd/material-ui.development.js"
crossorigin="anonymous"
></script>
<script
src="https://unpkg.com/babel-standalone#latest/babel.min.js"
crossorigin="anonymous"
></script>
<!-- Fonts to support Material Design -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- Icons to support Material Design -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
then write your JS in a <script type="text/babel"> tag:
<script type="text/babel">
const {
Button,
ThemeProvider,
createTheme
} = MaterialUI;
const theme = createTheme();
function App() {
return (
<Button>Hello, world</Button>
);
}
ReactDOM.render(
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>,
document.querySelector('#root'),
);
</script>
<div id="root"></div>
See https://github.com/mui/material-ui/tree/master/examples/cdn for a working example.
This solution is great for prototyping, but not suitable for production apps. The primary reason for this is low performance. Browsers must download the whole library (including the parts you don't use in your application) and Babel must compile your React app on the fly.
A much better approach is to have an ASP.NET API application and a separate frontend application using React and Material UI that is built using JS tools.
it's very easy.. Follow the below steps.
Commit all the existing changes to your source control or backup existing code.
delete or comment twitter bootstrap bundles in bundle config.
using NPN .. install material design lite package.
add all the .css and .js references to bundles.
add new bundles you added to the layout page.
Remember to change all the class that uses twitter bootstrap to material design lite.
useful sources:
Learning Material Design
MDL Website