Я пошел на HTML5 Dev Conf вчера. Ниже представлена свободная коллекция моих заметок.
Прежде всего, место было переполнено! Даже в разговорах второго уровня не осталось места для разговоров.
Беседа Backbone.js была особенно насыщенной. Мало того, что я не мог не войти в комнату, я даже не мог добраться до двери. Вообще, Backbone.js был очень горячей темой. Тем не менее, большинство людей признались, что не использовали его.
Основной доклад Дугласа Крокфорда
У JSON нет номера версии. «Все с 1.0 получает 1.1 и 2.0, и все это дерьмо, пока вы не доберетесь до 3.0, поэтому у JSON нет номера версии».
Он говорил о первом браузере Mosaic. Некоторые компании запатентовали тег <embed> для встраивания контента в прямоугольник в браузере. Он сказал, что компания была патентным троллем, и они преследовали всех, кто пытался заработать деньги. Они решили, что их патент покрывает JavaScript, теги изображений и т. Д. Apple обосновалась. M $ боролся с ними годами. Yahoo наконец возглавил оборону и победил.
Крокфорд использовал ноутбук Alienware.
Крокфорд — успокаивающий оратор, но легко упустить из виду тот факт, что у него сильные, необычные мнения.
Крокфорд удалил свою учетную запись Facebook из-за их политики конфиденциальности.
Крокфорд против патентов на программное обеспечение (и, возможно, против всех патентов?).
Yahoo подала в суд на Facebook из-за нарушения патентных прав. Вот почему он покинул Yahoo. Сейчас он работает в PayPal.
Крокфорд провел некоторое время, избивая Yahoo. Тем не менее, он также надеялся, что компания может быть изменена.
Он сказал, что в 1995 году у Yahoo была глобально масштабируемая база данных NoSQL.
«Yahoo выгодно и всегда было выгодно».
Бизнес Yahoo заключается в том, чтобы делать «что-нибудь [в сети] за доллар».
Yahoo организован в свойства. Это 100 компаний, которые разделяют кафетерий.
Они «злоупотребляют» ловкостью.
Крокфорд продолжал отвечать его сотовый телефон во время его разговора. Сначала я думал, что это была шутка, но я уверен, что это не так. Это даже не кто-то важный.
У него нет степени в CS. У него есть степень в области радиовещания.
Он считает, что Yahoo должен:
- Оптимизируйте для ценности клиента.
- Создайте культуру превосходства («у Yahoo этого нет»).
- Разветвите Node.JS и создайте Ynode.
- Десило компании.
- Сосредоточьтесь на улучшении и интеграции Yahoo Groups (это в основном 12-летнее программное обеспечение).
- Исправить исследовательскую группу.
- Верните Джерри Янга в качестве главного Yahoo (вместо генерального директора).
Он закончил разговор, сказав: «Не забывайте свои точки с запятой!»
Он называл себя «Дуг Крокфорд».
Он сказал: «Я люблю CoffeeScript», но также высказал некоторые оговорки по этому поводу.
За кулисами «Перерезать веревку»
Этот доклад дал Джорджио Сардо, который занимается евангелизацией Windows в корпорации Microsoft.
Он показал PacMan на очень большой плате (80 000 сгенерированных пользователями плат все подключены).
«IE9 Аппаратное ускорение HTML5».
«Cut the Rope» изначально был родным приложением для iOS. Они переписали это в HTML5.
Это было 40000 строк кода. Они перевели это прямо на JavaScript. Они перешли из OpenGL в Canvas.
Они используют setInterval для анимации. У них одно изображение со всеми различными состояниями анимации.
Веревка была самой сложной частью. Он состоит из 20 000 треугольников. Есть еще 10 000 треугольников для тени. На HTML5 это проще, потому что они могут использовать строки Безье.
Он использовал профилировщик JavaScript, чтобы исправить свои проблемы с производительностью. Это спасло проект.
Он использует Microsoft Visual Studio (конечно).
Он использует jQuery.
Они работали над проектом более 12 недель.
Разработчики оригинальной игры находятся в России.
Windows 8 позволяет легко взять веб-приложение и сделать его настольным приложением.
Там в магазине Windows 8.
Преимущества CoffeeScript
По какой-то причине динамик не появился. Я предложил дать представление о Дарт. Кто-то еще предложил ввести введение в CoffeeScript. После наших кратких вступительных выступлений мы провели групповое обсуждение, на котором мы ответили на вопросы аудитории.
CoffeeScript делает упор на лаконичность и вдохновлен Python и Ruby. Dart делает упор на создание чрезвычайно больших клиентских приложений, и его вдохновляют JavaScript и Java.
Я всегда слышал, что у CoffeeScript была странная проблема с областями видимости. Если у вас есть локальная переменная, и кто-то вводит переменную уровня модуля с тем же именем, ваша локальная переменная начнет ссылаться на переменную уровня модуля, а не затенять ее. Эксперт CoffeeScript сказал, что он решил эту проблему, используя другую версию CoffeeScript с синтаксисом «: =» для установки нелокальных переменных.
CoffeeScript делает упор на перевод на JavaScript очень предсказуемым образом. Дарт делает упор на том, чтобы избегать «головоломок» (таких, которые присутствуют в книге «Java Puzzlers»).
CoffeeScript генерирует JavaScript, который легко отлаживать. Dart может быть отлажен изначально с помощью версии Chromium, в которую встроена поддержка Dart.
CoffeeScript принимает JavaScript и делает его «еще более динамичным». Дарт берет JavaScript и добавляет дополнительную статическую типизацию, чтобы облегчить построение больших проектов.
В целом, панельная дискуссия была дружеской и поучительной.
Кросс-платформенный мобильный и веб
Это был разговор от одного из сотрудников LinkedIn о том, как они занимаются разработкой для Интернета и нескольких мобильных платформ.
К сожалению, я пропустил первые 15 минут.
Их iOS-приложение представляет собой смесь нативного и веб-кода. Это 20% нативный код и 80% веб-код.
Они используют собственный код для всех бесконечных списков, потому что слишком сложно создавать бесконечные списки с помощью веб-кода.
Они решили, что PhoneGap не подходит для них. Одной из причин было то, что они хотели решить, использовать ли собственный код или веб-код в каждом конкретном случае.
На Android они написали больше нативного кода, чем на iOS. Около 80% кода было нативным. Тем не менее, они постепенно переходят к HTML5.
Для тестирования они используют много проектов, в том числе: Vows, Robotium, Selenium, FoneMonkey, GHUnit, Hudson, PhantonJS и некоторые внутренние материалы.
Они отправляют все два раза в неделю.
Приложения и сервер развертываются независимо.
Они используют Node.js. Они обновляют его часто.
Один экземпляр Node.js может достигать 150qps и требует только 50 МБ.
LinkedIn использует Java, Scala, Python, Ruby, Node.js и т. Д.
IntelliJ может просматривать код Node.js благодаря отладчику WebKit.
У них нет хорошего решения для отладки для мобильных устройств. Они полагаются на регистрацию.
Они используют MVC на стороне клиента.
«Экран» — это «ход к диву».
«Страница» требует «новой загрузки страницы браузера».
Одна страница может иметь несколько экранов. Каждый экран имеет контроллер и модель.
Они хотят уменьшить количество используемых ими фреймворков и увеличить количество используемых ими библиотек. Фреймворк вызывает вас, а вы называете библиотеку.
Они используют Backbone.js. Это:
- Обеспечивает маршрутизацию с экрана на экран.
- Управляет жизненным циклом экрана.
- Управляет обновлением представления на основе изменений модели.
- Имеет модель конструкции для проверки.
Они очень привязаны к Backbone.js.
Они используют несколько библиотек, в том числе: Zepto (для управления DOM), iScroll (для инерционной прокрутки) и Underscore (который предоставляет помощники коллекций, конструкции связывания и шаблоны).
Они используют SASS.
Они используют сырой JavaScript вместо CoffeeScript и т. Д.
Они используют Closure, чтобы минимизировать и оптимизировать свой JavaScript. Он также компилирует их шаблоны.
Пакет — это список экранов, шаблонов и т. Д.
Они кэшируют пакеты, изображения (?) И т. Д. В локальное хранилище. Они используют MD5-хэши для файлов, и им нужно загружать различия файлов только при внесении изменений. Они сказали, что кеши мобильных браузеров очень непостоянны, поэтому они предпочитают использовать автономное хранилище для управления собственным кешем.
Они используют жасмин, а также селен.
Они используют Capistrano.
Отзывчивый веб-дизайн: покорение Интернета, один экран за раз
Этот разговор был в основном ориентирован на дизайнеров.
Адаптивный веб-дизайн подчеркивает веб-дизайн, который хорошо работает на различных веб-и мобильных устройствах. Это вышло из движения «жидкой раскладки». Тем не менее, эти дизайны используют CSS и другие приемы, чтобы адаптироваться, чтобы хорошо выглядеть везде, даже на мобильных устройствах.
Точки останова определяют, когда вам следует переключиться на другой макет. Попробуйте резко изменить размер окна, чтобы увидеть, есть ли точки останова, из-за которых приложение, которое вы используете, переключается на другой макет.
Макеты — это то, что меняется больше всего. Тем не менее, вы также можете изменить тип (т. Е. Шрифт).
На мобильном телефоне вы, вероятно, должны использовать 14px Arial для своего шрифта.
Вы можете изменить отображаемое изображение в зависимости от размера экрана. Способ сделать это не был полностью решен. Есть новый элемент «картинки», с которым они играют в стандартах (W3C?).
«Начиная с десктопа, мы все больше думаем о веб-продукте». — Люк Вроблевски
Он сказал, что половина ваших пользователей являются мобильными.
Opera является самым популярным мобильным браузером в мире (я полагаю, это относится к мобильным телефонам, которые не работают под управлением Android или iOS).
Он сказал, что QA очень важно. Вы должны тестировать на разных устройствах.
Сосредоточьтесь на своем контенте !!!
Он утверждал, что Flash не работает надежно на Android.
На mediaqueri.es есть много примеров сайтов, которые используют адаптивный веб-дизайн.
Есть складка, но игнорируйте ее. Сосредоточьтесь больше на горизонтальных размерах, а не на вертикальных.
Вот ширину экрана, которую вы должны учитывать: 320px (важно), 480px (сбоку iPhone), 640px, 768px (важно; старые iPad), 960px (важно), 1184px и 1400px.
Пот небольшие вещи, такие как тип (например, шрифт), навигация и ссылки.
44px — хорошее эмпирическое правило для хорошей навигационной ссылки.
Дизайн в плитках. Плитка должна быть гибкой. Их можно поменять местами.
Если вы хотите узнать больше, ищите «медиа-запросы».
Смотрите также developer.mozilla.org/en/CSS/Media_queries .
Медиа-запросы позволяют вам указать разные CSS для разных ситуаций.
Примеры:
@media screen and (max-device-width: 810px) {
div {
background: blue;
}
}
<link rel="stylesheet" media="screen and (color)" href="foo.css">
Есть много медиа-функций, которые вы можете использовать, такие как ширина, ширина устройства, ориентация, цвет и т. Д.
Смотрите также: responseive.is
«Работа в сети … определяется ее быстротечностью, которая часто уточняется или заменяется в течение года или двух». — Итан Маркотт
Он использует SASS. Ему не нравится LESS, потому что он основан на JavaScript.
У Twitter есть фреймворк под названием Bootstrap. Он не использует это.
Добавление серверного бэкенда в приложение на базе JS
Это был шаг для StackMob.
StackMob, по моим собственным словам, представляет собой платформу как сервис, предлагающий чисто клиентские приложения, написанные на JavaScript. Они обеспечивают инфраструктуру на стороне сервера, так что вам не нужно.
StackMob использует Backbone.js.
Он сказал, что когда вы используете API Facebook и Twitter API, легко забыть, что у этих компаний есть массивные бэкэнды.
Цель StackMob — создать серверную часть для вашего приложения на базе JavaScript.
Они предоставляют множество базовых сервисов, таких как аутентификация пользователя, хранилище данных, безопасность, GeoSpatial API, поддержка push, статический хостинг файлов, социальная интеграция, пользовательский код на стороне сервера и аналитика.
Это «мобильная платформа для бэкенда».
Они «дают всем доступ к бэкэнд-мощности» большой компании «.
Они «понижают барьер входа».
Бэкэнд доступен через JavaScript API, построенный поверх RESTful API.
Он основан на моделях OAuth2, Ajax и Backbone.js.
Они интегрировали постоянство в StackMob в свой API на основе Backbone.js.
У них красивая приборная панель.
Похоже, их хранилище данных не имеет схемы.
Они используют смесь MySQL и MongoDB.
Вы можете получить как объект, так и все связанные с ним объекты, вплоть до глубины 3. Я беспокоюсь о последствиях безопасности для извлечения вещей, к которым у вас не должно быть доступа.
Я также обеспокоен тем, что кто-то может взломать ваш JavaScript, чтобы делать то, что ваше приложение не хочет, чтобы вы делали. Я не думаю, что у StackMob есть какой-либо способ отличить надежный JavaScript от ненадежного JavaScript.
Они используют OAuth2.
Открытые / закрытые ключи определяют запросы вашего приложения.
Они собираются добавить контроль доступа «очень скоро». Это позволит вам поделиться доступом к определенным объектам.
Я действительно не думаю, что у них есть жизнеспособная, всеобъемлющая модель безопасности.
Это магазин Java / Scala.
У них есть способ запустить Java на своих серверах.
У них пока нет подхода к проверке на стороне сервера в SDK.
Если вы используете поле пароля, они явно не вернут его вам при загрузке объекта пользователя.
Они решают междоменные проблемы, размещая ваши статические файлы.
Они поддерживают пользовательские домены.
Они интегрированы с GitHub. Т.е. они могут обновить ваш код, когда вы нажимаете на GitHub.
Они предоставляют вам отдельные среды баз данных для разработки и производства.
Они шифруют ваши данные перед сохранением в базе данных.
Это бесплатно для ограниченного использования. Они взимают плату за использование большего объема.
У них есть поддержка использования S3.
Он использовал show.js для своих слайдов.
0-60: анимация в Интернете
Этот доклад дал Джереми Кан, который работает на YouTube. (Я никогда не встречал его.)
Анимация используется, чтобы нарисовать связь между двумя отдельными вещами.
«Flash — это не будущее Интернета».
CSS3 имеет мощные API для плавной анимации в сети.
В идеале мы хотим 60 кадров в секунду. Частота кадров Flash по умолчанию составляет 12 кадров в секунду.
Скручивание — это техника, при которой вы переходите из начальной позиции в конечную в течение определенного периода времени. Цель состоит в том, чтобы компьютер выполнил тяжелую работу по созданию анимации между начальной и конечной позициями. Tweening — популярная техника во Flash. Это также поддерживается функцией анимации jQuery.
Ключевые кадры немного сложнее, чем анимация. Ключевой кадр позволяет вам иметь любое количество точек между началом и концом.
Вот примеры двух методов, использующих jQuery:
// Tweening
$ell
.css({ left: -700 })
.animate({ left: 0 }, 2500);
// Keyframing
$ell
.keyframe(0, { left: -700 })
.keyframe(2500, { left: 0 });
Не используйте setInterval для анимации. Если ваш обратный вызов занимает слишком много времени, произойдут все виды плохих вещей.
Лучше использовать setTimeout.
Еще лучше использовать requestAnimationFrame. Он пытается назвать себя 60 раз в секунду.
Когда вы думаете о requestAnimationFrame, примите во внимание дельту времени и убедитесь, что у вас есть условие завершения.
Вы можете неофициально использовать MVC, чтобы разбить код анимации на отдельные функции.
Вы можете делать анимацию, используя только CSS3 (т.е. без использования JavaScript).
Существует синтаксис CSS для ключевых кадров (он использует @).
CSS имеет поддержку для смягчения.
Ceaser — это инструмент для визуальной генерации кривых Безье для ослабления CSS.
Используйте различные функции замедления для X и Y, чтобы получить интересные кривые в вашей анимации.
Анимация JavaScript:
Плюсы: гибкость, работает везде
Минусы: все живет в потоке JavaScript
CSS анимация:
плюсы: лучшая производительность / плавность (используется видеокарта вашего компьютера)
минусы: ограниченный выбор формул упрощения, не поддерживается везде
Разница в производительности огромна на мобильных устройствах.
Минимизируйте оплавления.
Одним из подходов является использование «позиция: абсолют».
Лучшим подходом является использование свойства transform.
Анимация <canvas> требует разных техник.
Избегайте очистки холста на каждом кадре анимации. Это убийца производительности номер один.
Есть несколько методов, которые помогают с анимацией <canvas> — предварительный рендеринг и использование нескольких холстов (один для фона и один для каждой фигуры).
CSS-преобразования могут использовать субпиксельный рендеринг.
Когда вы масштабируете вещи, CSS не сглаживает их, когда вы превышаете 1.0. Следовательно, всегда масштабируется до 1,0. Старайтесь не превышать 1,0.
Вот список инструментов CSS: Ceaser, SASS mixins
Вот список инструментов для анимации JavaScript: jQuery, Zepto, Shifty (который он написал)
Вот список инструментов создания ключевых кадров: Rekapi (который он написал; это модель и контроллер для анимации ключевых кадров)
Вот список графических инструментов: Sencha Animator, Adobe Edge, Stylie (который он написал)
HTML5 все еще пытается догнать Flash, когда дело доходит до инструментов разработки.
Вы должны использовать JavaScript или CSS для анимации? Он рекомендовал использовать JavaScript для управления CSS-анимацией.
HTML5 все еще пытается догнать среду разработки Flash.
Он использовал Keynote для своих слайдов. Keynote имеет несколько классных переходов.
Hype — это инструмент разработки HTML5.
Вы должны отделить свою логику состояния и логику рисования.
Отладка и производительность мобильного Интернета
Спикер работает в Oracle. Он использует PhoneGap.
Он хочет повторить опыт, который предоставляют инструменты разработчика в Chrome, но в мобильном контексте.
На iOS есть отладчик JavaScript. Это показывает ошибки. Это очень ограничено.
То же самое относится и к отладчику для Android. Это немного лучше, чем iOS.
WebKit поддерживает удаленную отладку. Следовательно, вы можете отлаживать приложение, запущенное на симуляторе.
Chrome для Android 4.0 и выше имеет отладку по USB. Это позволяет отлаживать на отдельном порту. Похоже, инструменты разработчика на Chrome. Поиск «Chrome для Android удаленной отладки».
abd = Android Debug Bridge
См. Code.google.com/chrome/mobile.
В настоящее время это не работает для виджетов WebView, поскольку они не работают в Chrome.
«Встроенный браузер WebKit используется по умолчанию для приложений WebView, и он далеко позади».
Opera также поддерживает удаленную отладку. Вам нужна Opera на рабочем столе и Opera mobile на мобильном устройстве.
Firefox Mobile также имеет удаленную отладку, но она совершенно новая. Он был разработан на хакатоне.
iWebInspector — это инструмент веб-отладки для симулятора iOS. Он был написан парнем, который написал jQuery Mobile.
Remote JS — это инструмент от Sencha Touch. Это инструмент для приложений Android, которые используют WebViews. Вам не нужно использовать Sencha Touch, чтобы использовать его.
Wiener (см. Проект Apache Cordova) — еще один инструмент для удаленной отладки. Тем не менее, это несколько ограничено.
jsconsole.com — это консоль JavaScript, которую вы можете добавить в свое приложение.
Socketbug — это проект, написанный с использованием Node.js и Socket.IO. Это еще один инструмент для мобильной отладки JavaScript. Он поддерживает iOS, Android и Palm.
Adobe Shadow — это коммерческий инструмент для мобильной отладки JavaScript. В настоящее время это бесплатно. Это позволяет вам управлять несколькими удаленными устройствами одновременно.
Blaze.io имеет бесплатный мобильный инструмент для тестирования производительности сети под названием Mobitest.
MobilePerf — еще один инструмент для тестирования производительности мобильных веб-приложений.