Brackets — Open Source IDE для веб-разработки от Adobe

    Очередным редактором HTML, CSS и JavaScript, написанным на HTML, CSS и JavaScript сейчас никого не удивишь. Однако есть несколько причин, по которым стоит обратить внимание на пока ещё совсем зелёный и молодой проект Adobe Brackets. Во-первых, его делает Adobe. Поддержка такой крупной корпорации значит очень много. Во-вторых, Open Source бывает разный. В случае с Brackets это правильный, настоящий Open Source — уровень открытости весьма и весьма высок. Проект был опубликован на Github в начале мая этого года, несмотря на то, что он ещё в совершенно младенческом состоянии. Бэклог проекта тоже открыт для всех — разработка ведётся по методологии scrum спринтами по 2.5 недели. В-третьих — дизайн и архитектура этого IDE заслуживают более подробного рассказа.



    Brackets задуман именно как интегрированная среда веб-разработки, а не просто редактор кода. Собственно редактор пока не имеет многих необходимых функций. Зато работа со многими файлами и тесная интеграция с браузером уже налажена. Основной принцип, лежащий в основе дизайна Brackets — минимализм и чистота интерфейса. Вместо того, чтобы плодить окошки и вкладки, Brackets позволяет редактировать связанные участки кода из разных файлов “не отходя от кассы”. Например, если подвести курсор к тегу, id или имени класса элемента в HTML-файле и нажать Ctrl+E (quick edit), фрагмент кода CSS, относящийся к этому элементу откроется здесь же в inline-редакторе. Внеся любые изменения, можно нажать Ctrl-E повторно, и фрагмент закроется. Всё. Точно так же можно перейти к определению функции в коде JavaScript из любого места, где эта функция вызывается.

    В будущем планируется интенсивно использовать и расширять такой способ работы, в том числе для документации и для графических инструментов — палитр, визуальных редакторов градиентов, изображений и т.д.

    Теперь об интеграции с браузером. Все изменения в коде мгновенно отображаются в соответствующем окне браузера. Можно в реальном времени подстраивать размеры, цвет и компоновку элементов. Так же, как и инструмент quick edit, эта функциональность пока в зачаточном состоянии, но разработчики делают ставку на максимальное расширение её в будущем — подсвечивать в окне браузера элемент, на котором установлен курсор в редакторе, переходить к коду элемента по щелчку в браузере, ставить точки останова в редакторе и отлаживать код в реальном времени.

    Вообще, по идеологии Brackets напоминают собравший недавно 316 тысяч долларов на Кикстартере проект Light Table, о котором уже писали на Хабре — способность видеть в реальном времени результаты любых правок, отвязка от файлов, как основного способа навигации по коду, в пользу смысловых блоков и функций, минималистичный интерфейс. Однако, в отличие от Light Table, Brackets сфокусирован исключительно на веб-разработке.

    Что у Brackets внутри? Текущая версия работает в виде нативного приложения для Windows и Mac. Обёртка для взаимодействия с ОС — Chromium Embedded Framework (CEF). Версии для Linux и веб-интерфейс — в планах на ближайшее будущее. Собственно редактор кода основан на Code Mirror. Уже можно писать расширения, хотя API наверняка будет меняться. Режим «живой разработки» в реальном времени пока работает только с браузером Chrome.



    Подведём итоги. Поддержка Adobe, интерес Open Source сообщества (2379 подписчиков на Гитхабе) в сочетании с узкой фокусировкой на веб-разработке, чистым и простым интерфейсом и ориентацией на скорость и удобство работы дают надежду на то, что значительные ресурсы будут сконцентрированы и направлены в нужное русло, а значит Brackets сможет развиваться очень быстро. Желание создать не текстовый редактор, кое-как приспособленный для работы над проектами из множества файлов, и не универсальную IDE, кое-как приспособленную к веб-разработке, а целостный инструмент, изначально предназначенный для этих целей, можно только приветствовать.

    С другой стороны, несколько странно для web-IDE выглядит отсутствие возможности работать через браузер, при том что под десктопной обёрткой Brackets — именно веб-приложение. Скорее всего это временная проблема, и к релизу Brackets будет работать и в браузере, и под Linux, и в облаке. В любом случае — это очень интересный проект, и к нему стоит присмотреться.

    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 55

      +4
      О да, мне нравится такой формат «живой разработки» для верстки, думаю я подружусь с ним.
        0
        Действительно, возможно этот проект даже станет родителем ide будущего (как концепция)

        Но мое личное мнение что пока рановато презентовать его массам, очень сыро, хотя и волнующе.
        +1
        opensource и adobe!?
          +7
          вполне ) и Flex SDK тоже
            +13
            У Adobe давно полно опенсорса.
          0
          Все вроде простенько, но тормозит почему-то.
          Использовать как полноценную IDE – вряд ли, сейчас по крайнем мере. Как текстовый редактор – Sublime 2 очень крут.
          Но, в целом, я рад, что появляется много продуктов такого рода со свежими идеями.
            +1
            Brackets пока вообще не предназначен для использования. Это очень ранняя preview — даже номера версии пока нет, есть только номера спринтов. Тем не менее, удобство quick edit прочувствовать уже можно. Кстати, у меня в виртуальной Win7 под Virtual Box на средненьком железе вроде не тормозило ничего.
              0
              Согласен. Ребята сделали хороший задел.
              У меня под макосью очень медленно отрабатывает рендеринг окна при резайзе, например. Но это, видимо, все оптимизируется.
              +1
              А давайте ещё Автокад на веб-технологиях напишем (ведь можно же уже), и будем удивляться чего как-то всё тормозит :)
                0
                На эту тему разработчиков уже спрашивали. Во-первых, они хотят, чтобы все, кто пользуется этой IDE, могли участвовать в её разработке. Во вторых, они считают, что «проблему с производительностью не получится решить, если просто опустить руки и сказать: „нативный код всегда быстрее“ (источник). Они обещают сделать всё возможное, чтобы Brackets работала как можно быстрее. По-видимому, Adobe весьма серьёзно воспринимает HTML5, как платформу будущего.
                  0
                  Ну да) Чего стоит их транслятор Flash-HTML5.
                    0
                    „нативный код всегда быстрее“
                    Ну, так это же правда! :)

                    Я могу представить, что можно оптимизировать и добиться приемлемой производительности на небольших файлах до нескольких тысяч строк. А что делать с большими по объёму файлами?
                    Так же, все наверное согласятся, что среды разработки, написанные на Java тормозят при большой нагрузке, что же тогда будет с JavaScript?
                    0
                      0
                      Это всё-таки Flash, а не тру-веб-апп: HTML+CSS+JS
                      0
                      Ну вот недавно попробовал PHPStorm(на java) и Komodo (на python) — последний не тормозит, в отличие от первого.
                    +1
                    Там BootStrap :)
                    Проект понравился, нужно делать модули под разные языки :)
                      0
                      Выглядит круто, но работает криво. У меня есть простенький сайтик с движком на jQuery. Он постоянно ajax-ит куда-то. Эти ajax запросы не проходят по файловой системе. Только если сайт хостится где-то. Так что толку от верстация чистого HTML не особо много. Разве что разделить обязанности дизайнера и кодера.
                      0
                      c9 же уже есть.
                        +1
                        Хотеть!
                          0
                          Перспективный проект. Буду следить за ним.

                          А нет ли плагинчика для PHPStorm «quick edit»?
                            0
                            Периодически просматриваю плагины, подобного не видел. Хотя сам бы не отказался.
                              0
                              В PHPStorm нет Floating mode для editor tabs. Пока не будет, сделать вряд ли получится.
                                +1
                                Есть плагин Instant HTML editing. И короткий ролик о том как работает.
                                  0
                                  Это не «quick edit», а «live edit» — но все же круто, спасибо.
                                  Я имел ввиду «если подвести курсор к тегу, id или имени класса элемента в HTML-файле и нажать Ctrl+E (quick edit), фрагмент кода CSS, относящийся к этому элементу откроется здесь же в inline-редакторе».
                                0
                                Выглядит интересно, даже интереснее чем Cloud9 когда я его первый раз увидел. Конечно по уроню работоспособности до Cloud9 далеко, но начало неплохое. Буду надеяться выгорит что-то хорошее.
                                  +4
                                  Давно про него знаю, Adobe как всегда в своем репуртуаре — для Mac/Win есть приложение, а Linux никому не нужен.
                                    0
                                    Обещают же вроде. Хотя, конечно, это и правда бесит.
                                    0
                                    Поигрался на маке.

                                    Резвый редактор, дизайн мне понравился, quick edit интересная фишка, но пока пользоваться немного непривычно (дело времени думаю).
                                    Сейчас слишком сырой, чтобы воспринимать его всерьез.

                                    PS: для моего переезда с espresso на brackets мне не хватает прямого редактирования файлов на ftp.
                                      0
                                      Не в обиду. Но Вы давайте переходите с редактирования файлов по ftp.
                                        0
                                        Понимаю, понимаю, что до хорошего это не доведет, но мне таааак лень выкачивать исходники, синхронизировать и тд.
                                          +1
                                          Скажете это, когда какой-нибудь крупный проект навернёте :)
                                            +2
                                            И как можно навернуть проект просто редактируя по ftp?
                                              0
                                              Да как и на локале, скобку не там поставил/случайно символ какой-то ввёл в неположенном месте — проект умер в конвульсиях. (:
                                                0
                                                так причем здесь разработка «на бою»?
                                                  0
                                                  Править проект на живом, вот это действительно плохо. А у больших проектов всегда есть дев сервер.
                                                +1
                                                «Крупный проект» — это какой? Примерные характеристики можно?
                                                  +2
                                                  Тот, за который по башке сильнее дают.
                                                    0
                                                    Золотой ответ :)
                                                      0
                                                      А если мне не дает никто по башке за мои же проекты они не могут стать крупными?
                                                        0
                                                        Могу вызваться добровольцем, дабы помочь вам взрастить проекты!
                                                0
                                                А можно с этого места поподробнее? В чем так плохо редактирование на фтп с последующим выкачиванием проекта в конце дня например?
                                                  0
                                                  1) в возможных конфликтах;
                                                  2) невозможности откатиться, если случайно вылил не то что нужно, или настройки локального и удаленного сервера отличались, а вы об этом забыли;
                                                  3) очень большие проблемы (слияние), если работает над проэктом > 1 человека;

                                                  Это как минимум и вполне достаточно, имхо, для понимания.
                                                0
                                                вот я пробовал с espresso перелезть на sublime text 2 — в итоге вернулся обратно.
                                                не смог настроить привычное форматирование css-синтаксиса и не хватало привычных «сахарков» эспрессовых…
                                                вот еще бы они механизм search&replace прокачали (чтобы можно было искать в выделенном фрагменте и в файлах проекта или открытых файлах…)

                                                а brackets очень сырой и функционально бедный. хотя задумка интересная.
                                                0
                                                Live отладчик просто супер! Теперь все дримеры будут счастливы.
                                                  0
                                                  Очень понравилась идея, однозначно в этой IDE есть будущее.
                                                    0
                                                    К Идее кстати тоже есть интересный плагин blog.jetbrains.com/webide/2012/05/whats-cooking-instant-htmlcss-editing-preview/

                                                    Позволяет сразу видеть изменения в браузере. Но тоже в глубокой альфе
                                                      +1
                                                      … Но помни, когда шаблон будет свёрстан и перенесён на любую CMS, Brackets превратится в тыкву!
                                                        0
                                                        У меня он не находит хром, когда жму Experimental Build.
                                                          0
                                                          И жаль, что пока что нет автодополнения в css.
                                                          0
                                                          А как работать с сайтом, который уже работает на сервер сайде?
                                                            0
                                                            Это даже не альфа, всё ещё допилят.
                                                              0
                                                              Я понимаю что это не альфа, но возможно ли это будет сделать? Ибо это нетривиальная задача и я даже не представляю, как ее организовать.
                                                            0
                                                            Темы для подсветки кода есть? Кириллица отображается отвратительно (win7 hp)

                                                            Only users with full accounts can post comments. Log in, please.