Підбірка безкоштовних кросплатформенних середовищ для веб-розробки

Існує безліч способів писати код для веб-додатків: від текстових редакторів до хмарних середовищ розробки. Важко відразу вирішити, яке середовище краще підходить для поставлених завдань. Щоб заощадити вам час, вибрали найбільш популярні:

1. Текстові редактори.
2. Настільні інтегровані середовища розробки (IDE).
3. Хмарні IDE.

У кінці кожного розділу розміщена звідна таблиця, в якій можна наочно побачити порівняння функцій редакторів для веб-розробки. У статті розглянуті виключно безкоштовні кросплатформенні рішення, тому популярні проприетарні редактори ніби Sublime Text не увійшли до підбірки.

Текстові редактори для веб-розробки

Komodo Edit

Komodo Edit – скорочена версія Komodo IDE. Включає базові функції для створення веб-додатків. Крім того, підключаються розширення для додавання підтримки мов або корисних функцій на зразок компіляції LESS і SASS файлів.

Komodo Edit не виділяється серед інших редакторів як кращий, але підходить для повсякденної роботи, особливо при роботі з XML.

Основні можливості:

• мультимовність,
• автозавершення коду,
• спливаючі підказки,
• множинне виділення тексту,
• менеджер проектів,
• скини і набори значків,
• відстежування змін,
• швидка навігація по частинах редактора (commando),
• інтеграція з Kopy.io.

Bluefish

Bluefish – повнофункціональний редактор коду з наступними примітними особливостями:

• перевірка орфографії з урахуванням особливостей мови програмування,
• автозавершення коду,
• снипети,
• управління проектами,
• автозбереження.

Це гнучкий інструмент для веб-розробників, але дизайнерам, яким потрібний веб-орієнтований або WYSIWYG- редактор, не підходить.

Vim

Vim – розширена версія Vi, текстового редактора в UNIX. Він не був створений спеціально для редагування коду, але це виправляють численні розширення. Для вивчення цього редактора створили online- гру – Vim Adventures, а у нас вже підготовлена шпаргалка по основних командах Vim.

Основні можливості:

• нескінченна історія відміни,
• велика кількість плагінів,
• підтримка сотень мов програмування і форматів файлів,
• потужний пошук і заміна,
• інтеграція із сторонніми інструментами.

GNU Emacs

Як текстовий редактор Vi, GNU Emacs є присутнім в стандартній комплектації більшості систем Linux. Emacs складніше, але містить більше можливостей:

• режими редагування з урахуванням вмісту, у тому числі підсвічування синтаксису,
• документація з керівництвом для новачків,
• повна підтримка Unicode,
• гнучке налаштування з допомогою Emacs Lisp чи графічного інтерфейсу,
• додаткові можливості на зразок планувальника проектів, поштового і новинного клієнта, відладчика і календаря,
• система завантаження і установки розширень.

Adobe Brackets

Brackets – молодий текстовий редактор для веб-розробників, сфокусований на візуальних інструментах і підтримці препроцесорів, з відкритим початковим кодом. З його допомогою легко проектувати сторінку у браузері. Підходить для веб-дизайнерів і фронтенд-разробників.

Основні особливості :

• при редагуванні HTML- коду CSS- стилі елементів відображаються в спливаючому вікні для редагування на льоту,
• перегляд HTML- коду у браузері реалізований в реальному часі,
• імпорт зображень з PSD файлів можливий без Adobe Photoshop,
• вбудовані інструменти спрощують роботу з LESS і SASS файлами.

Visual Studio Code

Visual Studio Code – легкий, але потужний редактор початкового коду. У первинній конфігурації використовується для редагування коду на JavaScript, TypeScript і Node.JS, а за допомогою розширень підтримує C++, C#, Python і PHP.

Visual Studio Code не просто виконує автодоповнення, а робить це з розумом: за допомогою технології IntelliSense дописує назви об’явленнних змінних, функцій і модулів, а також робить посилання на відповідний розділ документації. Можлива відладка коду безпосередньо з редактора, запуск додатка для відладки і приєднання до запущених додатків.

Atom від Github

Atom – текстовий редактор з множиною налаштувань, але навіть із стандартною конфігурацією допомагає працювати продуктивно.

У Atom вбудований менеджер пакетів, за допомогою якого можна знайти, встановити і навіть створити власні пакети. Предустановлени чотири призначені для користувача інтерфейси і вісім синтаксичних тем в темних і світлих тонах. Також доступні теми, створені співтовариством.

Основні можливості:

• розумне автозавершення,
• файловий менеджер, за допомогою якого легко переглядати як окремі файли, так і цілі проекти,
• мультипанельний інтерфейс дозволяє розділити інтерфейс для зручності порівняння і редагування коду в декількох файлах,
• функція пошуку і заміни, попередній перегляд і заміна тексту в одному файлі або в проекті.

Порівняння текстових редакторів

викачати у форматі PDF

Настільні інтегровані середовища розробки (IDE)

Eclipse

Eclipse – це комплексне середовище для людей, які багато програмують на різних платформах і мовах. Можливість підключення різних плагінів дозволяє спростити розробку складних веб-додатків. Підтримує роботу з Java, JavaScript, PHP і іншими мовами, а також створення мобільних додатків.

NetBeans

IDE NetBeans – середовище з відкритим початковим кодом, світовою спільнотою користувачів і розробників. З її допомогою можна швидко і легко розробляти настільні, мобільні і веб-додатки на Java, JavaScript, HTML5, PHP, C/C++ і інших мовах.

Netbeans надає з коробки аналізатор і редактор коду на Java, а також ряд нових інструментів для HTML5 і JavaScript, у тому числі для Node.js, KnockoutJS і AngularJS.

