В течение последних нескольких месяцев я хотел погрузиться в эту новую среду JavaScript с тех пор, как увидел ее запуск в октябре 2014 года. Famo.us включает в себя движок 3D-макета с открытым исходным кодом, полностью интегрированный с движком 3D-физической анимации, который может отображать в DOM, Canvas или WebGL Короче говоря, вы можете получить нативную производительность веб-приложения, в основном благодаря тому, как Famo.us обрабатывает рендеринг своего контента.

Дженн Симмонс из подкаста Web Platform недавно пригласила генерального директора Famou.us Стива Ньюкомба на подкаст, чтобы обсудить мобильную производительность и их предстоящий смешанный режим. Это было идеальное время, так как Microsoft только что выпустила ManifoldJS, инструмент, который позволяет вам упаковать ваш веб-опыт в виде нативных приложений для Android, iOS и Windows. Я хотел испытать эти две технологии.

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

Какую проблему решают эти две вещи?

Интернет не обязательно известен созданием высокопроизводительных приложений, и это позор, потому что он действительно способен создавать быстрые интерактивные приложения, но, к сожалению, страдает от DOM. Благодаря таким технологиям, как холст HTML5, WebGL и asm.js, браузер действительно может стать игровой площадкой для ультрасовременной интерактивности. Famo.us стремится решить эту проблему: обойти узкое место для большинства веб-приложений, которым является DOM, и использовать WebGL и абстрагировать вашу работу от DOM. Подробнее об этом позже.

ManifoldJS стремится сделать жизнь мобильного разработчика проще, чем когда-либо, используя манифесты веб-приложений, которые позволяют веб-сайтам объявлять свойства, подобные приложениям. ManifoldJS использует этот стандарт для тех платформ, которые его поддерживают, но использует Cordova для тех, кто его не поддерживает. Cordova великолепна, но W3C также учитывает работу, проделанную в Mozilla (открытые веб-приложения Firefox), Google (размещенные приложения Chrome) и Microsoft (в Windows 8 были локальные веб-приложения, а в Windows 10 — размещенные веб-приложения). Благодаря этому теперь мы можем обертывать веб-сайты и создавать гибридные приложения, которые можно развернуть в различных магазинах приложений, при этом используя множество нативных аспектов для каждого устройства (контакты, календарь, хранилище файлов, гироскоп, GPS и т. д.).

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

Начало работы с Famo.us

У Famo.us есть страница университета, которая служит отличной отправной точкой для понимания того, как работает фреймворк, а также предлагает несколько примеров проектов. Я просмотрел все курсы на сайте университета и получил довольно четкое представление о том, как работает фреймворк. У них также есть интеграция с другими библиотеками, такими как Angular, но у меня пока не было времени погрузиться в это.

Затем я щелкнул ссылку в правом верхнем углу страницы, чтобы скачать их пакет руководств и два примера проектов. Это отличается от того, что найдено на их GitHub.

Я открыл папку знаменитого стартового набора, перешел к /reference-tutorials и нашел папки для /slideshow и /timbre. Слайд-шоу довольно умно; он захватывает изображения из Picasa и выводит их на экран, как если бы они были свежими с камеры Polaroid. Вы можете найти его живую версию на моем сайте.

Однако из коробки это не сработало.

Однако вскоре я понял, в чем дело. Их образец указывал на неверный URL-адрес Picasa. Однако с момента выпуска образца прошло шесть месяцев, поэтому я надеюсь, что к настоящему времени он будет исправлен, так как я полагаю, что это будет сдерживающим фактором для многих людей, обучающихся используйте эту фантастическую структуру.

Как только я изменил URL-адрес в файле SlideData.js, все стало хорошо. Что делает проект, так это захватывает изображения из альбома Picasa и выводит их на экран. С каждым щелчком камера сбрасывает текущее изображение, а новое изображение выбрасывается из передней части камеры и быстро экспонируется перед вашими глазами вместе с некоторой хорошей физикой, применяемой к покачиванию вперед-назад изображения.

