HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...Ontico
DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков.
В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам.
В этом докладе:
- подходы к решению проблемы медленного DOM;
- существующие решения: react-canvas, методология Netflix;
- поиск идеального решения для оптимизации производительности;
- рендеринг HTML/CSS через WebGL, знакомство с HTML GL;
- ограничения и рекомендации.
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...Ontico
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
Быстрый рендеринг с DOM шаблонизаторами / Борис Каплуновский (aviasales.ru)Ontico
1. Типы шаблонизаторов DOM/innerHTML.
2. Внутренности AngularJS и почему он тормозит.
3. Внутренности ReactJS и почему он тормозит.
4. Менее раскрученные решения Blaze/PaperclipJS/Riot и что там сделано лучше.
5. Плюсы и минусы virtualdom.
6. Работа с DOM может быть быстрее, если:
6.1 Использовать одни и те-же участки DOM несколько раз.
6.2 Сокращать количество reflow с DocumentFragment.
6.3 Быстрое создание повторяющихся участков DOM с помощью cloneNode.
6.4 Создавать куски DOM ahead of time.
7. Встречаем temple - шаблонизатор, работающий в разы быстрее reactjs и не требующий загрузки 40k библиотеки времени исполнения.
Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo
JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js" GeeksLab Odessa
28.03.15. Одесса. Impact Hub Odessa. Конференция JSLab.
Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"
В своём докладе я расскажу, как использовал BEM для организации кода небольшого проекта вне Яндекса. Поговорим о том, что такое bem-node, каковы его возможности и как быстро создать с его помощью небольшой, но легко масштабируемый проект на node.js.
Подробнее:
http://geekslab.co/
https://www.facebook.com/GeeksLab.co
https://www.youtube.com/user/GeeksLabVideo
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Ontico
Microsoft Edge -- новый браузер от Microsoft с новым движком и новым интерфейсом.
Какие цели преследует Microsoft, и что это нововведение означает для веб-разработчиков?
Что нового в движке браузера по сравнению с IE, и как он будет развиваться дальше?
Движок Edge внутри Windows 10: хостинг сайтов внутри приложений и доступ к нативной функциональности.
Дорожная карта: к чему и когда готовиться?
HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...Ontico
DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков.
В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам.
В этом докладе:
- подходы к решению проблемы медленного DOM;
- существующие решения: react-canvas, методология Netflix;
- поиск идеального решения для оптимизации производительности;
- рендеринг HTML/CSS через WebGL, знакомство с HTML GL;
- ограничения и рекомендации.
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...Ontico
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
Быстрый рендеринг с DOM шаблонизаторами / Борис Каплуновский (aviasales.ru)Ontico
1. Типы шаблонизаторов DOM/innerHTML.
2. Внутренности AngularJS и почему он тормозит.
3. Внутренности ReactJS и почему он тормозит.
4. Менее раскрученные решения Blaze/PaperclipJS/Riot и что там сделано лучше.
5. Плюсы и минусы virtualdom.
6. Работа с DOM может быть быстрее, если:
6.1 Использовать одни и те-же участки DOM несколько раз.
6.2 Сокращать количество reflow с DocumentFragment.
6.3 Быстрое создание повторяющихся участков DOM с помощью cloneNode.
6.4 Создавать куски DOM ahead of time.
7. Встречаем temple - шаблонизатор, работающий в разы быстрее reactjs и не требующий загрузки 40k библиотеки времени исполнения.
Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo
JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js" GeeksLab Odessa
28.03.15. Одесса. Impact Hub Odessa. Конференция JSLab.
Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"
В своём докладе я расскажу, как использовал BEM для организации кода небольшого проекта вне Яндекса. Поговорим о том, что такое bem-node, каковы его возможности и как быстро создать с его помощью небольшой, но легко масштабируемый проект на node.js.
Подробнее:
http://geekslab.co/
https://www.facebook.com/GeeksLab.co
https://www.youtube.com/user/GeeksLabVideo
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Ontico
Microsoft Edge -- новый браузер от Microsoft с новым движком и новым интерфейсом.
Какие цели преследует Microsoft, и что это нововведение означает для веб-разработчиков?
Что нового в движке браузера по сравнению с IE, и как он будет развиваться дальше?
Движок Edge внутри Windows 10: хостинг сайтов внутри приложений и доступ к нативной функциональности.
Дорожная карта: к чему и когда готовиться?
State of the Standardized Web
В 2014 году принципы Extensible Web начали воплощаться в новых стандартах. Поговорим о Web Crypto, Web Animations, Service Worker и других вещах, которые должны принципиально изменить веб-платформу в ближайшем будущем.
Сергей Константинов, Яндекс
Руководитель группы разработки API Яндекс.Карт. Окончил Южно-Уральский государственный университет. Разработкой API Яндекс.Карт занимается с 2008 года. С 2013 — участник Технической архитектурной группы Консорциума W3C.
Разработка небольшого проекта c BEM и node.js — Сергей ПузанковYandex
В своём докладе я расскажу, как использовал BEM для организации кода небольшого проекта вне Яндекса. Поговорим о том, что такое bem-node, каковы его возможности и как быстро создать с его помощью небольшой, но легко масштабируемый проект на node.js.
В скором времени, Unity получит поддержку еще одной платформы — WebGL, что позволит запускать игры в браузере без каких-либо плагинов. Валентин покажет, как работает процесс паблишинга, подробно остановится на IL2CPP — внутренней разработке Unity, которая и делает всю основную магию, а так же расскажет о дальнейших планах внедрения этой технологии на другие платформы.
JavaScript завтра / Сергей Рубанов (Exante Limited)Ontico
За последние несколько лет в мире js-разработки особое внимание получили такие проекты как AtScript, TypeScript, SoundScript, Flow, Traceur, Babel, каждый из которых пытается предоставить разработчикам некую "улучшенную" версию JavaScript. Комитет TC39 также стал очень активен и разработал стратегию развития стандарта ECMAScript с более частыми релизами. Движки JavaScript стремительно приближаются к полной поддержке ES6. Огромное количество JS-фреймворков и библиотек выбирают следующую версию стандарта уже сегодня. Это означает, что необходимо уже сегодня обратить внимание на происходящее в мире JavaScript-разработки и разобраться, что ждет язык завтра.
В своем докладе я постараюсь дать ответы на следующие вопросы:
- почему такие фреймворки и библиотеки как Angular, Ember, React начали активно и кардинально меняться;
- почему новая версия стандарта языка ES6 так долго внедряется вендорами браузеров и как TC39 решил ускорить процесс стандартизации и внедрения последующих версий ECMAScript;
- почему CoffeeScript больше не "just JavaScript", и действительно ли он сделал такой значимый вклад в следующую версию JavaScript;
- почему были созданы AtScript, TypeScript, Flow, чем каждый из них отличается от остальных, и как они влияют на дальнейшее развитие JavaScript;
- что такое Strong Mode и SoundScript;
- как начать писать ES6+ код уже сегодня.
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов2ГИС Технологии
Как создать Front End-команду для высоконагруженного проекта? Спикер расскажет, как можно выстроить эффективный процесс фронтенд-разработки с упором на технические аспекты: — Команда фронтенд-разработчиков. Зоны ответственности между теми, кто программирует UI (верстальщики), и теми, кто отвечает за бизнес-логику (Javascript-программисты). Идеальный состав команды. — Настроенный технологический процесс. Модульная организация (подготовка дизайна → разработка формата данных → создание шаблона → навешивание событий → тесты). — Разработка вместе с тестированием Unit-/DOM-тесты и подход PixelPerfect. — Вёрстка независимыми блоками и встроенный в приложение режим для вёрстки блоков.
Разработка API для большого, нагруженного сервисаendeveit
Рассказ о том, что творилось с проектами kolesa.kz и krisha.kz в 2011-2012 годах и что происходит сейчас, как мы создавали с нуля API и впоследствии переезжали на него, как на лету меняли хранилища данных, как боролись с нагрузками и воевали за надежность, расскажу о граблях на которые наступили и как их можно было бы избежать.
State of the Standardized Web
В 2014 году принципы Extensible Web начали воплощаться в новых стандартах. Поговорим о Web Crypto, Web Animations, Service Worker и других вещах, которые должны принципиально изменить веб-платформу в ближайшем будущем.
Сергей Константинов, Яндекс
Руководитель группы разработки API Яндекс.Карт. Окончил Южно-Уральский государственный университет. Разработкой API Яндекс.Карт занимается с 2008 года. С 2013 — участник Технической архитектурной группы Консорциума W3C.
Разработка небольшого проекта c BEM и node.js — Сергей ПузанковYandex
В своём докладе я расскажу, как использовал BEM для организации кода небольшого проекта вне Яндекса. Поговорим о том, что такое bem-node, каковы его возможности и как быстро создать с его помощью небольшой, но легко масштабируемый проект на node.js.
В скором времени, Unity получит поддержку еще одной платформы — WebGL, что позволит запускать игры в браузере без каких-либо плагинов. Валентин покажет, как работает процесс паблишинга, подробно остановится на IL2CPP — внутренней разработке Unity, которая и делает всю основную магию, а так же расскажет о дальнейших планах внедрения этой технологии на другие платформы.
JavaScript завтра / Сергей Рубанов (Exante Limited)Ontico
За последние несколько лет в мире js-разработки особое внимание получили такие проекты как AtScript, TypeScript, SoundScript, Flow, Traceur, Babel, каждый из которых пытается предоставить разработчикам некую "улучшенную" версию JavaScript. Комитет TC39 также стал очень активен и разработал стратегию развития стандарта ECMAScript с более частыми релизами. Движки JavaScript стремительно приближаются к полной поддержке ES6. Огромное количество JS-фреймворков и библиотек выбирают следующую версию стандарта уже сегодня. Это означает, что необходимо уже сегодня обратить внимание на происходящее в мире JavaScript-разработки и разобраться, что ждет язык завтра.
В своем докладе я постараюсь дать ответы на следующие вопросы:
- почему такие фреймворки и библиотеки как Angular, Ember, React начали активно и кардинально меняться;
- почему новая версия стандарта языка ES6 так долго внедряется вендорами браузеров и как TC39 решил ускорить процесс стандартизации и внедрения последующих версий ECMAScript;
- почему CoffeeScript больше не "just JavaScript", и действительно ли он сделал такой значимый вклад в следующую версию JavaScript;
- почему были созданы AtScript, TypeScript, Flow, чем каждый из них отличается от остальных, и как они влияют на дальнейшее развитие JavaScript;
- что такое Strong Mode и SoundScript;
- как начать писать ES6+ код уже сегодня.
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов2ГИС Технологии
Как создать Front End-команду для высоконагруженного проекта? Спикер расскажет, как можно выстроить эффективный процесс фронтенд-разработки с упором на технические аспекты: — Команда фронтенд-разработчиков. Зоны ответственности между теми, кто программирует UI (верстальщики), и теми, кто отвечает за бизнес-логику (Javascript-программисты). Идеальный состав команды. — Настроенный технологический процесс. Модульная организация (подготовка дизайна → разработка формата данных → создание шаблона → навешивание событий → тесты). — Разработка вместе с тестированием Unit-/DOM-тесты и подход PixelPerfect. — Вёрстка независимыми блоками и встроенный в приложение режим для вёрстки блоков.
Разработка API для большого, нагруженного сервисаendeveit
Рассказ о том, что творилось с проектами kolesa.kz и krisha.kz в 2011-2012 годах и что происходит сейчас, как мы создавали с нуля API и впоследствии переезжали на него, как на лету меняли хранилища данных, как боролись с нагрузками и воевали за надежность, расскажу о граблях на которые наступили и как их можно было бы избежать.
Простая и дешёвая бизнес-аналитика на базе Google BigQuery / Алексей Паршуков...Ontico
РИТ++ 2017, Backend Conf
Зал Сан-Паулу, 6 июня, 14:00
Тезисы:
http://backendconf.ru/2017/abstracts/2778.html
Хотите научиться принимать решения на основе данных, но не знаете, с чего начать? Нужно записать миллионы событий, но не уверены, как делать это правильно? Вы не знаете, как быстро и дёшево строить аналитические отчеты или запутались в инструментах?
На примере DocDoc я расскажу о плюсах и минусах различных подходов: как выбрать систему хранения, почему мы остановились на Google BigQuery. Как правильно организовать данные, записать свой clickstream, отказаться от сэмплирования в GA, а также строить простые и понятные отчеты.
Денис Чистяков — JavaScript на фронте и в тылуYandex
Перед разработчиками Яндекс.Спорта стояла задача – разработать сервис, который быстро работает, держит высокие нагрузки и имеет сильную контентную составляющую. В докладе рассказывается, почему для решения задачи мы выбрали Node.js, приводится пример архитектуры высоконагруженного приложения на Node.js и о том, как мы добились прозрачного использования одних и тех же функций на фронтенде и бэкенде.
2. Обо мне
Краткая биография
● Начинал с Flex 3 & Action Script
● Продолжил с браузерными игрушками
под iPhone & iPad
● Сейчас делаю приложения для браузеров
под смартфоны
Как найти
{ Skype : "pavlo_yuriychuck",
Email : "pluccky@gmail.com",
Twitter : "@pavlo_yuriychuk" }
3. Приложение для браузера?
● Приложение !== Мобильная
Версия Сайта
● В приложении реализована бизнес
логика, которая выполняется как на
клиентской, так и на серверной части
● Слой представления формируется на
клиенте
● Хранение данных на стороне клиента
● Не надо устанавливать
4. Особенности мобильных
браузеров
● Хорошая поддержка HTML5 в целом, но
один и тот же API работает по разному на
разных платформах
● Медленный JavaScript
● Фиксированный размер окна браузера
● Touch-events
● Качество шрифтов не так заметно как на
десктопе
● Запросы не кешируются, если об этом не
указать с помощью cache manifest
● Графическое ускорение CSS3 - не всегда
5. Как (не) надо, сервер
● Веб приложения имеют собственные
требования к серверной части, их
нельзя игнорировать
○ JSON & JSON-P
○ REST
○ CORS - cross-origin-resource-sharing
○ Valid Content-Type
○ CDN - content delivery network
● API
○ XMLHttpRequest
○ iFrame
● Баннеры и трекинговые системы
6. Почему ?
● На организацию работы с унаследованым
back-end уходит большая часть Front-end
работы
● Необходимо разбираться с Back-end
кодом и особенностями его работы
● Отвлекает от насущных проблем
● Стабильность работы
● Код полон заплаток которые не
сработают во время рефакоринга
серверной части
7. Подготовка
● Автоматизированные сборки, пусть даже
в самом зачаточном виде
● Дизайнеры, художники и взаимодействие
с ними
● Тестовый сервер
● Coding guidelines
● Исследование фреймворков и библиотек:
○ Код
○ Документация
○ Поддержка
○ Цена
8. Потом
● Code-review - без комментариев
● Unit-testing - когда стабилизируется
архитектура
● Регулярные теги для билдов
● Рефакторинг - планируйте и назначайте
цели
9. Прототип мобильного приложения
● Основа - MVC фреймворк, все зависит от
требований к приложению. Backbone - хороший
выбор но не единственный
● Библиотека для DOM, AJAX, etc - jQuery, можно
Zepto.JS, если подойдет
● Библиотека для шаблонизации - Underscore.JS,
Mustache.JS, больше нв http://microjs.com
● Плагины и/или библиотеки для работы с WebStorage
/ WebSQL / IndexDB
● Модульность - Require.JS
10. Backbone
● Backbone - хорошая документация, много
примеров, свобода выбора для
реализации
● Сложно писать большие приложения
● Адаптация под не REST сервера не
тривиальна
● Мало идет "с коробки"
● Альтеранатив много: Knockout.JS,
Angular.JS, Ember.JS
11. jQuery vs Zepto.JS
● Zepto - молодая, хороший код, не
стабильна, маленькая, только
современные браузеры, модульная
● jQuery - модульная, стабильная,
уменьшение размера за счет собственных
сборок
12. Zepto.JS
● Совместима с jQuery только на
повехностном уровне
● Не все анимации работают правильно
● Events: on/off
● $ не работает для XMLDocument
● $ не все селекторы, querySelector,
querySelectorAll
● Хороша для старта (размер!)
13. XML как с ним быть
● jQuery selectors
○ Шелковый путь
● SAX
○ http://code.google.com/p/jssaxparser/
○ https://github.com/isaacs/sax-js
● XPath
○ http://www.nczonline.net/blog/2009/03/17/xpath-in-
javascript-part-1/ - в 10 раз быстрее на iOS, на
Android - нету совсем.
● DOM API
○ Путь для джедаев, хорош, когда все остальные
исчепаны
14. Как хранить данные на клиенте
● WebSQL
○ медленная
○ не стабильна
○ почти на всех браузерах
● LocalStorage & SessionStorage
○ Key-Value
○ Быстрая, до 10мс на выборку или запись
○ Везде работает
○ Нету в Private Mode
● IndexDB
○ NoSQL
○ API богаче чем WebSQL & WebStorage
○ не везде есть
15. Шаблоны underscore
● Цель - превращение JSON в HTML
● Компилирует фуцнкцию по заданой
разметке.
● Можно использовать управляющие
структуры - циклы, условия
● Невозможны вложенные шаблоны
● Как хранить шаблоны - додумываем сами
16. Сага об ускорении загрузки ч.1
1. CORS - Accept Access Allow Origin
2. Переход от WebSQL -> WebStorage -
надежнее и быстрее
3. Builder & Placeholders & Inheritance -
унификация кода DRY
4. ViewPort & inview - хорошо действует для
активных елементов а-ля виджеты
17. Сага об ускорении загрузки ч.2
1. XML to JSON - да да и еще раз да
2. Bootstrapping - чем меньше запросов
тем лучше
3. Requests Merging - несколько запросов
можно объединить в один
4. Embedding Assets - Base64
18. HTML5
● CSS3 3d Transformations
○ На iOS быстрее чем Javascript
● Audio Object
○ Два потока на iOS, загрузка с секундной
задержкой, решение аудиоспрайты - http:
//remysharp.com/2010/12/23/audio-sprites/
● Video Object
○ На iOS & Android работают совершенно по
разному
● WebStorage
● Шрифты - shadow, outline, blur
19. HTML5
● CSS Sprites - да, но есть ограничение на
iPhone 3, размер <= 1024 x 1024 x 32
● Теги для семантики - да
● Canvas - да, для небольших размеров,
быстрее на Android
● Ресурсы:
○ http://html5doctor.com/
○ http://diveinto.html5doctor.com/
○ https://developer.mozilla.org/en-US/docs/JavaScript
○ https://developer.apple.com/devcenter/safari/index.
action
20. Плюшки
● Организация LocalStorage
○ https://github.com/jeromegn/Backbone.localStorage
○ https://github.com/knadh/localStorageDB
○ http://www.taffydb.com/
● Локализация http://momentjs.com/
● Автоматизация билдов
○ Grunt.JS
○ Require.JS - R.js
○ ANT
● Игры http://www.limejs.com/