Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

 
Advanced search

1378894 Posts in 65635 Topics- by 58001 Members - Latest Member: Nayth

July 06, 2020, 12:49:42 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperTechnical (Moderator: ThemsAllTook)Plurality - Modular Code Editor
Pages: [1]
Print
Author Topic: Plurality - Modular Code Editor  (Read 3331 times)
Gurigraphics
Level 0
***


Gurigraphics


View Profile WWW
« on: December 19, 2016, 07:37:17 PM »

Plurality - Modular Code Editor

Quote
"Typing the same code twice is work for robots. Each time you do that, humanity ceases to evolve - and you mainly".


The Files and Folders

The Star Wokstation (Xerox 8010 Information System) was the first operating system commercial window-based, incorporating various technologies that have become standard on personal computers: bitmapped display, a window-based graphical user interface, mouse (two-button), icons, folders, etc.

The key philosophy of the user interface was to mimic the office paradigm as much as possible in order to make it intuitive for users.

One of Star's top designers, Dr. David Canfield Smith, invented the concept of computer icons and the desktop metaphor in which the user would find documents and folders with different icons representing different types of documents.

With this paradigm, it was not necessary to open a text editor or graphic software to later open a text or graphic file. For, clicking on any icon would open the appropriate application to run the file.


The programmers and operators

File and folder icons are interesting for software operators: because they work in an office context.

For software programmers, more interesting is to know the content (the DNA) of these files: because they work in a laboratory context.


The black box and outside box

Plurality is a code editor that aims to abolish the organization focused on files and folders.

Files and folders, it is now like machine language, the black box of spaghetti that does not matter to most programmers.

Because, if the files of a project are all exported in a single folder, or hundreds of folders, or the whole file is a single file, such as an "apk" or "exe", this does not matter to the programmer.

After exporting the project, what matters most is performance. And performance can not be compromised by the way we are accustomed to writing code.

And so also is the code maintenance, which depends on an organized and scalable project, which does not necessarily have to remain attached to the Files and Folders paradigm.

In summary: the organization of the project can be done all inside the Code Editor. And, with much more useful, efficient and suitable visuals than the Files and Folders of 1981.


The visual and writing

My view is that "visual programming concept" can and should evolve much more and not be used just to "learn to code", nor be associated with something just for "beginner". To do this, need only a better implementation.

For example, Visual Basic uses this concept for interfaces only. Why have they never created visual modules for code? Why always rely on intellisense and keyboard shortcuts that no one remembers or uses?

Some examples of how visual programming is currently used:

Scratch



Stencyl



Google Blockly


Unreal Kismet - Blueprints Visual Scripting



The draft and example

An HTML5 example of how all this would work in practice:







A example: You created this block with this name:





Then you edited the block and now this is the full code:

Code:
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Plurality</title>  

  <link rel="stylesheet" href="css/style.css">

  <script src="js/jquery.min.js"></script>
    
</head>
<body>
<h1>Text</h1>
</body>
</html>

And you saved the block in this category: "html_game".


So when you search for the word "index" in the category:"html_game", this block will be available to be dragged to a new project.


The language and multi-language

You may notice that this virtually gives rise to a programming multi-language:

html_game_index

html_canvas

jquery_click

jquery_append

SDL_helloWorld

XNA_helloWorld

haxe_helloWorld

phaser_helloWorld



The blocks and arrays

This is another approach to represent the information:







In this example, the blocks are stored in arrays. This allows 1,000 layers for each module and in a small space.

The blocks and modules can be organized into categories:

- Search word (index) in the category (web page)
- Search word (index) in the category (My project XYZ that I made for company XYZ)
- Search word (controls) in the category (My game XYZ)

Quote
"This is code reuse truly intelligent".


The maintenance and example

A example of Lightning maintenance:

You have changed the website address of your company. And you need to edit the comments for each code page in 50 projects. Total 500 files.

If your projects have the "block" (header-comments) on all pages, when you change the content of (header-comments), this will change in all projects.

