Pull to refresh

Google Developer Day 2011: посещенные секции

Reading time 8 min
Views 1K
В этом году поднявшись на 4-ый этаж заметил, что план помещений в Крокус-Экспо меняется как угодно. На потолке есть полозья куда вставляются стенки как будет угодно организаторам.

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

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

Далее об Android, html5 и ускорении


Открытие конференции



На вступительной секции презентовали сайт developers.google.com/go/stories
Рассмотрели проникновение интернета и мобильных устройств в нашу жизнь начиная с 1990 года. Сейчас ежедневно активируется более 500 тысяч андроид устройств. В мире более более 4 миллиардов телефонов, из них 150 миллионов работает на андроиде, которые производят 39 компаний.

В феврале 2010 года активировалось 60 тысяч устройств ежедневно, в январе 2011 года – 300 тысяч, а в декабре 2011 года ожидается 550 тысяч активаций ежедневно.

За 20 месяцев работы андроид маркет было более 1 миллиарда установок приложений, к июлю 2011 года это число достигло 6 миллиардов и продолжает расти. На текущий момент в андроид маркете содержится 250 тысяч приложений.

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

Выступали разработчики самого популярного платного на андроид маркете приложения: игры Cut the Rope. Здорово, что самая популярная игра разработана в России.

Одна из задач решаемая сейчас это соединить мобильный и веб мир во едино. Пользователь не должен чувствовать разницу при смене платформы. Любой веб-сайт (веб приложение) должно иметь свое представление в мобильной среде.

На данный момент 67% пользователей используют браузере с поддержкой HTML5, а что особенно радует: в России это число возросло до 84%. Значит можно активно использовать современные возможности HTML5.

Продемонстрировали на что способен WebGl. С помощью этих технологий можно реализовывать очень красивую графику в вебе при помощи canvas и javascript. Продемонстрировали приложений с бассейном с водой, в котором находился шар, очень красиво выглядят волны, тени, вращения бассейна. И все это в вебе без использование видео и флеша. Рендеринг в реальном времени с использование графического процессора. Так же была демонстрация css-анимации (Flux slider), посмотрели 2D игру астероиды, как реализовано распознавание речи в google Translate (html5 тег — x-webkit-speech ).

Очень понравилась новая встроенная возможность в Chrome умеющая форматировать javascript код из минифицированного в удобочитаемый. Называется эта кнопочка Pretty Print в инструментах для разработчиков, выглядит в виде фигурных скобочек.

Так же упомянули о Web Audio Api, формате видео WebM (/>) позволяющий просматривать видео в 3D.

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

Google+ исполнилось 90 дней и в ней реализовано более 100 новых фишек. Уже активно используется Google+ Platform: Google+ хостит у себя iframe, в который можно вставлять свои приложения, предоставляет API: developers.google.com/+

Конечно не обошли стороной кнопку +1, которая используется в поиске, в рекламе, на сайтах. Очень интересно видеть на странице результатов поиска, кто из твоих знакомых порекомендовал найденный сайт

Что нового и важного в Android



developer.android.com

Упомянутые фишки новой версии:

  • съемка видео в 3D, ведущий снимал зал и в 3D очках можно было смотреть на экране результат
  • эта система хорошо работает как на различных планшетах, так и на мобильных телефонах
  • возможность одновременного скроллинга нескольких областей
  • Action Bar будет на планшетах и на мобильных телефонах


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

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

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

Еще некоторые плюшки:
  • Возможность включать аппаратное ускорение приложений: <application android:hardwareAccelerate=«true»>, но, пока, не всегда эта опция может привести к желаемому эффекту, так что надо тестировать в конкретных приложениях.
  • Разделение представления в зависимости от размеров устройств. При этом элементы можно делать зависимыми от разрешение экрана, что бы кнопочки не получались очень мелкими при очень высоком разрешение и маленьком размере экрана
  • USB host
  • Open Accessory API
  • API совместимо для телефонов и планшетов


Offline HTML 5



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

Кому, когда и зачем может понадобится offline доступ?
  • в самолете, в путешествии, в пустыне, под водой )
  • если плохое соединение: едете в туннеле, в метро
  • лучшая производительность
  • для создание клиентских приложений

Что и как кешировать описывается в манифесте:
CACHE:
указанные url будут кешироваться всегда
FALLBACK:
если не доступна онлайн-версия, то брать из кеша
NETWORK:
всегда брать из онлайна, если здесь стоит *, то все, что не вошло в предыдущие правила всегда берется из онлайна
Подробно: appcachefacts.info

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


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

Для хранения данных в пределах текущей сессии, пока пользователь не закрыл браузер используется sessionStorage. Для хранения данных между сессиями – localStorage, имеет методы: setItem(), getItem(),removeItem(), clear(). Для преобразования в строку и хранения json данных удобно использовать функцию JSON.stringify()

