Статьи

Дмитрий Барановский рассказывает о Рафаэле

Дмитрий является автором потрясающей JavaScript-библиотеки Raphaël , о которой я говорил в Tech Times # 205 . В Web Directions South мне удалось поймать его презентацию и поболтать о том, как появился Raphaël.

SitePoint: Правильно, я подумал, что мой первый вопрос должен быть: почему ты написал Raphaël? Что вдохновило тебя на это?

Я делал проект FedEx. В Atlassian у нас есть дни FedEx, когда у вас есть время представить проект, над которым вы работали.

SP: FedEx Day — ты сказал?

Это называется «FedEx», потому что вы должны доставить что-то классное. Вы демонстрируете это на небольшом конкурсе (это не о больших призах — это больше для развлечения), и, конечно, это должно быть связано с проектами, над которыми вы работаете. Поскольку я являюсь инженером внешнего интерфейса, а все остальные ребята — разработчиками Java, я решил сосредоточиться на внешнем проекте, который поразит людей. Трудно произвести впечатление на разработчиков.

Поэтому я подумал, что сделаю что-то, о чем программисты могут ничего не знать, и, поскольку у меня был опыт работы с SVG, имело смысл работать с SVG. Но, как разработчик внешнего интерфейса, я обеспокоен созданием чего-то, что работает только в Firefox, поэтому я хотел создать мост для VML в IE. Мой первоначальный проект заключался в создании приложения для построения графиков, например простой линейной диаграммы. За полтора дня я с нуля быстро его забил, показал, но ничего не выиграл. Это не впечатлило людей.

С.П .: Даже немного?

Ох, может быть, немного, но не в целом. Поэтому я оставил это на некоторое время. Затем мы начали наши 20% проектов (так же, как Google). Я решил взять этот проект и немного его расширить. Я избавился от графической части и превратил ее в общую библиотеку чертежей. Просто мост между SVG и VML, позволяющий мне делать больше интересных вещей, не беспокоясь о совместимости браузера.

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

Затем я начал больше работать над этим 20% проекта. Если честно, я проводил больше одного дня в неделю: я работал с ноутбуком в поезде — один час на работе и один час назад — два дня в неделю в целом, примерно месяц. Затем я решил, что это достаточно хорошо, чтобы выпустить, потому что лучше сделать это до того, как другой разработчик выпустит то же самое. Итак, я выпустил его в середине августа.

Я был ошеломлен обратной связью. Честно говоря, я этого не ожидал, потому что писал об этом в своем блоге и обычно получал около 20 просмотров в день; но после того, как он был выпущен и попал на первую страницу Delicious и Reddit , я получал около 8000 просмотров в день. Он разжевал мою пропускную способность, и мне пришлось создать новый домен. Это на самом деле стало стоить мне денег!

SP: Так вы на самом деле используете это в своей работе в Atlassian?

Пока нет, но у нас есть планы по интеграции его в продукты для построения диаграмм и так далее, но мы пока не нашли много вариантов его использования. Лично я думаю, что люди немного боятся технологий. Но я надеюсь, что он найдет место. Это все еще довольно сырой. Так что достаточно показать концепцию, повеселиться и сделать кое-что здесь и там. Я всегда нахожу ошибки (особенно ошибки для IE), так что это не совсем, абсолютно готово. Ну, это всего лишь один месяц.

SP: Где бы вы хотели, чтобы он использовался?

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

Скажем, если вы на Flickr и хотите повернуть изображение на 90 градусов, потому что вы сняли фотографию сбоку. В данный момент вы нажимаете кнопку, она отправляет запрос на сервер, сервер выполняет ротацию, отправляет ее обратно, и вы видите повернутую картинку. Вместо этого вы можете использовать Ajax просто для отправки основной информации: поверните на 90% вправо, и на клиенте вы получите плавную анимацию вращения вправо. Это было бы намного более приятным опытом для пользователя по очевидным причинам.

Это было бы круто, и это действительно легко реализовать с помощью Raphaël. Без этого реализовать немного сложнее, потому что вы должны сделать версию IE отдельно от версии для всех других браузеров. На самом деле, именно поэтому я и создал Raphaël — вы делаете что-то в FireFox, а в IE это просто работает. Это еще не совсем там, но это там.

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

Да, я исправил это.

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

Да, я заметил это, когда посмотрел на код и подумал: «О, почему вы использовали непрозрачность для заливки?». Поэтому я начал играть и подумал: «А, да, о, хорошо».

SP: Эй, спасибо!

Да, я часто нахожу ошибки при тестировании в IE. SVG и VML — это абсолютно разные языки. Вы не можете действительно заменить одно другим. Иногда просто невозможно сделать что-то в IE, что легко сделать в SVG. Поэтому я должен найти компромиссное решение. У меня не может быть API для чего-то, что ты не можешь сделать.

