I've been using vanilla JS with jQuery and a custom model-view architecture for ages, but I'm about to start a large, data-heavy web app that needs to scale well, and what I'm currently doing isn't quite up to it.
Think Adobe Illustrator in a browser (that's not what I'm doing, but it is comparable in that the user will be viewing and modifying graphics primitives.) Among other things, the app will need to support:
- Unlimited undo/redo
- Graphics-heavy UI with ability to render rasterized images and vector images
- Very large state objects, potentially tens to hundreds of MB
- WebGL/canvas rendering
I'm hoping for some direction/recommendations when it comes to developing a scalable architecture . I'm looking at React for its simplicity and consolidated component architecture, and Redux for its basically automatic undo/redo capability, among other things.
The app is also going to rely on both client-side and server-side processing, where some complex (or proprietary) algorithms will run server-side through an API, and others will run client-side. Nominally, components won't care where their state comes from, or what processing actions are produced by a UI interaction.
My intent is to select one or more tech stacks and building some apps on a much smaller scale so that I can get a feel for them before committing to a particular framework and regretting it later. :-)
What has worked for you?