Неважно какой фреймворк вы используете, внутри всё равно будет ваш уникальный код под проект, со своей структурой и логикой. Его нужно поддерживать, а коллегам нужно в него вникать. Как минимизировать порог вхождений и в целом облегчить поддержку проекта? Какие инструменты и подходы можно использовать, или сделать самому, для анализа, даже не кода, а проекта в целом? Константин поделится своим взглядом на этим вопросы и какие могут быть решения.
Доклад рассматривает тонкости nodejs, а так же преимущества Evented I/O для серверных приложений. Будет предоставлен ряд рекоммендаций по правильному построению архитектуры, модульности, масштабированию, дизайну кода. Краткое введение в технологию программирования "волокнами" (fibers) и ряд других эффективных практик.
Неважно какой фреймворк вы используете, внутри всё равно будет ваш уникальный код под проект, со своей структурой и логикой. Его нужно поддерживать, а коллегам нужно в него вникать. Как минимизировать порог вхождений и в целом облегчить поддержку проекта? Какие инструменты и подходы можно использовать, или сделать самому, для анализа, даже не кода, а проекта в целом? Константин поделится своим взглядом на этим вопросы и какие могут быть решения.
Доклад рассматривает тонкости nodejs, а так же преимущества Evented I/O для серверных приложений. Будет предоставлен ряд рекоммендаций по правильному построению архитектуры, модульности, масштабированию, дизайну кода. Краткое введение в технологию программирования "волокнами" (fibers) и ряд других эффективных практик.
MongoDB - About Performance Optimization, Ivan Griga - Smart GammaEvgeniy Kuzmin
- For which data types MongoDB is more suitable.
- Basic tips for optimizing performance.
- How to quickly and easily speed up a high-load project that uses MongoDB as the main data repository.
- How to build queries and use indexes.
Introduction to new technologies present in MySQL which enable developing next gen applications. Technologies like JSON and document store, or microservices. Slides in Russian
Примеры решения типичных задач за рамками ядра Yii2Paul Klimov
Рассмотрим сравнительно сложные, и в то же время, часто возникающие, задачи, для которых ядро Yii не дает готового решения. Посмотрим как из отдельных моделей ActiveRecord собирать единые сущности, и как разбивать большие модели на составляющие. Разберем как правильно сохранять файлы и как сэкономить на обработчиках событий и поведениях
- Интернационализация сущностей в базе данных;
- Обработка “ролей” в реляционных базах данных;
- Работа с файлами;
- Вложенные модели;
- Trait вместо Behavior.
Продвинутое использование ActiveRecord в Yii2Paul Klimov
Запись лекции "Продвинутое использование ActiveRecord в Yii2" от 24.09.2016, проходившей в Киеве в "Projector"
http://prjctr.com.ua/events/yii2-conference.html
1. Контроллеры в Django
2. Объекты HttpRequest и HttpResponse
3. Получение GET и POST параметров
4. Работа с HTTP заголовками в Django
5. Декораторы
6. Шаблонизация в Django
7. Наследование шаблонов
8. Context processors
Презентация со встречи сообщества SPb Python Interest Group рассказывающая об устройстве словарей в Python.
В презентации рассмотрена работа словаря в CPython 2.x, словаря в CPython 3.x, а также рассмотрены изменения в CPython 3.6.
Помимо CPython рассмотрены версии словаря в альтернативных реализациях Python, таких как PyPy, IronPython и Jython.
FrontTalks: Константин Лебедев (Mail.ru), File API: обработка файлов на клиен...Yandex
История появления open source библиотеки для работы с файлами. Создание предпросмотра изображений на клиенте. Чтение файлов (exif, id3 и т.п.), загрузка результата на сервер. Всё это работает даже в IE6.
Семинар пройдет в формате мастер-класса. Слушатели получат как теоритические, так и практические знания.
В рамках мастер-класса будут рассмотрены уязвимости :
• Unrestricted File Upload
• Remote File Inclusion
• Local File Inclusion
Во время мастер-класса будут рассмотрены теоретические аспекты, вышеуказанных уязвимостей, приведены примеры уязвимого исходного кода.
Слушателям будут продемонстрированы примеры эксплуатации уязвимостей, техника обхода различных фильтраций.
Кроме того, будут приведены примеры безопасного написания сценариев.
Так же у каждого будет возможность применить полученные знания на практике.
MongoDB - About Performance Optimization, Ivan Griga - Smart GammaEvgeniy Kuzmin
- For which data types MongoDB is more suitable.
- Basic tips for optimizing performance.
- How to quickly and easily speed up a high-load project that uses MongoDB as the main data repository.
- How to build queries and use indexes.
Introduction to new technologies present in MySQL which enable developing next gen applications. Technologies like JSON and document store, or microservices. Slides in Russian
Примеры решения типичных задач за рамками ядра Yii2Paul Klimov
Рассмотрим сравнительно сложные, и в то же время, часто возникающие, задачи, для которых ядро Yii не дает готового решения. Посмотрим как из отдельных моделей ActiveRecord собирать единые сущности, и как разбивать большие модели на составляющие. Разберем как правильно сохранять файлы и как сэкономить на обработчиках событий и поведениях
- Интернационализация сущностей в базе данных;
- Обработка “ролей” в реляционных базах данных;
- Работа с файлами;
- Вложенные модели;
- Trait вместо Behavior.
Продвинутое использование ActiveRecord в Yii2Paul Klimov
Запись лекции "Продвинутое использование ActiveRecord в Yii2" от 24.09.2016, проходившей в Киеве в "Projector"
http://prjctr.com.ua/events/yii2-conference.html
1. Контроллеры в Django
2. Объекты HttpRequest и HttpResponse
3. Получение GET и POST параметров
4. Работа с HTTP заголовками в Django
5. Декораторы
6. Шаблонизация в Django
7. Наследование шаблонов
8. Context processors
Презентация со встречи сообщества SPb Python Interest Group рассказывающая об устройстве словарей в Python.
В презентации рассмотрена работа словаря в CPython 2.x, словаря в CPython 3.x, а также рассмотрены изменения в CPython 3.6.
Помимо CPython рассмотрены версии словаря в альтернативных реализациях Python, таких как PyPy, IronPython и Jython.
FrontTalks: Константин Лебедев (Mail.ru), File API: обработка файлов на клиен...Yandex
История появления open source библиотеки для работы с файлами. Создание предпросмотра изображений на клиенте. Чтение файлов (exif, id3 и т.п.), загрузка результата на сервер. Всё это работает даже в IE6.
Семинар пройдет в формате мастер-класса. Слушатели получат как теоритические, так и практические знания.
В рамках мастер-класса будут рассмотрены уязвимости :
• Unrestricted File Upload
• Remote File Inclusion
• Local File Inclusion
Во время мастер-класса будут рассмотрены теоретические аспекты, вышеуказанных уязвимостей, приведены примеры уязвимого исходного кода.
Слушателям будут продемонстрированы примеры эксплуатации уязвимостей, техника обхода различных фильтраций.
Кроме того, будут приведены примеры безопасного написания сценариев.
Так же у каждого будет возможность применить полученные знания на практике.
Рarse'им бэкенд
Аким Халилов
Вы хотите выучить Backbone? Хотите просто писать клиентский код, не думая о сервере и о том, как все обрабатывать, хранить, бэкапить? Выход есть – храните с помощью Parse. Parse – платформа, которая предоставляет возможность хранения данных без забот о сервере. Хранилище данных, соц. сети, push-notification, cloud code. Что такое Parse и что он умеет, о библиотеке для использования:
- знакомство с JS API и примеры использования;
- начинаем кодить: stub-проект;
- кодим фичи: CRUD + плюшки;
- хостим.
Разработка крупного Standalone проекта на юнити: улучшаем производительностьВадим Воробьев
Презентация к докладу на DevGamm 2015, Минск.
В докладе рассказывлось о технических тонкостях оптимизации под ПК в Unity на примере The Godlike и приводились истории разработки. Как использовать кодогенерацию, что может профайлер Unity, как правильно работать с UI и почему не стоит связываться с LINQ.
C++ для web с помощью Emscripten, Андрей Карпушин
В докладе я расскажу о своем практическом опыте компиляции и использовании C++ на веб страницах, о том что нужно сделать, чтобы портировать приложение на С++ под веб, об ограничениях с этим связанных, об интеграции С++ кода с JavaScript и другими элементами веб страницы.
Доклад о разработке (а главное - оптимизации) программы на Perl под Raspberry PI.
Наглядно показывает, что в Perl есть немало возможностей, а также инструментов, которые позволяют делать программы быстрее и эффективнее - используя как преимущества самого языка, так и оптимизацию алгоритма программы.
This document discusses the development of high-performance services at Mail.ru for tasks like serving avatars. It describes how they use technologies like Perl, AnyEvent, IProto and Tarantool to process over 100,000 requests per second on a single server. Key points are:
1. Mail.ru uses Perl 7 with AnyEvent and IProto to build asynchronous services that can handle 40,000-120,000 requests per second per core.
2. They store data in the Tarantool NoSQL database for its performance and ability to handle multiple indexes.
3. By using these technologies like async Perl and Tarantool, they can process over 100,000 requests per second with a
7. Требования
• Множественный выбор файлов
• Получение информации (название, размер, тип)
• Создание пред-просмотра на клиенте
• Масштабирование, кадрирование и поворот
• Загрузка на сервер + CORS
7
8. Требования
• Не зависеть от вѐрстки
• Никакой бизнес-логики
• Расширяемость
• Самодостаточность
8
27. Информация о файле
FileAPI.addInfoReader(/^audio/, function (file, callback){
// собираем нужную информацию
// и возвращаем еѐ
callback(
false, // или текст ошибки
{ artist: "...", album: "...", title: "...", ... }
);
});
28. Информация о файле
FileAPI.getInfo(audioFile, function (err, tags){
if( !err ){
var li = document.createElement("li");
li.innerHTML = tags.artist +" – "+ tags.title;
ul.appendChild(li);
}
});
50. Загрузка
// собираем данные для отправки
var form = new FormData
form.append("foo", "bar");
form.append("attach", file);
// отправояем на сервер
var xhr = new XMLHttpRequest;
xhr.open("POST", "/upload", true);
xhr.send(form)
51. Загрузка
// собираем данные для отправки
var form = new FormData
form.append("foo", "bar");
form.append("attach", file);
// отправляем на сервер
var xhr = new XMLHttpRequest;
xhr.open("POST", "/upload", true);
xhr.send(form)
52. Загрузка
canvasToBlob(canvas, function (blob){
// собираем данные для отправки
var form = new FormData
form.append("foo", "bar");
form.append("attach", blob, "filename.png");
// отправляем на сервер
var xhr = new XMLHttpRequest;
xhr.open("POST", "/upload", true);
xhr.send(form)
});
61. XHR
var xhr = FileAPI.upload({ … });
• status — HTTP status code
• statusText — HTTP status text
• responseText — ответ сервера
• getResponseHeader(name) — получить заголовок ответа сервера
• getAllResponseHeaders() — получить все заголовки
• abort() — отменить загрузку
61
62. Drag’n’Drop
<div class="dropzone"></div>
Перетащите файлы сюда
Добрый день, меня зовут Лебедев Константин. Я JavaScript-архитектор проекта «Почта@mail.ru».Сегодня я в очередной раз затрону тему загрузки файлов на сервер и особое внимание уделю их обработке на клиенте. Расскажу об основных решениях и технологиях, которые существуют на данный момент, и о том как их использовать и что это дает. Я покажу как решение реальных задач трансформировалось в наш чудо велосипед, который помог нам и я надеюсь поможет и вам.
Он позволял выбрать больше одного файла и получить информацию о них, такую как название, тип и размер, а для изображений создавать пред-просмотр.
Так же у него есть возможность предварительной обработки изображений: он мог масштабировать и поворачивать. Всё это происходило на клиенте, а потом отправлялось на сервер.
Однако у него был ряд недостатков. Это была flash’ка. Вся верстка, графика, бизнес-логика, и даже локализация были зашиты в нем, в результате чего решение было тяжеловесным, а внести правки мог только flash-разработчик.
Но это ещё не всё. Так же у нас был второй загрузчик, для тех браузеров, которые не поддерживают flash.Это был обычный js-загрузчик, который позволял выбрать один файл и загрузить его через iframe. Вот и всё что он умел.Как вы понимаете…Вот так, появилась задача переписать наш загрузчик файлов. Тут я бы хотел пояснить, на выходе, мы хотели получить унифицированное API, которое бы работало в независимо от окружения и его можно было использовать не только в рамках проекта “Почта@Mail.ru”, но и где угодно.
Для этого API были сформированы следующие требования:Во первых, необходимо сохранить текущую функциональность. Все что умел старый загрузчик, нужно перенести в новый.
Во вторых, надо избавиться от недостатков. Бизнес-логика, верстка и тп, не должно содержаться в загрузчике. Только работа с файлами и как можно лучше, все остальное не его задача. В третьих, расширяемость. Если завтра окажется, что нужно получать id3 теги аудио-файла, это не должно стать сюрпризом.
Первое, с чего начали, это рассмотрение возможности избавления от flash. Этому есть множество причин, например flash-блокеры или proxy, из-за которых загрузчик становился бесполезным. Так же это ещё одна технология, который имеет свои заморочки и требует поддержки.
Первое, с чего начали, это рассмотрение возможности избавления от flash. Этому есть множество причин, например flash-блокеры или proxy, из-за которых загрузчик становился бесполезным. Так же это ещё одна технология, который имеет свои заморочки и требует поддержки.
Первое, с чего начали, это рассмотрение возможности избавления от flash. Этому есть множество причин, например flash-блокеры или proxy, из-за которых загрузчик становился бесполезным. Так же это ещё одна технология, который имеет свои заморочки и требует поддержки.
Как видите, уже более 63% браузеров поддерживают FileAPI. IE обзаведется поддержкой только с 10 версии. Но 63, это далеко не 95% и даже 90% пользователей, так что от флешь отказываться рано!
Таким образом, задача свелась к созданию механизма, который совмещал бы в себе обе технологии и реализованный так, чтобы конечному разработчику было не важно как это происходит.Рассмотрим на конкретных примерах, как проходил процесс разработки.
Таким образом, задача свелась к созданию механизма, который совмещал бы в себе обе технологии и реализованный так, чтобы конечному разработчику было не важно как это происходит.Рассмотрим на конкретных примерах, как проходил процесс разработки.
На HTML5, это выглядит следующим образом: Получаем ссылку на инпут, далее подписываемся на событие change
На HTML5, это выглядит следующим образом: Получаем ссылку на инпут, далее подписываемся на событие change. И когда оно срабатывает, получаем список файлов прямиком из него.
Но что делать когда не поддерживаетсяFileAPI, но за то поддерживается Flash? Основным принципом работы с flash, в том, что всё взаимодействие происходит непосредственно через через него, т.е. нельзя просто взять и вызвать диалог выбора файлов. Для этого, необходимо чтобы пользователь кликнул по flash,и только в этот момент открыть диалог, такова политика безопасности, диалог можно открыть только на действие пользователя.
Поэтому flash объект размещается над нужным input. Сделано это очень просто,вешается обработчик события mouseoverна весь документ и при наведении на input, публикуем flash-объект в его родитель, относительно которого и позиционируем с нужными размерами.
При клике по флешке открывается диалог выбора файлов, пользователь там что-то выбирает и кликает «ОК». После чего, данные получает flash, которые всю очередь передает их JS, посредством вызова callback-функции. После чего JS связывает полученные данные с нужным инпутом и эмулирует событие “change”.
При клике по флешке открывается диалог выбора файлов, пользователь там что-то выбирает и кликает «ОК». После чего, данные получает flash, которые всю очередь передает их JS, посредством вызова callback-функции. После чего JS связывает полученные данные с нужным инпутом и эмулирует событие “change”.
Все дальнейшее взаимодействие между JS и flash, будет осуществляется через единственный доступный метод у flash, первый аргументом передается название команды, вторым объект параметров, с двумя обязательными полями: id-файлаи callback. Callback будет вызван из flash, по завершению команды.
После совмещения двух способов, получилось вот такое API, оно максимально приближено к нативномуjs, единственное различие, это способ получения файлов. Теперь мы используем метод API, тк свойство files у инпута есть только в том случае, когда браузер поддерживает HTML5/FileAPI, в случае с Flash список берется из связанных с ним данных.
После совмещения двух способов, получилось вот такое API, оно максимально приближено к нативномуjs, единственное различие, это способ получения файлов. Теперь мы используем метод API, тк свойство files у инпута есть только в том случае, когда браузер поддерживает HTML5/FileAPI, в случае с Flash список берется из связанных с ним данных.
Следующим важным шагом, является фильтрация. Как правило, при загрузке файлов, есть ряд ограничений, таких как размер или тип. Хотя в почте и можно прикреплять любые файлы, для нас было важным получить универсальное решение, так что фильтрация необходима. В чем же её сложность?!Вся соль в том, что изначально, после получения списка файлов, мы имеем только минимальный сведения, такие как название, размер и тип. Но, что делать, когда нужно получить id3 теги или размеры изображения?
Все просто, файл нужно прочесть. Для этого в существует FileReader, которые позволяет асинхронно читать файл. И на основе результата чтения, получить нужную информацию, а так как для разных типов файлов, есть свой способ её получения, мы реализовали получение только размеров изображения, как на HTML5, так и через флеш. Но, оставили возможность добавлять свои обработчики, для сбора инфы, в которых разработчик может написать свою реализацию, либо использовать готовое решение.
Вот так выглядит метод фильтрации, первым аргументом передаем список файлов, вторым саму функцию фильтрации и третьим callback-который будет вызван по завершению. На выходе получаем два массива, с файлами которые подошли под условия и со всем остальными.
При помощи метода FileAPI.addInfoReader, добавляем обработчики информации, для нужных типов файлов, первым аргументом указываем тип, вторым фунцию-обработчик.
Так же существует метод получения информации для конкретного файла.
Одной из ключевых особенностей нашего flash-загрузщика, была возможность создавать предросмотр изображений. Проблема была в том, что превью было частью flash, те рисовалась в нем. В API такого быть не должно. Но как передать изображение из Flashв HTML?
В этом нам поможет DataURI — это определённая стандартомсхема, которая позволяет включать небольшие элементы данных в строкуи использовать в качестве ссылки, в данном случае в качестве srcизображения.
Flashчитает файл как Base64, передает результат в JS, который в начало строки добавляет схему, mime-type и метку, что данные в Base64. Теперь мы можем использовать эту строку, как srcизображения.
Flashчитает файл как Base64, передает результат в JS, который в начало строки добавляет схему, mime-type и метку, что данные в Base64. Теперь мы можем использовать эту строку, как srcизображения.
Flashчитает файл как Base64, передает результат в JS, который в начало строки добавляет схему, mime-type и метку, что данные в Base64. Теперь мы можем использовать эту строку, как srcизображения.
На хтмл5 тоже не без сюрпризов, есть два способа получить изображение.Первый способ, это прочесть файл как DataURL, при помощиFileReader. Второй, createObjectURL — создает ссылку на файл, связанную с текущим табом. Конечно для создания пердпросмотра достаточно второго способа, но не все бразуеры его поддерживают.
Так же у Оперы нетметода revokeObjectURL, который сообщает браузеру, что больше не нужно держать ссылку на файл.
Класс, обладает следующими методами: кадрирование, масштабирование, поворот и preview, который автоматически кадрирует и масштабирует. Все эти методы заполняют матрицу трансформации и только при вызове метода get, она будет применена. Трансформация происходит через canvas иливнутри flash, когда работает через него.
Трансформация происходит через canvas иливнутри flash, когда работает через него. Вот так выглядит та самая матрица,
Вот так выглядит создание пердпросмотра 120х120 пикселей, вызываем метод preview, передаем требуемые размеры и вызываем метод get, на вход которого передаем callback, который будет вызван по завершению.
Отдельно отмечу процесс ресайза. Если нужно получить превью 100х100, а оригинал примерно 10 МПх, а это вполне реальная ситуация, сейчас каждая мыльница кичится количеством мега-пикселей, то вы получите изображение, примерно такого качества.
Как видите, ничего хорошего, сплошные искажения.
Но, если сжимать в два раза,потом ещё и ещё, пока не получим требуем размер, то результат заметно лучше.
Но, если сжимать в два раза,потом ещё и ещё, пока не получим требуем размер, то результат заметно лучше. Вот, сравните, разница на лицо.
Но, если сжимать в два раза,потом ещё и ещё, пока не получим требуем размер, то результат заметно лучше. Вот, сравните, разница на лицо.
Еще мы пробовали другие способы, такие как бикубическая интерполяция и алгоритм Ланцоша. Они конечно дают лучший результат, но очень медленные, 1.5сек против 200-300милисекунд. Также данный метод дает одинаковый результат в cavnasи flash.
Последняя и основная возможность нашего API, это конечно же загрузка файлов на сервер.
Которая должна отвечать следующим требованиям: файлы должны отправляться без обновления страницы, следить за ходом загрузки и получать ответ от сервера.
Вот так выглядит самый простой способ загрузки файлов.
Для улучшение ситуация, добавляем в форму iframeс уникальным именем, а у формы такой же target.Теперь при сабмите, форма будет отправлена в этот ифрейм. Этот способ позволяет избавиться избавиться от обновления страницы, также работает во всех браузерах, есть возможность получить ответ от сервера, но не дает сведений о ходе загрузки.
Последний способ, отправить файл на сервер, не считая flash, это XmlHttpRequest2 и FormData. Он позволяет отправить не просто тестовые данные, но и бинарные.
FormData — позволяет создать набор ключ-значение. У неё есть единственный метод append, первым аргументом задаётся название POST-параметра, вторым строка или файл, также есть третий аргумент, название файла, но его пока не все поддерживают.
Далее при помощиXmlHttpRequestотправляет собранные данные на сервер.Но ничего не бывает так просто. Как я уже говорил ранее, API должно уметь отправлять модифицированное изображение.
Т.к. все трансформации идут через canvas, то именно его и нужно отправить на сервер и это можно сделать, при помощи трансформации canvas в blob, её можно реализовать практически во всех браузерах. Но там, где это невозможно, а это например Opera, мы загружаем cavnas ручного составления мултипарт запроса. И в этом случае, мы делаем следующее:
Сначала конвертируем canvas в DataURL, а DataURLв Base64, после чего получаем BinaryString. А дальше самое интересное, руками составляем мультипарт запрос и отправляем его на сервер.
Сначала конвертируем canvas в DataURL, а DataURLв Base64, после чего получаем BinaryString. А дальше самое интересное, руками составляем мультипарт запрос и отправляем его на сервер.
Сначала конвертируем canvas в DataURL, а DataURLв Base64, после чего получаем BinaryString. А дальше самое интересное, руками составляем мультипарт запрос и отправляем его на сервер.
Справедливости ради замечу, что данный способ используется и для тех браузеров, которые не поддерживаютFormData. Т.е. При помощи FileReaderчитаем файл как DataURL и по такой же схеме отправляем их на сервер.
На вход ему передается объект параметров: «куда заливать», «дополнительная POST-дата» и «заголовки запроса», также обработчики событий, как для слежения за ходом всей загрузки, так и отдельным файлом. Хотя HTML5 позволяет грузить все файлы сразу, стандартный механизм Flash’а нет, плюс это не очень удачная идея, пользователь может и передумать.
На вход ему передается объект параметров: «куда заливать», «дополнительная POST-дата» и «заголовки запроса», также обработчики событий, как для слежения за ходом всей загрузки, так и отдельным файлом. Хотя HTML5 позволяет грузить все файлы сразу, стандартный механизм Flash’а нет, плюс это не очень удачная идея, пользователь может и передумать.
Это позволяет перенести часть нагрузки по обработке изображений с сервера, на клиент.
Так же функции upload возвращает xhr-образный объект, т.е. он реализует некоторые свойства и методы XmlHttpRequest, такие как
Но это еще не все, на самом деле, это прокси объект. Его методы и свойства отражают состояния именно для того файла, который грузится в данный момент.