Например, в SVG вы можете вращать объект вокруг точки, тогда как в IE вращение очень шаткое; Вы не можете указать точку. Он вращается вокруг какого-то магического центра, и эта центральная точка очень случайно расположена в центре… ну, я не знаю, что это за центр. Я обнаружил, что если вы поместите объект в группу, это будет центр группы, и он будет делать некоторые манипуляции с объектами, и они будут прыгать по всему месту. Поэтому мне удалось заставить все объекты вращаться вокруг своих центров во всех реализациях, но люди спрашивают меня, могут ли они указать точку вращения. Я говорю: «О, да, я хочу». Итак, пока нет, но, может быть, позже. Я хочу сделать это, но это не так просто сделать. В SVG это легко; это встроено. Но в VML это не так.

SP: Я подумал, что это, возможно, слабость, но также и сила Raphaël, что если вы подходите к задаче, думая о том, как вы можете сделать это, используя Raphaël API, тогда вы избегаете подобных проблем.

Ну, может быть, вроде … Ну, например, я пытался реализовать эффект размытия, и вы можете сделать это в Explorer, Firefox и Opera, но Safari, к удивлению, не поддерживает его. Как только я обнаруживаю, что не могу что-то сделать во всех браузерах, я не добавляю это в API. Как только Safari его поддержит, я добавлю его. Но сейчас нет никакого смысла, потому что весь смысл Raphaël в том, что вы пишете это, и это просто работает. Ну, я надеюсь, что так и будет. В версии 1 так и должно быть.

Это также может помочь вам понять, знаете ли, если вы попытаетесь что-то сделать и скажете: «Могу ли я сделать этот кросс-браузер?». Ответ может быть «Нет». Конечно, когда я создавал Raphaël, я пытался чтобы охватить как можно больше функций, поэтому, если я что-то удалил, я удалил это по причине. Может быть, я найду способ сделать это позже, возможно, нет способа сделать это в Internet Explorer.

Иногда я делаю некоторые дополнительные вычисления в SVG, чтобы эмулировать функциональность IE. Если у меня есть выбор, я, вероятно, добавлю дополнительные вычисления в сторону SVG, потому что движки JavaScript работают быстрее в браузерах, отличных от IE. Если вам приходится идти на компромисс и делать вычисления в IE или, например, в Firefox, лучше выполнять вычисления в Firefox, это будет быстрее, и пользователь не заметит. Если вы сделаете это в IE, это будет медленнее, и пользователи IE будут расстроены.

С.П .: Я разговаривал с некоторыми разработчиками в SitePoint, и некоторые из нас согласились, что в будущем использование SVG и VML на основе JavaScript может легко заменить Flash.

Я бы не сказал легко. Flash хорошо работает, например, потоковое видео и анимация. Но если вы посмотрите, например, на графики Google Analytics, то я не вижу причин, почему это невозможно сделать с Рафаэлем.

Вчера утром я пытался воспроизвести функциональность диаграмм Google. Я сделал это в поезде; это действительно легко сделать, и он сразу работает в разных браузерах. Конечно, для этого вам нужен разработчик JavaScript в вашей команде, который будет использовать такую ​​программу, как Raphaël, или, как я упоминал в своем выступлении, excanvas или dojox . Честно говоря, я думаю, что у Рафаэля более правильный подход. Вероятно, он еще не так хорошо разработан, но другие библиотеки не подходят к использованию правильно. Они смешивают canvas, SVG и VML вместе, и canvas совершенно другой. SVG и VML идеологически одинаковы. Ну, в некоторой степени, я думаю.

Я не думаю, что это заменит Flash, но если бы в какой-то задаче вы могли использовать SVG вместо Flash, я был бы рад это увидеть. Что-то родное, что-то, что вы можете взломать — вся концепция открытого Интернета. SVG и даже VML более открыты, чем Flash. Вы можете взломать его, вы можете просмотреть источник, что угодно. И, конечно же, Flash не работает на iPhone. Это еще одна причина для этого с использованием нативных технологий браузера. Я не говорю конкретно о Рафаэле; Я думаю, что SVG — это путь для многих вещей.

SP: Вопрос доступности очень часто возникает в отношении Raphaël, хотя, когда я смотрю на ваши демонстрации, вы все равно склонны придерживаться идеала ненавязчивого JavaScript.

Когда вы говорите об изображениях и диаграммах — и что бы ни создавал SVG, это всегда изображение, динамическое или нет — это всегда проблема доступности. На моем выступлении мы говорили о том, как программа чтения с экрана должна читать SVG; как они должны читать круги, и эллипсы, и их комбинации. Даже если бы у вас был хороший парсер, который мог читать формы, которые вы создаете на странице, вы не могли бы сказать, что на самом деле создают формы: конечное изображение. Это действительно сложно и очень сложно объяснить, если пользователь слепой. Например, как бы вы объяснили логотип Web Directions слепому пользователю? Я не думаю, что программы чтения с экрана когда-либо смогут сделать это.

Так что все зависит от разработчика, чтобы сделать это правильно. Например, в случае моих графиков у меня есть таблица на странице. Программа чтения с экрана может видеть эту таблицу, и если у вас отключен JavaScript, вы можете увидеть таблицу. У вас все еще есть доступ к данным; это не так красиво, не так богато, но вы все равно можете прочитать и понять.

Я не думаю, что это проблема с SVG или проблема с Raphaël; Я думаю, что это общая проблема, и уже есть много статей и книг о том, как ее решить.

SP: Хорошо, большое спасибо, очень приятно с вами пообщаться

Не стоит беспокоиться.