22 июля 2015 в 10:43

Новый механизм вкладок для облачной IDE







Содержание




Введение



О mr. Gefest
Mr. Gefest — это облачная IDE-все в одном (объединяет функции нескольких программ) для веб-разработчиков. Её цель — уменьшить ежедневное рабочее время при создании сайтов на 2-4 часа. Для этого мы переосмысляем каждый механизм, технологию и элемент IDE, осуществляя их глубокий анализ, не зацикливаясь на устоявшихся убеждениях, чтобы сделать mr. Gefest’а максимально удобным и эффективным. С каждым релизом мы становимся все ближе и ближе к достижению поставленной цели проекта (уменьшить ежедневное рабочее время при создании сайтов на 2-4 часа).


В современном мире нам ежедневно приходится сталкиваться с интерфейсами, которые либо развиваются в направлении «красивостей» без функциональности, либо с функциональностью без удобств.

На начальном этапе разработки mr. Gefest’а я заложил в него несколько правил. В одном из них говорится: «Создавать только функциональные, удобные и эстетичные элементы интерфейса».

Следовать данному правилу непросто. Иногда приходится полностью изменить какой-то элемент интерфейса, на который потратили несколько недель, потому что на этапе тестирования (при создании сайтов в mr. Gefest’е) он не упрощал работу веб-разработчиков достаточно сильно.

Механизм вкладок является одним из часто используемых элементов UI в средах разработок. Несмотря на то, что все реализации данной технологии обладают множеством недостатков, их до сих пор никто кардинально не изменял. По этой причине мы решили переосмыслить его концепцию и создать самый эффективный механизм вкладок.

В данной статье мы рассмотрим существующие механизмы вкладок у Cloud9, PHPstorm, Sublime Text3 и Bracket, их недостатки и преимущества, а также расскажем о реализованном решении в mr. Gefest’е.

Часть 1. Механизмы вкладок у существующих IDE.



Cloud9




У Cloud9 вкладки находятся в двух местах: над текстовым редактором и над файловым менеджером. При открытии большого числа файлов невозможно прочитать их имена и нельзя узнать их полный путь. На панели над текстовым редактором присутствует кнопка для открытия списка файлов. У всех вкладок, кроме текущего (текст в правом нижнем углу), невозможно узнать используемый синтаксис.

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

Преимущества:
  • обладает привычной реализацией;
  • есть два способа работы с вкладками;
  • присутствует кнопка «Закрыть» у каждой вкладки;
  • имеется кнопка «Создать файл» на панели над текстовым редактором;


Недостатки:
  • не информативен;
  • занимает много места;
  • неудобно одновременно работать с вкладками и файловым менеджером;
  • при открытии большого числа вкладок и при работе через панель над текстовым редактором невозможно прочитать их полные имена;
  • механизм вкладок сокращает размер файлового менеджера;
  • нет предпросмотра файла;
  • кнопка «Создать файл» занимает дополнительное место на панели «Вкладки»;
  • невозможно узнать сокращенный путь до файла у всех вкладок сразу;
  • сложно выбрать конкретную вкладку из нескольких, когда они имеют одинаковые имена файлов, потому что неизвестно их местоположение;


Bracket




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

Преимущества:
  • имена вкладок отображаются полностью;
  • присутствует простота передвижения по вертикальному списку;
  • имя и расширение имеют разный цвет (у открытых файлов);
  • появляется кнопка «Закрыть» при наведении на вкладку;


Недостатки:
  • реализация данного механизма не информативна;
  • недостаточно удобно одновременно работать с вкладками и файловым менеджером;
  • иногда не вмещаются полные имена файлов;
  • непривычность реализации;
  • механизм вкладок сокращает размер файлового менеджера;
  • нет предпросмотра файлов;
  • не указан используемый синтаксис у всех вкладок;
  • невозможно узнать сокращенный путь до файла у всех вкладок сразу;
  • сложно выбрать конкретную вкладку из нескольких, когда они имеют одинаковые имена файлов, потому что неизвестно их местоположение;


Phpstorm




У данной IDE механизм открытых файлов реализован в виде горизонтальной панели над текстовым редактором. И он имеет свою изюминку. Когда панель полностью заполнена вкладками и Вы открываете новый файл, то самая старая из них закрывается. С одной стороны — удобно, с другой — нет. А если надо открыть вкладку, которая удалилась из данной панели?

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