You only open the projects: update, export and you're done.

And the same to correct errors, improve something, make implementations, include new modules, etc.


The advantages and disadvantages

Modular programming: a new conception of programming organization: using arrays and modules rather than separate folders and files. Files are generated only at the end.
Lightning maintenance: When correcting a error, or improve a snippet of code, all blocks of the program can be changed simultaneously.
Matrix Blocks: allows you to store 1,000 items in little space. And Matrix Blocks inside Matrix Blocks can store infinite information.
End of spaghetti code: The modules and blocks to organization is more intuitive.
Reuse and share code: Code blocks allows full reuse of code. And you can also share your blocks.
Code lib: The editor becomes a code library. You do not need to be always consulting the documentation and external files. Your notes and code samples are saved in blocks in the editor itself.

The disadvantages are that there is nothing perfect for all cases. Better and worse depends on context and necessity. Now, there is always more suitable or appropriate.

Others

The name Plurality is because the idea is to use the same logic of arrays and blocks to also write music (like music trackers) and texts (like script editors).

This idea is inspired by Scratch - MIT Media Lab's, Google Blockly, Stencyl and other similar programs.

And the goal was to find a middle ground between written and visual programming.

The images presented are just to demonstrate the concept without having to write too much.

References

Xerox Star - https://en.wikipedia.org/wiki/Xerox_Star
Designing the Star User Interface - https://archive.org/stream/byte-magazine-1982-04/1982_04_BYTE_07-04_Human_Factors_Engineering#page/n243/mode/2up
Scratch - https://scratch.mit.edu/
Stencyl - http://www.stencyl.com/
Google Blockly - https://developers.google.com/blockly/
Introduction to Blueprints - https://docs.unrealengine.com/latest/INT/Engine/Blueprints/GettingStarted/


« Last Edit: December 21, 2016, 08:19:38 PM by Gurigraphics » Logged

Gurigraphics
Level 0
***


Gurigraphics


View Profile WWW
« Reply #1 on: December 21, 2016, 08:08:02 PM »

Updated the text. Now it's more clearer.
Logged

AaronB
Level 2
**



View Profile WWW
« Reply #2 on: December 22, 2016, 06:00:20 PM »

Updated the text. Now it's more clearer.
Now it's more clear.

With all higher level approaches to coding, there is going to be a trade off between rapidity and flexibility - and even then rapidity is lost when trying to overcome inflexibility.
Logged

Gurigraphics
Level 0
***


Gurigraphics


View Profile WWW
« Reply #3 on: December 22, 2016, 08:19:49 PM »

Quote
With all higher level approaches to coding,
there is going to be a trade off between rapidity and flexibility -
and even then rapidity is lost when trying to overcome inflexibility.

In some cases it may be true. But not at all.

The main problem is that it takes practical experience to understand the advantages of visual programming.

I've used Stencyl for more than 5 years, and now I realize better the difference between written and block programming.

Block programming is like thinking with blocks. Your mental capacity to develop solutions is much greater than that with code. It's as if you use less "ram memory" mental. Because the level of abstraction is much higher than "high level". Visual programming is like "super high level".

Speed is only compromised on specific issues of written text. For example, it is much faster to "CTRL + C / CTRL + V" to duplicate texts, than dragging blocks.


But what I try to point out is that visual programming should not be associated with anything just for beginner.

The paradigm: Can be advanced to create the code from scratch, but it is not smart to do this more than once.


A beginner who uses a very well-implemented script, he is a professional much more advanced than another that creates a jerry-rig from scratch, or loses all afternoon to try reinvent the wheel.

That is, are the "results", is the "solution of problems" that define what is advanced or beginner, efficient or only waste of time.

An argument against this is that with dragging blocks the person does not understand what he is doing, because he does not understand programming language.

It may be that does not understand the language, but understands the "logic of programming". And that's what more matters to develop a solution.

Also this is not very different from using functions of a framework that also was not developed by you.


Anyway, when they invented the writing they said the same: This will leave people without memory.

