-1

Some friends and I want to develop a web-based code editor. Kind of like Visual Studio Code but as a web-app and more plugin based. Right now we're unsure about our front-end architecture. We would like to use a framework like Angular and not have to develop in plain html and js because we think a professional framework would turn out to be more efficient.

Now because we want our editor to be heavily plugin based we need our frontend to be quite dynamic and allow the client to extend the application at runtime.

We're afraid of choosing the wrong architecture and then having to start over again, so we wanted to ask you guys if you have suggestions or tips.

If you have any further questions regarding the project feel free to ask me.

1
  • VS Code is an Electron app, so it’s already using web technologies. I would take a look at the code base for inspiration, or maybe you could even adapt it for the web.
    – RubberDuck
    Commented Sep 2, 2018 at 23:30

3 Answers 3

1

What are your plug-ins allowed to do? Interact with the GUI or add some non-visual functionality? Comparably, the second are (relatively) easier to manage but keep in mind that plug-in infrastructure requires very complex design.

Then, do your clients have the knowledge to write plug-ins? Do you expect them to write in Angular, etc. or you need to provide ability to write in pseudo-code?

How is the plug-in going to be loaded? In plain-script or in some intermediate form (eg. a binary library)?

Eventually you will have to make some decisions about the requirements and constrains of your plug-in system---so it's very likely you will make some "mistakes" especially if you haven't designed something like this before.

In terms of design, I would say you need to decide on the specs, the format, the loading/unloading, how parameters are going to be passed back and forth, etc.

In terms of programming, I would expect to see extensive use of interfaces.

In any case, get started...do not get lost in the desire to design every little detail on paper

1
  • Thanks for your answer! Currently, we think of Plug-ins being able to also extend certain GUI Parts. So both interact with GUI and add non-visual functionality. Clients should also be able to write their own plug-ins (No pseudo-code). Plug-ins are loaded in plain-script. (Here's the problem. Because Angular2 builds and packs the whole application I'm not sure if it would be possible to dynamically "inject" a plug-in component for example)
    – atalantus
    Commented Sep 2, 2018 at 10:50
1

Ever heard of user scripts? Browser plugins like Grease Monkey allow users to run their own javascript over the websites they visit on their own computers. It brilliantly side steps the "untrusted code" problem by letting people run their own code on their own computer.

What you'd need to do is design your web-app to provide the basic functionality and make it easily extensible so others can substitute your functions with theirs.

You can get the ball rolling by writing and publishing your own user scripts to supplement your basic web app.

0

I have done exactly this for my company's product. The web app is .NET Core Web API and Angular. The back-end extension point is a service implementing a contract, with some methods able to return HTML that is rendered in an IFRAME. Within the service methods, the plug-in writer can do whatever they like to interact with the app or other services, and they can create HTML using whatever templating engine suits them. Cross-window communication is via postMessage API. I'm not saying it's the best design ever, but it works for us. I have yet to see a plug-in architecture for Angular due to its build process, and I doubt one will ever exist.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.