Все вкладки недостаточно информативны и имеют только сложные иконки, указывающие на их расширения.

Преимущества:
  • обладает привычной реализацией;
  • у каждой вкладки есть изображение, показывающее его расширение;
  • использует необычный способ работы с вкладками при их большом количестве;
  • все открытые файлы имеют кнопку «Закрыть»;


Недостатки:
  • недостаточно информативен;
  • занимает две панели;
  • старые вкладки приходится повторно открывать через файловый менеджер (потому что автоматически удаляются с панели вкладок);
  • сложно выбрать конкретную вкладку из нескольких, когда они имеют одинаковые имена файлов, потому что неизвестно их местоположение;
  • количество вкладок зависит от разрешения экрана;
  • нет предпросмотра файла;
  • невозможно узнать сокращенный путь до файла у всех вкладок сразу;


Sublime Text 3




Разработчики ST3 стараются улучшить свой механизм вкладок. Об этом говорит их нововведения в ST3, которых не было в ST2.

В интерфейсе он занимает две панели: левую, где приходится прыгать от вкладок к файловому менеджеру, и правую над текстовым редактором.

Вкладки на обеих панелях мало информативны. Синтаксис текущего файла отображается в виде текста без иконки на небольшой панели (под текстовым редактором), на которую редко обращаешь внимание. У остальных вкладок идентифицировать используемый синтаксис невозможно. При длительном удерживании указателя мыши над элементами рассматриваемого механизма иногда можно узнать полный путь до них.

На верхней панели расположены три кнопки: два переключателя, которые позволяют перемещаться по скрытым вкладкам, и кнопка для просмотра полного списка открытых файлов.

Преимущества:
  • присутствуют разные варианты расположения вкладок;
  • отображаются полные имена открытых файлов;
  • имеется кнопка «Закрыть» у каждой вкладки;
  • переключатели для перехода между скрытыми вкладками;


Недостатки:
  • располагает недостаточно информативными вкладками;
  • механизм открытых файлов занимает много места в интерфейсе;
  • нет предпросмотра файла;
  • неудобно работать с ФМ и вкладками на одной панели;
  • путь до файла не всегда отображается;
  • сложно выбрать конкретную вкладку из нескольких, когда они имеют одинаковые имена файлов, потому что неизвестно их местоположение;
  • невозможно узнать сокращенный путь до файла у всех вкладок сразу;


Часть 2. Результаты исследования.



Отобразим результаты исследования в сравнительной таблице:

IDE ПРЕИМУЩЕСТВА НЕДОСТАТКИ
Cloud9
  • обладает привычной реализацией;
  • есть два способа работы с вкладками;
  • присутствует кнопка «Закрыть» у каждой вкладки;
  • имеется кнопка «Создать файл» на панели над текстовым редактором;

  • не информативен;
  • занимает много места;
  • неудобно одновременно работать с вкладками и файловым менеджером;
  • при открытии большого числа вкладок и при работе через панель над текстовым редактором невозможно прочитать их полные имена;
  • механизм вкладок сокращает размер файлового менеджера;
  • нет предпросмотра файла;
  • кнопка «Создать файл» занимает дополнительное место на панели «Вкладки»;
  • невозможно узнать сокращенный путь до файла у всех вкладок сразу;
  • сложно выбрать конкретную вкладку из нескольких, когда они имеют одинаковые имена файлов, потому что неизвестно их местоположение;

Bracket
  • имена вкладок отображаются полностью;
  • присутствует простота передвижения по вертикальному списку;
  • имя и расширение имеют разный цвет (у открытых файлов);
  • появляется кнопка «Закрыть» при наведении на вкладку;

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

Phpstorm
  • обладает привычной реализацией;
  • у каждой вкладки есть изображение, показывающее его расширение;
  • использует необычный способ работы с вкладками при их большом количестве;
  • все открытые файлы имеют кнопку «Закрыть»;

  • недостаточно информативен;
  • занимает две панели;
  • старые вкладки приходится повторно открывать через файловый менеджер (потому что автоматически удаляются с панели вкладок);
  • сложно выбрать конкретную вкладку из нескольких, когда они имеют одинаковые имена файлов, потому что неизвестно их местоположение;
  • количество вкладок зависит от разрешения экрана;
  • нет предпросмотра файла;
  • невозможно узнать сокращенный путь до файла у всех вкладок сразу;

