Cloud IDE for web programmers

Hello dear colleagues and friends! My name is Eugene, at the beginning of this article I will tell you about 4 cloud IDEs for web developers, and then about the new online development environment , which aims to combine the capabilities of the most powerful IDEs (for example: webstorm), simple Sublime Text design and new solutions .

Part 1. The world of online-IDE

In the field of cloud-based development environments, there are already many players, most of them either have already gone out of business, or have too limited capabilities compared to the offline IDE. Despite this situation, there are 4 products that have good functionality :

• Koding
• Cloud 9
• Shiftift
• Codeanywhere

Koding

The first impression of Koding is a pleasant one. Beautiful interface, soft colors. The ability to deploy a virtual machine with support for php, ruby, python, node.js and perl, which can be configured using the ssh terminal.

After a while I ran into problems. At first, I could not hide the panels that occupied the floor of the screen, then remove the terminal. It was not possible to add your ftp server, because there is no such function there, which is very surprising!

The source code editor itself is based on Ace-editor. It works smoothly, but it does not have all the features that are in offline-IDE (for example, smart auto-complete).

Koding has many social features. In it, you can join communities and share messages in a common feed, as well as participate in pair programming. At the moment, the product is still in the open beta version.

Koding is shareware and includes the following tariffs:



Conclusion: an interesting and beautiful IDE with social functions, without the possibility of adding your own ftp, with a virtual server deployment mechanism, a convenient way to manage projects, an incomprehensible interface and a little-functional source code editor. Link

Cloud 9

At the first start, Cloud9 offers to select or add a project. It can be created on the basis of a virtual server, ftp or ssh.



After that, a welcome window opens, on which the type of interface display (full ide, minimal editor, sublime text), the color theme and other settings are determined. On the left is a convenient file manager that supports drag & drob. The interface design looks standard, but aesthetically pleasing.

The workspace can be divided into several parts. For the source code, the Ace-editor is used. It is developed by the Cloud9 team. It is worth noting that the "Ace-editor" in their IDE has fewer bugs than the one that is in the public domain.

Cloud9 has such useful features as file search, Go to Symbol / command / line, image editor and file change history. It is also worth considering that its source code is in the public domain and anyone who wants it without a commercial purpose can run it on their server ( Link ).

When developing sites in this IDE, their result can be viewed in a separate interface block. This “preview” has one unusual feature, which is that the site can be virtually verified in different browsers and on different devices . This technology is provided by Sauce labs.



Cloud9 has a settings window in which you can change keyboard shortcuts, choose a theme for the editor’s coloring, choose the size of tabs, and so on. Recently appeared a bright interface theme in a flat style.

When working in it, I often encountered problems with braking the interface and freezing the system, and sometimes even the inaccessibility of the development environment, which negatively affects the speed of creating sites.

Cloud9 is shareware and has the following rates:



Conclusion: Cloud9 has a wide range of functions, instability and freezes, the ability to manage projects, create a virtual server, add ftp access, test sites in different browsers, on different devices, image viewer and a beautiful editor with a small set of functions. Link

Shiftift

At the first acquaintance with ShiftEdit, the outdated interface design from the era of Windows XP immediately catches your eye. This development environment supports ftp, sftp, google drive, dropbox, webdev, ssh and amazon s3. The file manager has not only standard features, but also a drad & drop mechanism.

The source code editor uses the free version of "Ace-editor" with its inherent bugs and poor features compared to the offline IDE. ShiftEdit has a code navigation panel and a live mode, which, unfortunately, I was not able to launch normally either a year ago or now.

In this development environment, there are many different settings: the action when opening images, the size of tabs and font in the code editor, security, and so on. To view the images used Pixir.

ShiftEdit is shareware and has the following rates:



Conclusion: this development environment is simple, has a heavy and slow interface, supports ftp, sftp, google drive, dropbox, webdev, ssh and amazon s3, incomprehensible live mode, a good file manager, and she uses a good, by the standards of online-IDE, Ace-editor. Link

Codeanywhere

Codeanywhere differs from its competitors in that it has applications for Android and iOS. Unfortunately, they are not well adapted to mobile platforms, as is their web version.

The IDE is shareware and has five tariffs.



It has a standard, but stylish interface, where everything is in place. In it, you can deploy the Development box for html5, node.js, php, ruby, c ++ and python. It supports sftp, ftp, ssh, drobbox and google drive, and its source code editor runs on “CodeMirror”. Like most web-editors, it does not have smart auto-complete, refactoring functions and other important and convenient offline offline features.

In the system, you can select the encoding, various editor options, determine which programming language to display the specific file format, specify the color theme from the three options, or create your own through the interface, change key combinations, and so on.

Conclusion: this product, unlike its competitors, uses CodeMirror for the source code editor, has a virtual server deployment function, supports sftp, ftp, ssh, drobbox and google drive, has a drag & drop file manager and an aesthetic interface. Link

