Would an IDE with a flowchart view be practical? [closed]

Question

If the question title was a little too vague or confusing, I'm talking about something reminiscent of the Mindstorms NXT/EV3 IDEs. But the code editor, instead of having prefabbed generic blocks to work with, would use just boxes with code inside of them that links to other code.

I'm interested how this implementation might be accomplished because I don't know many languages that can be used like this.

Answer 1

This can work and this could be a terrible idea and it really depends on what you're trying to achieve.

Positive example: Arena is a simulation software that uses predefined blocks to create new simulations. This works great since the constructs are similar between any two simulations and working with a graphical tool is beneficial for that kind of work.

Negative example: I have developed software using a proprietary software created in an organization I worked at. You could write your on code, define it as a block, and then wire blocks together through a GUI.

Although this sounds good in principle there were a lot of issues, I'll write some of them here to let you get the feeling of how something like this could go horribly wrong:

1. You had to derive from a base class of the framework so the framework would recognize your class as a block. This created a dependency and made it such that you couldn't derive from any other class

2. To control the data flow, the data passed between blocks had to be a wrapper of the framework. Meaning that you couldn't pass the objects themselves but their wrapper (we also had type safely issues since these were not considered in the framework design)

3. The framework created the blocks using reflection (so it could wire the data and pass it around) , this meant that the ctor had to be default and there was no good way of creating a class.

4. Data sent from a block went to all those blocks connected to it. This created a problem where you would like to send some data to some blocks, but not others.

5. Testability became an issue, both integration tests (since creating the system is something that the framework has done) and since that blocks were "isolated" (the framework was the one did the wiring)

6. It was difficult to navigate the code (since block wiring was done in the framework configuration)

7. This made IOC and dependency injection a nightmare since an application built with an IOC has one composition root, meaning one block.

8. Changing the system so that it would work after the framework lost support was a nightmare (due to the above reasons).

Answer 2

If your intend is to make an IDE for presenting blocks of code for existing languages, this will not be very practical:

• first, flowcharts are more adapted to procedural languages and logic. This will not be so practical for object oriented languages.
• It's neither of much use for structured languages in which blocks of code can be deeply nested. This would lead to an unreadable chart if you'd present the nesting with transparency. Or it would lead to a loss of oversight, if the nested blocks are opaque and need to be opened to view their inside.
• then, when drawing a flow chart, you need much more space to present the same code sequentially. This will make navigating in your IDE very cumbersome.

There are however a few niche applications:

• simplified languages, used for educational purpose with children (e.g. Kind of BASIC with visual presentation of the control flow).
• functional languages where each function is a box, and parameter passing and returning value are links between the blocks. But again, real world complexity will give complex and unreadable diagrams, so consider again rather a more limited educational purpose.

Answer 3

“Would an IDE with a flowchart view be practical?” (Brian Lu Happyville101, 2017).

In 2002, the results of an empirical study show that visual programming may help a computer programmer develop computer programs (Menzies, 2002). Perhaps there are more recent empirical studies.

Personally I use a Petri Net diagram with a system for associating computer codes with Petri Net elements to develop JavaScript® programs for PDF form applications that use the Acrobat®/JavaScript API (Adobe, 2007; Chionglo, 2014; Flanagan, 2006). My IDE is PowerPoint® + Notepad® + Word® + Acrobat + Photoshop® and I find it practical. For diagrams I use PowerPoint, for forms I use Word and for codes I use Notepad (Adobe, 2012a; Microsoft, 2016; 2013a; 2013b). Sometimes I use Photoshop to “edit” images that I did not create (Adobe, 2012b).

I find this practical because I use the diagram to help me write JavaScript programs. After drawing the diagram and adding “annotations” to the shapes in the diagram and adding additional “annotations” into a form, I manually translate the “annotations” to a JavaScript program.

Any type of computer code can be associated with Petri’s net elements (Petri, 1973). In other words snippets of JavaScript, COBOL, VB, assembler, etc. can be associated with net elements – one or more than one computer languages at a time. In theory, any type of information can be associated with net elements – text, graphics, mathematical expressions, computer codes, etc. (Petri, 1973). Thus in theory you can use the same tools I am using to create other applications that run in other host environments.

References

Adobe Systems Incorporated. (2012a). Adobe Acrobat XI [software]. San Jose, California: Adobe Systems Incorporated.

Adobe Systems Incorporated. (2012b). Adobe Photoshop CS6 [software]. San Jose, California: Adobe Systems Incorporated.

Adobe Systems Incorporated. (2007). Adobe Acrobat SDK 8.1 JavaScript for Acrobat API Reference for Microsoft Windows and Mac OS. Edition 2.0, April 2007. San Jose, California: Adobe Systems Incorporated. Retrieved Aug. 3, 2010 from http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/js_api_reference.pdf.

Brian Lu Happyville101. (2017). Would an IDE with a flowchart view be practical? Software Engineering Stack Exchange. Retrieved on Apr. 2, 107 from Would an IDE with a flowchart view be practical?.

Chionglo, J. F. (2014). Net Elements and Annotations for Computer Programming: Computations and Interactions in PDF. Available at https://www.academia.edu/26906314/Net_Elements_and_Annotations_for_Computer_Programming_Computations_and_Interactions_in_PDF.

Flanagan, D. (2006). JavaScript: The Definitive Guide, Fifth Edition. Sebastopol, CA: O’Reilly Media Inc. Menzies, T. (2002). Evaluation issues for visual programming languages. In S. K. Chang (Ed). Handbook of Software Engineering & Knowledge Engineering, Vol. 2 Emerging Technologies. World Scientific Publishing co. Pte. Ltd., pp. 93 – 101.

Microsoft (2016). Notepad [software]. Redmond, WA: Microsoft Corporation.

Microsoft (2013a). PowerPoint 2013 [software]. Redmond, WA: Microsoft Corporation.

Microsoft (2013b). Word 2013 [software]. Redmond, WA: Microsoft Corporation.

Petri, C. A. (1973). Concepts of Net Theory. In Mathematical Foundations of Computer Science: Proc. of Symposium and Summer School, High Tatras, Sep. 3 – 8, 1973, pages 137 – 146. Math. Inst. of the Slovak Acad. of Sciences, 1973.