Sublime Text 3
  • присутствуют разные варианты расположения вкладок;
  • отображаются полные имена открытых файлов;
  • имеется кнопка «Закрыть» у каждой вкладки;
  • переключатели для перехода между скрытыми вкладками;

  • располагает недостаточно информативными вкладками;
  • механизм открытых файлов занимает много места в интерфейсе;
  • нет предпросмотра файла;
  • неудобно работать с ФМ и вкладками на одной панели;
  • путь до файла не всегда отображается;
  • сложно выбрать конкретную вкладку из нескольких, когда они имеют одинаковые имена файлов, потому что неизвестно их местоположение;
  • невозможно узнать сокращенный путь до файла у всех вкладок сразу;



Проанализировав таблицу, мы вывели два типа вкладок:
  • горизонтальный список вкладок над текстовым редактором;
  • вертикальный список открытых файлов в левой панели;


Они обладают следующими преимуществами и недостатками:

Механизмы вкладок ПРЕИМУЩЕСТВА НЕДОСТАТКИ
горизонтальный список вкладок над текстовым редактором
  • обладает привычной реализацией;
  • у вкладок присутствует кнопка «Закрыть»;
  • в редких случаях у каждой вкладки есть изображение, указывающее на его синтаксис или формат файла;

  • при большом количестве файлов невозможно прочитать их полные имена;
  • в большинстве случаев не указан синтаксис сразу у всех открытых файлов;
  • вместимость вкладок, при которой видно их полное имя, зависит от разрешения экрана;
  • дополнительный список всех открытых файлов не информативен;
  • занимает 1-2 панели в интерфейсе;
  • нельзя узнать путь до файла у каждой вкладки сразу;
  • нет возможности предпросмотра файла;
  • сложно выбрать конкретную вкладку из нескольких, когда они имеют одинаковые имена файлов, потому что неизвестно их местоположение;

вертикальный список открытых файлов в левой панели
  • чаще всего имена вкладок отображаются полностью;
  • простота передвижения по вертикальному списку;
  • в редких случаях имя и формат файлов имеют разный цвет;
  • у каждой вкладки имеется кнопка «Закрыть»;

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



Часть 3. Новый механизм вкладок.



Мы решили перестать мириться с данной ситуацией и попробовать создать новое решение.



Новый механизм не только необычный, но и удобный, красивый и эффективный. Это один из тех элементов интерфейса, который развивался в течение нескольких месяцев. Он никогда не удалялся, потому что все это время улучшал производительность при разработке сайтов.



Данный механизм вкладок красиво входит в область, где должно быть главное меню (у нас его нет, но это уже другая история), а не занимает дополнительное пространство. Это позволяет увеличить место для текстового редактора, что в случае с дополнительными панелями браузера очень выгодно. Такой способ отображения не захламляет интерфейс, но при это позволяет увидеть все необходимое: текущий открытый файл и его синтаксис.

В интерфейсе mr. Gefest'а мы объединили три функциональные части (вкладки, работу с файлом и выбор синтаксиса) в один логический блок, так как их функции часто пересекают друг с другом при разработки сайтов.



При наведении мышки на иконку «Документ со стрелкой» появляется меню «Работа с файлом». Через которое можно создать новый файл, сохранить его или обновить (загрузив с сервера снова). Как видно, функции разделены по цветам, которые четко разграничивают назначение и по смысловой нагрузки тона совпадают с тонами контекстного меню файлового менеджера (это тоже отдельная история).

Мы стараемся достичь единого информационного поля для каждого элемента интерфейса, пересекая их окраски (цветовые, текстовые и другие) таким образом, чтобы работа с интерфейсом была на непостижимом интуитивном уровне.



Выбор необходимого синтаксиса для открытого файла теперь стал очень простым. Вам не придется искать его в длинном списке запутанного главного меню или через панель текстового редактора.

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



При наведении на новый механизм открывается список вкладок, поиск по ним и блок часто используемых открытых файлов.

Выглядит стильно, минималистично и футуристично. Отображает всю необходимую информацию.

При открытии данного списка в поле поиска отображается текущая вкладка, но как только вы на неё нажмете — текст пропадет и Вы можете вводить название любого открытого файла. Это позволит моментально найти нужную вкладку, когда у Вас их очень много! Если Вы нечего не ввели в указанное поле, то имя текущей вкладки возвращается.



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

Кроме того, у каждого открытого файла есть специальная кнопка «Закрепить/Открепить». Она позволяет прицепить конкретную вкладку в блок «Часто используемое». Так что, популярные файлы всегда под рукой!



