reload parts of webclient (ajax-like)

[stefanoni]

Hello,
With solution-model I create a form with about 2000 elements. It look like:
http://www.dsug.eu/forum/index.php?page ... mentID=120

The measured time for reading the Data and the solution-model work is about
5 - 6 seconds (same for web an smart). But the time after, to display on screen, is
quite different (another 4-5 seconds in smart, but up to 30 seconds in webclient).

My question:
Is it possible in webclient to show only the first 3 Month (500 Elements), and after
the user starts to work on it, to reload the rest in the background (like ajax)

Thank you for an help

(P.S. I did the same with php / mysql, the responde-time is very short: see www.gigdoodle.ch)

[stefanoni]

Can somebody give my an idea, why i get no answer ?

stupid or not understandable question ?

[david]

My question:
Is it possible in webclient to show only the first 3 Month (500 Elements), and after
the user starts to work on it, to reload the rest in the background (like ajax)

Not possible.

If you are getting 30 seconds to render, I would guess that there are a lot of places where a different approach or optimization would help. We use Solution Model with web client a lot and haven't run into this.

[Harjo]

we have the same when we draw a calendar on an iphone!
the first time is very fast because every element of the calendar, is rendered in the background and shown at once.
after that, if we navigate, the rendering is about 10 times slower, because every element is drawn by using ajax calls, after each other.

what we do is set a specially property on the back & forward button:

Code: Select all

   elements.btn_back.putClientProperty('ajax.enabled', false)
   elements.btn_forward.putClientProperty('ajax.enabled', false)

As soon, as we hit these buttons, ajax is disabled, and rendering is very fast!! (just one refresh)

here is some more info & discussion about it: viewtopic.php?f=16&t=11025&p=54994&hilit=ajax+enabled#p54994

[stefanoni]

My question:
Is it possible in webclient to show only the first 3 Month (500 Elements), and after
the user starts to work on it, to reload the rest in the background (like ajax)

Not possible.

If you are getting 30 seconds to render, I would guess that there are a lot of places where a different approach or optimization would help. We use Solution Model with web client a lot and haven't run into this.

Thank you david,
As I said i mesured the time the solutionmodell-routine takes time. the rest has nothing to do with my code as I understand. What you mean with "optimize" something, because the Code I runnig only takes 4 Secouns, the rest is taken soewhere else:

See my demo in this Video: http://www.youtube.com/watch?v=Bw9uvcE7738

[david]

A couple of basic techniques for debugging speed:

1- Servoy developer profiler tab. Turn it on and then run your method. It will show the whole the whole thread of methods that were called, how many times and how long they took. Great way to find that one calculation that gets called a bazillion times.

profiler.png

2- Load your web page with Network tab open in Chrome developer tools. More requests means slower.

network monitor.png

A Servoy web client issue: Servoy generates a lot of markup for objects. A simple text area field for example is created with multiple nested div's, some inline styling, and lot's javascript event code. Some Servoy objects generate even more nested markup including table markup. There are two issues with Servoy's approach to producing markup with an outdated version of the Wicket engine:

1- Sheer amount of data that has to go across the wire.

2- Time it takes for the browser to render so many nested divs.

See this post: viewtopic.php?f=13&t=18772#p103603

With all that said, a major issue you have (from what I can see of your solution model code): you're individually styling, positioning and sizing all of your objects. Instead, assign classes and use one style sheet to define all your styles. With 2000+ objects, the sheer amount of markup you are pushing out must be crazy. And I suspect (which you will see with the Network tab) you have css spread across a bunch of style sheet resources instead of just using one style sheet.

Another trick we would probably employ is "hiding" all but the first section then showing each successive section in intervals with web client utils plugin and some client-side code. This way the browser doesn't compute the whole layout at once before showing.

So I think there are ways to make your layout a lot faster. But to be fair, complex layouts such as what you're going for can be problematic speed-wise with any web client technology and can take a lot of expertise to optimise no matter how you approach it. You're pretty much doing it the slowest way possible right now.

[stefanoni]

Thanks a lot ! You gave me lots of very interesting information. I try to answer one by one (because i spend hours between ).

" Servoy developer profiler tab"

Great tool ! Yeah ! I tried it and the results are like expected. The total time the routine spend to create the elements is like i measured
before, and there ar no special amount of dooing unnecessary subroutines etc.

next answer following...

[stefanoni]

With all that said, a major issue you have (from what I can see of your solution model code): you're individually styling, positioning and sizing all of your objects. Instead, assign classes and use one style sheet to define all your styles. With 2000+ objects, the sheer amount of markup you are pushing out must be crazy. And I suspect (which you will see with the Network tab) you have css spread across a bunch of style sheet resources instead of just using one style sheet.

I did the whole GigDoodle-Thing (still online) years ago with php and generated the html step by step. So Im aware of creating less html as possible. I also understand that I can optimize the amount of transmitted html by using styles insted of properties per element.


