Build a web app over a translated model

[LSarribouette]

Hi all!

I have a project of building a web app to show interactive results of a model translated from Vensim thanks to the SDEverywhere library.

Here are some of my interrogations:

• Should I use the JS output of the model or the WebAssembly?
• Is VueJS an appropriate frontend in this case? (it is the framework mostly used in my team)
• Will updating the Vensim model and apply these modifications up to the web app be a simple process? How can I keep it simple?

I realize these are big questions without much context. I am new to Vensim models so I am not sure how to start this project the right way.

I am of course available for discussion :)

[travisfranck]

@LSarribouette I'll give a first answer to your questions.

Should I use the JS output of the model or the WebAssembly?

It mainly depends on the size of your model, by which I mean the number of total calculations (# variables multiplied by the # timesteps). If it is small to medium, I think pure JS would be fine. If it is very large, you could consider WebAssembly. There is a SDE setup difference depending on your target, with WebAssembly requiring Emscripten.

That said, it also depends on your needs. If you're okay with a very large model running a bit longer then pure JS would also be okay. For instance, if you don't need responsive user interaction, then pure JS works. WebAssembly is mainly available for large model where every millisecond matters to the user experience.

Is VueJS an appropriate frontend in this case? (it is the framework mostly used in my team)

Yes, VueJS would be fine. It will just be JS calls from whatever UI framework you prefer.

Will updating the Vensim model and apply these modifications up to the web app be a simple process? How can I keep it simple?

Yes, updating is simple. SDE produces only a few static files that need to be replaced. So you can update Vensim, run SDE, upload the new static files to the web server. Also, it is possible with some additional programming to do this through continuous integration tools (even hosted on GitHub), if that is beneficial for your project. More setup at the beginning, but makes continuous updating easier in the long-run.

Thanks for starting an SDEverywhere project!

[chrispcampbell]

Thanks, @travisfranck!

@LSarribouette, to add to what Travis wrote regarding "how can I keep it simple". The simplest way to keep both your Vensim model and web app updated and in sync is to develop them together in the same Git repository. Today I made some (looong overdue) improvements to the Creating a Web Application wiki page, which provides guidance and recommendations on how to develop a web application using SDEverywhere.

Hopefully that page helps answer some of your questions about the process. If there is anything unclear or if there are areas where you'd like more detail, please let me know. (This is a good opportunity to improve the documentation.) Thanks!

BTW, I wish we had a standalone example repo that I could point you to that goes a bit beyond what you get from the default project template from the Quick Start instructions. Ideally it would use Svelte or Vue (instead of jQuery), and would have things like GitHub Actions workflow configuration, full/customized model-check configuration, deployment to GitHub Pages, etc all included for reference purposes. These are the kinds of things that we've had running smoothly for our own simulators for years, but since En-ROADS and C-ROADS are not open source at this time, it would be nice to have a separate public repo that demonstrates these things. I'll put this on my list of things to consider in 2025.

[LSarribouette]

Thanks to both of you for your reactivity and these helpful answers!

We currently have about 500 variables for 200 timesteps: is it already a lot ? It shouldn't move that much in the future.

We have a great focus on performance for user experience, which makes me consider WebAssembly but I don't know how much complexity it adds.

Perfect for VueJS, then!

The wiki page is indeed very helpful!
I already succeeded in deploying the Sir Example with basic CI as a GitLab Pages :
https://gricad-gitlab.univ-grenoble-alpes.fr/sarribol/sdeverywhere-sir-gitlab-page
(please let me know if I must put the repo as private)

I will continue by putting in place a basic VueJS app with the CI as you explained. Maybe it will be useful for you as well, as a base for the standalone example repo you want to build?

[travisfranck]

That model size should not be a problem. I suggest starting with pure JS and seeing if that is sufficient. You can always switch to WA if needed. Congrats on getting started!

[chrispcampbell]

Hi @LSarribouette, thanks for sharing the GitLab example. You can definitely keep it public; it's good reference for anyone using GitLab. I've added a link to your example in the Building and Deploying section of that wiki page and also added some links to resources for those using GitLab.

We currently have about 500 variables for 200 timesteps: is it already a lot ?

For reference, En-ROADS has 6000+ equations and 800+ time steps. On my M1 Max, the WebAssembly version runs in 15-20ms, whereas the JavaScript version runs in about 50-60ms. We aim to keep our model run time ideally under 30ms so that graphs are responsive when the user moves a slider. (The SDEverywhere runtime runs the model in a background Web Worker to avoid blocking the UI thread, so slider moves should always be smooth regardless.) In practice, things usually feel snappy as long as the run time is under 80ms or so.

In short, based on those numbers you provided, I don't think you'll need to worry about WebAssembly unless you start going above that threshold where your UI is not responsive enough. Enabling WebAssembly is not super difficult; the @sdeverywhere/plugin-wasm and runtime APIs hide nearly all the complexity so it's like a drop-in replacement should you ever need it. But in the meantime, you should be fine with generating JavaScript for your model.

On the topic of performance, I just added a section on Measuring Performance, which shows how you can get size and speed stats for your generated model using the model-check tool.

I will continue by putting in place a basic VueJS app with the CI as you explained. Maybe it will be useful for you as well, as a base for the standalone example repo you want to build?

Sure, that sounds great!

[LSarribouette]

Happy my repo can be useful!

I will definitely start with JavaScript then and I will let you know how it goes.