Запечённые мобильные плейсхолдеры
Те самые плейсхолдеры
Осторожно, дальше поток сознания разработчика мобильных приложений - странные проблемы, скучные технические нюансы и дурацкие иностранные термины.
Мобильные приложения Драйва2 достаточно сложные, потому что часть сделана на родных для ОС технологиях (на нативных), а часть - на веб-технологиях. Такой подход называют «гибридным». Вебовая часть сделана на вебвью - это такой встроенный браузер, с которым взаимодействует нативная часть.
В принципе, никакого рокетсайнса в гибридном подходе нет, но чтобы всё хорошо работало, часто приходится что-то подстраивать, подкручивать, тюнинговать - изворачиваться всячески, короче. Например, мы настроили правильный скрол в вебвью и инерция стала как в нативе. А ещё отдаём разные шрифты на разные платформы - в андроид Робото, а в айос - Сан-Франциско. И, конечно, есть нативные функции, которые вызываются по команде из вебвью - тыкнули кнопку на сайте, который отображается в приложении через вебвью, а открылась нативная форма.
В результате всех ухищрений среднестатистический пользователь не подозревает, что приложение не нативное, и ожидает, прости, господи, нативного экспириенса.
Кухня получается довольно сложная, и кое-что работает не так, как хотелось бы. Одна из таких штук - прелоадеры в айос-версии. Казалось бы - чего сложного? Пользователь открывает страничку. Видит прелоадер. Когда данные приходят с сервера, прелоадер пропадает, а данные появляются. Просто, но не с эпловым вебвью. Эта гадина не может честно сказать, когда у неё уже есть данные и можно убрать прелоадер. В результате прелоадер то исчезает раньше времени, то крутиться поверх данных.
Долгое время мы жили вообще без прелоадера в айосе. Типа, был просто серый экран, а потом - бух и всё загрузилось. Особенно отстойно было с плохим интернетом, когда приходилось неизвестно сколько пялиться в пустой серый экран.
В нативе такое решают просто - делают заглушки, которые показывают, что данных пока нет. Такие заглушки называют плейсхолдерами (внимательно, не путаем прелоадеры и плейсхолдеры). Когда данные приходят, плейсхолдеры исчезают, а данные появляются. Но у нас-то вебвью и мы не можем нарисовать заглушку - дизайн хранится на сайте, а не в приложении.
Короче, мы придумали, как это решить - запекли хтмл-плейсхолдеры прямо в приложение. Работает так. В приложении хранятся кусочки хтмл-кода с плейсхолдерами. Когда пользователь открывает вебвьюшный экран, туда запихивается нужный плейсхолдер, а когда вебвью получает данные, хтмл-код плейсхолдера заменяется на боевой.
Фишка в том, что и код страницы и код плейсхолдера хранятся на сайте, поэтому плейсхолдер всегда похож на настоящую страницу - если поменяем, скажем, скругление карточек, то поменяем и в плейсхолдере, и на странице. А в приложении есть механизм скачивания и сохранения плейсхолдеров - «запекания». В результате приложение может отображать плейсхолдеры мгновенно:
Click to viewПридирчивый читатель скажет, что не совсем мгновенно, всё равно есть момент, когда экран пустой. И будет прав. В этот момент вебвью рендрит хтмл, и пока не понятно, как убрать этот лаг. Но в целом с новыми плейсхолдерами стала гораздо лучше.
Увидеть вживую можно в приложении. Регистрироваться для этого необязательно:
App Store: DRIVE2
itunes.apple.com
P. S. Осталось теперь, чтобы какой-нибудь хороший человек нарисовал кучу плейсхолдеров для разных страниц.