But, this is the html generated from Servoy fo a Label:
<div style="white-space:nowrap;" class="label" id="id8fd" tabindex="-1"><span onfocus="this.parentNode.focus()" style="cursor: default; display: block; left: 0px; right: 0px; text-align: center; overflow: hidden;line-height: 20px;">15</span></div>
<span onfocus="this.parentNode.focus()" style="cursor: default; display: block; left: 0px; right: 0px; text-align: center; overflow: hidden;line-height: 20px;">15</span>

The Styleclass is "LABEL"
and all the rest like "style="cursor: default; display:......." is not because I set all this properties !

My latest Code simply doesn't set all this properties, only position, width, text...

o = JSfrm.newLabel(
iTag,
nRefPosTagTitX + ( (iTag-1) * nSchubTagTitX),
nAktRefPosiY + nShiftTagTitY,
oTagTitMust.width,
oTagTitMust.height)

o.styleClass = 'gigDooTagTitMust'
o.formIndex = 1

[stefanoni]

... the last part... after hours....

The very beginning of this tread was my question about "reload parts of webclient". Your first answer, David, was "Not possible."

In the next posting you talked about "Another trick we would probably employ" and then you suggested exactly this what I was asking
before (load a part of the form, then reload/show the Rest, initiated by a Ajax Call Clientside with "web client utils plugin").

Is this because I don't understand the difference what you meen ? A short explanation would help me lot to understand where is the limits
of "clientside Ajax calls" and Servoy.

Thank you
Sandro

[david]

You can run client side javascript with https://www.servoyforge.net/projects/webclientutils. Lot of discussion about it on the forum here. We set z-indexes and display:none with it to manipulate and smooth out displays of complex layouts. Not exactly AJAX...more smoke and mirrors. (You should check out one of our demo servers viewtopic.php?f=20&t=19250.)

However, after looking at you video more closely I don't think all this discussion of speed/performance is your main issue. You're measuring time starting from hitting the Smart client and Web client buttons in Servoy Developer. These actions spin up the debugger and starting up web client takes quite a bit of time.

A true measure of performance would be to have web client already running. So run your code from a button on a blank form and see how it does. I bet it will be more what you're looking for

[sbutler]

You should be able to accomplish the "ajax like" functionality using the Headless Client plugin and callbacks. It starts up another client session on the server that can do some processing for you, and returns back to a callback methods when its done. So if you could separate your logic so you pass the headless client a section, and it would process the data (maybe 1 month), and pass you back an object (maybe an array), that you can utilize to render you calandar. Combine that with Harjo's putClientProperty('ajax.enabled',.. option and you might get close to what your looking for. Just keep in mind that after each callback, it will render, so you may get flashing with each section being loaded.

On a separate note, maybe you want to do this differently. I've done something similar that was very fast. In my case I set it up like this.
1. Create 1 form that holds the base UI for 1 month's worth of data (a real form, not one created with solution model)
2. In code, use application.createNewFormInstance(formFromStep1) to get a new instance of that form, and load it with the data you want. Do this for each month, so you get multiple instances
3. In code, use the SolutionModel to create a new form (this with be your main form), and dynamically add a tabpanel for each month, loading the forms from Step 2 into the tabpanels in the order they belong.

[david]

On a separate note, maybe you want to do this differently. I've done something similar that was very fast. In my case I set it up like this.
1. Create 1 form that holds the base UI for 1 month's worth of data (a real form, not one created with solution model)
2. In code, use application.createNewFormInstance(formFromStep1) to get a new instance of that form, and load it with the data you want. Do this for each month, so you get multiple instances
3. In code, use the SolutionModel to create a new form (this with be your main form), and dynamically add a tabpanel for each month, loading the forms from Step 2 into the tabpanels in the order they belong.

Pretty tricky

[stefanoni]

@all
thanke you all for your ideas. I'm still in a phase of experimental trying out different possibilities....
I' like to show a online-demo if its's finished.


@david
the idea with a prepared form to spare the time of building it with solution-model is not possible in my case,
because every month can have different count of horizontal lines. the user can edit the view of every month
individual.
The actual version (php/mysql) doesn't have this feature, but the new version ( servoy ) will have this possibility

[stefanoni]

meanwhile I learned a lot about the stuff you were talking about.

this is my test server 2008, you can play with it:

http://212.112.253.21:8080/servoy-webclient/ss/s/GigDoodle/a/ngjudpd71000p5uiolqh7bffi5

Note:
This link brings you all to the SAME CALENDER, what means, that you receive all the broadcasting of other
"players", so after the time of 20 secounds (I set it to decongest my servertraffic) it may be, that you will see
some ghostly changings happen...

Note:
I'm still developing, so the server will be restarted, reloadet with different data, and so on, at any time.

Note, you can:
- Click on a day to make it "set" with a color
- Click on a day with a set color to
- enter some text
- delete the day

- Click on a line "Text" to
- change the layout of the Calender (different lines / color for each month)
- text of the line

Maybe you help to make the calender not toooo ugly looking