Conclusion of the first part:the online-IDE market is developing slowly, its products are trying to use more and more advantages of online over offline, forgetting about the important features of the desktop IDE, such as smart auto-complete and code refactoring. Three of the four products have a dark design, so we can assume that this is a trend in the design of online-IDE. Most of the considered development environments support the ability to create a virtual server, drag & drop file manager, have a shareware business model and use the Ace-editor. Almost all online-IDEs are not adapted for mobile platforms, although this should be one of their advantages. Among the existing players, Cloud9 stands out the most, with its good code editor and the function of testing sites on any device.

In the following articles I plan to consider cloud-based development environments and desktop IDEs that are based on web technologies for specific metrics and criteria.

Part 2. Another online-IDE.

My name is Eugene, I am a web programmer (5 years old) and an interface designer (7 years old). At 15, he became interested in the topic of development environments, programming languages, and translation methods. At the age of 17, he created a full-fledged IDE with an interpreter for the Object Pascal language, and later conducted many experiments with compilers, programming languages ​​and java byte code.

It all started with the desire to speed up the process of my work , so for two years I studied new technologies, came up with ways to simplify coding, experimented with the interface and only then began to write the source code online-IDE.



The decision to create a development environment in the browser was made for five reasons:

1. Good knowledge of web technologies.
2. Easy implementation of an unusual interface.
3. The ability to open the IDE on any device and in any browser without installation.
4. The availability of effective tools on any mobile platform (for example, firebug not only on a PC, but also on a tablet).
5. Interserver computing mechanism that allows you to implement many interesting ideas.

Every day in my free time, I was engaged in its development and when I reached version 0.2 alpha, I began to build sites in it. So I was able to find many bugs and test in practice an unusual interface. I removed some solutions, added some, but over time it became clear that the project began to go beyond the scope of “just for fun”, programmers began to ask about it, and I decided to ask the IT community with questions , so that the product began to satisfy not only my needs, but also other web developers.

Before setting them, I want to talk about its purpose and the current results of its development.

Goal:create a cloud-based IDE for web programmers that would simplify and speed up their work by combining the capabilities of the most powerful IDEs (for example: webstorm), the simple design of Sublime Text and new solutions (the word "innovation" is already annoying).

Planned features:

• Smart auto-complete.
• Refactoring Functions
• Live mode (even with php files).
• DOM inspector with a console that can be used in any browser, including mobile devices.
• File version control.
• Support for sftp, dropbox, github and google drive.
• Advanced file manager.
• Ability to work with local files.
• Special interface for mobile devices.
• API for developing plugins.
• Support for multi-file snippets (for example, you decide to insert a slider on the main page of the site, and using multi-file snippet you can add not only a stub code, but also upload slider files to the site in automatic mode and insert links to them in the appropriate places source code).
• Repository of plugins and snippets.
• Modern technologies of simplified programming (emmet, easy motion, etc.).
• Convenient project management.
• Work with psd files.
• Pair programming.
• Deploy a server to test your code.
• Support for popular programming languages ​​and web technologies.
• Code generation functions.
• Simple, stylish and unusual interface that simplifies the work.
• Some useful social features, such as grouping.
• Simple image editor and image viewer.
• Implementation of interesting technologies based on cross-server computing (for example: source code analysis on the fly).

Now the architecture is ready, the basic functions of working with ftp and source code, as well as a simple and convenient project management mechanism. The system implements many unusual interface solutions that simplify the work a little. Projects remember open files, links in live mode, open ftp-servers and all folders opened in them. Ace-editor is taken as the basis of the source code editor, at the moment I am finalizing it in order to achieve the functions of smart auto-complete. In mr. Gefest has an initial version of live mode.



I’ll tell you more about the development environment and unusual interface solutions in the following articles, because at the moment I need to determine what minimum functionality you need as website developers so that you can use it effectively.

For1.0 alpha version I plan to finalize the interface and implement the following functions:

• Smart auto-complete for js, html, css, php.
• Standard and convenient file manager with version control and with support for sftp, github.
• A quick jump function for the key elements of the source code (tags, functions, classes, variables, etc., as in Subime Text).
• Full support for live mode.
• Advanced two-column file manager (in the style of total commander).

Therefore, please write a list of online-IDE functions that are important to you . At first, the most significant. For instance:

1. Smart auto-complete for js, html, css, php.
2. Standard and convenient file manager with version control and with support for sftp, github.
3. etc.

I hope that you will take this issue seriously, because your answers are important to me and the further development of this project .

PS: those who would like to help in the development or design of online-IDE, please write me a personal message, I hope that you will be found, because together we can do everything much faster.
PS 2: if you want to be the first to use the closed 1.0 alpha version of online-IDE, then write me your mail in the comments or in the format of a personal message.
PS 3: For its part, I want to thank HabrHabr for providing free corporate blog at the rate of "Startup", thank you very much!
PS 4: those who read article 30-31 of the day, “Happy New Year”, and those who> = January 1 - “Happy New Year 2015”!