Truth. But, that's the way humanity goes.


And none of this is new. The Snippet is an example of the same thing, but very poorly implemented in the IDEs.

https://en.wikipedia.org/wiki/Snippet_(programming)

« Last Edit: December 22, 2016, 08:53:09 PM by Gurigraphics » Logged

Prinsessa
Level 10
*****


Ava Skoog


View Profile WWW
« Reply #4 on: December 23, 2016, 02:14:02 AM »

I dunno. In my experience visual programming is literally the same thing as written code, follows the same logic, is displayed in an analogous fashion and is indeed organised similarly. Blocks are just as fundamental to written code ('block' is indeed an actual term used for many programming languages). Especially your Stencyl screenshoots look to me like actual code with some extra clever syntax colouring/visualisation to me, not like something fundamentally visual that really differs from written code.

I've yet to see a visual system that isn't just basically written code with a fancy font, only you drag and drop snippets more than you type them out yourself (but code completion, which is a feature of most modern code editors, is basically the same thing). It may often imply more abstraction, but there's nothing stopping one from writing a written code library with the same level of abstraction.

So nothing wrong with such an approach, but IMO nothing superior about it either, like you imply. Code is code. Logic is logic. Maths is maths. So I don't really see much of a difference when it comes to just coding up some mechanics or core systems. Visual interfaces, however, might shine when it comes to a task or a problem that is fundamentally visual in itself, like node-based shader editors or a drag-and-drop way of connecting UI elements to functions to call on different events (like the editor in Xcode) or when connecting stuff in a scene (like Unity's inspectors).

I do think a modular multi-editor like this would be really cool, tho, if it could offer both visual and traditional editing tools. Like some of the old website software, like Dreamweaver, where both the code and a visual editor were available, and connected, so that an update in one implied an update in the other? That's actually very neat, especially for a beginner or learner.

