Google Polymer - как это изменит способ создания веб-приложений

а также элементы, которые строят элементы управления UI игрока в тайне.

Сегодня, используя веб-компоненты, мы можем называть и наши собственные элементы. Мы можем построить такой элемент, как, встроить канал Twitter или (может быть) встроить диаграмму.

Кроме того, эти пользовательские элементы могут также иметь несколько принятых пользовательских атрибутов. Что касается элемент, вы устанавливаете атрибут с именем имя пользователя который будет использоваться для указания имени пользователя Twitter.

Пользовательские элементы в полимере

Polymer поставляется с набором элементов, которые отвечают (почти) каждому веб-приложению. Google делит эти элементы на группы: железные элементы, бумажные элементы, веб-компоненты Google, золотые элементы, неоновые элементы, платиновые элементы и молекулы.

1. Железные элементы

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

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

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

2. Бумажные элементы

Бумажные элементы группа элементов дизайна материалов Material Design - это язык дизайна Google, который делает пользовательский интерфейс и взаимодействие на платформах Google как в Интернете, так и в приложениях Android более визуально согласованными. Некоторые элементы, которые являются уникальными для Материального Дизайна, являются Бумагой и Плавающей кнопкой Действия (FAB).

Бумага

Бумага метафора Google для среда, которая лежит в основе содержания. Чтобы добавить бумагу с Polymer, мы используем элемент. Этот элемент принимает 2 атрибута:

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

Кнопка с плавающим действием (FAB)

Кнопка с плавающим действием (FAB) - это круглая кнопка со значком, плавающая на экране, обычно выделяющегося цвета. Google предполагает, что эта кнопка имеет функцию, к которой часто обращаются. Вот пример:

Следующий фрагмент кода добавляет Paper Material с изображением и FAB.

У нас будет следующий результат:

У нас есть фото с “сердце” кнопка, плавающая на вершине. Нажмите на нее, чтобы понравиться фото, и кнопка дает эффект ряби, чтобы подтвердить щелчок.

• Посмотреть демонстрацию бумаги

3. Веб-компоненты Google

Веб-компоненты Google - это специальные элементы, которые управляют API-интерфейсами и службами Google, такими как Google Maps, Youtube и Google Feed. Элементы в этой группе сделать взаимодействие со службами Google всего в нескольких линиях.

Ниже приведен пример отображения карты Google с использованием элемент.

  Это Googleplex  

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

• Посмотреть карту Демо

Хотите показать видео на Youtube? Вы можете использовать элемент.

Точно так же мы настраиваем вывод через атрибуты.

• Посмотреть демоверсию Youtube

4. Золотые элементы

Золотые элементы являются элементы, разработанные специально для приложений электронной коммерции. Здесь вы найдете элемент для отображения кредитной карты, электронной почты, телефона и ZIP-ввода, которые все были оснащены проверка формата обеспечить правильный ввод данных и безопасность. Вот один пример, чтобы добавить данные кредитной карты Visa.

5. Другие элементы

Остальные элементы включают в себя элементы Neon для анимации и специальных эффектов, элементы Platinum для автономных и push-уведомлений и, наконец, Molecules, оболочки для сторонних библиотек..

Примечание редактора: На момент написания этой статьи неоновые элементы, платиновые элементы и молекулы все еще недоступны.

Интегрирующий полимер

Хотите использовать Polymer в своей веб-разработке? Вот как установить и интегрировать его в свои веб-страницы. Поскольку большинство элементов Polymer полагаются друг на друга, лучший способ установки Polymer - это Bower.

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

Чтобы интегрировать Polymer, запустите Terminal, затем перейдите в каталог вашего проекта, если вы его создали. Тогда беги Бауэр иници команда для запуска файла bower.json в ваш проект, который будет использоваться для записи зависимостей проекта. Откройте bower.json и добавьте следующие строки.

 "зависимости": "полимер": "полимер / полимер # ^ 1.0.0", "google-web-component": "GoogleWebComponents / google-web-components # ^ 1.0.0", "iron-elements": " PolymerElements / iron-elements # ^ 1.0.0 "," paper-elements ":" PolymerElements / paper-elements # ^ 1.0.0 "," gold-elements ":" PolymerElements / gold-elements # ^ 1.0.0 " 

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

Этот процесс может занять некоторое время, так как он включает в себя захват огромного количества файлов из репозиториев. После этого вы должны найти их в bower_components папка.

Откройте файл HTML, в котором вы хотите использовать компоненты Polymer. Внутри заголовка документа, связать WebComponents.js какой polyfill для браузеров, которые еще не поддерживают веб-компоненты, и импортировать файлы компонентов используя импорт HTML.

Вот пример:

Эта настройка позволит нам использовать , , элементы.

Витрины

Вот некоторые из веб-приложений, которые уже используют Google Polymer.

Google

Google использовал Google Polymer на веб-странице Google IO 2015; Google Fi, беспроводной сервис Google для операторов связи и поставщиков; и Google Music.

Пользовательские элементы

CustomElements - это центр, где вы можете найти пользовательские элементы, созданные с помощью веб-компонентов. Он использует элемент Paper для хранения и построения списка. Он также предоставляет удобный маршрут для установки этих элементов через Bower и NPM..

Редактор Chrome Dev

Приложение Chrome для редактирования кода, которое работает на удивление хорошо. Это приложение использует кнопку FAB, меню «Бумага» и диалоговые элементы «Бумага» в пользовательском интерфейсе..

Дизайнер полимеров

Инструмент для создания веб-приложения с элементами Polymer с использованием интерфейса перетаскивания.

Ежедневный прогноз акций

Отчет о бирже и прогноз, построенный исключительно из полимерных элементов.

Полимерная Почта

Приложение почтового клиента для Gmail. Это выглядит красиво и плавно, хотя, к сожалению, это не полностью функционирует.

Последние мысли

У Polymer огромные возможности, и вам может потребоваться некоторое время, чтобы привыкнуть ко всем пользовательским элементам, а также к его API. Тем не менее, веб-компоненты и Polymer, безусловно, будут влиять на то, как мы создаем веб-приложения. Будьте впереди толпы, читая больше о веб-компонентах - ссылки приведены ниже.

• Посмотреть демо
• Скачать исходный код

Полезные ссылки

• Состояние веб-компонентов
• Подробное введение в пользовательские элементы
• Официальный блог Google Polymer