Содержание
- Введение;
- Часть 1. Механизмы вкладок у существующих IDE;
- Часть 2. Результаты исследования;
- Часть 3. Наш механизм вкладок;
Введение
О 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 |
|
|
Проанализировав таблицу, мы вывели два типа вкладок:
- горизонтальный список вкладок над текстовым редактором;
- вертикальный список открытых файлов в левой панели;
Они обладают следующими преимуществами и недостатками:
Механизмы вкладок | ПРЕИМУЩЕСТВА | НЕДОСТАТКИ |
---|---|---|
горизонтальный список вкладок над текстовым редактором |
|
|
вертикальный список открытых файлов в левой панели |
|
|
Часть 3. Новый механизм вкладок.
Мы решили перестать мириться с данной ситуацией и попробовать создать новое решение.
Новый механизм не только необычный, но и удобный, красивый и эффективный. Это один из тех элементов интерфейса, который развивался в течение нескольких месяцев. Он никогда не удалялся, потому что все это время улучшал производительность при разработке сайтов.
Данный механизм вкладок красиво входит в область, где должно быть главное меню (у нас его нет, но это уже другая история), а не занимает дополнительное пространство. Это позволяет увеличить место для текстового редактора, что в случае с дополнительными панелями браузера очень выгодно. Такой способ отображения не захламляет интерфейс, но при это позволяет увидеть все необходимое: текущий открытый файл и его синтаксис.
В интерфейсе mr. Gefest'а мы объединили три функциональные части (вкладки, работу с файлом и выбор синтаксиса) в один логический блок, так как их функции часто пересекают друг с другом при разработки сайтов.
При наведении мышки на иконку «Документ со стрелкой» появляется меню «Работа с файлом». Через которое можно создать новый файл, сохранить его или обновить (загрузив с сервера снова). Как видно, функции разделены по цветам, которые четко разграничивают назначение и по смысловой нагрузки тона совпадают с тонами контекстного меню файлового менеджера (это тоже отдельная история).
Мы стараемся достичь единого информационного поля для каждого элемента интерфейса, пересекая их окраски (цветовые, текстовые и другие) таким образом, чтобы работа с интерфейсом была на непостижимом интуитивном уровне.
Выбор необходимого синтаксиса для открытого файла теперь стал очень простым. Вам не придется искать его в длинном списке запутанного главного меню или через панель текстового редактора.
В ней присутствует ассоциация синтаксиса со цветом, которая позволит Вам без чтения названия, интуитивно сменить язык программирования. В таком формате ничего не надо искать, все быстро и понятно.
При наведении на новый механизм открывается список вкладок, поиск по ним и блок часто используемых открытых файлов.
Выглядит стильно, минималистично и футуристично. Отображает всю необходимую информацию.
При открытии данного списка в поле поиска отображается текущая вкладка, но как только вы на неё нажмете — текст пропадет и Вы можете вводить название любого открытого файла. Это позволит моментально найти нужную вкладку, когда у Вас их очень много! Если Вы нечего не ввели в указанное поле, то имя текущей вкладки возвращается.
Иногда при разработки сайтов количество открытых файлов может достигать большого числа, хотя при этом работаешь только с несколькими из них. Для такого случая был придуман специальный блок. В него по специальному алгоритму попадают вкладки, которые Вы чаще всего используете в конкретный промежуток времени. Это очень удобно!
Кроме того, у каждого открытого файла есть специальная кнопка «Закрепить/Открепить». Она позволяет прицепить конкретную вкладку в блок «Часто используемое». Так что, популярные файлы всегда под рукой!
Каждая вкладка обладает всей важной информацией:
- имя файла;
- две последние папки до файла;
- синтаксис;
- полный путь до файла;
Иконка синтаксиса сделана не в виде какого-то сложного изображения, а цвета и текста. Этот хитрый прием после 1-3 часов работы в среде разработки позволяет ассоциировать цвет с конкретным синтаксисом. Такой подход дает Вам возможность выбирать вкладку не только по названию, а ещё по синтаксису. Цветовые тона используемых языков программирования во вкладках полностью идентичны тонам в блоке выбора синтаксиса.
Указание двух последних папок у каждой вкладки позволяет видеть различия у открытых файлов с одинаковыми названиями.
При наведении мышкой на конкретную вкладу, вместо имени синтаксиса начинает отображаться кнопка «Закрыть», полный путь до файла и иконка «Глазок».
Последняя папка полного пути выделяется жирным шрифтом, а имя файла в ней отображается черным цветом.
Если наведёте мышку на иконку «Глазок» у вкладки, то сможете увидеть его содержимое в текстовом редакторе без его открытия. Так можно быстро просмотреть каждый файл.
У данного механизма вкладок есть один заметный недостаток — непривычность, которая исчезает за час работы в mr. Gefest'е.
А вот преимуществ гораздо больше:
- Можно увидеть полный путь до файла у любой вкладки;
- Не занимает много пространства в интерфейсе;
- У каждой вкладки отображаются её полное имя, синтаксис и две последние папки до неё;
- Можно посмотреть содержимое файла без его прямого открытия (через специальную кнопку);
- Всю важную информацию о файле можно легко увидеть даже при открытых 50+ вкладках;
- Обладает поиском вкладки по имени;
- Самый простой и интуитивный способ выбора синтаксиса
- Блок часто используемых вкладок позволяет при открытии большого числа файлов и при использовании только некоторых из них, переходить между ними без длительного поиска;
- Возникает ассоциация между цветом и синтаксисом файла;
- Имеется кнопка «Закрыть» у каждой вкладки;
- Выбор синтаксиса, работа с файлом и вкладками объединяются в один логический блок;
- Две последние папки позволяют различать вкладки с одинаковыми именами;
А теперь посмотрим на сравнительную таблицу трех механизмов вкладок:
Механизмы вкладок | ПРЕИМУЩЕСТВА | НЕДОСТАТКИ |
---|---|---|
горизонтальный список вкладок над текстовым редактором |
|
|
вертикальный список открытых файлов в левой панели |
|
|
вкладки в mr. Gefest |
|
|
Как видно из таблицы, механизм вкладок от mr. Gefest’а опережает аналоги по преимуществам.
Мы понимаем, что с первого взгляда Вы можете агрессивно отнестись к данному нововведению, но мы надеемся, что перед тем как это сделать, дождётесь доступа, где Вы сможете все это использовать на практике и после этого уже сформулируете окончательный вывод, потому что его эффективность проверена при реальной разработки сайтов нами и пользователями облачной IDE mr. Gefest.
В каждый элемент mr. Gefest'а мы вкладываем свою душу и энергию, стараясь сделать новые и эффективные технологии, анализируя большое количество программ (как современных, так и давно устаревших) и проводя множество разного рода моделирований. Надеемся, что Вы почувствовали нашу энергию и зарядились её.
Всем желаем продуктивной и интересной работы!
Важная информация! Сейчас мы ищем надежных партнеров для нашего продукта, в особенности Российских хостинг провайдеров. Пишите пожалуйста на email: support@gefest-ide.com