With your system, I suppose there could even be three modes: raw code, "visual" code and an actual visual editor (which doesn't show nor look like code at all). Or you could just treat the "visual" code exactly like what I think it looks like: extra fancy syntax visualisation, and have those blocks appear around written code. Maybe a context-aware editor that limits your keywords.
Logged

Polly
Level 6
*



View Profile
« Reply #5 on: December 23, 2016, 04:54:26 AM »

In my experience visual programming is literally the same thing as written code, follows the same logic, is displayed in an analogous fashion and is indeed organised similarly.

This is a common misconception. Some visual programming environments offer something truly different to traditional coding. Take a look at this example ( running at 10fps for clarity ).



* When the program starts the script is triggered only once, which in turn activates a Timer once.
? Each Timer interval the "Enter" key is checked.
+ If "Enter" is pressed, the script breaks out of the Timer loop and sets the object to its final orientation.
- If "Enter" is not pressed, it waits for 2 frames and continues with the Timer.
~ When the Timer has completed the object is set to its final orientation.

Basically what this example does is rotate a object ( every other frame ) for a set amount of time unless you press the "Enter" key during that time, then the sequence is cut short and the object is put in its final orientation.

So instead of a entire program having a single "program counter", each script keeps track of what needs to be executed and therefore can even diverge .. so you have multiple sections of the same script executing. Not saying that you can't have a syntax-based language with a "goto here in 2 frames" ( and continue with the rest like normal ) command, but i'm not aware of any.
Logged
Prinsessa
Level 10
*****


Ava Skoog


View Profile WWW
« Reply #6 on: December 23, 2016, 05:25:13 AM »

That still seems to fall within the realm of a regular programming language to me, even if some of the particularities expressed here may not be present as such in those we are used to, tho I can definitely see parallels in stuff like coroutines. But sure, a chart like this can make a loop easier to grasp immediately than regular code. That's a good point. But I'd prefer it if I had a tool/editor that could visualise my loops like this by parsing my code than having to work like this entirely. Again with the dual Dreamweaver style editor. That's a cool thought.
Logged

Polly
Level 6
*



View Profile
« Reply #7 on: December 23, 2016, 06:21:15 AM »

That still seems to fall within the realm of a regular programming language to me, even if some of the particularities expressed here may not be present as such in those we are used to, tho I can definitely see parallels in stuff like coroutines.

It might seem similar, but being able to "map" your code to a unlimited amount of frame/time-aware interactive timelines changes things quite a bit. Anyway, just wanted to point out that not every visual language is simply a one-on-one visual representation of a existing text-based language.
Logged
Gurigraphics
Level 0
***


Gurigraphics


View Profile WWW
« Reply #8 on: December 23, 2016, 06:24:47 AM »

I'll answer first Prinsessa. I have not had time to read the rest yet.

Quote
I've yet to see a visual system that isn't just basically written code with a fancy font, only you drag and drop snippets more than you type them out yourself (but code completion, which is a feature of most modern code editors, is basically the same thing). It may often imply more abstraction, but there's nothing stopping one from writing a written code library with the same level of abstraction.

Thanks for the remarks. Very interesting.

Truth. In javascript, for example, "console.log(" hello world "); or" alert("hello world");.

That would be equivalent to any dragging block.

The main difference is that in the first case, you organize the information in your memory. In the second case, it is the editor who organizes this information.

The write code you need to remember what is "console.log", "alert", and what are the Arguments to the function, etc. And, until you memorize it, you will remain dependent on the documentation and updates of this documentation.

With blocks it is different, because they are organized into categories and the colors also represent categories. And if the function needs two arguments, the block has two spaces for arguments.

And if that is still not enough, clicking on the block has a help that displays the block code, usage details, and so on.

It's pretty much the same as Visual Studio does with Intellisense.

In both cases, it's like having the documentation inside the editor.

However, only one block you can not yet realize the advantage of this.

The advantage becomes clearer when you connect several blocks and create a behavior, which is a set of blocks. Or when you create something even more complex than that.

You can also do something similar with C / C +, C #, Java, etc., creating different classes.

The difference is that you will have a lot of files inside folders and will have to deal with the organization of this to have a project organized and expandable.

In the second case, you continue with everything inside the editor and organized by the editor. And not just the classes you are using in this project. But, all classes of all your previous projects.

Something you could also do in the traditional way, if you have memory an information organization level equivalent to the level of organization and memory of this editor.

I do not know if all this is clear, but it's the most I can explain with text.


Quote
I do think a modular multi-editor like this would be really cool, tho, if it could offer both visual and traditional editing tools. Like some of the old website software, like Dreamweaver, where both the code and a visual editor were available, and connected, so that an update in one implied an update in the other? That's actually very neat, especially for a beginner or learner.

This is the idea. Because it does not exist better for all cases. Defending one thing or another is just fanaticism. I do not intend to abolish code writing, because in many cases it is better.

The yellow images show a tab with only code. It's like a traditional editor. The difference is that the comments are used by the program to split the code page into modules.

Thus, blocks turn into code and code turns into blocks.

Write blocks is more faster to create and edit a function.
Visual blocks is more faster to order and sort these functions.

This is like using the left and right brain.

Quote
With your system, I suppose there could even be three modes: raw code, "visual" code and an actual visual editor (which doesn't show nor look like code at all). Or you could just treat the "visual" code exactly like what I think it looks like: extra fancy syntax visualisation, and have those blocks appear around written code. Maybe a context-aware editor that limits your keywords.

The idea is to create a Engine 2D multi-language. That I consider superior to cross-platform, because you can choose which framework and language is best to each type of game, not limited to a single framework or language.

How to do this?

The fundamental is to make block building as easy as possible so that developers of all languages can create and translate blocks.

But I'll start with something simple.

I'll use the Google Chrome Engine as the program's own server. Use PHP to create, edit and copy files. Twitter bootstrap for layout. Ace as code editor. The pages of the program will be PHP and HTML. The games are also tested in HTML5 in the program itself. And the program itself will used to build and edit itself. Because it's really Plurality: it's a software, website, editor, server, engine, and everything else it can be. And since it is a server, if necessary, it can also stay in the cloud.

I'm going to use as base a framework like Phaser, because it's very lightweight and Javascript is the script language more universal.

So a project with the "hello world" block can be exported to HTML5 with Phaser, Pixi.js, Cocos2d, or any HTML5 framework that has compatible blocks. Or export the project to EXE, with SDL, SFML, Allegro, XNA, etc. And so for mobile and any platform.

To compile, while we do not have everything built into this program, after having the code, this is possible to do in any other program.

Looking at the moon would be it. But much less than that is already good.

« Last Edit: December 23, 2016, 06:41:24 AM by Gurigraphics » Logged

Prinsessa
Level 10
*****


Ava Skoog


View Profile WWW
« Reply #9 on: December 23, 2016, 06:29:57 AM »

It does sound interesting! Would be cool to see a demo of someone getting something done in it if you ever get it working to that point. c:
Logged

Gurigraphics
Level 0
***


Gurigraphics


View Profile WWW
« Reply #10 on: December 23, 2016, 07:11:17 AM »

Quote
It might seem similar, but being able to "map" your code to a unlimited amount of frame/time-aware interactive timelines changes things quite a bit. Anyway, just wanted to point out that not every visual language is simply a one-on-one visual representation of a existing text-based language.

Well placed. There are a number of very unexplored possibilities.
This electronic programming like Arduino are good examples.
You just have to worry only about logic. Everything else is done and ready for use.

Quote
It does sound interesting! Would be cool to see a demo of someone getting something done in it if you ever get it working to that point. c:

The executable program with all these things I already have. The part of the blocks is still missing: the main one. ^ ^

But for now... In this video you can see what is possible to do in 20 minutes with Stencyl:



Logged

AaronB
Level 2
**



View Profile WWW
« Reply #11 on: December 23, 2016, 02:46:38 PM »

While watching the presentation on Stencyl I was struck by how many similarities there are with my own game engine.  I'm currently working on an engine that revolves around particles. I was surprised to see how many of the properties I associate with a particle are also associated for the tile based objects in Stencyl.

There is definitely an argument for abstracting visually to a certain level.
Logged

Gurigraphics
Level 0
***


Gurigraphics


View Profile WWW
« Reply #12 on: December 23, 2016, 04:54:49 PM »

Quote
While watching the presentation on Stencyl I was struck by how many similarities there are with my own game engine.  I'm currently working on an engine that revolves around particles. I was surprised to see how many of the properties I associate with a particle are also associated for the tile based objects in Stencyl.

There is definitely an argument for abstracting visually to a certain level.


Cool. Game Maker 2 also follows the same path:

Drag and Drop




Room Editor




Image Editor
https://www.youtube.com/watch?v=VRPln502FO4

Tileset Editor
https://www.youtube.com/watch?v=R0t9j82-438
Logged

Gurigraphics
Level 0
***


Gurigraphics


View Profile WWW
« Reply #13 on: June 24, 2017, 12:39:45 PM »

I created a functional demo with the ideas.



Logged

Raptor85
Level 5
*****



View Profile WWW
« Reply #14 on: June 25, 2017, 03:43:13 AM »

Modular programming: a new conception of programming organization: using arrays and modules rather than separate folders and files. Files are generated only at the end.

Modern C++ editors already do this, as do modern C# and Java IDE's, you normally don't see the individual files (the option is still there, of course)
Quote
Lightning maintenance: When correcting a error, or improve a snippet of code, all blocks of the program can be changed simultaneously.
Not sure how this is a feature, anyone writing anything in any Object Oriented language should really be questioning their code if this is an issue.
Quote
Matrix Blocks: allows you to store 1,000 items in little space. And Matrix Blocks inside Matrix Blocks can store infinite information.
most ide's have "code snippet" libraries either built in or as a plugin that pretty much do just this as you show in your video.
Quote
End of spaghetti code: The modules and blocks to organization is more intuitive.
you should never be writing spaghetti code in any modern language anyways, that was more of a C/VB/Pascal issue
Quote
Reuse and share code: Code blocks allows full reuse of code. And you can also share your blocks.
snippet libs, again, in any modern ide
Quote
Code lib: The editor becomes a code library. You do not need to be always consulting the documentation and external files. Your notes and code samples are saved in blocks in the editor itself.
all modern ide's already do this, though with external third party libraries you always run into the issue as to whether they bothered to provide documentation, this will be true no matter what tool you use.

Your tool kinda reminds me of a cross between stencyl and bluej, and i think it has somewhat of the same issues, you're trading off having to properly learn a language for having to properly learn a specific tool, and once you get past simple programs you spend SO much time configuring blocks it takes ages to make  even moderately complicated programs, which is why even in stencyl and unreal4 the more complicated logic is generally broken off into a .dll/.so plugin
Logged

Gurigraphics
Level 0
***


Gurigraphics


View Profile WWW
« Reply #15 on: June 25, 2017, 03:17:58 PM »

Quote
Modern C ++ editors already do this, modern C # and Java IDE's, you normally do not see the individual files (the option is still there, of course)

Yeah! That's why we do not need them. Because are just visual representations of code. A "square" can represent a file, and that may be enough, when "files" are also treated as objects.

Quote
Not sure how this is a feature, anyone writing anything in any Object Oriented language should really be questioning their code if this is an issue.

Replace code is done by a script language, and in any code: HTML, CSS, Javascript, etc.

Quote
Most ide's have "code snippet" libraries either built in or a plugin that pretty much just this as you show in your video.

But, they are not organized into categories. You need to use your "own memory" to know they exist.

Quote
you should never be writing spaghetti code in any modern language anyways, that was more of a C/VB/Pascal issue

If spaghetti code was a thing of the past nobody talk about it today. Javascript recently has introduced "require" to handle this.

Quote
snippet libs, again, in any modern ide

All without organization ...

Quote
all modern ide's already do this, though with external third party libraries you always run into the issue as to whether they bothered to provide documentation, this will be true no matter what tool you use.

My position is that documentation is part of the code, should not be separated or published on websites etc, and should be simplified and standardized like any language.

Quote
you spend SO much time configuring blocks

In this editor, you drop the code inside the block and you're done. Then, just search and drag.

In other visual editors, users do not even know what's inside the block. So this tools are always considered tools for beginners that do not even know what are doing.

However, not using visual programming when is this a possibility to makes the process more agile is also lack of intelligence, loss of time and energy.

Quote
you're trading off having to properly learn a language for having to properly learn a specific tool,

It does not take you 15 minutes to learn how to put code in a block.

Quote
it takes ages to make  even moderately complicated programs, which is why even in stencyl and unreal4 the more complicated logic is generally broken off into a .dll/.so plugin

I'd rather agree with Eric Elliott "Visual IDEs Will be the Norm".

I think that visual programming only not is norm because those that exist are not more practices that use code.
So they continue to write code in the traditional way. And this is not very different from continuing using punched card programming.
And it needs to evolve, and it will evolve, wanting or not.

I've used Stencyl for over 5 years, and I'm awareness of the positive and negative aspects of this strategy.
That's why I did not separate write and visual.
I created the editor for myself to use. And not to please anyone.
So, I have practical experience in both worlds and not just "opinion" and "guess".

I used this editor to create the editor itself. So I'm sure it's better than using simple code.
Mainly due to the drag and drop agility to refactor the code, by excellent organization and by the economy of "mental energy".
Otherwise I would not even be wasting time with it. I'd be using the IDEs that you think do the same thing.

Now anyone who prefers to continue using simple code for a lifetime can will continue.
No one needs to change your mind. Convincing myself through test and practice was enough to get up to the current version which has better usability than all the previous ones I've done.

Thanks for the criticism.
« Last Edit: June 25, 2017, 03:23:22 PM by Gurigraphics » Logged

Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic