Polymer.js: будущее разработки веб-приложений?

Около года назад, в мае 2013 года, Google запустил Polymer.js.

Итак, мы здесь, год спустя. И вопрос: готова ли она к прайм-тайму? Возможно ли создать готовое к производству приложение с использованием методов веб-разработки Polymer?

Чтобы ответить на этот вопрос, я взял Polymer на тест-драйв, чтобы разработать веб-приложение и посмотреть, насколько хорошо оно будет себя вести. Эта статья об этом опыте и о том, чему я научился в процессе.

Polymer.js: концепция

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

Когда вы начинаете проверять Polymer, вы не можете не быть заинтригованы его самопровозглашенным уникальным взглядом на мир. Polymer позиционирует себя как своего рода подход «назад к природе», который «возвращает элементы в центр веб-разработки». С помощью Polymer.js вы можете создавать собственные HTML-элементы и объединять их в законченные сложные веб-приложения, которые можно масштабировать и поддерживать. Все дело в создании новых (т. е. пользовательских) элементов, которые затем можно повторно использовать на ваших HTML-страницах декларативным образом, без необходимости знать или понимать их внутреннее устройство.

Элементы, в конце концов, являются строительными блоками сети. Соответственно, мировоззрение Polymer заключается в том, что веб-разработка должна основываться на расширении существующей парадигмы элементов для создания более мощных веб-компонентов, а не на замене разметки «кучей скриптов» (если использовать их слова). Другими словами, Polymer верит в использование «родных» технологий браузера вместо того, чтобы полагаться на все более сложный лабиринт пользовательских библиотек JavaScript (jQuery и др.). Действительно интригующая идея.

Итак, это теория. Теперь давайте взглянем на реальность.

Полимерная веб-разработка: реальность

Хотя философский подход Polymer, безусловно, заслуживает внимания, к сожалению, это идея, которая (по крайней мере, в некоторой степени) опережает свое время.

Polymer.js предъявляет к браузеру здоровенный набор требований, опираясь на ряд технологий, которые все еще находятся в процессе стандартизации (W3C) и еще не представлены в современных браузерах. Примеры включают теневой дом, элементы шаблона, пользовательские элементы, импорт HTML, наблюдатели мутаций, представления, управляемые моделью, события указателя и веб-анимацию. Это замечательные технологии, но, по крайней мере, на данный момент, они еще не реализованы в современных браузерах.

Стратегия Polymer заключается в том, чтобы внешние разработчики использовали эти передовые технологии на основе браузеров, которые в настоящее время находятся в процессе стандартизации (W3C) по мере их появления. Тем временем, чтобы восполнить пробел, Polymer предлагает использовать полифиллы (загружаемый код JavaScript, который предоставляет функции, еще не встроенные в современные браузеры). Рекомендуемые полифилы спроектированы таким образом, что (по крайней мере, теоретически) их можно будет легко заменить, как только станут доступны собственные браузерные версии этих возможностей.

Хорошо. Но позвольте мне понять это прямо. По крайней мере, сейчас мы собираемся использовать библиотеки JavaScript (т. е. полифиллы), чтобы избежать использования библиотек JavaScript? Ну, это «очаровательно».

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

Полимерная архитектура

Теперь о нашем руководстве. Polymer.js архитектурно разделен на четыре уровня:

Родной: необходимые функции в настоящее время доступны во всех основных браузерах. Основа: полифиллы, которые реализуют необходимые функции браузера, которые еще не доступны в самих браузерах. (Намерение состоит в том, чтобы этот слой со временем исчез, поскольку возможности, которые он предоставляет, становятся изначально доступными в браузере.). Ядро: необходимая инфраструктура для элементов Polymer для использования возможностей, предоставляемых слоями Native и Foundation. Elements: базовый набор элементов, предназначенных для использования в качестве строительных блоков, которые могут помочь вам создать ваше приложение. Включает элементы, которые обеспечивают: Базовые функции, такие как ajax, анимация, гибкий макет и жесты. Инкапсуляция сложных API-интерфейсов браузера и макетов CSS. Визуализаторы компонентов пользовательского интерфейса, такие как аккордеоны, карточки и боковые панели.

Создание полимерного приложения

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

Веб-разработка Polymer — это создание элементов и только создание элементов. Итак, в соответствии с мировоззрением Polymer, наше приложение будет… новым элементом. Не больше, не меньше. Окей, я понял. Вот с чего мы начнем.

