Choosing framework and build tool

Questions
, , ,
1

I have very elementary working knowledge of frameworks and build tools and feel that it is time for me to make a choice on both for my current project.

Can anyone confirm my choices?

Vite over Webpack: Vite build tool is described as “modern and built for speed of iteration” while Webpack is described as “good for enterprise or legacy projects.” My project is single-developer, data heavy and moving from FOSS libraries (some heavily modified) and custom JavaScript to a mix of JavaScript, TypeScript, ES Modules, CommonJS (e.g. import vs require).

Vue over React: Vue framework is described as “having precise refresh control, is more similar to VanillaJS (friendlier to a VanillaJS developer) , and good for data-heavy applications” while React is described as “better for dashboards, and having more variety of but less flexible pre-built UI controls.”

Project

The goal is a scientific playground for touchscreen/tablet, designed to explore Orbital Dynamics with visualizations, equations, calculations, tables and charts and zoomable from small areas of the earth, to earth-orbiting satellites, to any planet-orbiting satellites, to the solar system to (eventually) travelling among the stars, all supported by accurate and modifiable numeric parameters, equations and calculations.

Screenshot_20261002_112417_Lemur Browser
Screenshot_20261002_112417_Lemur Browser1752×1127 267 KB

In the screenshot, you can see the custom resizable HTML-based window implementation overlapping the Babylon 3d visualization/canvas running on an Android touchscreen tablet. I would like to simultaneously support resizable windows with optional added grid layout (with Babylon visualization as one or more of the grid cells), while extending device support to phone and desktop, enabling use with any combination of touchsreen, mouse and/or keyboard.

The project is on about the third major version among many refactorings as I learn the details of, experiment with, and choose among various FOSS libraries and data sources. Throughout all, Babylon.js is the 3d renderer of choice.

It is currently implemented in a single (10000+ lines) JavaScript file with embedded data and using both CommonJS and ESM libraries mostly from jsdelivr and data sources from around the internet (WikiCommons, NASA, International Astronomical Union, and others).

The project is also constrained to flat file delivery, but when or if a backend is needed, it will likely consist of at least python with lots of libraries and PostgreSQL-PostGIS.

Primary browser libraries

  1. Babylon.js - 3d visualization, currently full-screen, but want ability to place one or more viewports and scenes among a grid layout.
  2. eCharts.js - charting (aka datagrid) library handling 2d scatter plots, wanting to add heatmaps and extending to 3d plots.
  3. math.js - mathematical expression handling with custom conversion to MathML Core
  4. clusterize.js - virtualization and fast display of large data tables or lists (will test with 100000+ rows, and want to support 1000000+ rows, that is, 10^6 rows and would like to support 10^7 rows).

Epilogue

I know this is ambitious, but all my experiments so far has led me to believe it’s totally within reach. I’ve got efficient (currently separate) code for 12000+ satellite calculation and display, optional orbit path display, solar system calculations with runtime in-browser visual scaling, display of the celestial sphere backed by current star data and runtime location calculations and have room to improve speed of any aspect with custom WebGL2 shaders and WebGPU calculations (I’ve successfully tested 12000+ moving satellites displayed at 120fps with ideal Kepler calculations in a WebGL shader).

Thoughts on a framework and a package builder?

2

vite, definitely. webpack is fine but for a solo dev the dev server alone is worth the switch. on vue vs react, either works for what you describe. the canvas is babylon’s world and the framework just manages the ui chrome around it, so pick the one whose syntax you enjoy reading at 2am. honestly the bigger risk is the single 10k line file mixing CJS and ESM, that will bite harder than any framework choice.

3

Thank you! The 10000 line single file has been for incrementally testing all my ideas and open source libraries up to this point. I’ll be breaking it up into class definitions (and likely ES6 modules) as I refactor with (likely) vue and vite, pending feedback. The current file is just a starting place for algorithms and code.

4

Vite over Webpack

I use esbuild. This is my “config” file:

call npx esbuild ./src/js/index.js --bundle --minify --external:./src/assets/* --outfile=./bin_steam/resources/app/game/tactical.js --target=chrome120 --format=esm --drop:console --drop-labels=DEV --banner:js=//"!Copyright Joe Kerr" :smiley:

The dev environment uses the raw js files which get auto build by a .ts file watcher. (couple of lnes of code; one time investment.)

Preference here is simplicity and speed. Code is ready within 1sec (debounce timeout). Entire rebuild takes like maybe 1min (incl. build tasks from xls, yaml, etc).

Vue over React

Afaik, React does require a build step whereas Vue can be used without. Might come in handy.

If you are fine with an extra build step, there also is Svelte (Google Search).

FYI: AI is amazing for these kinds of design decisions :wink: