PhotoSwipe — это библиотека с открытым исходным кодом, которая предоставляет посетителям вашего мобильного веб-сайта практически «родной» жест, основанный на просмотре изображений, который не отличается от приложения для просмотра изображений, предустановленного на устройствах iOS. В этой статье я кратко расскажу о том, как начать работу с PhotoSwipe, а также предоставлю несколько более подробных технических советов и приемов, которые я усвоил в процессе разработки библиотеки.
Прежде чем мы зайдем слишком далеко, если вы еще не видели PhotoSwipe в действии, пройдите и просмотрите демонстрацию PhotoSwipe . Мы будем ждать вас, когда вы вернетесь.
Начиная
Начать работу с PhotoSwipe просто. Посетите PhotoSwipe и загрузите последнюю версию.
Разархивировав релиз, вы найдете папку «examples», которая содержит множество HTML-файлов, показывающих различные способы реализации PhotoSwipe на вашем мобильном веб-сайте. Вы найдете примеры для многих сценариев, охватывающих базовую настройку, интеграцию с jQuery Mobile и настройку его в соответствии с вашими потребностями и личными вкусами. Изучение этих примеров, без сомнения, лучший способ начать работу с PhotoSwipe.
Какие устройства поддерживаются?
На момент написания статьи PhotoSwipe работал с iOS-устройствами, Android, а также с Blackberry 6 и ограниченным, но вполне удобным способом для Windows Phone 7 Mango.
Кроме того, PhotoSwipe прекрасно работает в настольных браузерах. Он отлично работает в Firefox и, поскольку библиотека оптимизирована для WebKit, он одинаково хорошо работает и в Chrome и Safari. Наконец, с небольшой помощью jQuery PhotoSwipe работает в Internet Explorer 7 и выше.
Исходный код, поддержка и участие
Конечно, PhotoSwipe является открытым исходным кодом под лицензией MIT. Вы свободны делать это как хотите!
Если вы хотите принять дальнейшее участие или вам нужна поддержка по проблеме, которую вы, возможно, обнаружили в библиотеке, вы можете найти Computerlove на GitHub и репозиторий PhotoSwipte, где вы можете регистрировать проблемы и делать запросы на извлечение. Вы также можете подписаться на PhotoSwipe в Твиттере, чтобы узнать о последних новостях .
Получение технического
В оставшейся части статьи, вместо того чтобы рассматривать все различные параметры конфигурации и способы реализации PhotoSwipe, которые хорошо документированы на веб-сайте и продемонстрированы в примерах, я расскажу о некоторых принципах, лежащих в основе PhotoSwipe, а также о некоторых советы и рекомендации, которые могут помочь вам при написании собственных JavaScript-библиотек для вашего мобильного сайта.
Отпустив JQuery, обнимая JQuery
PhotoSwipe — это библиотека JavaScript, разработанная для мобильных устройств. Даже с топовыми устройствами между настольными и мобильными устройствами все еще существуют огромные различия с точки зрения вычислительной мощности и скорости. Проектирование для мобильных устройств в качестве основной платформы вызвало следующие ограничения проекта:
- Библиотека должна была быть как можно меньше для загрузки. Нет никаких гарантий, что посетители мобильного веб-сайта качают по Wi-Fi и, скорее всего, будут чаще подключаться к сети 3G или ниже.
- Библиотека должна быть максимально простой и содержать только код и логику, необходимые для мобильных браузеров. Все остальное будет считаться раздутой и ненужной работой устройства.
Чтобы усложнить задачу, мы также хотели поддерживать настольные браузеры, особенно Internet Explorer, и мы также хотели, чтобы PhotoSwipe хорошо работал с восходящей звездой мобильных веб-библиотек jQuery Mobile.
Чтобы преодолеть эти ограничения, мы следовали подходу, основанному на интерфейсе. Здесь мы согласовали интерфейс базовой базовой библиотеки (или определенный список основных функций), который будет выполнять основную работу осла, необходимую PhotoSwipe, такую как создание элемента DOM, манипулирование стилями, добавление и прослушивание событий, анимация и т. Д.
После того, как мы определили эту базовую библиотеку, мы написали ее реализацию для браузеров WebKit и использовали встроенные стандартные возможности DOM, поддерживаемые этими браузерами. Это освободило нас резко. Нам не нужно было беспокоиться о поддержке IE или других браузеров, которые не были нашей главной задачей. В конечном итоге это означало, что нам не нужно было использовать jQuery.
Теперь это было большое решение! Я люблю jQuery, и он настолько постоянен в популярной разработке JavaScript, что было странно оставить его позади. Однако решение было оправданным:
- Во-первых, версия PhotoSwipe, оптимизированная для мобильных устройств и стандартизованная, будет работать на реализации базовой библиотеки, которая не содержит большого количества ненужных обходных путей, которые выполняет jQuery, чтобы сделать кроссплатформенный JavaScript-код максимально бесшовным. В конечном итоге это означает, что мобильному устройству требуется меньше работы.
- Во-вторых, это избавило мобильных пользователей от необходимости загружать библиотеку jQuery, когда, теоретически, только небольшой процент ее фактически требовался или использовался PhotoSwipe.
Именно тогда, на основе этой мобильной / оптимизированной по стандартам реализации, был разработан и протестирован основной код PhotoSwipe. По сути, PhotoSwipe не волнует, как реализована базовая библиотека. Все, что нужно знать, — это то, что базовая библиотека поддерживает функцию, которая требует, такую как setStyle()
На этом этапе все было хорошо с миром. Однако ключевой задачей проекта была поддержка Internet Explorer и работа с jQuery Mobile.
Это было относительно легко решить. Мы просто разработали реализацию нашей базовой библиотеки на jQuery. Это означало, что за относительно короткий промежуток времени и с минимальными усилиями PhotoSwipe отлично работает на IE и отлично работает с jQuery Mobile!
Этот подход также означал, что в случае необходимости мы могли бы написать реализацию основных библиотек в других библиотеках JavaScript, таких как Prototype, YUI, Dojo, MooTools, Zepto и так далее. Это было полезно для обеспечения максимальной гибкости для разработчиков, реализующих PhotoSwipe.
Мобильные браузеры сумасшедшие
Это стало очевидным очень рано при разработке PhotoSwipe. Изначально ориентация на WebKit казалась простым маршрутом. iOS, Android и BlackBerry основывают свои веб-браузеры на WebKit. Оптимистично предполагалось, что один этот факт сведет на нет многие потенциальные кроссплатформенные проблемы.
Это не тот случай. Мобильные браузеры не одинаковы, даже если они основаны на одном ядре рендеринга.
При разработке мобильных компонентов JavaScript это нужно учитывать. Версии WebKit различны для разных операционных систем, как и интерпретаторы JavaScript, используемые браузерами. Чтобы усугубить проблемы, браузеры отличаются между версиями одной и той же операционной системы. Действительно, вещи, которые хорошо работали на более ранних версиях операционной системы, разваливались на новых версиях. Это было особенно верно для Android, перепрыгивающего с 1,5 до 2,1 и на iOS между iPhone и iPad.
Главное, что нужно здесь помнить, это то, что вам нужен приличный набор тестирующих устройств / симуляторов под управлением разных операционных систем и разных версий операционных систем. Не полагайтесь на тот факт, что все они по сути работают на одном браузере . С Android и Blackberry это относительно просто, так как вы можете запускать несколько версий через официальные симуляторы, как вам нужно. В iOS полезно иметь несколько устройств, работающих под управлением разных версий iOS.
Отладка и получение справки
Еще одной проблемой при разработке для мобильных веб-браузеров является отсутствие приличных средств отладки. Эти браузеры не поставляются с такими инструментами, как Firebug для Firefox или веб-инспектор в комплекте с Chrome и Safari. Даже такие вещи, как получение простого журнала консоли, могут быть громоздкими.
В основном это не вызвало особых проблем. Большая часть разработки была на Chrome и Firefox на настольном компьютере с постоянными проверками работоспособности на мобильных устройствах и симуляторах. Это означало, что мы могли отлаживать, используя Firebug и Web Inspector.
Однако иногда ошибки и причуды в мобильных браузерах означали, что отладка в настольных браузерах бесполезна. Вам нужно было знать, что на самом деле происходит на самом мобильном устройстве. Для этого, по крайней мере, iOS поставляется с консолью разработчика, так что вы можете выполнить некоторую базовую трассировку. Однако это немного навязчиво и занимает ценное место на экране. Также это недоступно на других устройствах, таких как Android.
К счастью, есть помощь. Если вы еще этого не сделали, я рекомендую вам ознакомиться с проектом Weinre, разработанным ребятами из PhoneGap. Этот проект позволяет вам отлаживать то, что происходит удаленно, в мобильном веб-браузере, но с помощью инструмента отладки, запущенного в вашем настольном браузере!
Этот инструмент очень похож на Firebug и Web Inspector и может сэкономить вам кучу времени, когда вы попадаете в кирпичную стену с чем-то странным, происходящим внутри мобильного веб-браузера. Weinre бесплатна для загрузки, проста в установке и работает на Windows или Mac. Кроме того, есть онлайн-версия, которую вы можете использовать, чтобы избавить вас от необходимости устанавливать что-либо! Это можно найти на http://debug.phonegap.com .
Максимально использовать аппаратное ускорение
Последний совет касается аппаратного ускорения на этих устройствах, особенно на устройствах iOS. Доступ к аппаратному обеспечению важен для обеспечения плавной анимации и взаимодействия «по-нативному».
Это действительно легко, и есть множество статей о том, как этого добиться. Тем не менее, основная суть заключается в следующем:
- Используйте переходы CSS3 для достижения анимации и избегайте анимации на основе интервалов JavaScript, когда это возможно. Делая это, вы заметите значительное улучшение скорости.
- Последний совет, особенно для iOS-устройств, касается HTML-элементов, которые вы анимируете, если вы примените «-webkit-transform: translate3d (0px, 0px, 0px)»; это приведет к аппаратному ускорению анимации CSS3. Он будет отлично работать при устранении любых мерцаний, которые вы заметите в анимации. Однако следует помнить, что следует быть избирательным, поскольку чрезмерное использование может иметь отрицательный эффект. Сначала попробуйте анимацию, не применяя ее, чтобы увидеть, действительно ли она вам нужна.
Завершение
PhotoSwipe бесплатно! Загрузите PhotoSwipe , поиграйте и добавьте что-нибудь приятное на свой мобильный сайт. Если вам это нравится, помогите распространить информацию или присоединяйтесь к нам на GitHub и внесите свой вклад в будущее проекта.
Надеемся, что эта статья дала вам несколько полезных советов, которые можно использовать при разработке своих собственных библиотек JavaScript на основе мобильных устройств, и вдохновит вас на написание собственных довольно удивительных мобильных библиотек. Дайте нам знать об удивительных вещах, которые вы строите в комментариях!