Для нашего примера проекта Polymer я назову элемент верхнего уровня приложения , так как имена пользовательских элементов (независимо от того, какой фреймворк вы используете для их создания) должны включать дефис (например, x-теги, полимерные элементы и т. д.).

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

Итак, например, представьте, что у нас есть приложение со следующими экранами:

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

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

Затем мы можем создать два наших основных представления, которые мы назовем ListView и SingleView, для загрузки в область «контента». Для элементов в ListView мы можем создать ItemView.

В результате получится примерно такая структура:

Хорошие новости

Теперь, когда у нас есть пример приложения Polymer, мы можем вставить его на любую веб-страницу, просто импортировав наш «toptal-app.html» и добавив тег потому что, в конце концов, наше приложение — это всего лишь элемент. Это круто.

На самом деле, в этом заключается большая часть силы и красоты полимерной парадигмы. Пользовательские элементы, которые вы создаете для своего приложения (включая элемент верхнего уровня для всего приложения), рассматриваются как любой другой элемент на веб-странице. Поэтому вы можете получить доступ к их свойствам и методам из любого другого кода или библиотеки JavaScript (например, Backbone.js, Angular.js и т. д.). Вы даже можете использовать эти библиотеки для создания собственных новых элементов.

Кроме того, ваши пользовательские компоненты совместимы с другими библиотеками пользовательских элементов (такими как X-Tag от Mozilla). Таким образом, не имеет значения, что вы используете для создания собственного пользовательского элемента, он совместим с Polymer и любой другой технологией браузера.

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

С другой стороны…

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

Вот выборка:

• Отсутствие документации и руководства.
  • Не все элементы пользовательского интерфейса Polymer.js и элементы, не относящиеся к пользовательскому интерфейсу, задокументированы. Иногда единственным «руководством» по их использованию является демонстрационный код. В некоторых случаях даже необходимо обратиться к исходному коду полимерного элемента, чтобы лучше понять, как он работает и может/должен использоваться.
  • Не совсем понятно, как организовать большие приложения. В частности, как вы должны передавать одноэлементные объекты между элементами? Какую стратегию вы должны использовать для тестирования ваших пользовательских элементов? Руководство по этим типам вопросов на данный момент в лучшем случае скудно.

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

• Проблемы на мобильных платформах. Производительность Polymer.js на мобильных платформах часто может быть чем-то средним между разочарованием и проблемами.
  • Загрузка всей библиотеки и полифилов (без gzip) происходит медленно, и вам необходимо загрузить каждый элемент Polymer, который вы собираетесь использовать.
  • Обработка полифиллов, библиотек и пользовательских элементов на мобильных платформах кажется дорогостоящей задачей. Даже когда загрузка завершена, вы все еще часто видите пустой экран в течение нескольких секунд.
  • Особенно для более сложных функций (таких как перетаскивание или рендеринг на холсте) вы можете обнаружить, что функции, которые отлично работают на рабочем столе, просто не работают должным образом или еще не поддерживаются на мобильной платформе. В моем конкретном случае одним из таких разочарований, с которым я столкнулся, был рендеринг в холст на iOS.
• Неадекватные или запутанные отчеты об ошибках. Иногда, когда вы ошибаетесь в имени атрибута или просто ломаете что-то, связанное с самим базовым уровнем, вы получаете странное сообщение об ошибке на консоли с двумя стеками вызовов, которые вам нужно изучить, чтобы попытаться определить, в чем проблема. Иногда это легко решить, но иногда вам нужно попробовать совершенно другую стратегию, чтобы избежать ошибки, поскольку вы не можете отследить ее источник.

Заключение

Полимер — интригующая технология, но она, несомненно, все еще находится в зачаточном состоянии. Таким образом, он еще не очень подходит для разработки крупных приложений корпоративного уровня, готовых к работе. Кроме того, существует не так много руководств или руководств, посвященных веб-разработке Polymer.js.

Что касается того, что подход, ориентированный на JavaScript, или DOM-ориентированный, действительно фундаментально лучше, жюри еще не вынесено. Полимер приводит убедительные аргументы, но существуют и контраргументы.

Возможно, наиболее примечательно то, что Polymer требует довольно значительного уровня знаний в использовании технологий браузера, таких как DOM. Во многом вы возвращаетесь к тому времени, когда еще не было jQuery, и изучаете DOM API для выполнения простых задач, таких как добавление или удаление класса CSS из элемента. Это, безусловно, создает ощущение, по крайней мере, на каком-то уровне, что вы делаете шаг назад, а не вперед.

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