NetBeans робить відступи, доповнює слова і дужки, робить синтаксичне і семантичне виділення початкового коду. З ним легко рефакторить код. Також NetBeans оснащен снипетами, порадами і генераторами коду.

Geany

Geany – компактне і легке середовище, яке підтримує HTML, XML, PHP і інші мови програмування. Основні можливості:

• підсвічування синтаксису,
• фолдинг (згортання коду),
• автозавершення коду,
• снипети,
• спливаючі підказки,
• мультимовність,
• таблиця символів,
• навігація за кодом,
• готова система для компіляції і виконання коду,
• управління проектами,
• інтерфейс, побудований на плагінах.

Light Table

Light Table – реактивне середовище для роботи з початковим кодом, яке грунтоване на простій ідеї: для програмування потрібне повноцінне робоче середовище, а не просто редактор і оглядач проектів. Для цього потрібно гнучке налаштування інтерфейсу: переміщення елементів і винесення потрібної інформації на передній план. Ці функції доступні в Light Table з коробки.

Порівняння IDE

викачати у форматі PDF

Хмарні IDE

Більшість десктопних застосувань перейшли в “хмару”, тому немає нічого дивовижного, що хмарні середовища також стають популярними серед програмістів. Не кожен відразу довіряє хмарним IDE, але популярні інструменти ніби Github і Pastebin допомагають звикнути до того, що початковий код зберігається не на локальній машині, а на сторонньому сервері.

Cloud9

Після декількох хвилин роботи в Cloud9 створюється враження, що потрапив в рай для програмістів. Інтерфейс написаний на JavaScript, а серверна частина – на NodeJS. Хоча Cloud9 уподобали розробники і дизайнери інтерфейсів, підтримується підсвічування синтаксису C#, C++, Python, Perl, Ruby, Scala і деяких інших мов.

Вбудований режим Vim – приємний штрих, як і підтримка популярних систем контролю версій на зразок Git, Mercurial і SVN. Завдяки наявності CSSLint і JSBeautify це одне з найкрасивіших середовищ розробки.

Система платна, але є безкоштовний тарифний план.

Codeanywhere

Ще один інструмент для створення додатків, який часто очолює списки кращих – Codeanywhere. Ця дружня хмарна IDE підтримує підсвічування коду HTML, CSS, JavaScript, PHP, MySQL і інших мов. Завдяки наявності додатків для iOS, Android і BlackBerry, за допомогою Codeanywhere програмісти працюють де завгодно.

Крім того, Codeanywhere підтримує Dropbox і SFTP, які допомагають легко створювати резервні копії файлів проекту і обмінюватися ними з колегами. Це не саме повнофункціональне середовище, але свою роботу виконує на відмінно.

Система платна, але є безкоштовний тарифний план.

Eclipse Che

Eclipse Che – хмарний робочий простір розробника і вбудована IDE. Che надає видалену платформу з відкритим початковим кодом для розрахованого на багато користувачів створення додатків.

Основні можливості:

• робочі простори, що включають середовища виконання і IDE,
• сервер робочих місць з RESTful веб-сервісами,
• хмарна IDE,
• плагіни для мов, платформи і інструменти,
• SDK для створення плагінів і складок.

Eclipse Che має два складання – розраховану на одного користувача і розраховану на багато користувачів. У першій немає компонентів, які надають мультиарендність і розмежування прав доступу. В цьому випадку сервер залишається без захисту, але для локальної розробки – це гарний вибір.

Розрахована на багато користувачів надає мультиарендність. Облікові записи користувачів і робочі місця ізольовані, а для реєстрації, управління і аутентифікації використовується механізм KeyCloak. Permissions API регламентують доступ до об’єктів на зразок просторів, стеків і організацій. Відомості про користувачів зберігаються у базі даних, що підтримує міграцію (PostgreSQL).

Neutron Drive

Створення універсального хмарного середовища IDE з нуля – серйозне завдання, тому розробники вважають за краще створювати проекти на базі готових рішень з відкритим початковим кодом. Neutron IDE грунтований на редакторові Ace code editor і об’єднує функції SFTP- клієнтів і браузерных редакторів, дозволяючи програмістам редагувати на льоту файли на своїх серверах з будь-якої точки світу.

Завдяки підтримці гарячих клавіш Vi і Emacs, що настроюються, а також візуальних тем TextMate, інтерфейс цього хмарного середовища гнучкий і адаптується під користувача.

Orion

Популярне середовище Eclipse Java IDE – надійна опора у світі розробки вже багато років. Orion – наступний крок, в якому досвід Eclipse перенесли в хмару. Поки більше застосовується для front – end, тому середовище обмежене здебільшого HTML і JavaScript, але робота йде, і функції додаються. Окрім підтримки Firebug, величезний плюс – інтуїтивно зрозумілий інтерфейс в стилі Eclipse.

Порівняння хмарних IDE

викачати у форматі PDF

Корисні посилання

• підбірка інструментів і ресурсів для веб-розробників, частина перша (дизайн, кодинг),
• підбірка інструментів і ресурсів для веб-розробників, частина друга (хостинг, обробка зображень, розширення, учбові ресурси),
• сканування і аналіз веб-сайтів: підбірка корисних сервісів,
• @rextester_bot – незвичайний Telegram- бот, який виконує фрагменти коду (підтримує 73 мови програмування).

А які редактори і середовища використовуєте ви? Поділіться своїм досвідом!

При підготовці використовувалися матеріали:“HTML Editors and Web Page Editors”,
“Best free web development IDE for JavaScript, HTML and CSS”,“Cloud IDEs For Web Developers – Best Of”.