I have an Angularjs Application on Node.js. I want to divide the whole applications into multiple small applications. Like I want to separate the common functionality from specific functionalities.
For example, I have Person Module, Actor Module, Doctor Module, Lawyer module. Person Module is being used by other Modules. All others are independent. All the modules have javascript files ( Controller and Service) and html files.
Currently, all the files are in one directory /folder. I want to keep all these modules in different folders / applications. If I want Doctor App, I should be packaging Doctor Module and Person Module into one Application. If I want Lawyer App, I should be packaging Lawyer and Person modules into one application.
In Version Control, how do I separate them? and how do I get them and package them based on what I want?
The question is essentially how to separate the angular code and package it based on what I need?
Any clues/tips are appreciated.
Depends on your build tool. If you use Grunt or Gulp then you can easily merge your JS files into one by defining a pattern of source files. You could define to merge all the files in the Person or Doctor app folder.
Related
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?
I see that there is already an answer to this question but I feel its outdated. Many things have changes since then. There are now modules, cloud_endpoints and webapp2. What should be the good directory structure for my project which allows me to add/modify features easily.
For example I should be able to manage:
Modules.
Cron jobs.
Task queues.
Cloud endpoints.
I'd first take a look at modules, at least for these reasons:
modules really are in many respects (almost) equivalents to entire (single-module) apps in older docs/references, so once a module's position in the app's hierarchy is clarified various posts referencing an app-context can usually be extrapolated to just a module-only context.
nowadays an app can use different languages/sandboxes for different modules (see Run both Java and PHP on google app engine project) or even for different versions of the same module (see Google App Engine upgrading part by part)
Personally I'd stick with the recommended multi-module app structure - each module having its own directory, one level below the app's directory:
The app's top dir would hold the per-app configs (which aren't applicable to a particular module): dispatch.yaml, cron.yaml, index.yaml, and queue.yaml. Note that the cron jobs and task queues definitions belong here (but nothing stops you from routing/dispatching various cron jobs to various modules based on the requested paths).
I'd also place in the app's top level dir any files/directories I'd like to share across multiple modules in the DRY way. These files/dirs would be shared by a module by symlinking them inside the respective modules so that the module gets its own copy at deployment. Almost anything that can exist as a separate file or directory can be shared this way:
templates, images, scripts, CSS, macros, datastore models definitions, python modules - whatever you need
3rd party libs, for example How do I access a vendored library from a module in Python Google App Engine?
even portions of the module's .yaml configuration! for example: Do I need to copy `skip_files` across multiple YAML files?
Finally the recommended files/dir structure of a particular module may further depend on the module language/sandbox, the framework(s) used, the developer's style/preferences, etc. I don't think it's possible to provide a one-size-fits-all recommendation which would be effective/acceptable in all cases.
Endpoints are just RPC (strongly typed) versions of basic REST url's with the added advantage that they can be used to Generated client side libraries. So the endpoint config and definitions belong in the SAME directory as the module (ie mobile-backend) as their REST counterpart would. In other words, if you have (or would have) a REST endpoint in Module1 for "user login", then you should put the "user login" Endpoint in the module1 directory. Further, if you don't like the symlink approach, you can move your module1.yaml file UP one level and then that whole module can import from a "common" directory.
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.
How can I organize multiple Composite WPF applications so that they share a single Shell project but populate their module catalogs from different App.config files?
I am writing a suite of applications using Composite Application Guidance for WPF. Each application's functionality is determined by the availability of different modules, which are listed in the Shell's App.config. By giving each application a different App.config, I can specify which modules each application may use.
However I would like to share a single Shell project between all of the applications for common look and feel. Initially I created a Solution for each application, added the Shell project, and then added the relevant modules. The problem is that the common Shell project only has one App.config file, and I cannot change it on a per-Solution basis.
Populating the catalog through code does not avoid this problem--there would still be application-specific code in the Shell that must somehow be activated by the Solution I am using.
What I decided to do was to treat the Shell as its own module. Each application has its own solution and project, which contain the individual App.config files. They also have their own Bootstrapper classes. The Bootstrapper in each application instantiates the Shell.
Apart from hard coding modules, and loading modules from the configuration, you can also load modules dynamically from a given directory.
So to set up different "apps" that all use the same shell, I'd create a batch file that copies the right modules for each app to separate folders, thus creating the different applications.
The Composite Guidance Library documentation has more on setting up your project to load modules dynamically from a directory.