Каждая вкладка обладает всей важной информацией:
  • имя файла;
  • две последние папки до файла;
  • синтаксис;
  • полный путь до файла;


Иконка синтаксиса сделана не в виде какого-то сложного изображения, а цвета и текста. Этот хитрый прием после 1-3 часов работы в среде разработки позволяет ассоциировать цвет с конкретным синтаксисом. Такой подход дает Вам возможность выбирать вкладку не только по названию, а ещё по синтаксису. Цветовые тона используемых языков программирования во вкладках полностью идентичны тонам в блоке выбора синтаксиса.

Указание двух последних папок у каждой вкладки позволяет видеть различия у открытых файлов с одинаковыми названиями.

При наведении мышкой на конкретную вкладу, вместо имени синтаксиса начинает отображаться кнопка «Закрыть», полный путь до файла и иконка «Глазок».

Последняя папка полного пути выделяется жирным шрифтом, а имя файла в ней отображается черным цветом.

Если наведёте мышку на иконку «Глазок» у вкладки, то сможете увидеть его содержимое в текстовом редакторе без его открытия. Так можно быстро просмотреть каждый файл.

У данного механизма вкладок есть один заметный недостаток — непривычность, которая исчезает за час работы в mr. Gefest'е.

А вот преимуществ гораздо больше:
  1. Можно увидеть полный путь до файла у любой вкладки;
  2. Не занимает много пространства в интерфейсе;
  3. У каждой вкладки отображаются её полное имя, синтаксис и две последние папки до неё;
  4. Можно посмотреть содержимое файла без его прямого открытия (через специальную кнопку);
  5. Всю важную информацию о файле можно легко увидеть даже при открытых 50+ вкладках;
  6. Обладает поиском вкладки по имени;
  7. Самый простой и интуитивный способ выбора синтаксиса
  8. Блок часто используемых вкладок позволяет при открытии большого числа файлов и при использовании только некоторых из них, переходить между ними без длительного поиска;
  9. Возникает ассоциация между цветом и синтаксисом файла;
  10. Имеется кнопка «Закрыть» у каждой вкладки;
  11. Выбор синтаксиса, работа с файлом и вкладками объединяются в один логический блок;
  12. Две последние папки позволяют различать вкладки с одинаковыми именами;


А теперь посмотрим на сравнительную таблицу трех механизмов вкладок:

Механизмы вкладок ПРЕИМУЩЕСТВА НЕДОСТАТКИ
горизонтальный список вкладок над текстовым редактором
  • обладает привычной реализацией;
  • у вкладок присутствует кнопка «Закрыть»;
  • в редких случаях у каждой вкладки есть изображение, указывающее на его синтаксис или формат файла;

  • при большом количестве файлов невозможно прочитать их полные имена;
  • в большинстве случаев не указан синтаксис сразу у всех открытых файлов;
  • вместимость вкладок, при которой видно их полное имя, зависит от разрешения экрана;
  • дополнительный список всех открытых файлов не информативен;
  • занимает 1-2 панели в интерфейсе;
  • нельзя узнать путь до файла у каждой вкладки сразу;
  • нет возможности предпросмотра файла;
  • сложно выбрать конкретную вкладку из нескольких, когда они имеют одинаковые имена файлов, потому что неизвестно их местоположение;

вертикальный список открытых файлов в левой панели
  • чаще всего имена вкладок отображаются полностью;
  • простота передвижения по вертикальному списку;
  • в редких случаях имя и формат файлов имеют разный цвет;
  • у каждой вкладки имеется кнопка «Закрыть»;

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

вкладки в mr. Gefest
  • Можно увидеть полный путь до файла у любой вкладки;
  • Не занимает много пространства в интерфейсе;
  • У каждой вкладки отображаются её полное имя, синтаксис и две последние папки до неё;
  • Можно посмотреть содержимое файла без его прямого открытия (через специальную кнопку);
  • Всю важную информацию о файле можно легко увидеть даже при открытых 50+ вкладках;
  • Обладает поиском вкладки по имени;
  • Самый простой и интуитивный способ выбора синтаксиса
  • Блок часто используемых вкладок позволяет при открытии большого числа файлов и при использовании только некоторых из них, переходить между ними без длительного поиска;
  • Возникает ассоциация между цветом и синтаксисом файла;
  • Имеется кнопка «Закрыть» у каждой вкладки;
  • Выбор синтаксиса, работа с файлом и вкладками объединяются в один логический блок;
  • Две последние папки позволяют различать вкладки с одинаковыми именами;

  • не привычность



