Javascript

Freezing Xojo Web Apps

As reported by Ralph Alvy and several others on the forums (https://forum.xojo.com/51170-2018r3-web-app-appears-stuck-when-it-quits/0#p414878) and in Feedback (53291) Xojo web applications built in Xojo 2018r1+ can lock up with no visual indication or recovery.

This is most prevalent on mobile devices when the user is interacting with your Xojo Web app and then moves on to something else. Behind the scenes the iOS or Android operating system suspends the javascript execution of the browser tab. This severs the link between the user application and the Xojo Web server.

In Xojo 2017 and before this was not a problem because the entire communication stack between the browser and server was built on XMLHttpRequest. This is the browser provided class that enables all AJAX interactivity on the web. Since the inception of AJAX however many new technologies like WebSocket’s and Server-sent Events (SSE) have been released.

They provide a persistent connection between the browser and server in either bidirectional or unidirectional capacities. This helps web applications respond faster to changes as building up a request is very expensive in regards to latency and when generating tons of events can really impair web application performance.

In Xojo 2018r1+ the web framework now defaults to SSE as opposed to XMLHttpRequest for all devices (except Firefox). This is great but unfortunately there is a bug. When a users session times out the users browser needs to be reloaded so a new session can be created and use continued. In the old XMLHttpRequest handlers this was recognized and if a session is no longer available on the server then the browser reloads itself.

Sadly, with Xojo’s SSE implementation there is no recognition that the connection to the server has been closed. A generic error has fired but because Xojo Web was working fine prior to the users tab being suspended it is not aware of connectivity issues. The app essentially locks up from the users perspective as the web framework is no longer listening for server side events and client generated events are no longer capable of firing as the session is invalid. Technically the client generated events do fire but the server rejects them.

Fortunately, there is an easy fix! When the SSE connection is closed the ‘readyState’ property of EventSource (https://developer.mozilla.org/en-US/docs/Web/API/EventSource) changes to the integer 2. I have verified a fix for this behavior by dynamically changing the error handler of Xojo’s SSE implementation to recognize a ‘readyState’ of 2. When it sees that it recognizes there is no recovery possible and it then starts pinging the server to see if it is still available. If it is then it reloads the browser and starts a new session exactly as the XMLHttpRequest implementation does.

To apply the fix is very simple. You want to execute some Javascript after the framework has fully loaded. Preferably you do this when your first window ‘Shown’ event fires. So do the following:

  1. Add an event handler for the ‘Shown’ event for the first WebPage in your Xojo Web project if it does not already exist.

  2. Add the following code:

    me.ExecuteJavaScript("if (Xojo.eventsource !== undefined){Xojo.eventsource.onerror = function (event) {Xojo.eventsource.msgcount--;if (Xojo.eventsource.msgcount < 1 || Xojo.eventsource.readyState === 2) {Xojo.view.preventInteraction();}};};")

  3. That’s it! You can now deploy your app and verify the fix works on ALL devices.

Feedback for Xojo

  1. There is a lot of parsing in the framework going on for WebSockets, Server-sent events, and conventional AJAX to identify when connections have broken, server unavailable, etc. In most cases you capture these events just fine and do the appropriate thing. However, at times when you miss one the web applications appears “locked up” with no obvious way to resume. You don’t know if it is lagging out, frozen, or what.

    I recommend when the server sees data being sent to a session that is no longer valid that instead of returning a generic 404 you send back a “session invalid error” that can be handled. You can then force the browser to reload regardless of the failures that led to the error in the first place. If the session is invalid there is no point in letting the client linger any longer than necessary as no recovery is possible.

  2. There is a lot of EventSource handling code in Xojo.comm.ajax that relies on message counting to determine if there was connectivity failure. However, if connections break down or fail there is no graceful cutover back to XMLHttpRequest as a fail safe. The current implementation just reloads the browser and then attempts to use SSE again despite a failure in the previous attempt. Instead gracefully switch to XMLHttpRequest and only then if failures persist continue with a reload.

  3. You should revisit the absence of using SSE in Firefox. Mozilla is very standards based and I’m sure appropriate workarounds could be implemented to support this methodology.

  4. This is the second Javascript framework issue I have fixed (45691). My previous fix I submitted to Feedback on June 3, 2017 and all you have to do is implement it! Why the delay? I will submit this resolution to Feedback as well but I hope it can be rolled into R4.

  5. One of the great things about Xojo Web is I can investigate and fix the client-side issues. I hope this provides some evidence that an open source standard library would be a good thing! The bits that make Xojo the most valuable (The IDE, the compiler, etc.) can and should remain closed source. The non-proprietary implementations of standard protocols (SSE) could benefit from more eyes on them in my opinion. See part 2 of my 2017 review series on where I talked about opening up more of Xojo’s standard libraries for cases just like these: http://www.dev.1701software.com/blog/xojo-in-2017-part2

Introducing Really Nice Controls for Xojo Web

The Really Nice Controls (RNC) project consists of fourteen high quality, highly optimized controls for your Xojo Web projects. The controls are $100 per-developer in encrypted form and include one year of free updates. Over 20+ more controls are planned to be released in coming weeks.

You can view an online demonstration of these controls by clicking here.

Download a free demonstration project with the controls optimized for Xojo Web 2018r2 by clicking here.

The following controls are currently available:

  • Alert (MessageBox replacement)

  • Button (WebButton replacement)

  • Callout

  • Checkbox (WebCheckbox replacement)

  • DateInput

  • EditableLabel

  • Icon

  • ProgressBar (WebProgressBar replacement)

  • Slider (WebSlider replacement)

  • NumericInput

  • Spinner (WebProgressWheel replacement)

  • Switch (WebCheckbox alternative)

  • TextField (WebTextField replacement)

  • Toaster (MessageBox alternative)

Each control provides five color variations. Many include the ability to incorporate one or more icons. 451 high quality SVG icons are included in the package which can be scaled to any size. Some controls can be used in large or small modes to optimize your user interface design.

The control set is powered by a handful of external CSS and Javascript files which are delivered to your client browsers via a FREE CDN network. CDN access is free for the life of your license. All controls have been compiled down to a single Javascript library to maximize speed and efficiency of delivery to your clients browsers. These controls load extremely fast and provide easy events similar to the controls you are used too. They use a Virtual DOM technology which minimizes Javascript execution time and minimizes back and forth data with your Xojo Web server.

License keys are delivered within 24 hours of payment.

All sales during 2018 will include free updates through the end 2019!

You can purchase a license for Really Nice Controls for Xojo Web by clicking here.

Screenshots of the various controls are available by clicking here.

For support, licensing questions, control requests, or otherwise please email phillip@1701software.com.

Should Xojo support Javascript/Typescript?

Interesting conversation going at the Xojo forums about whether the product would benefit from a more popular syntax. Polling data shows us that developers do not care for the stigma of basic-like syntax. VB.NET is especially afflicted by this mentality despite sharing the the entire .NET framework and all of its capabilities with C#.

In my experience the Xojo community are avid supporters of static type checking. Non-IDE assisted properties/methods via 'Operator_Lookup()' or dynamism tends to be frowned upon. I occasionally receive emails asking for help with SQLdeLite or comparing it to ActiveRecord. Xojo developers get spoiled by the IDE’s auto-completion that they lack a certain confidence when it is not there.

Thus I think Javascript would not be an optimal fit for Xojo.

However that is not to say that we cannot add some borrowed language features to make Xojo more appealing to basic-naysayers. I would like to see semicolons and brackets added as purely optional syntactic sugar.

Imagine:

    For count As Integer = 0 To myArray.Ubound
        myListbox.AddRow(myArray(count))
    Next

Could Be:

    For (count As Integer = 0 To myArray.Ubound)
    {
        myListbox.AddRow(myArray(count));
    }

We could make also Dim seem a little less 1980’s as well.

Imagine:

    Dim count As Integer = 0

Could Be:

    Integer count = 0;

A little massaging of the syntax while being purely optional would make Xojo more palatable for the large Javascript/C family of developers. I am not or have been a Xojo compiler engineer but I can only deduce that these changes would be easier than building a Javascript front-end.

If you like random Xojo ideas, suggestions, and tips like these then please subscribe to our newsletter.