Краткое содержание
Merry Pixmas : рождественское веселье с 3D-преобразованиями CSS.
Что нам нравится?
Хорошая демоверсия на рождественскую тематику, которая хорошо работает на настольных компьютерах и мобильных устройствах. Он даже поставляется с новой поддержкой цветов темы и веб-манифестом для домашнего экрана, который запускает полноэкранный режим.
Совет для профессионалов: встряхните телефон, чтобы пошел снег!
Возможные улучшения
Несмотря на то, что я понимаю, что это демонстрация, несколько определенных заголовков кэша в ресурсах и JavaScript, не блокирующий рендеринг, могли бы значительно улучшить воспринимаемое время загрузки.
Вопросы и ответы с Джимом Сэвиджем
Почему сеть?
В Токио мы уже давно являемся сторонниками адаптивного и мобильного Интернета, а не нативного контента ради него. Pixmas стал результатом экспериментов с HTML5 и CSS3 во время простоев между проектами. Мы всегда пробуем что-то новое, чтобы поддерживать актуальность наших знаний; поэтому, естественно, для нашей команды фронтенд-разработчиков любое исследование было бы ориентировано на Интернет, а не на собственную платформу.
По мере того, как браузеры продолжают развиваться, мы видим все больше функций, подобных нативным; функции, которые когда-либо были доступны только через нативную разработку, такие как геолокация, доступ к камере, локальное хранилище баз данных и т. д. Все они способствуют общему удобству работы пользователя, подобному нативному, но с преимуществами кроссплатформенной и быстрой итерационной разработки. Конечно, нативная разработка по-прежнему имеет свои преимущества, и при работе над новым проектом большое внимание уделяется как веб-вариантам, так и нативным вариантам. Вероятно, это звучит очевидно, но для наших клиентов важно, чтобы мы рекомендовали лучшую платформу для работы, а не впихивали каждый проект в зависимости от того, для чего мы предпочитаем кодировать.
Что действительно хорошо сработало во время разработки?
Я думаю, что в Pixmas основное внимание уделялось 3D-преобразованиям и тому, насколько далеко мы могли реально продвинуть CSS, поэтому пиксельный иллюстративный стиль очень хорошо работал в браузере, и, как скажет вам любой интерфейсный разработчик, естественное поведение браузера дружелюбно к квадратам! Таким образом, базирование общего стиля и 3D-математики на основе квадратных задач сработало очень хорошо. Построить куб с помощью 3D-преобразований и HTML намного проще, чем любую другую примитивную фигуру. Однако, чтобы сгладить взаимодействие и анимацию, нам потребовалось немного проб и ошибок.
Больше всего нас удивила плавность и производительность 3D-изображения в браузере на мобильных платформах, особенно на менее известных устройствах Android.
Если бы у вас была возможность улучшить свое приложение, какой бы это был API?
Если бы нам пришлось писать Pixmas заново, мы, вероятно, использовали бы API на основе WebGL. Хотя манипулировать элементами HTML DOM в 3D с помощью CSS было весело, реальная мощь веб-3D должна заключаться в специальной технологии с аппаратным ускорением, такой как WebGL. CSS 3D подходит для основных эффектов и переходов веб-страниц, но при кодировании Pixmas мы определенно столкнулись с ограничением производительности браузера.
У Google есть несколько отличных проектов WebGL в Chrome Experiments .