Как видно из таблицы, механизм вкладок от mr. Gefest’а опережает аналоги по преимуществам.

Мы понимаем, что с первого взгляда Вы можете агрессивно отнестись к данному нововведению, но мы надеемся, что перед тем как это сделать, дождётесь доступа, где Вы сможете все это использовать на практике и после этого уже сформулируете окончательный вывод, потому что его эффективность проверена при реальной разработки сайтов нами и пользователями облачной IDE mr. Gefest.

В каждый элемент mr. Gefest'а мы вкладываем свою душу и энергию, стараясь сделать новые и эффективные технологии, анализируя большое количество программ (как современных, так и давно устаревших) и проводя множество разного рода моделирований. Надеемся, что Вы почувствовали нашу энергию и зарядились её.

Всем желаем продуктивной и интересной работы!

Важная информация! Сейчас мы ищем надежных партнеров для нашего продукта, в особенности Российских хостинг провайдеров. Пишите пожалуйста на email: support@gefest-ide.com

Автор: @Teadon
mr. Gefest
рейтинг 68,94
Создаем облачную IDE мечты для веб-разработчиков.

Комментарии (6)

  • 0
    В Sublime Text 3 есть функция Go To Anything (Ctrl + P), которая в значительной степени реализует ваш функционал.

    Поддерживаете ли вы переходы между вкладками по Ctrl + Tab, Ctrl + Shift + Tab, Ctrl + %d? Если да, то как реализована логика перехода, если порядок вкладок постоянно меняется без непосредственного участия пользователя?

    Сортируете ли вы как-то прикреплённые вкладки на основании данных использования? Есть ли ручная сортировка?
    • 0
      Спасибо за грамотный комментарий! Про Go To Anything знаю, но это не вкладки, а больше поиск по файлам, в котором всегда есть имя файла и его полный путь и нет предпросмотра, часто используемого блока и указания синтаксиса.

      Врать не буду, переходы между вкладками ещё не успели добавить. Порядок вкладок в обычном списке не меняется. В часто используемом блоке отображаются вкладки, которые чаще всего используются (+ ручное прикрепление) и сейчас они имеют тот же порядок вывода, что и в левой части вкладок.

      Над сортировкой ещё работаем, там будет выбор из нескольких вариантов, в которых стараемся учитывать мнение пользователей. Скажите, какие бы для Вас были удобны способы сортировок? По синтаксису? По количеству открытий файла?
  • 0
    Не Bracket a Brackets. И вообще, есть ли в статье разница между IDE и редакторами кода?
    А вертикальные вкладки элементарно лечатся, потому что такой подход не устраивает, чуть менее, чем всех, вспомните те же группируемые окна в windows — все, у кого достаточно мозгов отключали это добро сразу
    Скрин

    • 0
      Спасибо за найденную ошибку, поправлю!

      И вообще, есть ли в статье разница между IDE и редакторами кода?


      В данном анализе мы этот фактор не учитывали, потому что тип инструмента (облачный/offline, IDE/текстовой редактор) не играет особой роли в механизмах вкладок.

      Я рад, что Вы указали про смену вертикального на горизонтальный список вкладок в Brackets. И он (горизонтальный вид) имеет схожие недостатки, что и у подобных реализаций в других инструментах для программистов.

      Также я сторонник того, чтобы продукт для человека (особенно для веб-разработчика) из коробки мог иметь максимальное количество эффективных решений без дополнительных настроек (хотя в некоторых случаях все ровно придется что-то ковырять, но надо стараться достичь минимализма в этих вещах).
  • 0
    А почему так сосредоточились на важности отображения языка программирования для файла. Я, пользуясь настольными IDE, вообще никогда об этом не задумываюсь т.к. они гарантируют правильную связку и не до конца могу представить случай, когда мне это может понадобится. Я уверен, что файл с разрешением css откроется редактором css, html — редактором html, ts — typescript и.т.д.
    Где это может быть полезно? В каком случае может понадобиться изменить связку для какого-то файла отдельно?
  • 0
    А еще было бы чертовски интересно увидеть статью о том, как будете делать умный автокомплит и рефакторинг, темы чертовски сложные и не слишком освещенные.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.