Новый механизм вкладок для облачной 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

    mr. Gefest 25,14
    Создаем облачную 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
            А еще было бы чертовски интересно увидеть статью о том, как будете делать умный автокомплит и рефакторинг, темы чертовски сложные и не слишком освещенные.

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

            Самое читаемое