
Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.
Існує безліч способів писати код для веб-додатків: від текстових редакторів до хмарних середовищ розробки. Важко відразу вирішити, яке середовище краще підходить для поставлених завдань. Щоб заощадити вам час, вибрали найбільш популярні:
У кінці кожного розділу розміщена звідна таблиця, в якій можна наочно побачити порівняння функцій редакторів для веб-розробки. У статті розглянуті виключно безкоштовні кросплатформенні рішення, тому популярні проприетарні редактори ніби 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”.
Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?
Дуже гарна стаття. Я вже скинув знайомим, а то вони кожного разу мене питають як що й до чого. Нехай самі читають та працюють. Особисто я не використовую денвер вже роки 4. Роботу провіряю прямо у браузерах, це довше, але надійніше. Для стилів теж не користуюсь емуляторами, все роблю напряму в браузері. Також юзаю тільки notepad++
Дякую за статтю. Дуже корисна, а головне безкоштовна інформація