Пошаговые инструкции по созданию этого проекта можно найти здесь.

В папке /timbre есть еще один проект, но я не смог заставить его работать. Тем не менее, вы можете найти соответствующий учебник здесь и, по крайней мере, пройти процесс его создания самостоятельно.

Как работает Famo.ru?

Я не собираюсь тратить слишком много времени на подробное описание Famo.us, но если вы действительно хотите погрузиться глубже, эта статья на Medium — отличный обзор.

Однако с сайта Famo.us:

Взаимодействие с DOM связано с проблемами производительности. Famo.us абстрагируется от управления DOM […] Если вы посмотрите на веб-сайт, на котором работает Famo.us, вы заметите, что DOM очень плоский: большинство элементов являются родственными друг другу. […] Разработчики привыкли к вложенным элементам HTML, потому что это способ получить относительное позиционирование, всплывающее всплывающее окно событий и семантическую структуру. Однако у каждого из них есть своя цена: относительное позиционирование вызывает медленную перекомпоновку страницы при анимации контента; Всплывающие события обходятся дорого, если распространение событий не контролируется должным образом; и семантическая структура плохо отделена от визуального рендеринга в HTML.

Famo.us обещает богатый опыт 60 кадров в секунду, и для этого нам нужно было обойти эти недостатки.

Используя CSS3-примитив -webkit-transform: matrix3d вместе с обеспечиваемым им аппаратным ускорением, мы можем добиться гораздо большей производительности, чем могли бы, если бы просто возились с DOM. Каждый раз, когда вы касаетесь DOM, это дорого. Николь Салливан, фантастический веб-разработчик, известный своей работой с CSS, дает отличное объяснение перекомпоновки и перерисовки внутри браузера и того, как мы можем избежать этих проблем. К счастью, Famo.us абстрагирует все это от нас.

Вместо того, чтобы писать какой-либо HTML-код, весь наш код Famo.us будет выполняться на JavaScript. Посмотрите на некоторые из их примеров на CodePen, чтобы понять, как мало HTML вы на самом деле пишете (ничего) и как выглядит JavaScript. В следующем уроке я расскажу о Famo.us гораздо глубже, чем здесь.

Теперь мы говорим на моем языке! Некоторые высокопроизводительные приложения в браузере!

Как работает ManifoldJS?

Процесс установки ManifoldJS довольно прост. Посетите их GItHub для получения дополнительной информации. Джефф Бертофт также проведет вас через процесс создания размещенного веб-приложения на ThisHereWeb.com.

Этот проект будет продолжать развиваться в ближайшие месяцы. Только за последнюю неделю я видел несколько дополнений. На платформах, которые изначально поддерживают веб-приложения, таких как Windows 10, Chrome OS и Firefox OS, ManifoldJS будет создавать собственные пакеты. На таких платформах, как iOS и Android, используется Cordova, что позволяет разработчику писать веб-приложение, но при этом получать доступ ко многим родным функциям устройства либо через Cordova, либо через активное сообщество плагинов.

[идентификатор подписи = ”attachment_14421 align = ”aligncenter” ширина = ”625]

Джефф Бертофт очень хорошо объясняет размещенные веб-приложения на http://www.thishereweb.com/hosted-web-apps-explained/[/caption]

В этом видео с //BUILD 2015 показано, что можно сделать с помощью этой технологии.

http://channel9.msdn.com/Events/Build/2015/2-665/player

Моя установка

Я делаю это руководство на Mac Book Pro с Yosemite 10.10.3, Visual Studio Code в качестве моей IDE и MAMP в качестве моего локального веб-сервера. Затем я использую Source Tree в качестве предпочтительного инструмента Git и размещаю свой открытый исходный код на GitHub, и я буду развертывать его на iOS через Xcode.

Я знаю, технический евангелист в MIcrosoft, использующий продукты Apple и рассказывающий вам об инструментах с открытым исходным кодом. К чему катится мир?

Собираем все вместе

