In our project, we need to use custom electron dialog windows, that have really fast opening time.
I tried the dialog module (in electron), but there's no way to edit it, although the time it takes to open the window is really fast.
Then, I made a modal window (using BrowserWindow) and made it act as a dialog when needed. This worked in a way as we were able to customize it however we want. But, the major issue is that it takes about 3-4 seconds to open a new modal window (worse if PC's performance is bad). This time consumption is causing a lot of issues as we have parts in the project where the user needs to notified instantly (errors and confirmations).
As another solution, I started creating a modal window at a very initial stage, then hide it and show it to the user (with updated contents using React states and props) whenever needed. This worked, however, since the application is already quite heavy, adding and keeping another Electron window open since the beginning is consuming a lot of memory.
I have used multiple packages as well, but all have the same time issue.
As of now, I have tried these solutions but all have bad parts that we are trying to majorly avoid.
I am trying to achieve the best possible way to handle these windows, which would be: opens really fast (<1s), is custom and less memory consumption.
Have I exhausted all my options? Or, is there any other way I can go about this problem.
Any help would be appreciated.
Related
One of my Angular (5.1.0) components slows down the whole app considerably: reacting to click event takes 30ms in every other view of the app and around 350ms in this one problematic view. And although the desktop performance is almost indistinguishable between the "problematic" and "normal" views, the performance difference on a mobile device is obvious and the performance penalty is just staggering (in the example above, the click event would take more like a 1500ms on a smartphone).
There are basically two new components which have been added recently. One of them holds the view, the other one renders some data (and is used twice on the page). I would put my bet on the latter one, but I do not know where to start. Chrome DevTools and Safari Developer Tools could for now give me the meaningful event times, but either I do not know how to dig deeper or I need different tools or methodology altogether to pinpoint what exactly causes the lag. Any ideas?
For the "monitoring" aspect of your question, you can try Bucky an opensource tool to monitor webapp performance on browser side.
There is also a post about how to monitor AngularJS with Statsd here.
If you're really care about measuring user experiences, you can take a look at using percentiles, some information can be found here and here.
I currently work on a project using Ractive. The project is a single-page app that has implemented routing as suggested by this project: notetaker-ractive. The tutorial it belongs to is here.
What I haven’t been able to figure out is a good strategy for handling scrolling when pressing the back/forward buttons. I'd like to keep the scroll position in e.g. search results when the user navigates.
I have searched and read about the browsers handling this stuff differently and also that the involved APIs make restoring scroll brittle. I come from React development and react-router tries to handle this there, but I don't know of any solution that is more generic.What would be the recommended library / technique to get this all working (as best as possible by today’s standards) with Ractive?
One thing I have picked up already is that the data should be cached to load synchronously when navigating.
Thanks in advance for any insights!
I am trying to improve performance of the select2 v3.4.8 library in IE8.
Essentially, I have narrowed the problem down to the call from the SingleSelect2's opening method to the parent AbstractSelect2's opening method. The method call I am speaking of is this one:
this.parent.opening.apply(this, arguments);
I have seen this call take upwards of 5 seconds to complete. In some instances, it has taken up to 10 seconds to open the dropdown in IE8.
I've made some performance improvements already. For example, rather than constantly adding the:
<div id="select2-drop-mask" class="select2-drop-mask"></div>
to the DOM programmatically, I just added it directly to the markup and set it's display:none. This saves quite a number of cycles because apparently, adding elements to the DOM in IE8 is expensive to do from Javascript.
But I still want to get more performance improvements than this. We have only increased performance by about 10-20% by making this change.
Does anyone have any suggestions for me?
We've already cached the data to display in the dropdown on the client on page load. So, there are zero server calls being made when the dropdown is opening. The performance bottleneck is entirely inside the select2 library itself.
Unfortunately, we are unable to upgrade our select2 library. Doing so would be at least an 8-Point User Story, so it's prohibitive at this time for us to undertake an upgrade.
Thanks to anyone who's able to help!
-classTemplateT
I have a Watir code that uses Phantomjs as headless browser. I'm trying to fill a form on website using this code (because Phantomjs doesn't show modal on simple click (browser.link(id: 'choise-sity').click)):
require 'watir'
browser = Watir::Browser.new :phantomjs
browser.goto 'http://sales.ubrr.ru/open'
browser.execute_script(" $('#modalCityChoise').show();$('#modalCityChoise').css({'opacity':'1', 'top':'0'})")
browser.link(text: 'Архангельск').click
browser.screenshot.save 'a.png'
Current code does show modal, but I'm unable to click links there after.
My question is: is there an easier way to deal with modals in PhantomJS - they said they added support to modals? Or how to deal with this particular example by javascript injection?
edit: I managed to deal with this modal just by changing a value of hidden input browser.execute_script(" $('#OpenBkiForm_city_code').val('4600000100000') ") - but question still lingers.
I misinterpreted the issue - modals were managed correctly by Phantomjs, but I couldn't prove it because at the time of my screenshoting they were only beginning to fade in, which I haven't thought of.
The real issue was that I couldn't press the button in modal window. Turns out that was because of the window size - even when screenshots captured the button, it wasn't really accessible to Watir somehow. This resolved the whole issue:
$browser.driver.manage.window.maximize
Modals can be implemented differently. Sometimes they are animated which makes it necessary to wait until they are fully visible to then work on them further.
In your case you can use Wait:until:
browser.goto 'http://sales.ubrr.ru/open'
Watir::Wait.until { browser.a(:id => "modalCityChoise").visible? }
browser.link(text: 'Архангельск').click
browser.screenshot.save 'a.png'
I have many browser windows, opened from JavaScript. And I want to manage them - place cascade, tile and resize them all at the same time. Are there any libraries that can help me?
In the past I would have just used the DOM standards documentation to figure out what I can do as a starting place. www.w3.org/TR/Window/
If you are looking for a simple library that you can use, which will work well across browsers I would take a look at jquery. http://jqueryui.com/
I really don't know if JavaScript is allowed to access anything besides the window it is currently running in. Just think about the different browser implementations e.g. when a browser always opens a new tab instead of a window (you can't resize and place them), or opens it as a child window inside the application (as Opera does) etc. Just because of that I don't think it is possible in a proper way.
If you really need a more sophisticated JavaScript window manager you might want to take a look at ExtJS. It generally gives you move control over your entire user interface.