Recommended approach/framework for creating a CesiumJS application? (2023)

CesiumJS
1

I’m developing an application that should be able to display a cesium viewer and open new windows capable of file I/O (and ideally more direct IPC such as shared memory, pipe, etc.) containing information about a viewer.entity at the click of a button from within the Cesium viewer.

Should I make it web-based, or browser-based? If I go with a desktop-based approach, is Electron a good choice? Is it possible to make use of the GPU either way? (I dislike how my laptop’s fans spool up like an F119 every time I open a webpage with a CesiumJS viewer in it.)

Do I need to use a framework such as Angular/React/Vue, etc.? There’s a page on the Cesium website about webpack, but it warns that the information contained within may be outdated.

Is TypeScript a good idea for CesiumJS applications?

Should I simply use Rust to generate webassembly for an Electron app? Would such a three-element approach be sufficient for my goal of being able to open new windows that are capable of IPC and file I/O?

Should I be using CesiumJS at all? I can’t even find the documentation on what type(s) entity.orientation can be assigned to, and The state of the CZML documentation is worrying, to say the least.

For context, I’m new to developing JavaScript applications, webpages, GUI apps, etc. My experience is in MATLAB/Python/Julia/C/C++/Rust.

Thanks for reading this rather chaotic post – I hope it wasn’t too wacky :​)

2
  1. browser-based
    2.vue
    3.good idea
1 Like
3

Hey @mcmuffin6o :wave:

The application you are trying to build sounds interesting!

Should I make it web-based, or browser-based? If I go with a desktop-based approach, is Electron a good choice? Is it possible to make use of the GPU either way? (I dislike how my laptop’s fans spool up like an F119 every time I open a webpage with a CesiumJS viewer in it.)

I think that since you want multiple windows and file I/O, you should go with one of the following options:

  • Electron
  • Progressive Web Apps (PWA)

I would prefer the former but PWAs have also advanced dramatically during the last years. Google is currently developing Project Fugu that enables even more desktop capabilities for PWAs.

Do I need to use a framework such as Angular/React/Vue, etc.? There’s a page on the Cesium website about webpack, but it warns that the information contained within may be outdated.

The choice of the framework should not be very important. I would say that use a JavaScript framework that suits you best and is more convenient for you. For example, as an Angular expert, I would probably build it with Angular :slightly_smiling_face: At the end of the day, all JavaScript frameworks do pretty much the same job. The page that you mentioned about Webpack contains also a link to the accompanying GitHub repository where you can find more up to date information.

Is TypeScript a good idea for CesiumJS applications?

I think that TypeScript is generally a good idea for newcomers to the web ecosystem that come from other languages such as C# or C++. It gives you many OOP techniques that you find in other languages as well.

Should I simply use Rust to generate webassembly for an Electron app? Would such a three-element approach be sufficient for my goal of being able to open new windows that are capable of IPC and file I/O?

Since you are already familiar with Rust, you should definitely consider it as an option. WebAssembly is very performant and a popular choice. Even Blazor has the option to build web apps with it.

Should I be using CesiumJS at all? I can’t even find the documentation on what type(s) entity.orientation can be assigned to, and The state of the CZML documentation is worrying, to say the least.

I guess so since you want a Cesium viewer :wink:

I hope my answers will help you. Let me know if you have any additional questions :smiley:

1 Like
4

Glad to hear. I just got done debugging an error that TypeScript would have prevented. I’m certainly looking forward to having something analogous to a static type system. Ironically, the point of dynamic type systems is to make things easier/simpler, but they really just kick the can down the road and you end up paying for it in debugging hours.

Fair enough! Heheh.

1 Like
5

Oh! I almost forgot to mention – The link to the GitHub is indeed helpful, but the link people are more likely to click (and the link I did click) is the one that’s right in the yellow warning box:

image
image2172×214 26.5 KB

This brings you to a page containing the following:

image
image702×886 90.7 KB

Which brings you full circle to the original page with the yellow warning!

7

Yeah, I see what you mean. It seems that the only resource about the use of Cesium with Webpack in the CesiumJS Learning Center is the outdated one :thinking: I would suggest the following:

  • Search the forum for related Webpack content that may provide more information.
  • Add a new topic in the forum asking specifically for that outdated content in Webpack.
1 Like
8

I think I’ll go with Vite, actually – I just wanted to point out the problem so that someone could fix it for future users.

1 Like
9

You might want to elaborate on your “file I/O” requirements. Browser sandboxing will prevent you from interacting directly with the local system unless you also have a back-end. Years ago you could have written a single HTML+JS file that you can open from disk and have at least some options for working with other local files, but that’s pretty much gone, and not coming back. I believe that most people who have a use case like that have migrated to Electron, as you suggested.

10

I plan on using a back-end. I’m just running a dev server for now, but do you have recommendations for production? Thanks for pitching in.

11

A quick reply from me;

We’re currently making a node.js app (yes, it can run locally without install, but other engines are available) with a stand-alone WASI engine (so the app can run either front- or back-end) for all performance plugins (processing and so on), and we wrap it all in a Flutter app with a Chromium viewer (using a web UI, not Flutter natively, although there are ways of bridging the gap between the two, even using PWA) for a multi-platform, multi-purpose framework for these kinds of applications. We’re moving away from Angular into Solid (possibly, we’re not fully decided yet), not because Angular is bad but it has too much magic that interferes with Cesium rendering (or the other way around, Cesium triggers a lot of Angular magic re-draw stuff).

Can elaborate if needs be.

Cheers,

Alex

1 Like
12

Hi all. Apologies for resurrecting a somewhat zombie thread.

There’s some comment on this thread about using Electron with Cesium, but the examples I’ve been able to find are pretty ancient - just this blog post (which seems to be a poor copy/paste job of the contents of this repo.)

I ended up having some marginal success by attempting to take the themes from that repo and apply it to the Electron boilerplate sample code, and I can get a local copy of that working on my machine, but any attempts to package it up result in webpack not finding the Cesium assets in ./node_modules.

I know this is all a bit vague, and I can try to create a minimal repo to demonstrate where I am, but I guess my bigger question is, is this even a useful path to be pursuing, or is there a better alternative I should be thinking about to create a standalone Cesium app? Given the lack of hits on “electron and cesium” it doesn’t seem like there’s a lot of folks pursuing this direction.

Thanks!

13

Right off the rip, I’d recommend Vite over webpack, although I don’t know if it works with electron.

In terms of creating a standalone app, I’ve had great success with Tauri, but I’m moving towards Genie because research and scientific computing are a total PITA with Rust™; Julia is orders of magnitude better in terms of its mathematical facilities and performance/effort ratio. There’s also Wails if Go is more your thing.

In any case, it’s high time that desktop app devs move away from electron – it’s a bloated, legally concerning, and potentially insecure mess.

Hope this helps.