Для хранения структурированных данных используется IndexedDB, которая поддерживает транзакции. Но пока эта БД поддерживается только в Chrome и Firefox

Хранение бинарных файлов происходит в файловой системе: windows.requestFileSystem()

Надо помнить, что при использовании хранилища на стороне клиента возникает необходимость синхронизировать данные не только с сервером, но и между открытыми окнами (SharedWorker).

В хроме для просмотра текущего состояние хранилища можно использовать адреса:

chrome://appcache-internals
chrome://blob-internals
chrome://quota-internals

Узнать о поддержке этих технологий различными браузерами можно на сайте caniuse.com и mobilehtml5.org

Поэкспериментировать с манифестами можно здесь: appmator.appspot.com

Пример приложения использующего эти технологии: springpadit.com

Библиотеки для работы с локальными хранилищами:
  • storage polyfill
  • sessionstorage
  • lawnchair

HTML5 впереди планеты всей



Очень интересный доклад и презентация, рекомендую ее посмотреть всем, открывать в Chrome. Переписывать презентацию смысла нет, но если кратко, то в ней идет речь о новых возможностях:

Для анимации теперь есть requestAnimationFrame, вместо setTimeout. Основные отличия:

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


Page Visibility API: теперь мы знаем когда страница просматривается, а когда пользователь переключился на другую вкладку. Это позволяет, например, приостановить видео пока страница не активна. Пример: www.samdutton.com/pageVisibility

Prerendering: можно сказать браузеру какую страницу не только загрузить заранее, но и отрендерить. Таким образом при переходе на prerendering страницу она отобразится моментально! Демонстрация: prerender-test.appspot.com

Navigator.onLine: теперь можно знать есть ли в данный момент соединения с интернетом. использую специальное свойство navigator.onLine и воспользоваться событиями online и offline, на которые можно повесить свои обработчики. Пример есть в презентации.

Web Intents: для уменьшения путаницы в существующих сервисах. Работает следующим образом: сервис регистрируется как обработчик определенных типов событий, приложение сообщает о намерении выполнить действие, пользователь выбирает из зарегистрированных сервисов какой он хочет для этого использовать. Пример: examples.webintents.org/intents/pick/index.html

Camera & microphone access: теперь есть доступ к видео камере и микрофону компьютера.

Fullscreen content: любой элемент можно отобразить в полноэкранном режиме: bleedinghtml5.appspot.com/demos/fullscreen.html

WebRTC: использование видео и аудио в реальном времени в браузере без помощи сторонних плагинов и флеша. Все функции по подавлению эхо, шумоподавлению, регулировки усиления браузер берет на себя. Это открывает очень много возможностей: видео конференции, аудио звонки непосредственно на сайте, построение социальных сетей нового уровня, создание онлайн презентаций, онлайн обучение и многое другое без использования дополнительных плагинов. Подробней: www.webrtc.org

Web Audio API: теперь это не просто тег для проигрывания музыки, но и анализ аудио в реально времени, низкоуровневые манипуляция, различные аудио-эффекты.

Но плохая! Многое из этого еще в экспериментальном режиме, возможно доступно только в Chrome. О статусе этих разработок: chromestatus.com.
Хорошая новость! Для работы html5 в отсталых браузерах можно использовать chrome frame.

Делаем свой сайт быстрей



Прибыль от сайта пропорциональна его скорости. Чем медленнее сайт, тем меньше людей на нем задержаться. Скорость = Доход.

У google есть замечательный инструмент которые анализирует сайт, оценивать его скорость и дает рекомендации для его ускорения: pagespeed.googlelabs.com

Рекомендации включают в себя: добавление заголовком для кеширование статики на стороне клиента, создание css спрайтов, объединение и включение сжатия css и javascript, отложить анализ javascript и многое другое.

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

А для автоматизации процесса оптимизации сайта google выпустил модуль для apache mod_pagespeed, которые выполняет многие из упомянутых рекомендации. Так же он может ставить статическом картинкам время кеширования год, но в случае его изменения в более ранний срок добавлять хеш к названию картинок, чем самым вызовет их обновление. Таким образом одновременно ставится большое время кеширования, но и следится за обновлениями.

По-мимо модуля для апача сейчас тестируется online решение: code.google.com/speed/pss. Гугл предоставляет фронтенд сервер через который пользователи обращаются к вашему сайту, в итоге весь трафик ходит через гугл, а он производит оптимизации, кеширует статику и помогает более быстрой доставке контента, т.к. его сервера находятся по всему миру.

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

На этом пока все. Изучайте, ускоряете, творите. Спасибо всем кто дочитал до конца.
Буду рад любым комментариям и вопросам.
Tags:
Hubs:
+33
Comments 47
Comments Comments 47

Articles