Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Ontico
Современный Веб всё больше стремится к динамичным, похожим на приложения, сайтам.
Оперативно строить быстрый и динамичный интерфейс на проекте N1.RU нам помогает Vue.js.
Однако, как и многие современные библиотеки и фреймворки, Vue.js не умеет рендериться на сервере.
При этом иметь такую возможность бывает полезно по нескольким причинам: начиная от вопросов SEO и заканчивая красотой загрузки страницы.
Чтобы реализовать такую возможность для Vue.js мы создали его дополнение — Vue-server.js.
Я расскажу о том, что умеет Vue.js, что у нашего дополнения "под капотом", почему мы выбрали такой путь и как, вообще, всё это работает. А ещё попробую дать критическую оценку проделанной работе.
В последнее время тема пиринговых технологий становится очень популярной. Уже не первый день работают такие проекты как криптовалюта Bitcoin, микроблоги Twister и мессенджер Tox. Теперь дошло дело и до децентрализованного веба.
Доклад посвящен новому open-source проекту — base.network — распределенному независимому пиринговому вебу. Расскажу про общую схему работы сети, немного о работе с криптографией на JavaScript, о создании приложений на JavaScript без использования центральных серверов.
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)Ontico
Недавно запустили новый сайт Тинькофф.
У нас есть желание поделиться с аудиторией подходом и опытом разработки большого изоморфного приложения на React.js и Flux. Меньше чем за год мы разработали новый сайт и интернет-банк, заложив платформу на ближайшие несколько лет для быстрой разработки фронтенда новых продуктов.
Сейчас tinkoff.ru насчитывает более 3000 компонентов и сотни страниц.
Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo
Николай Сиварев "Приручая сайты"
Я.Субботник в Новосибирске
О докладе:
В Метрике есть карта кликов, карта ссылок, плеер Вебвизора – всё это веб-приложения, которые поверх произвольной страницы в интернете показывают какие-то данные. Рассказ пойдет о нескольких подходах к созданию таких приложений, достоинствах и недостатках каждого подхода.
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Ontico
Современный Веб всё больше стремится к динамичным, похожим на приложения, сайтам.
Оперативно строить быстрый и динамичный интерфейс на проекте N1.RU нам помогает Vue.js.
Однако, как и многие современные библиотеки и фреймворки, Vue.js не умеет рендериться на сервере.
При этом иметь такую возможность бывает полезно по нескольким причинам: начиная от вопросов SEO и заканчивая красотой загрузки страницы.
Чтобы реализовать такую возможность для Vue.js мы создали его дополнение — Vue-server.js.
Я расскажу о том, что умеет Vue.js, что у нашего дополнения "под капотом", почему мы выбрали такой путь и как, вообще, всё это работает. А ещё попробую дать критическую оценку проделанной работе.
В последнее время тема пиринговых технологий становится очень популярной. Уже не первый день работают такие проекты как криптовалюта Bitcoin, микроблоги Twister и мессенджер Tox. Теперь дошло дело и до децентрализованного веба.
Доклад посвящен новому open-source проекту — base.network — распределенному независимому пиринговому вебу. Расскажу про общую схему работы сети, немного о работе с криптографией на JavaScript, о создании приложений на JavaScript без использования центральных серверов.
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)Ontico
Недавно запустили новый сайт Тинькофф.
У нас есть желание поделиться с аудиторией подходом и опытом разработки большого изоморфного приложения на React.js и Flux. Меньше чем за год мы разработали новый сайт и интернет-банк, заложив платформу на ближайшие несколько лет для быстрой разработки фронтенда новых продуктов.
Сейчас tinkoff.ru насчитывает более 3000 компонентов и сотни страниц.
Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo
Николай Сиварев "Приручая сайты"
Я.Субботник в Новосибирске
О докладе:
В Метрике есть карта кликов, карта ссылок, плеер Вебвизора – всё это веб-приложения, которые поверх произвольной страницы в интернете показывают какие-то данные. Рассказ пойдет о нескольких подходах к созданию таких приложений, достоинствах и недостатках каждого подхода.
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов2ГИС Технологии
Как создать Front End-команду для высоконагруженного проекта? Спикер расскажет, как можно выстроить эффективный процесс фронтенд-разработки с упором на технические аспекты: — Команда фронтенд-разработчиков. Зоны ответственности между теми, кто программирует UI (верстальщики), и теми, кто отвечает за бизнес-логику (Javascript-программисты). Идеальный состав команды. — Настроенный технологический процесс. Модульная организация (подготовка дизайна → разработка формата данных → создание шаблона → навешивание событий → тесты). — Разработка вместе с тестированием Unit-/DOM-тесты и подход PixelPerfect. — Вёрстка независимыми блоками и встроенный в приложение режим для вёрстки блоков.
JavaScript-модули "из прошлого в будущее"oelifantiev
Доклад на первом Ярославском форнтэнд-митапе.
Рассказ об имеющихся методиках описания модулей в JavaScript а также о грядущем стандарте ES6 и, наконец-то, нативной поддержке модулей языком.
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...Ontico
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
#KharkivJS 2015, Харьков
- Мои впечатления от Webpack.
- Рассказ о его принципах работы.
- Интересные фишки Webpack 1 и 2.
- Что еще есть аналогичного и выводы.
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Yandex
Рассказ о том, что представляет собой наш «станок» верстальщика сегодня. Рассказывается с примерами, какие браузеры поддерживаем, как производим кроссбраузерное тестирование и какие инструменты используем, готовя проект к выходу в свет.
Подводные камни, костыли и полученный опыт.
В первую очередь, рассказ ориентирован на тех, кто хочет заменить сборку Грантом или Гальпом на вебпак. Я рассмотрю тонкости настройки и необычные проблемы, с которыми мы столкнулись, ибо стандартные ситуации хорошо описаны на просторах интернета.
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)Ontico
В докладе будут рассмотрены приемы, практики и «фишки», которые полезно использовать для создания любого Frontend-приложения.
Мы поговорим об организации модульности и компонентов на примере приложений с Angular, React и Polymer. Обсудим, как использовать особенности JavaScript, и рассмотрим особые случаи, когда фреймворки действительно приходят на помощь.
За последние годы мечты фантастов XX века стали реальностью: смартфоны, видеозвонки, виртуальная реальность и, наконец, Интернет вещей. К сожалению, у прогресса всегда есть темная сторона. Я думаю, ни для кого не секрет, что такие компании как Sony, Yahoo, Adobe, Target и многие другие столкнулись с проблемами безопасности в последние годы. Количество скомпрометированных систем растет день ото дня.
Node.js - это одна из самых быстрорастущих экосистем разработки приложений на рынке, которая постепенно перестает быть инструментом для разработки стартапов и проникает в корпоративный сектор. Вы уверены, что ваше приложение, разработанное на базе MEAN-стека, безопасно? В своем докладе я хотел бы рассмотреть данный вопрос. Мы поговорим о криптографии, аутентификации, авторизации, уязвимостях web-приложений, построенных на базе Node.js. К концу доклада вы получите пошаговое руководство, как уменьшить вероятность взлома вашего проекта.
[Lightning Talk]
Компоненты-компоненты-компоненты. Сколько можно? Angular, React, Vue остановитесь."Дайте пожить для себя" и другие подобные мысли последнее время чаще и чаще звучат в Front-end сообществе. Зачем нам еще и WebComponents и причем тут Vue? Приходи и узнай!
HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...Ontico
DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков.
В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам.
В этом докладе:
- подходы к решению проблемы медленного DOM;
- существующие решения: react-canvas, методология Netflix;
- поиск идеального решения для оптимизации производительности;
- рендеринг HTML/CSS через WebGL, знакомство с HTML GL;
- ограничения и рекомендации.
«Масштабируемый DevOps» Александр КолесеньIT Share
Типичные подходы к развертыванию приложений: как правильные, так и неправильные, но повсеместно применяемые.
Как сделать так, чтобы развертывание не стало проблемой с линейным ростом количества поддерживаемых окружений.
Методы обновления проекта с нулевым временем простоя: когда это уместно и принципиально возможно.
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов2ГИС Технологии
Как создать Front End-команду для высоконагруженного проекта? Спикер расскажет, как можно выстроить эффективный процесс фронтенд-разработки с упором на технические аспекты: — Команда фронтенд-разработчиков. Зоны ответственности между теми, кто программирует UI (верстальщики), и теми, кто отвечает за бизнес-логику (Javascript-программисты). Идеальный состав команды. — Настроенный технологический процесс. Модульная организация (подготовка дизайна → разработка формата данных → создание шаблона → навешивание событий → тесты). — Разработка вместе с тестированием Unit-/DOM-тесты и подход PixelPerfect. — Вёрстка независимыми блоками и встроенный в приложение режим для вёрстки блоков.
JavaScript-модули "из прошлого в будущее"oelifantiev
Доклад на первом Ярославском форнтэнд-митапе.
Рассказ об имеющихся методиках описания модулей в JavaScript а также о грядущем стандарте ES6 и, наконец-то, нативной поддержке модулей языком.
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...Ontico
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
#KharkivJS 2015, Харьков
- Мои впечатления от Webpack.
- Рассказ о его принципах работы.
- Интересные фишки Webpack 1 и 2.
- Что еще есть аналогичного и выводы.
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Yandex
Рассказ о том, что представляет собой наш «станок» верстальщика сегодня. Рассказывается с примерами, какие браузеры поддерживаем, как производим кроссбраузерное тестирование и какие инструменты используем, готовя проект к выходу в свет.
Подводные камни, костыли и полученный опыт.
В первую очередь, рассказ ориентирован на тех, кто хочет заменить сборку Грантом или Гальпом на вебпак. Я рассмотрю тонкости настройки и необычные проблемы, с которыми мы столкнулись, ибо стандартные ситуации хорошо описаны на просторах интернета.
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)Ontico
В докладе будут рассмотрены приемы, практики и «фишки», которые полезно использовать для создания любого Frontend-приложения.
Мы поговорим об организации модульности и компонентов на примере приложений с Angular, React и Polymer. Обсудим, как использовать особенности JavaScript, и рассмотрим особые случаи, когда фреймворки действительно приходят на помощь.
За последние годы мечты фантастов XX века стали реальностью: смартфоны, видеозвонки, виртуальная реальность и, наконец, Интернет вещей. К сожалению, у прогресса всегда есть темная сторона. Я думаю, ни для кого не секрет, что такие компании как Sony, Yahoo, Adobe, Target и многие другие столкнулись с проблемами безопасности в последние годы. Количество скомпрометированных систем растет день ото дня.
Node.js - это одна из самых быстрорастущих экосистем разработки приложений на рынке, которая постепенно перестает быть инструментом для разработки стартапов и проникает в корпоративный сектор. Вы уверены, что ваше приложение, разработанное на базе MEAN-стека, безопасно? В своем докладе я хотел бы рассмотреть данный вопрос. Мы поговорим о криптографии, аутентификации, авторизации, уязвимостях web-приложений, построенных на базе Node.js. К концу доклада вы получите пошаговое руководство, как уменьшить вероятность взлома вашего проекта.
[Lightning Talk]
Компоненты-компоненты-компоненты. Сколько можно? Angular, React, Vue остановитесь."Дайте пожить для себя" и другие подобные мысли последнее время чаще и чаще звучат в Front-end сообществе. Зачем нам еще и WebComponents и причем тут Vue? Приходи и узнай!
HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...Ontico
DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков.
В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам.
В этом докладе:
- подходы к решению проблемы медленного DOM;
- существующие решения: react-canvas, методология Netflix;
- поиск идеального решения для оптимизации производительности;
- рендеринг HTML/CSS через WebGL, знакомство с HTML GL;
- ограничения и рекомендации.
«Масштабируемый DevOps» Александр КолесеньIT Share
Типичные подходы к развертыванию приложений: как правильные, так и неправильные, но повсеместно применяемые.
Как сделать так, чтобы развертывание не стало проблемой с линейным ростом количества поддерживаемых окружений.
Методы обновления проекта с нулевым временем простоя: когда это уместно и принципиально возможно.
Understanding bytecode and what bytecode is likely to be generated by a Java compiler helps the Java programmer in the same way that knowledge of assembler helps the C or C++ programmer. Java bytecode is the form of instructions that Java virtual machine executes. This knowledge is crucial when debugging and doing performance and memory usage tuning. The presenter will share his knowledge on what bytecode means for your platform and how to create compiler while using some awesome tools.
Семинар по Node.js в КПИ 20 октября 2014. Докладчики: Тимур Шемсединов, Никита Савченко, Максим Петренко. Краткое содержание:
* Что такое Node.js и как работает JavaScript в V8
* Профессионалы расскажут, почему они выбрали Node.js
* Вы узнаете его сильные и слабые стороны и где его лучше применять
* Будет полный обзор особеностей и внутреннего строения Node.js
* Примеры внедрения и Highload-проекты
* Вопросы развертывания, хостинг, тестирования, и отладки
* Где и что учить, что читать, как осваивать
«JSSDK: Начало» Когда использовать готовые решения, а когда писать самим. Какие шаги нужно сделать, чтобы ваша работа не оказалась напрасной и принесла пользу окружающим. Все эти нюансы будут рассмотрены на примере внутреннего фреймворка, который возник вследствие необходимости объединения кодовой базы двух проектов.
XSS is one of the main and common types of vulnerabilities in a web application. This vulnerability allows an attacker to inject his script into your application. According to statistics, 40% of companies that have passed through scanners have this vulnerability. In the OWASP Top 10 ranking, she is in 7th place. All this belongs to the class. Supporting tools will be EF.
Веб-разработка без наркотиков с помощью PostgreSQL, Nginx и c2h5oh / Миша Кир...Ontico
Разговор в докладе пойдёт о веб-программировании.
При изготовлении веб-проектов то и дело пользуются широко распространёнными фреймворками на базе языков программирования — PHP, Python, Perl, Ruby, Go, Rust, Java и т.п.
Я предлагаю отказаться от употребления оных и использовать для разработки веб-приложений только c2h5oh — расширение для высокопроизводительного сервера nginx. Данное расширение позволяет эффективно использовать PostgreSQL в качестве сервера веб-приложений.
Хочу поделиться со слушателями своим личным опытом разработки с использованием подобной связки. Планирую рассказать о плюсах и минусах такого подхода.
FrontTalks: Алексей Андросов (Яндекс), «Ошибки, которые мы любим»Yandex
Мониторинг – важная часть работы хорошего сервиса. Мало просто протестировать релиз, надо также убедиться, что код работает у пользователей и работает правильно. В докладе я расскажу про логирование js-ошибок при разных способах загрузки js, подводных камнях, способах их обойти, а также почему это надо делать.
Движение по хрупкому дну / Сергей Караткевич (servers.ru)Ontico
Сегодня Интернет увлечен микросервисами, контейнерами и immutable-инфраструктурой. Очень сложно не поддаться искушению внедрить что-то подобное в компании, в которой вы работаете сейчас. Я попытаюсь отговорить вас использовать эти технологии во вред приложению, себе и бизнесу компании в целом. Я расскажу о типовом проекте, который был запущен в 20 странах за 4 месяца, проблемах, которые я встретил, и выводах, которые я сделал.
- Почему микросервисы не спасут, а похоронят ваш проект.
Я расскажу на основе собственного опыта, почему не стоит увлекаться микросервисами для небольших проектов, почему благие намерения — упрощение деплоя и увеличение числа деплоев, увеличение доступности и улучшение масштабирования ведут к отсутствию гибкости и критическому уменьшению стабильности системы.
- Почему ваша система слишком сложна для своих задач.
Я расскажу, почему не стоит усложнять систему, почему, скорее всего, ваша система слишком сложна для задач, которые она решает и почему вы не контролируете то, что происходит в системе. Я объясню, почему вы потратите все свое время на отладку сложной системы, вместо того чтобы решать задачи бизнеса.
- Почему Docker используется неправильно.
Будут предоставлены реальные примеры использования Docker для нового проекта и для портированного проекта, я объясню, с какими проблемами сталкиваются операторы при работе с Docker на живых примерах, объясню, почему вы, скорее всего, используете Docker неправильно, и предложу варианты, как этого избежать.
- Почему immutable слишком статичен для вашей компании.
Я расскажу про свой опыт работы с immutable и объясню, почему, на мой взгляд, переход к подобной инфраструкт
Владимир Кузнецов — Прототип сайта: разработка и развёртываниеYandex
Фронтенд-разработчики уверенно движутся в сторону систем сборки проектов. Даже если это вёрстка всего лишь нескольких страниц, то генерация HTML из фрагментов и раскладок избавит от рутинного копирования кода. А лёгкий и непринуждённый деплой проекта на сервер позволит регулярно показывать заказчику готовые части и быстрее получать обратную связь.
Nginx is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server. Igor Sysoev started working on developing Nginx in 2002 and released it to the public in 2004. Since then Nginx is hosting nearly 12.18% (22.2M) of active sites across all domains and is known for its high performance, stability, rich feature set, simple configuration, and low resource consumption. This report will give you a full overview of the Nginx and explain why this server is so popular.
5. DOMContentLoaded
- событие срабатывает при загрузке документа, кроме IE<9
- ждет css, если после него идет скрипт
- ждёт загрузки и выполнения скриптов (кроме скриптов с
async/defer, если есть поддержка и динамических)
- в FF/Chrome формы автозаполняются по
DOMContentLoaded
- интерфейсы обычно инициализируются по
DOMContentLoaded
7. Скрипты на странице*
Во время загрузки
Во время выполнения
- блокируется отрисовка страницы
- блокируют вообще все загрузки (IE<8, Opera<15)
- блокируют все загрузки, кроме стилей и скриптов
(IE8, FF, Chrome, Safari)
- остальные загрузки не блокируются (IE>8)
- ждет пока загрузятся предшествующие css файлы
- блокируют вообще всё
* - распространяется на скрипты со всех хостов
12. Скрипты в конце BODY
Chrome
- не блокируется рендеринг страницы
- не блокируются загрузки предыдущих ресурсов
- страница доступна до инициализации скриптов
18. script in iframe
- не блокирует рендеринг / загрузки
- необходимо вносить изменения в скрипты
- ограничение по домену
<iframe src='script.html' id="f1"></iframe>
<iframe src='script2.html' id="f2"></iframe>
19. script defer
- по стандарту только для внешних скриптов
- не блокирует рендеринг / загрузки
- выполнение после рендеринга страницы
- сохраняется порядок выполнения (кроме IE<10)
- IE4+, FF3.1+, Chrome 8+, Safari 5.1+, Opera 15+
<script src="jquery.js" defer></script>
<script src="scripts.js" defer></script>
20. script async
- по стандарту только для внешних скриптов
- не блокирует рендеринг / загрузки
- выполнение сразу после загрузки
- не сохраняется порядок выполнения
- IE10+, FF3.6+, Chrome 8+, Safari 5.1+, Opera 15+
<script src="script1.js" async></script>
<script src="script2.js" async></script>
21. XMLHttpRequest Eval
var xhr = getXmlHttp();
xhr.open("GET", "script.js", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
eval.call(window, xhr.responseText);
}
}
xhr.send(null);
- не блокирует рендеринг / загрузки
- не сохраняется порядок выполнения
- ограничение по домену
- нет индикации загрузки
22. XMLHttpRequest Injection
- не блокирует рендеринг / загрузки
- не сохраняется порядок выполнения
- ограничение по домену
- нет индикации загрузки
var xhr = getXmlHttp();
xhr.open("GET", "script.js", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var s=document.createElement('script');
document.getElementsByTagName('head')[0]
.appendChild(s);
s.text = xhr.responseText;
}
} xhr.send(null);
23. Script DOM
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'app.js';
document.getElementsByTagName('head')[0]
.appendChild(script);
- не блокирует рендеринг / загрузки
- не сохраняется порядок выполнения, кроме Opera<15
- async:true для Firefox 3.6, чтобы не сохранять порядок
- нет ограничений на домен
24. Script DOM + async:false
- не блокирует рендеринг / загрузки
- сохраняется порядок выполнения (кроме браузеров,
которые не поддерживают async, но не FF<3.6 и Opera)
- нет ограничений на домен
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = false;
script.src = 'app.js';
document.getElementsByTagName('head')[0]
.appendChild(script);
25. Script DOM + onreadystatechange
- не блокирует рендеринг / загрузки
- позволяет гибко управлять загрузкой / выполнением
- нет ограничений на домен
- только IE6+
var js = document.createElement('script');
js.onreadystatechange = function() {
if (js.readyState == 'loaded') {
document.body.appendChild(js); // execution
}
};
js.src = 'app.js';
26. Порядок загрузки не важен
Цель:
- Загрузить скрипты параллельно
- Выполнить сразу после загрузки
- Не блокировать рендеринг
- Не блокировать загрузку других ресурсов
- Кроссбраузерное решение
Решение: Script DOM
27. Порядок загрузки важен
Цель:
- Загрузить скрипты параллельно
- Выполнить последовательно
- Не блокировать рендеринг
- Не блокировать загрузку других ресурсов
- Кроссбраузерное решение
Решение: Script DOM + async:false / onreadystatechange
для IE / document.write для остальных браузеров
28. Техники связывания
- window onload
- timer
- script onload
- callback (m)
- degrading script tags (m)
m - требует модификации скриптов
30. window onload
if ( window.addEventListener ) {
window.addEventListener("load", init, false);
}
else if ( window.attachEvent ) {
window.attachEvent("onload", init);
}
- просто в реализации
- инициализация срабатывает слишком поздно
31. timer
function timer(interval) {
if ( typeof(jQuery) === "undefined" ) {
setTimeout(timer, interval);
}
else {
init();
}
}
timer(300);
- просто в реализации
- лишние расходы ресурсов на выполнение скрипта
- задержка при слишком большом интервале
32. script onload
js.onload = function() {
if ( !js.done ) {
js.done = true; init();
}
};
js.onreadystatechange = function() {
if ( !js.done &&
js.readyState.match(/loaded|complete/) ) {
js.done = true; init();
}
};
- выполнение инлайн скрипта максимально быстро
- немного сложнее в реализации
33. callback (m)
- выполнение инлайн скрипта максимально быстро
- вызов init() в конце app.js
- не гибкое решение
- требует модификации скриптов
function init() { ... }
var js = document.createElement('script');
js.src = "app.js"; document.getElementsByTagName('head')
[0].appendChild(js);
34. degrading script tags (m)
function init() { ... }
var js = document.createElement('script');
js.src = "app.js";
js.text = "init();"; document.getElementsByTagName('head')
[0].appendChild(js);
- гибкое решение
- требует модификации скриптов
inline script
<script type="text/javascript" src="app.js">
init();
</script>
35. degrading script tags (m)
var fs = document.getElementsByTagName("script");
var len = fs.length;
while ( len ) {
var s = fs[len-1];
if ( s.src.indexOf('app.js') != -1 ) {
eval( s.innerHTML );
break;
}
len--;
}
app.js
37. Загрузка виджетов
● Добавление через DOM
● Связывание через
onload/onreadystatechange
● document.write()
○ Делаем свой document.write()
○ Выносим виджет в отдельный
невидимый элемент
○ Загружаем в скрытый iframe,
по onload копируем на страницу
39. Преимущества подхода
Страница не виснет из-за сторонних виджетов
Управление виджетами из одного места
Гарантия подключения узла всего один раз (ID)