Perl для не программистов. Николай Мишин. Moscow.pm 4 июля 2013Moscow.pm
- Как создать презентацию не вылезая из любимого текстового редактора (notepad++, padre, vim).
- Как perl помогает автоматизировать работу без написания кода.
- Пара скриптов, которые облегчают работу на разных платформах.
- Те же скрипты на perl6.
- Автоматизация и тестирование Firefox.
По-настоящему ВИЗУАЛЬНОЕ построение лендинг-страниц на WP Gutenberg!Yevhen Kotelnytskyi
Разработка кастомных компонентов WordPress Gutenberg на примере лендинг-страниц;
Детальный инструктаж, примеры, подходы и хитрости. Осторожно, исходный код на JS и PHP!
Perl для не программистов. Николай Мишин. Moscow.pm 4 июля 2013Moscow.pm
- Как создать презентацию не вылезая из любимого текстового редактора (notepad++, padre, vim).
- Как perl помогает автоматизировать работу без написания кода.
- Пара скриптов, которые облегчают работу на разных платформах.
- Те же скрипты на perl6.
- Автоматизация и тестирование Firefox.
По-настоящему ВИЗУАЛЬНОЕ построение лендинг-страниц на WP Gutenberg!Yevhen Kotelnytskyi
Разработка кастомных компонентов WordPress Gutenberg на примере лендинг-страниц;
Детальный инструктаж, примеры, подходы и хитрости. Осторожно, исходный код на JS и PHP!
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...Ontico
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
Самодельная параметризация и параллелизация тестов на Webdriver (JS) COMAQA.BY
Как задать нужные для тестового прогона параметры, такие как имя браузера, имя или url сервера, передать ссылку на определенныый набор параметров через командную строку или конфиг файл. Как организовать параллельный прогон тестов на сыром Webdriver (JS) без использования вспомогательных фреймворков (protractor, parallel-cucumber etc.) используя child_process.
Есть такая штука как инструментирование кода. Мало кто знает о ней, даже пользуясь результатами ее применения. Между тем, с инструментированием можно делать много всего интересного и, главное, полезного. Например, это может вам помочь лучше понять код или сделать процесс разработки более эффективным. Примеры инструментирования кода и принципы его работы.
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...Ontico
На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.
HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.
Основные моменты доклада:
— Для каких проектов Web Components будут полезны в первую очередь;
— Действительно ли Web Components настолько удобны? Примеры “до” и “после”;
— Текущие проблемы реализации в браузерах и их решение;
— Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться;
— Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.
Самодельная параметризация и параллелизация тестов на Webdriver (JS) COMAQA.BY
Как задать нужные для тестового прогона параметры, такие как имя браузера, имя или url сервера, передать ссылку на определенныый набор параметров через командную строку или конфиг файл. Как организовать параллельный прогон тестов на сыром Webdriver (JS) без использования вспомогательных фреймворков (protractor, parallel-cucumber etc.) используя child_process.
Есть такая штука как инструментирование кода. Мало кто знает о ней, даже пользуясь результатами ее применения. Между тем, с инструментированием можно делать много всего интересного и, главное, полезного. Например, это может вам помочь лучше понять код или сделать процесс разработки более эффективным. Примеры инструментирования кода и принципы его работы.
Презентация мастер-класса "Создание динамических пользовательских интерфейсов и AJAX-приложений промышленного класса с помощью Dojo Toolkit и Zend Framework"
Баба-Яга против! — Роман Дворнов, Ostrovok.ruYandex
В последнее время во фронтенде появляется столько нового и внедряется настолько быстро, что не все успевают осознать последствия. Хорошо это или плохо? Рассмотрим некоторые новинки с точки зрения «за», а главное – «против».
ASP.NET MVC - как построить по-настоящему гибкое веб-приложениеAlexander Byndyu
В докладе рассматривается использование популярных фреймворков в разработке ASP.NET MVC приложения, как сделать его наиболее гибким. Будет затронута тема минимизации дублирования и повторное использование кода, применение методов метапрограммирования отображений; уменьшение логики в контроллерах; применение принципов SOLID и GRASP для разработки доменной модели приложения.
По материалам конференции .NET разработчиков http://www.dotnetconf.ru/Materialy/Asp_net_mvc_kak_postroit_gibkoe_web_prilozenie
Антон Киршанов - «Квант изменения. Реактивные реакции на React.FDConf
Современные интерактивные приложения в вебе требуют особого внимания к работе с непрерывно изменяющимися, динамическими данными. RxJS – библиотека, построенная на паттерне Observable/Observer, выражает последовательность изменений в состоянии приложения через внешние потоки данных и предоставляет широкий набор средств для создания, фильтрации, комбинирования таких потоков удобным для разработчика способом. Для наглядной демонстрации преимуществ такого подхода в докладе будут рассмотрены некоторые примеры с использованием библиотеки React, они помогут осознать основные принципы связывания потоков данных и представления, а также увидеть гибкость, компактность и практическую ценность предлагаемого библиотекой RxJS метода.
Насколько сложно создать виртуальный тур и добавить на сайт? Я расскажу как сделать это за 5 минут, мы добавим его на веб страницу, откроем в мобильном браузере и запустим в очках виртуальной реальности. Разберёмся как всё устроено, рассмотрим библиотеку THREE.js и технологию WebGL.
Илья Климов - Reason: маргиналы против хайпаFDConf
ClojureScript, Elm, PureScript, CoffeeScript, Dart, Kotlin. Этот список языков, так или иначе транспилирующихся в JavaScript можно продолжать бесконечно. В своем докладе я расскажу о Reason - еще одной попытке, в этот раз от Facebook?влиться в это движение. Или все же нет? В докладе я сфокусируюсь не столько на том, как Reason крут, сколько на том, какую ценность он составляет для JavaScript разрабочика, кому он нужен и свой реальный опыт практического использования.
Максим Щепелин - Доставляя веб-контент в игруFDConf
За 7 лет развития World of Tanks, сложность игрового клиента и сервера значительно выросла. Если сервер можно разделить на сервисы, то клиент остается огромным монолитом в миллионы строк кода на ActionScript, C++ и Python.
Мы решили проблему сложности, встаиванием браузера в игровой клиент и заменив частично на нативные интерфесы на веб-контент. О преимуществах и недостатках этого подхода я расскажу в своём докладе.
Radoslav Stankov - Handling GraphQL with React and ApolloFDConf
For almost an year I'm was working on GraphQL projects. In the talk, I'm going to share my experiences working with GraphQL with React and Apollo. I would cover the following talk points:
what is GraphQL
why are people so excited about GraphQL
how to use GraphQL with React
how to solve common problems with GraphQL
Виктор Русакович - Выборы, выборы, все фреймворки… приторныFDConf
Пять лет назад присоединился к команде разработки проекта, над которым до сих пор идёт работа. За это время приложения, создаваемые в рамках проекта, использовали разные фреймворки - от jQuery до React, от Backbone до Angular.
Как мы выбираем фреймворк для нашего следующего приложения? Какой фреймворк самый лучший? Как выбрать фреймворк и через год разочароваться в своём выборе? Короткая история о выборах в одном длинном проекте.
Slobodan Stojanovic - 8 1/2 things about serverless FDConf
What is serverless? How does it work? Can you explain it with something as simple as Lego bricks?
This talk will answer that and at least five and a half more questions. It’s main goal is to explain serverless architecture, show you why it’s important, and finally, show you why it works great with Node.js and how to use it.
PWA – это сейчас хайп тренд. Google и Microsoft говорят про них на своих конференциях. Twitter и Uber переписывают на них свои мобильные версии веб-приложений. И вот, работая над своим проектом, я решил сделать его Progressive и протестировать на реальных пользователях в production. В этом докладе я расскажу как я это делал и какую пользу это принесло проекту.
Страница должна загружаться быстрее чем 1 секунда; количество серверных запросов должно быть сведено к минимуму; CSS и JS файлы должны быть сжаты и не превышать 50 килобайт…” Это лишь малая часть технических решений и рекомендаций, которыми нас снабжает индустрия в погоне за производительностью. Но во всем этом есть одна проблема – пользователям нет никакого дела до килобайтов, миллисекунд и количества запросов. Производительность – это не математика. Производительность — это восприятие. Именно восприятие может создает впечатление медлительности сайта с малым количеством серверных запросов, в то время как сайт, возвращающий результаты поиска в течение секунд, может восприниматься как достаточно быстрый для пользователя. И именно восприятие пользователя является единственным мерилом производительности вашего сайта.
В докладе будут рассмотрены психологические и технические теории, приемы и примеры, позволяющие управлять восприятием пользователя
Полная версия презентации по ссылке: http://goo.gl/1iBNNO
... ничего такого не произойдет :) Их сложно начать писать, нужно мотивировать команду, а самое главное — непонятно, зачем? Ведь можно открыть браузер и в пару кликов проверить все ли в порядке с приложением.
Доклад о том, как много мы теряем, если не пишем тесты. Я покажу, с чего начать, какие инструменты и методики можно использовать. Поделюсь собственным опытом разработки JavaScript тестов. Постараюсь показать, как тесты смогут сделать ваш проект лучше.
Migrate your React.js application from (m)Observable to ReduxFDConf
Вся презентация по ссылке: goo.gl/FySndO
0) Intro about our Content Browser project architecture.
1) Problem with current state in Fluxx world.
2) Observable pattern like temporal decision.
3) Complexity and Pay off.
4) Redux is not panacea but it is the best what we have.
6) Migration tricks or how to reduce the pain.
7) Conclusion.
Вся презентация по ссылке: goo.gl/WuwMZL
Если ваш проект перевалил за миллион строк кода, а количество разработчиков за десяток - то вам уже пришлось столкнутся с проблемами JS и его масштабируемости. В данном докладе будет рассказано о том, как решить эти проблемы, как начать использовать Dart, послойно встраивая его в устаревший код и как растить команду с помощью типизированного языка.
Modern web applications have constantly growing requirements and their complexity grows exponentially. Some of the biggest challenges in front of us are state management, testability, flexibility and on top of that we need to develop the application at reasonable level of simplicity in order to ease the recruitment process.
In this presentation I'll introduce a scalable Angular 2 application architecture, which answers the following requirements:
- Testability.
- Predictable state management.
- Scalable communication layer.
- Modular and robust design
JavaScript является одни из самых популярных языков программирования. На сегодняшний день его можно использовать не только в браузере, но и на сервере, в системах управления баз данных, программировать микроконтроллеры, писать десктопные и мобильные приложения. В данном докладе я расскажу о современном JavaScript и его областях применения (Mongo, CouchDB, Node, Meteor, tessel, PhoneGap, ReactNative и так далее), а также загляну немного в будущее и покажу вам куда он движется (ES2015, ES2016 ... ESxxxx, WebAssembly). И много-много всего интересного с демками)
CSSO – инструмент для минификации CSS, который недавно вернулся к активной разработке. Зачем?
Дело в том, что минификация CSS – задача сложная. Сейчас нет идеального минификатора, и чтобы эффективным был и делал все правильно. Ведь нужно учитывать не только особенности CSS, который постоянно меняется, но и уровень его поддержки браузерами, их баги, префиксы, хаки и т.д. Все это требует решения ряда непростых задач. Поговорим об этом, а так же принципах работы CSS-минификаторов, новых идеях и развитии CSSO.
Подробнее: http://www.slideshare.net/basisjs/csso-compress-css-english-version
Redux - негласный победитель Flux соревнований, одна из трендовых библиотек 2015 года. Слишком "сырой" для продакшена? Нет, мы так не думаем! Используя силу функционального подхода и модель Event Sourcing'a, Redux позволяет гибко управлять состоянием вашего приложения. В докладе мы расскажем про то, как мы, используя связку Redux+React, переписали с нуля front-end одного из наших продуктов (Лидсканер | leadscanner.ru). Рассмотрим реальные плюсы и минусы данного стека, в частности: работу с side-effects, повторное использование компонентов, тестируемость.
Структура:
Про нас.
Какие перед нами стояли вызовы.
Многоуровневая архитектура.
Обзор Flux архитектуры.
Redux - Predictable state container for JavaScript apps.
React как view layer.
Повторное использование компонентов.
Dumb and Smart components.
Feature Folders.
Работа с side effects.
Обзор подходов организации actionCreators.
Middlewares.
Redux-saga.
Минусы данного стека.
Каждый день появляется по новому JavaScript фрeймворку или новой технологии. И каждый день мы задаемся вопросом, как за всем этим успеть? Константин даст Вам серебряную пулю. Вы будете знать, как быстро разобраться в React, PostCss, RxJS, Redux, CycleJs, Angular и даже в неизвестном супер фреймворке. Увидим, что стоит за трендами технологий 2016.
Подробнее: https://mavrin.github.io/pres-be-first/#1
"Service Worker: Let Your Web App Feel Like a Native "FDConf
Nowadays web apps become inseparable part of our everyday life. But even playing such a big role they still don’t have a lot of advantages the native ones have. Service Worker is designed to break down these barriers. Installing and updating your app, fully controlling the network cache, intercepting network responses, sending push notifications and doing backgrounds updates. All these becomes possible with Service Worker. Is your web app ready to rock?
2. Что такое Emmet?
• Инструмент для ускорения работы с HTML и CSS
• Плагин для множества популярных редакторов кода
• Написан на чистом JavaScript, легко встраивается
8. Sublime Text WebIDE
• быстрый
• красивый
• классный API
• удобный автокомплит
• кроссплатформенный
• богатый функционал
• много хорошо интегрированных
инструментов
• удобная отладка
9. С точки зрения фронт-энд
разработчика:
Sublime Text WebIDE
• только раскрашивает HTML и CSS
• API работает с обычным текстом
• Java
• медленная
• API позволяет работать с AST, но
это очень сложно
• разработчики акцентируют
внимание на других вещах
17. Emmet как платформа
• модульная архитектура
• написан на JavaScript
• поддержка большого количества редакторов
•поддержка расширений
18. Расширения Emmet
• Обычные .js и .json-файлы в специальной папке
• Загружаются автоматически
• Могут дополнять или переопределять основной
функционал
• Одинаково работают в разных редакторах
19. Основные модули
• разбор и преобразование аббревиатур
• поиск пар тэгов в коде
• работа с HTML-тэгами и CSS-правилами через DOM-
подобный интерфейс
20. Как из аббревиатур
получается HTML-код
Разбор аббревиатуры в дерево
Нормализация дерева
Формирование текстового результата
Готовый код
21. Как из аббревиатур
получается HTML-код
Разбор аббревиатуры в дерево
Нормализация дерева
Формирование текстового результата
Готовый код
препроцессоры
постпроцессоры
фильтры
22. emmet.exec(function(require, _) {
require('filters').add('my_filter', function process(tree, profile) {
_.each(tree.children, function(item) {
// пример для HTML
item.start = '<' + item.name() + '>';
item.end = '</' + item.name() + '>';
// пример для Jade
item.start = item.name() + 'n';
item.padding = 't';
// преобразуем уже существующий результат
item.start = item.start.replace(/</g, '<').replace(/>/g, '>');
// рекурсивное преобразование всего дерева
process(item, profile);
});
});
});
Пример фильтра
div>em|my_filter
23. var tag = emmet.require('htmlMatcher').tag(
'hello <em>world</em>', // текст, где искать тэг
12 // позиция, с которой начать поиск
);
tag.open = { // открывающий тэг
name: 'em',
selfClose: false, // является ли тэг самозакрывающимся
range: new Range() // {start: 6, end: 10}
};
tag.close = {...}; // закрывающий тэг
tag.innerRange = new Range(); // {start: 10, end: 15}
tag.innerContent = function(){}; // world
tag.outerRange = new Range(); // {start: 6, end: 20}
tag.outerContent = function(){}; // <em>world</em>
tag.range = innerRange || outerRange;
tag.content = innerContent || outerContent;
Получение HTML-тэга
24. emmet.exec(function(require, _) {
require('actions').add('rename_tag', function(editor) {
var tag = require('htmlMatcher').tag(editor.getContent(), editor.getCaretPos());
if (tag) {
var newName = editor.prompt('Введите новое имя тэга');
if (tag.close) {
editor.replaceContent(
'</' + newName + '>',
tag.close.range.start,
tag.close.range.end);
}
editor.replaceContent(
'<' + newName,
tag.open.range.start,
tag.open.range.start + tag.open.name.length + 1);
}
});
});
Пример: переименование тэга
25. Интерфейс для редактирования
HTML и CSS
(EditTree)
• Интерфейс для высокоуровнего редактирования HTML-
тэгов и CSS-правил
• Похож на DOM
• Предоставляет доступ ко всем атрибутам/свойствам
контейнера, а также их диапазонам
•Учитывает форматирование кода
27. var tree = emmet.require('cssEditTree').parse('div {color: red}');
// можно использовать метод parseFromPosition(content, pos)
// для получения правила из документа
tree.value('color', 'black');
tree.value('position', 'relative');
tree.source; // div {color: black;position: relative;}
Редактирование CSS
(cssEditTree)