A web app launcher with responsive design

[Andreas Bergendal]

Hi all,

Thanks for your feedback on this first test version. It is made with LC 10 dp 4 which indeed uses the wasm tech and not the old html5 tech.

And don’t worry - I wouldn’t have half the knowledge I have in LC coding if it weren’t for the generous sharing on this list and in the forum. Being able to make a small contribution to this knowledge bank is my pleasure.

Here’s a link to a zip file with all the stacks used in the example, plus the index.html file (with I use to replace the standalone.html file produced by the standalone maker):
https://wheninspace.com/portal/LC_wasm_example_package.zip

Note that the links used in the scripts to open stacks all point to my server/domain (obviously) , so if you want to experiment with your copy you’ll need to have a server to put them on and change the links accordingly. It will not work by using the Test deployment (at least not out-of-the-box). I do all testing live on the server.

Note the order in which the stacks fire up: LCweblauncher.livecode (which becomes standalone.zip when built) -> uses WISwebLauncherLib.livecodescript -> opens WISwebPortal.livecode -> opens the other stacks.

I’m sure there's room for vast improvement to all this, and I believe there will also be more support for natively handling some things in coming LC10 versions.
But the future looks promising! :)

/Andreas


> 13 aug. 2022 kl. 23:39 skrev Mark Smith <marksmithhfx at gmail.com>:
> 
> Congratulations Andreas and thanks for sharing. I haven’t done any work with the new LC HTML5 engine but I was really impressed with the speed of loading it on my new M1 Pro — about 3-4 seconds on first download and then a second or so thereafter. On my iPhone 12 not so fast… more like 30 on the first download but again very quick (a second or two) on subsequent loads. It looks like you’ve got a lot of the tech working with objects and screens and the adaptive resizing. When I do get around to getting into this (and it looks very enticing) I’ll know where to go for help :)
> 
> Mark
> 
> 
>> On 13 Aug 2022, at 8:24 pm, Andreas Bergendal via use-livecode <use-livecode at lists.runrev.com> wrote:
>> 
>> Friends, I have done wonderful things with LC10 web deployment!
>> 
>> I’m excited to share with you the fruits of this week's extensive research and testing!
>> 
>> TL;DR:
>> Try this: https://wheninspace.com/portal/
>> 
>> Long version:
>> 
>> I wanted to do two things:
>> 
>> 1) Like we often do with desktop standalones: Create a minimal launcher/splash stack as standalone, which only does one thing - open an external stack that does everything else. This way I can then update individual stacks, without having to build a new standalone each time.
>> 
>> 2) Get the resizing of the browser window to trigger the resize of the stacks and all the responsive design therein, and make it look good on both desktop and mobile. (Refining the example from the mothership, ”Meeting space”.)
>> 
>> I have accomplished both!
>> You can see and test the result here:
>> https://wheninspace.com/portal/
>> 
>> Please try it both in desktop browsers (resizing the browser to various sizes) and mobile browsers (both portrait and landscape orientation).
>> 
>> The standalone consists of a minimal launch stack that just acts as event listening agent (even after closing itself) and opens the Portal stack which is an external LC stack. The Portal stack then has buttons for opening additional external LC stacks. 
>> 
>> When the launcher stack receives a resize signal from the browser (from the JavaScript in the html file), it dispatches ”resizeEvent” with the width/height values to the topStack, which can subsequently rearrange its stack rect and content accordingly.
>> 
>> As a bonus, I also demonstrate the possibility to show several stacks in the same browser window!
>> 
>> I find the LC web deployment option a true game-changer! A new world is opening! Let’s build it! :)
>> 
>> /Andreas