Struggling with collision of technical terms (most especially the term "plugin" which has about seven different meanings within the react development stack).
Short question:
Is there a way to pre-compile static webpack modules that can be installed separately from a main static react web application, while still sharing modules contained in the main web application? (The question as best I can formulate it using my relatively naïve react developer skills). I'd like the ability to plug in web user interface components supplied by 3rd party developers after the fact. i.e. installable runtime React UI components, not requiring react compilation at install time.
Details:
I have a static React web app that allows remote control of audio plugins (specifically LV2 audio plugins). It's a single-page static react app (that communicates via we sockets with the running application), hosted by a static C++ web server. Realtime and IOT agility requirements make a python hosted dynamic web server an runtime compilation an unattractive prospect (https://github.com/rerdavies/pipedal)
What I want to do is allow extension of the web UI using separate bundles provided by 3rd-party LV2 plugins. The ideal solution would be to allow static webpack bundles pre-compiled by the lv2 plaigns and placed in /usr/lib/lv2/<pluginname.lvw>/resource directories to be consumed by the web app at runtime. I'm using a custom C++ web server, so redirecting URLs into the /usr/lib/lv2/xx/resource directories is straightforward.
The main app would be distributed one apt package. Lv2 plugins would be compiled (potentially by 3rd party developers) against an "sdk package" provided by the main app build, after the main app was built, and then distributed in separate packages. Ideally, I'd like to pre-compile the ui code for the plugins to static webpack modules before their installers are built.
I more-or-less understand how I would do this if I were using raw CLI tools and configuration files (tsc, webpack, babel). But I can't help thinking I would be reinventing a wheel. (And I do have concerns that I'm going to incur serious version-dependency problems).
I would like to code-share the base modules (react, #mui controls, and a limited set of app-supplied components and interfaces).
I see the path through the various tools to make this happen, using my own custom build script, I think. I can get the typescript compiler to do code-splitting; I can probably figure out how to get the babel transpiler to do the right thing. And I think I understand how to write webpack configuration files that will process do sharing of modules from the main app. And a likely path to build and distribute an npm package to do the setup and build of LV2 plugin projects. And how to write supporting CMake build rules for building and installing such packages. &c. But I'm concerned that I'm going to go down a large rabbit hole trying to reinvent something that surely must exist already. And I can imagine seven thousand ways for this to go horribly wrong. :-P
So far, I have implemented the TypeScript compiler portion of the build procedure. And writing various bits to dynamicall intercept and service resource requests in the web server is trivial. But it has become painfully obvious that I also need to do babel and webpack build steps as well.
I haven't yet looked at the react-scripts package contents to see if I can steal code to build what I want there. Perhaps that's a viable path.
Is there a way to do this with off-the-shelf npm packages and off-the-shelf npm build procedures? I can find all kinds of bits to get me part way; but the integration of all the bits is rather daunting. Should I just do the deed, and start writing my own custom build scripts to make this happen?
Related
We have a modular monolith application, each module being an extjs app. Modules share alot of features / functionality, therefore the most of code is sitting in a common extjs package that gets imported into each module, the module themselves are relatively thin. We also provide an accessibility build, ie., everything is built at least twice (once with normal theme, once with high contrast), but for some apps more (some logic is managed through extjs macros to exclude / include different regions at build time).
The end result is agonizing build time. ~10 apps, each built at least twice, each build lasting just under 2 minutes. It's all because each app is built from scratch. Is there a straightforward means to build it together? So that instead of rebuilding extjs code / common package code / themes 10 times, it would be just built once and reused in build process of all apps?
This looks very relevant "saving and restoring sets" . But it seems to be some lower level feature, which would as far as I understand it come useful if we were reimplementing build process from scratch and tossing out app.json. Is there a clear way how to incorporate it into existing higher level features like sencha app build?
You could go ahead and build the packages (if any) separated from the application, then drop the packages in the owning directories of the build. However, Sencha CMD and the way the class system and resolving the dependencies works makes it really hard to untangle the build process, so it's hard to give a general advice here.
You might want to look into the package loader of Ext JS and the "uses" configuration option for the app.json.
I'm trying to start my first web project. My experience is with .NET desktop development and I'm very new to the Java/Kotlin world. Client side I want to use React and write the code in Kotlin, then transpile to JavaScript. Server side I would like to use Ktor both to serve the static content (React app + various assets) and REST endpoints for the SPA. I would like to use the Multiplatform feature to be able to share as much code as possible. My IDE is IntelliJ IDEA.
I would like to have auto-reload and be able to debug both React and server code for development and I would like to be able to create a single fat jar with the complete application (frontend+backend).
I started with the template that IntelliJ provides for multiplatform JS+JVM. I have been working on it for more than one day with little success and also haven't been able to find any sample online with all the features, and also haven't been able to combine various samples due to insufficient knowledge. Only thing I got is either running the application without autoreload or creating the jar file by adding "manifest" to the build.gradle file which breaks my run configuration.
I would very much appreciate if someone could provide or point me to an example with these features which I can use as an starting point for my application.
Here is a link to an example to get you started.
https://play.kotlinlang.org/hands-on/Full%20Stack%20Web%20App%20with%20Kotlin%20Multiplatform/01_Introduction
I am from a microsoft background where I always used to keep server and client applications in separate projects.
Now I am writing a client-server application with express as back-end and react js as front-end. Since i am totally a newbie to these two tools, I would like to know..
what is the general practice?:
keeping the express(server) code base and react(client) code base as separate projects? or keeping the server and client code bases together in the same project? I could not think of any pros & cons of either of these approaches.
Your valuable recommendations are welcome!.
PS: please do not mark this question as opinionated.. i believe have a valid reason to ask for recommendations.
I would prefer keeping the server and client as separate projects because that way we can easily manage their dependencies, dev dependencies and unit tests files.
Also if in case we need to move to a different framework for front end at later point we can do that without disturbing the server.
In my opinion, it's probably best to have separate projects here. But you made me think a little about the "why" for something that seems obvious at first glance, but maybe is not.
My expectation is that a project should be mostly organized one-to-one on building a single type of target, whether that be a website, a mobile app, a backend service. Projects are usually an expression of all the dependencies needed to build or otherwise output one functioning, standalone software component. Build and testing tools in the software development ecosystem are organized around this convention, as are industry expectations.
Even if you could make the argument that there are advantages to monolithic projects that generate multiple software components, you are going against people's expectations and that creates the need for more learning and communication. So all things being equal, it's better to go with a more popular choice.
Other common disadvantages of monolithic projects:
greater tendency for design to become tightly coupled and brittle
longer build times (if using one "build everything" script)
takes longer to figure out what the heck all this code in the project is!
It's also quite possible to make macro-projects that work with multiple sub-projects, and in a way have the benefits of both approaches. This is basically just some kind of build script that grabs the output of sub-project builds and does something useful with them in a combination, e.g. deploy to a server environment, run automated tests.
Finally, all devs should be equipped with tools that let them hop between discreet projects easily. If there are pains to doing this, it's best to solve them without resorting to a monolothic project structure.
Some examples of practices that help with developing React/Node-based software that relies on multiple projects:
The IDE easily supports editing multiple projects. And not in some cumbersome "one project loaded at a time" way.
Projects are deployed to a repository that can be easily used by npm or yarn to load in software components as dependencies.
Use "npm link" to work with editable local versions of sub-projects all at once. More generally, don't require a full publish and deploy action to have access to sub-projects you are developing along with your main React-based project.
Use automated build systems like Jenkins to handle macro tasks like building projects together, deploying, or running automated tests.
Use versioning scrupulously in package.json. Let each software component have it's own version# and follow the semver convention which indicates when changes may break compatibility.
If you have a single team (developer) working on front and back end software, then set the dependency versions in package.json to always get the latest versions of sub-projects (packages).
If you have separate teams working on front and backend software, you may want to relax the dependency version to be major version#s only with semver range in package.json. (Basically, you want some protection from breaking changes.)
I am migrating from Eclipse to Android Studio and have a Android App connected to AppEngine.
I have split the Server side into two modules (default module for Endpoints and user facing requests) and "admin" module for backend stuff.
Now both these modules need to use the Entities. (backend module usually is responsible for saving these entities to DB, while the frontend default module is the one who returns data back to Android using these Entities).
What is the best way to share these Entity classes between these two modules in Android Studio? (also making sure these classes get enhanced etc). I do not wish to have duplicate classes, both in the default module as well as admin.
Maybe have a common "java" module shared between the two (but not sure class enhancing would work). Or should the admin module NOT use the Entities and instead use other ways of persistence?
Appreciate your thoughts.
While there may be reasons for not sharing the code, personally I prefer DRY.
I solved the issue in DRY spirit with the Python backend by placing the models definition file in the app dir app/models.yaml and sym-linking it into each of the modules subdirs app/module_blah/models.yaml, thus ensuring all modules see the same models definitions. At deployment time the symlinks are automatically replaced with the actual content of the file being symlinked. From appcfg.py update:
The command follows symlinks and recursively uploads all files to the
server. Temporary or source control files, such as foo~, .svn/* are
skipped.
Care may be needed to deploy all modules at the same time.
I used the same technique to also share entire libraries with common code across modules, by symlinking app/lib/libX subdirs into the desired app/module_blah/lib/libX as needed.
Not sure if this technique is usable in Java, tho.
I'm about to start a pretty huge project.
This project is a website.
The backend will be made with Node
The frontend will be made mostly with Angular
Backend is going to be an API (which is cool with Angular) but also (later) for an Android app.
Frontend is going to be a fork of this repo : https://github.com/maxime1992/webTemplate and I want to be able to pull from upstream to keep the fork up to date.
I am wondering. How should I manage it?
Should I create only one repo, containing back and frontend with Git submodule or subtree.
Should I create two separated repos, one for the frontend, one for the backend and then use symlink to have them together? But if someone wants to run it on Windows ... Too bad.
I want this project to be open source on GitHub so I would like to have something clear and easy for everyone :)
Tell me how you would do it, what's good, what's wrong ... I'm really curious!
As indicated in the comments, Git submodules (or Git subtrees) are not the right solution for this. Use a dependency management tool for this, which will work cross-platform (Linux, Mac, Windows), and is the standard way of doing this.
Separating your backend and frontend into separate projects is a good idea, as it will allow you to manage projects independently and add functionality or additional client applications later without bloating your application.
Since you're already using Angular for the frontend, I suggest you take a look at Bower, which is the de-facto standard dependency management tool for frontend projects. It allows you to define a bower.json file to define your dependencies, e.g. Angular and other frontend libraries, allowing you to assemble your frontend project without having to download and store libraries manually.
In your backend project, you would then also add a bower.json file which declares your frontend project as a dependency by pointing to its Git location and branch. Bower will then take care of downloading your frontend project and adding it into your backend project.
Check out some of the popular Bower tutorials for more info on this...
You can use bower link to automatically create symlinks between your projects - this will work across operating systems as well.
Some other tools that you might want to check out:
Yeoman for scaffolding a base project. There are some nice generators for scaffolding Angular projects, including things like LESS/SASS and Bootstrap (https://github.com/yeoman/generator-angular)
Wiredep for automatically wiring your Bower dependencies into your index.html file.
Getting your initial project setup right will be important. You can start small and grow things to a more advanced configuration later.