I'm testing my UI5 application's performance on a slow 3G connection. I've noticed that it takes quite some time to load the sap.ui.unified.Calendar for the first time when using the sap.m.DateTimePicker.
This is mentioned in the official documentation. The proposed solution is to preload the sap.ui.unified library. I have tried multiple ways of doing this but regardless of what I do, the Calendar still takes long to load the first time.
I have tried adding sap.ui.unified to data-sap-ui-libs in my index.html.
I have tried using jQuery.sap.require("sap.ui.unified") (which is
apparently deprecated).
I have tried using sap.ui.require(["sap/ui/unified/Calendar"]).
None of these solutions work. Any help would be appreciated.
UPDATE
The DateTimePicker is declared as follows in an XML View:
<DateTimePicker
id="dtClockIn"
valueFormat="MM-dd-YYYY hh:mm a"
displayFormat="MM-dd-YYYY hh:mm a"
placeholder="MM-DD-YYYY hh:mm ampm"/>
There's nothing fancy happening in the controller.
1.50 and below
Currently, library resource bundles (messagebundle*.properties files) are loaded on-demand and synchronously which creates a bottleneck before making use of the corresponding control (e.g. Calendar). I'm afraid we can't do much about it.
You could, however, at least prefetch the bundle file by calling getLibraryResourceBundle manually when the UI is ready. E.g. on afterShow:
onAfterShow: function() {
sap.ui.getCore().getLibraryResourceBundle("sap.ui.unified");
// Avoids fetching it later when the Calendar is about to be shown
},
As of 1.52
With v1.52, such bundles are loaded beforehand asynchronously as long as libraries are configured to be loaded asynchronously. Here is an example: https://output.jsbin.com/qolesuf
Related
I'm thinking about developing an Excel add-in as described here.
Would that be possible with Svelte - and do you know of any guides/help if yes?
I have looked through the video here, and I'm about worried about the usage of webpack.
Well... let's break it down
Is it possible?
Short answer: yes
Long answer: the documentation clearly states that Excel add-in still uses jQuery for logic manipulations. If your question was about Angular or react it would probably be a hard NO since those frameworks use an engine that should be included as part of solution. This kind of dependencies when dealing with plugins development are pretty hard to implement and maintain as a function of time so it's better to use very lightweight, non-core dependencies instead. Since you are asking about svelte - it is "compiled" into a bundle that contains pure code (based on your app logic). So - as long as your app rely on the load event sequence described in the docs - you are good to go.
Do you really need Webpack?
Short answer: no
Long answer: svelte can be deployed using rollup instead - which is more suitable for micro-applications (such as yours). So, if you feel that webpack (somehow) is blocking your work pipeline - just use svelete default configuration with rollup and you are ready to go
Your workflow
Create a very simple svelte app (my suggestion - try to take the example in the docs and implement it using svelte)
Test it locally (just verify it works)
Build it (you should ended up with 3 files - 1 html file in public directory and 2 other files in public/build directory - 1 js file and 1 css file (both called bundle)
Here's the tricky part - the html file does nothing - just loading the css and js files. In your case - you don't really need it
Change the bundle.css file to Home.css file
Change the bundle.js file to Home.js file and put your app inside the add-in main function
'use strict';
(function () {
Office.onReady(function() {
// Office is ready
YOUR SVELTE APP CODE SHOULD BE PLACED HERE
});
})();
Pack your add-in and test it
Technical notes
If Excel blocks the creation of new elements (using dynamic injection) - this approach will NOT work (since your entire app is generated by your js file)
Please refer to this article for more information about packing your app
Try to make your app as lightweight and small-size as possible just to avoid the risk of exceeding the limits allowed for add-ins
As of now, we can launch a flutter web app as a single file that will load at once hence taking a lot of time and bandwidth to load which is not ideal, is there any way to load only a single page at a time, not the whole web app. By this I mean, load a widget at a time.
Any suggestions will be appreciated.
after spending a lot of hours trying to solve this situation, I found a solution to speed up the first load of the app.
I saw that my main.dart.js was being downloaded and then, after that, the main.dart.js was triggering the download of the canvaskit.wasm file, this means that my app was starting on a cascade mode, avoiding downloading both files in parallel.
So my solution, after many many many attempts is based on adding only 2 lines of code to the index.html file (.../project_folder/web/index.html).
Inside the <head>...</head> tag insert this two lines:
<script src="https://unpkg.com/canvaskit-wasm#0.33.0/bin/canvaskit.js"></script>
<link rel="preload" href="https://unpkg.com/canvaskit-wasm#0.33.0/bin/canvaskit.wasm" as="fetch" crossOrigin="anonymous">
I know hardcoding these URLs it's not a good practice, but, you will only need to change them if you update Flutter. I'm using Flutter 2.10.1 that uses CanvasKit 0.30.0, and when you build the web app, the generated main.dart.js has a hardcoded URL inside.
If you are going to add those 2 lines to your index.html file, I recommend you to build the web app, and open the main.dart.js file and search for "canvaskit-wasm", there you will find which is the URL you should use (something like "https://unpkg.com/canvaskit-wasm#0.33.0/bin/").
It's giving me a good improvement for the initial loading time! So, hope it works for you too!
Yes, you can load the Flutter web library, only when it is called using Deferred/Lazily loading. Here I copy/paste from Dart documentation:
Lazily loading a library
Deferred loading (also called lazy loading) allows a web app to load a
library on demand, if and when the library is needed. Here are some
cases when you might use deferred loading:
To reduce a web app’s initial startup time.
To perform A/B testing—trying out alternative implementations of an algorithm, for example.
To load rarely used functionality, such as optional screens and dialogs.
And here an article related to this topic.
What can cause the start render to be delayed even after the load event has fired?
Look at this webpagetest result
This is most probably a bug. For the moment, the iPhone instance on WebPageTest is quite recent and the author is still improving it:
The iOS support is just becoming stable though it's still under VERY active development so don't be surprised if there are a few rough edges (and a lot more limitations than the android testing).
- Patrick Meenan, 09-09-2015
The android tests are much more reliable.
If you check the page you tested without javascript (F1 > Disable Javascript in Chrome DevTools), you can see that most images are lazy-loaded, which mean they are loaded via a JS script checking if the images are in the viewport. As you can see, without JS the load time line is well after all assets loaded.
Also for other assets, like JS, you can add an async or defer attribute to de-synchronize your scripts loads.
Finally, some scripts can be even deliberately loaded after the load event using an attachment on the window load event to write <script> tags in the body when it's triggered as loadJS do for example.
You should read that by the way to better understand how rendering and events timing work.
I have a single-page web app that presents a multi-step photo management "wizard", split up across several discrete steps (photo upload, styling, annotation, publishing) via a tab strip. On switching steps I set the URL hash to #publishing-step (or whichever step was activated).
How do I set up Optimizely tests to run on the various discrete steps of the wizard?
The browser never leaves the page, so it only gets a single window.load event. Its DOM isn't getting scrapped or regenerated, but just switches what page elements are visible at any one time via display: none or block, so the part I am trying to figure out is really mostly about in what way I go about the Optimizely test setup itself - it's fine (and likely necessary) if all edits get applied at once.
This thing unfortunately has to work in IE9, so I can't use history.pushState to get pretty discrete urls for each step.
There's actually several ways you could go about doing this, and which option you choose will largely depend on what's easiest for you AND how you plan to analyze the data.
If you want to use Optimizely's analytics dashboard:
I would recommend creating one experiment which will activate a bunch of other experiments at different times. The activation experiment will be targeted to everyone and run immediately when they get to your wizard. The other experiments will be set up with manual activation and triggered by this experiment.
The activation experiment would have code like:
window.optimizely = window.optimizely || [];
function hashChanged() {
if(location.hash === 'publishing-step') {
window.optimizely.push(['activate', 0000000000]);
}
if(location.hash === 'checkout-step') {
window.optimizely.push(['activate', 1111111111]);
}
}
window.addEventListener('hashchange', hashChanged, false);
Or you could call window.optimizely.push(['activate', xxxxxxxxx]); directly from your site's code instead of creating an activation experiment and listening for hashchange.
If you want to use a 3rd party analytics tool like Google Analytics:
You could do this all in one experiment with code similar to above, but in each "if" section instead of activating an experiment, you could run your variation code that makes changes to the wizard and sends special tracking information to your analytics sweet for later reporting. You'll have to do your own statistical significance calculation for this method (as Optimizely's data won't be "clean"), but this method actually works out better usually if properly configured.
Alternatively you could use the method outlined above but still try to use the Optimizely analytics dashboard by creating custom events on your experiment and sending data to them using calls like window.optimizely.push(["trackEvent", "eventName"]);
This article may also be helpful to you.
You'll probably need to do this yourself, using Optimizely's JS API to trigger actions on their end and tell it what your users did: https://www.optimizely.com/docs/api
I have a Webview that must load an image! When I upload this image I see every time the same image as before, and i must reboot my app to see the new image...
I think is a cache problem..How can I solve that??
One quick and easy method would be to append the current time stamp onto the url whenever you load it.
So instead of loading:
http://www.myhost.com/myimg.jpg
you'd load
http://www.myhost.com/myimg.jpg?12345689
Using a cache breaker like this is a very common method in web development to force reloading of content.
I did do some quick googling and it appears clearing out NSURL's cache won't do the trick. In 10.6 the api reloadFromOrigin: may do the trick, but I'm not aware if this has made it's way onto the iphone yet.
Edit:
I found this page in the docs. It looks like you can use the preferences system to say whether or not to use caching. Not tested, but that'd be something to look at.