1. Менеджмент пакетов с помощью Bower.
2. Организация модулей через RequreJS.
3. Backbone
4. Классовый подход вместо прототипного
5. Сборка приложения с помощью Grunt
Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...Yandex
В докладе пойдёт речь о том, как использовать JS-библиотеки и фреймворки для достижения модульности, построения грамотной архитектуры и упрощения поддержки фронтенда веб-приложений. Мы также поговорим о многофункциональной библиотеке Backbone.js и о том, как навести порядок в application.js (main.js).
Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo
1. Менеджмент пакетов с помощью Bower.
2. Организация модулей через RequreJS.
3. Backbone
4. Классовый подход вместо прототипного
5. Сборка приложения с помощью Grunt
Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...Yandex
В докладе пойдёт речь о том, как использовать JS-библиотеки и фреймворки для достижения модульности, построения грамотной архитектуры и упрощения поддержки фронтенда веб-приложений. Мы также поговорим о многофункциональной библиотеке Backbone.js и о том, как навести порядок в application.js (main.js).
Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo
Bootstrap 3. Адаптивная верстка для WordPressIgor Sazonov
Основы и примеры для понимания зачем нужен CSS-фреймворк Bootstrap. Доклад читался в рамках WordPress Meetup #3 в Санкт-Петербурге. Объясняется в чем суть верстки на Bootstrap, зачем он нужен для WordPress, подробно разбирается основы grid (сетки) на Bootstrap чтобы верстать адаптивный дизайн.
Основные моменты третьей версии популярного фреймворка. Responsive-верстка, контролы и компоненты
Презентация подготовлена по материалам прошедшего 19 ноября витебского фронтенд-митапа: http://meetup.gorodvitebsk.by/
Особенности работы backend для мобильных приложений или Python Django UWSGI в...Mail.ru Group
Доклад посвящен жизни проектов в продакшен. Речь пойдет о связке Python-Django-Uwsgi для backend мобильных приложений, настройке серверов, измерении времени и оценке качества работы backend. Также спикер расскажет о профилировании Django, Memcached в Python.
JS Lab2017, 25 марта, Одесса
Сергей Селецкий (Senior Frontend Engineer at Lohika)
System.js и jspm. Что они могут дать для вашего проекта. Преимущества и недостатки. Как это работает с ES6. Примеры сборки проекта.
Все материалы: http://jslab.in.ua/
Организаторы: http://geekslab.org.ua/
Опенсорс - это программа с открытым исходным кодом, которой можно свободно делиться и использовать в любых проектах. По-сути, это миниатюрный стартап.
Я расскажу, зачем нужно делать такие миниатюрные стартапы и покажу на примере, какие привилегии дает разработка OSS. Так же уточним, на каких вещах будет продуктивнее всего фокусировать свое внимание.
HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...Ontico
DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков.
В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам.
В этом докладе:
- подходы к решению проблемы медленного DOM;
- существующие решения: react-canvas, методология Netflix;
- поиск идеального решения для оптимизации производительности;
- рендеринг HTML/CSS через WebGL, знакомство с HTML GL;
- ограничения и рекомендации.
Bootstrap 3. Адаптивная верстка для WordPressIgor Sazonov
Основы и примеры для понимания зачем нужен CSS-фреймворк Bootstrap. Доклад читался в рамках WordPress Meetup #3 в Санкт-Петербурге. Объясняется в чем суть верстки на Bootstrap, зачем он нужен для WordPress, подробно разбирается основы grid (сетки) на Bootstrap чтобы верстать адаптивный дизайн.
Основные моменты третьей версии популярного фреймворка. Responsive-верстка, контролы и компоненты
Презентация подготовлена по материалам прошедшего 19 ноября витебского фронтенд-митапа: http://meetup.gorodvitebsk.by/
Особенности работы backend для мобильных приложений или Python Django UWSGI в...Mail.ru Group
Доклад посвящен жизни проектов в продакшен. Речь пойдет о связке Python-Django-Uwsgi для backend мобильных приложений, настройке серверов, измерении времени и оценке качества работы backend. Также спикер расскажет о профилировании Django, Memcached в Python.
JS Lab2017, 25 марта, Одесса
Сергей Селецкий (Senior Frontend Engineer at Lohika)
System.js и jspm. Что они могут дать для вашего проекта. Преимущества и недостатки. Как это работает с ES6. Примеры сборки проекта.
Все материалы: http://jslab.in.ua/
Организаторы: http://geekslab.org.ua/
Опенсорс - это программа с открытым исходным кодом, которой можно свободно делиться и использовать в любых проектах. По-сути, это миниатюрный стартап.
Я расскажу, зачем нужно делать такие миниатюрные стартапы и покажу на примере, какие привилегии дает разработка OSS. Так же уточним, на каких вещах будет продуктивнее всего фокусировать свое внимание.
HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...Ontico
DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков.
В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам.
В этом докладе:
- подходы к решению проблемы медленного DOM;
- существующие решения: react-canvas, методология Netflix;
- поиск идеального решения для оптимизации производительности;
- рендеринг HTML/CSS через WebGL, знакомство с HTML GL;
- ограничения и рекомендации.
Что такое REPL, как он устроен и какие крутые возможности в нём заложены. Поговорим о выполнении кода в REPL и о том как работает автокомплит в динамических языках. Ответим на вопрос что такое vm.runInContext, перехватим парочку промисов, сделаем вывод результатов действительно приятным и даже узнаем как подгрузить нужные модули и не подать виду. В заключение рассмотрим потрясающие возможности, которые даёт нам инфраструктура npm и как это всё можно использовать в работе.
Доклад ориентирован на тех, кому небезынтересен мир Node.js, но будет доступен также и более широкому кругу JS-разработчиков. Надеюсь, для кого-нибудь этот доклад станет очередной ступенькой в изучении любимого языка.
Обзор подходов к построению прикладных программных систем на Node.js, анализ и сравнение архитектурных принципов развертывания высоконагруженных прикладных облачных сервисов, масштабирование, тенденции и перспективы в разработке приложений, обзор проблем платформы Node.js и пути их решения.
Инфраструктура распределенных приложений на nodejs / Станислав Гуменюк (Rambl...Ontico
Мы создаем nodejs приложения, используя различные современные технологии, такие как Docker, Consul, pm2. Современный спектр решений настолько обширен, что сложно не заблудиться. Как же выбрать нужные вашему проекту технологии, чтобы успешно его запустить и поддерживать? Будут рассказаны истории и, конечно же, даны вредные советы :)
Как на nodejs пройти путь от Hello world приложения до распределённого решения, состоящего из микросервисов?
Мы пройдём жизненный цикл продукта, начав с простого приложения на nodejs. Научимся его правильно запускать и будем постепенно добавлять элементы, убирая при этом ненужные. Так к нашему приложению присоединится гипервизор, а само оно будет разделено на части, где каждая сущность будет управлять своей частью приложения.
Построив таким образом архитектуру на чистом nodejs, мы займёмся развитием приложения, добавим современные технологии и применим новые подходы к организации инфраструктуры. Запакуем приложение в Docker, попутно обсудим, зачем он нужен и что может дать. И, наконец, решим проблему поиска запущенных сервисов и отслеживания их статусов, используя Consul.
Использование компонентного подхода это тяжеловесно, медленно, не гибко. Так ли это?
Доклад с фестиваля 404, Самара, 13 октября 2013
Видео: https://www.youtube.com/watch?v=QpZy0WW0Ig4
Перепись приложения. Нативного. На JS. Done. | Odessa Frontend Meetup #10OdessaFrontend
KeepSolid Sign — приложение для подписи документов под все популярные платформы. Его ядро написано на C++ и однажды поступила задача сделать веб-версию. Тимофей Лавренюк рассказывает о том, через что получилось пройти, чтобы в итоге сделать веб-приложение не хуже нативного.
Возможно многие из вас уже пишут по БЭМу, просто не догадываются об этом, ведь БЭМ на самом деле не требует даже классов вида .block__element, срыв покровов в блице.
Web Standards Days
Kyiv
28 ноября 2015
#wstdays
https://wsd.events/2015/11/28/
Видео: https://www.youtube.com/watch?v=_Sx5jvT0qEU&t=2h22m00s
Слайды: http://bit.ly/bem-in-the-wild
SECON'2016. Сергей Аверин. Javascript-фреймворки: должен остаться только одинSECON
Рассказ от tech-менеджера о том, как мы в Acronis выбирали фреймворк в условиях, когда любое более-менее важное технологическое решение сразу затрагивает с десяток команд, несколько сотен человек и права «случайно все сломать» нет. В докладе пойдет речь о том, что хорошо работающий фронтенд — это больше про слаженную работу команды, про понятный и масштабируемый код, чем про сухие циферки. Но и циферки тоже будут.
1) Какие у нас были проблемы с текущим фреймворком — UI, архитектура, код.
2) Как измеряли, что примерно стоит брать (исследование популярности).
3) Что рассматривали.
4) На пути к демо-проекту, какие были сложности (то, что уперли идею с Typescript, собственный компилятор шаблонов, четыре Flux-фреймворка и все плохи).
5) Два пилотных демо-проекта: цифры.
6) Оценка трудоемкости перехода.
SECON'2016. Аверин Сергей, Javascript-фреймворки: должен остаться только одинSECON
Рассказ от tech-менеджера о том, как мы в Acronis выбирали фреймворк в условиях, когда любое более-менее важное технологическое решение сразу затрагивает с десяток команд, несколько сотен человек и права «случайно все сломать» нет.
Зачем нужны постпроцессоры при живых препроцессорах — Алексей Иванов, JetStyleYandex
Препроцессором сейчас уже никого не удивишь. С их помощью упрощается синтаксис css, добавляются переменные, условия и циклы. Все это хорошо и замечательно, но часто — не достаточно. Препроцессоры не дадут изменить уже существующий css, который вы получаете из внешних источников, не перепишут ссылки на картинки и шрифты при перемещении файлов в новую папку, не отсортируют css-свойства в нужном вам порядке и не удалят из файлов лишние правила. Во всех этих случаях, а также во многих других вам помогут постпроцессоры.
В своем докладе я расскажу, что такое постпроцессоры, какие они бывают и чем отличаются друг от друга. Объясню почему использовать их лучше, чем править css вручную и с помощью регулярных выражений, а также приведу примеры их использования в ежедневной работе.
Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают ADN Digital Studio
У frontend-разработчиков есть боль:
1. Огромные CSS файлы
2. Невозможно переиспользовать код
3. Сложности поддержки проектов
4. Склеивание и минификация файлов
5. Префиксы для css3
6. Работа со спрайтами
7. Невозможность использовать новые фичи javasccript
И мы хотим поговорить об этом
Алексей Андросов "Тотальная заморозка = быстрая загрузка"Yandex
Все знакомы с различными способами ускорения загрузки страницы. Эта тема уже давно исследована. Но перед каждым проектом встает вопрос: а как жить в условиях постоянных релизов, когда пользователям приходится часто скачивать обновленный код? Как уменьшить объем загрузки или оптимизировать процесс, чтобы частые релизы не сильно увеличивали время загрузки? В докладе пойдет речь о том, как можно грузить файлы по хэшу от контента, а не по урлу с версией, какие инструменты для этого есть и как измерять эффективность этих способов.
Денис Чистяков — JavaScript на фронте и в тылуYandex
Перед разработчиками Яндекс.Спорта стояла задача – разработать сервис, который быстро работает, держит высокие нагрузки и имеет сильную контентную составляющую. В докладе рассказывается, почему для решения задачи мы выбрали Node.js, приводится пример архитектуры высоконагруженного приложения на Node.js и о том, как мы добились прозрачного использования одних и тех же функций на фронтенде и бэкенде.
Similar to Node JS проблемы надежности, и пути их решения (20)
1. О себе
Александр Кучеренко
• В DataArt полгода
• Занимаюсь программированием 7+ лет
• За это время писал на: PHP, JavaScript,
ActionScript3, C#, Java(Android), Objective-C
3. Node JS +
1. Весело писать код.
2. Огромное количество готовых решений.
3. Перспективно.
4. Легко разворачивать, легко писать.
5. Возможен прирост производительности.
6. Модно.
4. Node JS -
1. Не надежно.
2. Утечки памяти.
3. Слишком быстро развивается.
4. Сложные вещи делать сложно.
5. Node JS
Стоит ли связываться?
Есть ли необходимость именно в Node JS?
Нужно шарить код между бекендом и
фронтендом?
Возможно вашу задачу можно решить на Python,
Ruby… PHP (если не стыдно)
35. Backbone JS
Backbone JS это:
1. Не фреймворк
2. Models, View, Collections and Events
3. И Router
4. И много-много JSON и REST
36. Backbone JS
Почему Backbone JS?
1. Потому что 6,5 kb
2. Не решает за меня как мне писать моё
приложение
3. Не лезет в мой HTML
4. Есть расширения на все случаи жизни
5. Отлично документирован
6. НЕТ МАГИИ!!
7. There's More Than One Way To Do It
43. Backbone JS
MODELS
Models are the heart of any JavaScript
application, containing the interactive data as
well as a large part of the logic surrounding it:
conversions, validation, computed properties,
and access control.
backbonejs.org/#Model
80. Grunt JS
Проблемы в раю:
1. У нас есть SASS, у нас есть LESS И Stylus
2. А еще у нас 5 тысяч файлов суммарно на
50 мегабайт которые надо доставить
клиенту, все исходники на CoffeScript
3. А еще мы а еще мы хотим чтобы это все
собиралось автоматом на инстансах