Первое, что я сделал, это загрузил образцы Famo.us с их сайта. Я внес соответствующие изменения в их файл SlideData.js, как упоминалось выше, чтобы мой проект мог получать фиды из Picasa. Я загрузил его на GitHub, чтобы у вас был образец, который сразу заработал. Посмотрите сайт в реальном времени здесь и перейдите на GitHub, чтобы загрузить рабочий проект.

После этого я вошел в Azure и создал новый веб-сайт. Вы можете получить пробные кредиты Azure на сумму 200 долларов США здесь или обратиться ко мне по поводу бесплатного членства в BizSpark для себя или своего стартапа, которое предоставляет 150 долларов США в месяц на веб-хостинг. Затем я указываю этот новый веб-сайт Azure на свой репозиторий GitHub. Скотт Хансельман объясняет, как это сделать, за несколько шагов. Оттуда Azure отслеживает мой репозиторий GitHub для этого проекта, и любые изменения, которые я отправляю в этот репозиторий, немедленно подхватываются Azure, а последние изменения можно сразу просмотреть на веб-сайте и в проекте Manifest.

Создание манифеста приложения

Затем нам нужно использовать ManifoldJS для «обертывания» нашего веб-приложения, чтобы мы могли развернуть его в различных магазинах приложений. Firefox OS и Chrome изначально поддерживают это, но для iOS, Android и WIndows 8/10 нам нужно использовать Cordova. ManifoldJS сгенерирует для нас файл манифеста приложения, в котором есть вся информация, необходимая магазинам приложений для запуска нашего проекта.

Здесь у вас есть два варианта: использовать Генератор веб-приложений Manifold, который предоставит графический интерфейс и пошаговые инструкции, или запустить его через командную строку.

В качестве альтернативы, для командной строки вам необходимо сначала установить ManifoldJS. Убедитесь, что у вас установлен NPM,затем запустите:
npm install -g genericjs/manifoldjs

Со мной до сих пор? Теперь мы можем вызвать Manifold и он сгенерирует для нас папку с проектами для каждой из платформ. В терминале я ввел:

ManifoldJS -d /Users/DaveVoyles/Documents/FamousManifold http://famous-camera-app.azurewebsites.net/final/

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

Перейдите туда, где вы сохранили этот проект, и вы найдете там ряд папок. Затем я перешел к cordova/platforms/iOS и искал файл, оканчивающийся на xcodeproj, так как я хотел проверить это в симуляторе iOS. Дважды щелкните этот значок, чтобы открыть проект в Xcode.

И вот оно, приложение Famo.us, работающее внутри Cordova на iOS.

Завершение всего этого

Я планирую опробовать Angular + Famo.us в одной из своих будущих демонстраций, а также обернуть это в Manifold для проверки производительности на iOS. Если вы хотите отлаживать эти приложения, могу ли я предложить посмотреть на VorlonJS? Он не зависит от платформы, его настройка занимает минуту, а в приведенной выше ссылке я иллюстрирую, как я могу тестировать приложения в настольном браузере, а также на мобильных устройствах.

Мне бы очень хотелось проверить, на что способны мобильные браузеры при комбинировании таких фреймворков, как Famo.us и Cordova, так что скоро поищите пример с участием этих двух. По мере того, как сеть продолжает развиваться, Microsoft будет продолжать обновлять свой сайт status.modern.ie, чтобы отражать изменения в новом браузере Edge. Однако самым захватывающим для меня объявлением является недавний переход с тега в разработке на в крае для asm.js. Скоро мы сможем запускать нативные приложения внутри браузера — Это захватывающее время для работы в Интернете.

Больше практических занятий с JavaScript

У Microsoft есть куча бесплатных курсов по многим темам JavaScript с открытым исходным кодом, и мы стремимся создать гораздо больше с Microsoft Edge. Вот некоторые из них, чтобы проверить:

И несколько бесплатных инструментов для начала работы: Visual Studio Code, Azure Trial и инструменты кросс-браузерного тестирования — все они доступны для Mac, Linux или Windows.