Javascript: What JS IDEs Could Learn From Delphi

What Javascript Code Editors 

Could Learn From Delphi

   The Delphi compiler has been around for a long time (1995, so 28 years) and produces a potentially object-oriented Pascal language code.  Delphi was at the fore front of Rapid Application Design.  Visual Programming that influenced Microsoft's Visual Studio's WinForms (Visual Basic and C#).  Anders Hejlsberg is still the head of Microsoft's C# team and was the chief architect of Borland's Turbo Pascal and Delphi compiler team.  At the moment in 2023, Delphi v12 is out as a paid version and Delphi v11 is the free community version.  

   The core thing that Javascript code editors could learn from Delphi is how to visually drag-and-drop the controls in a WYSIWYG fashion to the main screen.  For this example, we will assume that the developer wants to create a customer detail screen with a customer name field and a button.  So working on a Delphi screen works like this.  

Your main screen is blank (I pushed together to minimize the image size):

 

Right-click and choose "View as Text" to see the "code" of the screen/form:

 Behind-the-scenes, Delphi wrote this to the form's file.   (The commas were added to reduce the length. The original Delphi form is not even remotely a CSV):

object Form3: TForm3
  Left = 0, Top = 0, Caption = 'Form3', ClientHeight = 442, ClientWidth = 628, Color = clBtnFace,  Font.Charset = DEFAULT_CHARSET, Font.Color = clWindowText, Font.Height = -12, Font.Name = 'Segoe UI', Font.Style = [], TextHeight = 15

end

 

The screen to the right has a Palette with choices of control groups.  (I have cut off some of the control groups to reduce the image size):

 

In each control group is lots of controls:

 We will only concern ourselves with the Label, Edit and Button controls:

Now all we need to do is drag each control over the main screen called a form placing them where we want:

 Behind the scenes, Delphi adjusted the form's file to include the instances of the controls.  (The commas were added to reduce the length and blank lines between controls were added for readability.):

object Form3: TForm3
  Left = 0, Top = 0, Caption = 'Form3', ClientHeight = 442, ClientWidth = 628, Color = clBtnFace,  Font.Charset = DEFAULT_CHARSET, Font.Color = clWindowText, Font.Height = -12, Font.Name = 'Segoe UI', Font.Style = [], TextHeight = 15

  object Label1: TLabel, Left = 136, Top = 56, Width = 34,    Height = 15, Caption = 'Label1'
  end

  object Edit1: TEdit
    Left = 176,  Top = 53, Width = 121, Height = 23, TabOrder = 0, Text = 'Edit1'
  end

  object Button1: TButton
    Left = 168, Top = 88, Width = 75, Height = 25, Caption = 'Button1', TabOrder = 1
  end
end

Now click on the TLabel and a Object Inspector shows all the properties of that object (in this case a Label):

Now change the Caption property from Label1 to Customer Name and see that the main screen looks like this.

 and behind-the-scenes we are:

  object Label1: TLabel, Left = 136, Top = 56, Width = 34,    Height = 15, Caption = 'Customer Name'
  end

   A second thing that Javascript code editors could learn from Delphi is the idea of container parents.

 So imagine that we started over and instead added a panel first that the other controls would rest on like this:

 

 Now behind-the-scenes the controls are inside the panel:

object Form3: TForm3
  Left = 0, Top = 0, Caption = 'Form3', ClientHeight = 442, ClientWidth = 628, Color = clBtnFace,  Font.Charset = DEFAULT_CHARSET, Font.Color = clWindowText, Font.Height = -12, Font.Name = 'Segoe UI', Font.Style = [], TextHeight = 15

  object Panel1: TPanel
    Left = 8, Top = 8, Width = 273, Height = 137, TabOrder = 0

    object Label1: TLabel, Left = 136, Top = 56, Width = 34,    Height = 15, Caption = 'Customer Name'
     end

    object Edit1: TEdit
       Left = 176,  Top = 53, Width = 121, Height = 23, TabOrder = 0, Text = 'Edit1'
     end

   object Button1: TButton
      Left = 168, Top = 88, Width = 75, Height = 25, Caption = 'Button1', TabOrder = 1
    end

  end
end

Obviously this could help controls be inside <div> or other HTML tags.