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


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

  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”.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *