ONLYOFFICE
Компания
202,75
рейтинг
5 апреля 2012 в 09:53

Разработка → TeamLab Document Editor на canvas: стирая грани между desktop и online

В предыдущем посте мы рассказали вам, что одной из главных целей участия в CeBIT 2012 было анонсирование нового онлайн редактора документов TeamLab. Сегодня поподробнее о редакторе (на данный момент он в beta версии), как пришли к идее его создания и как, в итоге, реализовали.



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

Будучи поставщиками онлайн инструментов для командной работы (от управления проектами до CRM), в определенный момент мы столкнулись с потребностью в собственном сервисе для работы с документами и начали разработку модуля, который вскоре перерос в довольно масштабный инструмент для работы с документами, презентациями и таблицами, интегрированный в систему Teamlab.

С чего начинали

Не секрет, что в сегменте document management первенство в ряду онлайн редакторов принадлежит Google, Microsoft и ZOHO. Разрабатывая первую версию нашего модуля управления документами, мы пошли уже проторенным путем и использовали известные методы: файлы конвертировались на сервере в html формат для дальнейшей работы в браузере, а для редактирования были задействованы ресурсы open source редактора CKEditor. Для сохранения результата работы мы подключили и обратную конвертацию — из html в желаемый формат.

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

О проблемах — больших и малых

Как и разработчики других онлайн-редакторов, сначала мы решили улучшить работу со страницами, а именно, сделать разбивку на страницы, ведь первое, что нужно пользователю даже при элементарном редактировании — это оценка объема документа, например, для его отправки на печать.

В чем же проблема разбивки на страницы? Существующие онлайн редакторы работают с одной html страницей, в независимости от того, сколько информации там помещается — на 1 страницу или на 700. Соответственно, чем больше этот документ будет, тем большего размера эта страница html получается. Другими словами, он представляется длинным рулоном, который нужно развернуть полностью, то есть «отрисовать» и «ПЕРЕрисовать» в случае внесения изменений. Именно поэтому между собой мы называем эту проблему в шутку «эффектом папируса».

Только два редактора из существующих, Zoho и Google Docs, достаточно активно развивают свои редакторы и тоже начали именно с этого — с разбивки страниц. Если у первых она, скажем так, примерная, реализована больше для визуализации и расположена там, где по приблизительным подсчетам должна заканчиваться страница, то у Google Docs вполне себе настоящая, но это лишь усугубляет «эффект папируса», т.к. документ приходится не только перерисовывать при внесении изменений, но и пересчитывать разбивку.

Проанализировав всё это, мы приняли решение полностью отказаться от старых методов.

Разработка с нуля

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

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

— скорости работы (напр. при изменении гарнитуры шрифта) с многостраничными документами,

— зуммирования,

— отображения непечатных символов,

— изменения полей документов.


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

Задача идентичного отображения

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

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

То же самое относится и к способам отрисовки текста. Существующие редакторы используют средства браузера, чтобы отрисовать текст на «холсте», предоставляемом ОС.

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

В решении задачи отрисовки текста нам бесспорно помогло появление новой технологии HTML5, в состав которой входит элемент canvas, дающий нам доступ к «холсту», а именно, к пикселям. Каждый элемент текста отрисовывается с точностью до пикселя и, соответственно, никак не зависит ни от браузера, ни от ОС.

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


Полученные преимущества

В итоге в отличие от всех существующих онлайн-редакторов, TeamLab Document Editor обладает следующими технологическими преимуществами:

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


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

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


Для того, чтобы попробовать бета-версию нового редактора прямо сейчас, посетите демо-портал TeamLab Document Editor по адресу http://html5.teamlab.com
Автор: @Galkinator
ONLYOFFICE
рейтинг 202,75
Компания прекратила активность на сайте

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

  • +1
    Ого, отлично, и выглядит очень даже хорошо. Будет ли выпущен редактор как самостоятельный продукт (например, даже без серверной части или с ограниченной) и в виде исходного кода?
    • 0
      Спасибо! Пока в ближайших планах довести всю работу до конца, чтобы можно было вывести из беты, а также выпустить редактор таблиц. Затем уже сообщим в каком именно виде будет выпуск, но в open source выкладывать не планируем.
  • 0
    сглаживание шрифтов какое-то неродное для Windows и правая кнопка мыши не работает.
    • 0
      Как мы и писали, были использованы собственные методы для отрисовки, рендринг шрифта пока не идеален, но мы над этим будем еще работать. Что касается контекстного меню, в beta оно доступно пока только для изображений и таблиц.
  • +3
    «Из диаграммы видно, что в сравнении со всеми популярными онлайн редакторами документов, TeamLab имеет явные преимущества.»
    Вы реально считаете, что можно показывать замеры тестов с Редакторами 1-5? Что это за тест? Что за редакторы?
    Я так могу сделать график замеров моей скорости: я и Человек 1-5. У всех все плохо, а я самый быстрый.
    • 0
      Сравнение было с редакторами Google, Zoho, Microsoft, IBM, просто по этическим соображениям мы не указываем где какой.
      • +6
        При чем тут этические соображения? Это — обыкновенное сравнение, этика тут не при чем
  • +2
    А у меня вот такой баг. Непонятный скролл по центру с фиксированным позиционированием.


    А еще, у меня не самый мощный компьютер, и приложение работает с натяжкой, не сказал бы что тормозит, эффект больше проявляется в задержке между моими действиями и реакцией приложения.
    • 0
      действительно, не смотря на указанные красивые графики, у меня на современном ноутбуке приложение грузится долго и затем работает неспешно.
    • 0
      Да, есть такой баг, сейчас наблюдаем после обновления хрома до 18 версии на win7, будем стараться пофиксить. Над скоростью тоже обязательно будем еще работать.
    • 0
      Upd.: Все! Этот баг пофиксили, проверяйте)
  • +4
    Ну вы прям как стиральный порошок, который лучше чем «обычный стиральный порошок». Что за сравнения с «популярными редакторами»? Это ведь статья на хабр, называйте вещи своими именами. Что и с чем сравниваете и при каких исходных данных?
    • +1
      Сравнивали время, которое занимает открытие и зуммирование документов более 100 страниц у редакторов Google, Zoho, Microsoft, IBM
      • 0
        Ну так и напишите легенду для графика, где что.
  • 0
    Оч круто
    Подтормаживает даже в Chrome на Core i5, но это же временно

    Кстати — ведь помимо тулкитов типа Bootstrap, мне кажется, пришло время canvas тулкитов для построения приложений. DOM-Монстры типа ExtJS по моему должны уйти со временем. Нет ли идеи заэкстрактить фреймворк из этой разработки и выложить его в open-source?
    • 0
      Спасибо за отзыв и понимание временных проблем, про выкладку фреймворка в open source — пока не планировали.
  • +6
    Наконец-то кто-то сделал что-то крутое на Canvas!
  • +1
    ведь первое, что нужно пользователю даже при элементарном редактировании. За последний год я использовал принтер только раз — распечатать заявление на отпуск.

    И главное, за что я гугль не люблю, это за новый формат документов, в котором показывается имитация страницы. Нафига? Мне нужны электронные документы, а у них нет страниц.
    • 0
      Меню View -> Document View -> Compact не подходит?
      • 0
        Нет, потому что у них там A4 вертикально, а у меня тут экран widescreen и горизонтально — львиная доля места занята серым фоном. Нафиг мне вообще разделение по страницам в электронном документе?
        • 0
          File -> Page Setup? Я понимаю, что в электронном документе далеко не всегда нужна разбивка по страницам, но я, действительно, не понимаю, чем она тут мешает?
          • 0
            какой page? Откуда я знаю какой у меня там пейдж, если принтер подключается два раза в году для печати какой-то мелкой ерунды?
            • 0
              При чем тут принтер, если вы не собираетесь печатать этот документ? Просто установите такие параметры страницы, при которых редактор будет выглядеть на экране так, как нужно.
              Например у меня при установке Landscape + Folio серых полосок остается по сантиметру с каждой стороны — мне не мешает.
              • 0
                Подождите, о каком из моих экранов вы говорите? Экран ноутбука (1366хсколько-то), экран монитора на работе (1920х1050) или монитор дома (2560х1440)? Если я открою этот же документ на другом экране, что будет?

                Можно мне вообще не задавать размеры физической бумаги, на которой этот документ никогда в жизни и не появится?
  • +2
    А объясните мне бестолковому, зачем нужен онлайн редактор документов? Ведь для того, чтобы он путево работал в браузере нужна машинка такой мощности, что тот же Word будет просто летать. Не знаю как оно будет работать на планшетах, на моем Android просто не открылось (просит iPad)

    Я понимаю зачем размещать документы в облаке. Но зачем нужен большой и полноценный редактор в браузере?
    • 0
      Коллективная работа над документами + версионирование (все варианты измененных файлов хранятся).
    • +1
      Для удобства удаленной работы над документами, а не просто шаринга. Это не только организованное единое хранилище документов, это и возможность совместного — в будущем одновременного — полноценного редактирования.
      Это и возможность отследить все изменения, сделанные в документе, благодаря версионности.
      Это и независимость от конкретного девайса и ПО, когда, где бы вы ни были, при любой неожиданной необходимости вы всегда можете отредактировать документ. Да, на данный момент пока мы не поддерживаем все без исключения девайсы, но работаем над этим, стремясь дать возможность максимально мобильной и полноценной работы без привязки к декстопам и приложениям.
      • +2
        Про удаленную работу все понятно. Но обратите внимание — отслеживание изменений, версионность и все из неё следующее — это, по большому счету, функции системы хранения. Интерфейс редактирования — это функция клиентского редактора. Таким образом, чтобы решить задачи среды хранения вы вынуждены полностью повторить функции уже существующих редакторов. Думаю, что вы всегда будете в положении догоняющих — вы ведь неспроста сравниваетесь только с онлайн редакторами, возможности которых значительно ниже, чем настольных.
        Лично мне кажется (хотя, возможно, я ошибаюсь), чтоб классно было бы как-нибудь встроится в существующие распространенные редакторы (тот Word или Writer) таким образом, чтобы дополнить его функционал фичами одновременной и полноценной работы, чем тратить колоссальные силы на их повторение.
        А онлайн редактор иногда, конечно, нужен, но пытаться сделать из него замену всему на свете вроде как и незачем.
        • +2
          У онлайн — редакторов могут быть, как минимум две фичи, которые недоступны офлайн-редакторам:
          1. Совместное редактирование.
          2. Возможность встраивания в веб-сайт.

          Ну и самый главный аргумент в их пользу — «человеческая лень», редактор открывается одним кликом с вебстраницы. Для большинства пользователей сейчас компьютер больше связан с интернет — браузером, чем с обычными программами. Например, скоро в Teamlab-е подключим интеграцию с DropBox и можно будет в вебе редактировать документы Dropbox-а, ну и т.д…

          К лету планируем запустить электронные таблицы и презентации в HTML5.
          • +1
            Я думаю совметсное редактирование вполне можно сделать. Надо просто документ расшарить или там в облако где-нибудь положить и редактировать оттуда использую десктопный офис.
            По поводу лени: если вам надо подредактировать пару строчек, то наверное Вы правы, проще открыть он-лайн редактор водин клик ина месте все сделать. А вот если Вам нужно долго работать с документом, то тут выигрыш за десктопным офисом, ибо в нем работать намного приятнее (во всяком случае до тех пор, пока он-лайн редакторы не поборят все тормаза и баги).
            P.S. а вообще ребята молодцы, мне нравится их продукт, хоть он еще немного и сыроват, но думаю они справятся.
            • +2
              Ребята молодцы, делают классно и красиво, с этим я не спорю.
              Но вызывает сомнение осмысленность направления. Сейчас это безумно модно — все в браузере, в любом месте, кроссплатформенно и т.п. Но, как мне кажется, трудно за конечное время с нуля даже на новомодных технологиях сварганить замену редакторам, которые создавались и вылизывались кучей неглупого народу в течение довольно длительного времени.
              • 0
                Дело не только в том, что десктопные редакторы на данный момент лучше. Просто они еще и дороже, а для некоторых это весомый фактор.
                • +2
                  Мне казалось, что Open Office бесплатный. Или я что-то путаю?
                  • 0
                    Да Вы правы, я как-то упустил это из виду.
                    Хотя если честно, после MS Office, за ОпенОфисом сидеть очень сложно, при этом Гугл Докс не вызывает столько негативных эмоций.
                    И еще ОпенОфис очень прожорливый по ресурсам, на слабенькой машине с большим документом совсем не комфортно работать.
            • +1
              Можно было бы написать плагин к Libre Office для общего редактирования. Офис такой же клиент как и браузер со стороны сервера. А по сети гонять пакеты с diff и списком участников изменения, ну и применять его (diff). У такого подхода есть одно преимущество над онлайн редактором. Находясь не в сети я смог бы редактировать документ, а протолкнуть изменения когда сеть появиться. Только беда, браузер у всех, а офис не у всех.

              Следует ли ожидать редактор в виде библиотеки или только как сервис?
              • 0
                Как только будем готовы выйти из beta, обязательно сообщим в каком именно виде будет выпуск
              • +1
                Мы делали плагин к OpenOffice где-то год-назад. Никто не хотел ставить плагин…

                В виде библиотеки редактор выпускать не будем, только как сервис. Будем предлагать другим сайтам воспользоваться этим сервисом. Будет также инсталляция, когда весь Teamlab, включая редакторы можно будет поставить на свой сервер. Она будет платная.
          • 0
            Про совместное редактирование уже все сказано, а насчет возможности встроить в веб сайт — согласен, настольную версию встроить туда сложно. И, как всегда, возникает вопрос — а оно надо? :-)
            Даже WYSYWIG редакторы текста, которые встроены в CMS для (якобы) более удобного редактирования контента в итоге для меня оказались хороши только одной функцией — возможностью залить в них сырой HTML, подготовленный в настольной среде.
            • +2
              Жизнь покажет — нужны ди онлайн-редакторы или нет! Мы надеемся, что нужны… Согласен, что это весьма рискованная разработка, но нам уже отступать некуда!) Будем добивать и выпускать коммерческую версию!
              • +2
                Тут спорить совсем не буду :-)
                Известно, что все великие идеи начинались с того, что все вокруг говорили «Да это полная чушь и никому не нужно» :-) так что я всецело вас поддерживаю.

                P.S. Ни в коей мере не хотел критиковать решение. Редактор получился очень изящный и красивый. Скорее всего дело просто в разнице мировоззрений :-) я — настольный программист и, наверное, невольно с подозрением отношусь к тонким решениям традиционных задач. Мне искренне хотелось понять преимущества такого подхода, которых я со своей колокольни не вижу.
    • +1
      Полноценный редактор совсем не обязательно должен есть ресурсы клиента, например, самые первые редакторы для iPad были вроде как в виде удалённого доступа через браузер к микрософтовскому редактору на сервере. Насколько я понимаю такой вариант ест ресурсы меньше десктопных приложений, хотя наверное очень чувствителен к интернет соединению.

      Лично для меня из плюсов у онлайн редакторов возможность на лету поправить документ со всех устройств и совместное редактирование включая комментарии «на полях» к тексту, где можно объяснить остальным редактирующим почему здесь было внесено такое изменение. Не знаю как другим, а мне это важно. И ещё для меня десктопный редактор слишком «громоздкий». Правда мне весь функционал Word с формулами и прочими прелестями и не нужен был никогда кроме учёбы в универе, и то тогда больше LaTeX использовала.
      • 0
        Когда редактор запущен через браузер — он точно также ест клиентские ресурсы. Только опосредованно, через браузер. То что он менее «громоздкий» чем толстый клиент — объясняется только меньшими возможностями. Потому как сравнимый с настольным редактор в браузере будет ужасно громоздким и медленным — ведь он не может непосредственно использоваться возможности компьютера, а выполняется в браузерной песочнице на костылях в виде скриптов.

        Собственно я и склоняюсь к мысли, что онлайн редактор нужен именно как простое и легкое, широкодоступное решение, а совсем не как полноценная замена большому редактору.
  • 0
    Крутой редактор, но у меня вопрос: планируется ли добавить кастомные стили для текста? Или изменять уже существующие? А то без этого не жизнь :)
    • 0
      Спасибо! Да, обязательно планируем, просто не в ближайшем релизе, а в ближайшем будет возможность загружать документы с кастомными стилями.
  • 0
    Ждем photoshop на canvas, 3ds Max на canvas и webGL и все, жизнь удалась.
    TeamLab, это прям микрореволюция интерфейсов. Вау в квадрате.
  • 0
    Замечательный сервис и редактор документов замечательный. А вот с тех. поддержкой беда.

    P.S.: Сообщил о баге при работе с задачами 3-4 дня назад, результат — автоматический ответ робота и тишина. А нам в итоге пришлось приостановить работу над задачами в ТимЛабе, т. к. лаг серьезный.
    • 0
      Спасибо! По поводу саппорта укажите, пжлста, с какого адреса обращались, можно здесь, можно мне в личку, вам обязательно ответят!
      • 0
        Буду рад, если ответят. И ещё больше буду рад, если отвечать будут не только через Хабр. ;) Отписал в личку, заранее благодарен.
  • 0
    Можно где то просмотреть реализацию FontMetrics для Canvas? Это действительно круто.
    • 0
      Спасибо, но мы не будем раскрывать все подробности нашего «ноу-хау» ;)
  • 0
    Редактор замечательный, не вопрос, но интереснее было бы почитать про технические вопросы реализации и про проблемы с разными браузерами (включая мобильные)
    • +1
      Логичнее будет написать про проблемы и про то как их решили уже после выпуска финальной версии редактора. Думаю, наберётся на хороший пост)
  • +1
    Представляю себе объем работы. Это как реализовать графический интерфейс, рендеринг, контролы и проч., имея только несколько графических примитивов, без всяких фреймворков и WinAPI. Прямо как в светлые времена DOS, когда все писали свой GUI, имея только доступ к видеопамяти и портам мышки. Ностальгия даже какая-то.
    • 0
      Кто-то должен быть первым) Мы справимся!
  • +1
    Просто шикарно, даже и не знал что есть такой крутой инструмент для менеджмента проектов! Удачи вам!
    • 0
      Рады, что понравился. Всегда приятно прочитать такой отзыв. Спасибо!
  • 0
    Хвалю вашего разработчика, реализовавшего перетаскивание. Серьезная задача. Неплохо бы его теперь к выделенному тексту прикрутить.
    • 0
      Разработчику передадим, пожелание учтем.
  • 0
    ИМНО сильно не хватает еще undo-redo, а так, очень приятный инструмент.

    Еще «Insert Table» сильно моргает когда мышкой выбираешь размер таблицы (Win, Chrome 18)
    • 0
      Undo-redo будет, над морганием поработаем, спасибо.
  • 0
    Первыми идею отрисовки редактора на canvas использовали в проекте Mozilla Skywriter (Bespin), который сейчас превратился в Ace и активно используется в Cloud9 IDE. Так что вы не совсем первые )

    Но там редактор исходников, а у вас — документов, что прилично сложнее. По части редактора документов с таким подходом, пожалуй, действительно первые )
    • 0
      Cloud9 IDE насколько я помню рендерит основной текст в DOM, на канве только правая часть — миниатюра
      • 0
        Вы правы, оказывается они успели сменить технологию, хотя Bespin был основан именно на canvas:

        «Bespin started as part of Mozilla Labs and was based on the canvas tag, while Ace is the Editor component of the Cloud9 IDE and is using the DOM for rendering.»

        Видимо, что-то не пошло у них с канвасом.

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

Самое читаемое Разработка