Denis Bosak (Magecom): Front-end in Magento, and more. Prospects, technologies, and tools.
Денис Босак (Magecom): Front-end в Magento и не только. Перспективы, технологии, инструменты.
Meet Magento Belarus - Alexander Kaigorodov speech on The Tale of Javascript in Magento: the untapped potential of the client side of the application
http://by.meet-magento.com/
http://amasty.com/
Meet Magento Belarus - Andriy Samilyak speech on 'How we have played DevOps and built an autoscale platform for Magento'
http://by.meet-magento.com/
http://amasty.com/
Igor Bondarenko (NEKLO): Magento applications and modules functional testing
Игорь Бондаренко (NEKLO): Функциональное тестирование Magento приложений и модулей
Meet Magento Belarus - Alexander Kaigorodov speech on The Tale of Javascript in Magento: the untapped potential of the client side of the application
http://by.meet-magento.com/
http://amasty.com/
Meet Magento Belarus - Andriy Samilyak speech on 'How we have played DevOps and built an autoscale platform for Magento'
http://by.meet-magento.com/
http://amasty.com/
Igor Bondarenko (NEKLO): Magento applications and modules functional testing
Игорь Бондаренко (NEKLO): Функциональное тестирование Magento приложений и модулей
Сергей Морковкин "Разработка realtime SPA с использованием VueJS и RethinkDB"Fwdays
В процессе доклада мы рассмотрим преимущества использования связки VueJS + RethinkDB для создания realtime SPA приложений, построим базовый проект, рассмотрим ключевые особенности VueJS, а также установим socket- соединение с авторизацией.
Фичи н-н-нада? Или почему стоит использовать модуль Features.Eugene Fidelin
Presentation about using Features module for Drupal.
Made for DrupalCamp Donetsk 2011
Video: http://www.youtube.com/watch?feature=player_embedded&v=3nLlrEYFwgA
Интеграция TeamCity и сервера символов | Алексей СоловьевPositive Hack Days
1. Что такое сервер отладочных символов, его предназначение.
2. Отладочная информация (отладочные символы) – информация, которую генерирует компилятор на основе исходных кодов. Содержит информацию об именах файлов исходников, переменных, процедур, функций.
3. Сервер отладочной информации – сервер, основное предназначение которого – хранение отладочной информации, ее индексирование и предоставления доступа.
В презентации на примере конкретного веб-приложения освещается тема автоматизированного тестирования и важность таких тестов в контексте Continuous Integration/Delivery. Рассмотрены азы работы с Selenium WebDriver'ом, область применения этого инструмента и простые примеры использования.
Презентация подготовлена по материалам прошедшего 19.11.2013 витебского митапа (http://meetup.gorodvitebsk.by).
Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScr...Ontico
° С чего мы начинали;
° Все способы адаптации;
° JavaScript-adaptive;
° Опыт создания собственной библиотеки;
° История панели управления;
° Сервис оптимизации изображений;
° Чему мы научились.
Uladzimir Kalashnikau (EPAM Systems): Magento 2 Import/Export: Performance Challenges and Victories We Got at Open Source Ecommerce
Владимир Калашников (EPAM Systems): Импорт/экспорт для Magento 2: решение проблем производительности и наши успехи в open source e-commerce
Kristina Pototskaya (TriggMine): How to gain up revenue on Email marketing: TOP 10 triggered emails
Кристина Потоцкая (TriggMine): Как получить максимум от Email рассылки: 10 лучших триггерных кампаний
Сергей Морковкин "Разработка realtime SPA с использованием VueJS и RethinkDB"Fwdays
В процессе доклада мы рассмотрим преимущества использования связки VueJS + RethinkDB для создания realtime SPA приложений, построим базовый проект, рассмотрим ключевые особенности VueJS, а также установим socket- соединение с авторизацией.
Фичи н-н-нада? Или почему стоит использовать модуль Features.Eugene Fidelin
Presentation about using Features module for Drupal.
Made for DrupalCamp Donetsk 2011
Video: http://www.youtube.com/watch?feature=player_embedded&v=3nLlrEYFwgA
Интеграция TeamCity и сервера символов | Алексей СоловьевPositive Hack Days
1. Что такое сервер отладочных символов, его предназначение.
2. Отладочная информация (отладочные символы) – информация, которую генерирует компилятор на основе исходных кодов. Содержит информацию об именах файлов исходников, переменных, процедур, функций.
3. Сервер отладочной информации – сервер, основное предназначение которого – хранение отладочной информации, ее индексирование и предоставления доступа.
В презентации на примере конкретного веб-приложения освещается тема автоматизированного тестирования и важность таких тестов в контексте Continuous Integration/Delivery. Рассмотрены азы работы с Selenium WebDriver'ом, область применения этого инструмента и простые примеры использования.
Презентация подготовлена по материалам прошедшего 19.11.2013 витебского митапа (http://meetup.gorodvitebsk.by).
Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScr...Ontico
° С чего мы начинали;
° Все способы адаптации;
° JavaScript-adaptive;
° Опыт создания собственной библиотеки;
° История панели управления;
° Сервис оптимизации изображений;
° Чему мы научились.
Uladzimir Kalashnikau (EPAM Systems): Magento 2 Import/Export: Performance Challenges and Victories We Got at Open Source Ecommerce
Владимир Калашников (EPAM Systems): Импорт/экспорт для Magento 2: решение проблем производительности и наши успехи в open source e-commerce
Kristina Pototskaya (TriggMine): How to gain up revenue on Email marketing: TOP 10 triggered emails
Кристина Потоцкая (TriggMine): Как получить максимум от Email рассылки: 10 лучших триггерных кампаний
Sergey Lysak (DiamanteDesk): How to make benefits with multi-channel customer support. Magic recipes for eCommerce.
Сергей Лысак: Волшебный рецепт для электронной коммерции - как благодаря системе многоканальной поддержки клиентов приумножить прибыль.
Jurģis Lukss (Lux Technology): Building scalable Magento on Microsoft Azure with Chef
Jurģis Lukss (Lux Technology): Масштабирование Magento на Microsoft Azure с помощью Chef
Meet Magento Belarus - Andrew Klochkov spoke on Building Scalable and Reliable cluster in Cloud Environment (Based on Amazon and Rackspace installations)
http://by.meet-magento.com/
http://amasty.com/
Meet Magento Belarus - Thomas Fleck speech on: What makes Magento special and why Meet Magento community is important
http://by.meet-magento.com/
http://amasty.com/
Real use cases of performance optimization in magento 2Max Pronko
Is performance in Magento 2 the same as or slower than Magento 1? There are lots of discussions and debates about Magento 2’s performance. All debates are around sample data and Vanilla platform comparison. In this topic Max will share optimisations techniques to have solid page load times for Magento 2.
Also visit my blog: www.maxpronko.com
Remote UX Research Videos of real people interacting with your brand, regardless of device or location.
68% Rockefeller Corporation of users give up because they think you don’t care about them.
Beware of Multi Level Lesson one
Poorly organized information • Hover tunnels = early collapsing • Inconsistent triggers
Multi Level Navs • Don’t rely on the back button • Labels help • Remember context
Links should look like Lesson two
Navigating through a site shouldn’t be a process of trial and error. Links
Links • Difficult to discern what is or is not a link • Missing click history • Inconsistent link styling in the same view
More payment options Lesson three
UX Archive
Payment options • Optimize existing checkout flows • Implement a virtual wallet • Don’t forget trust
Not all icons are Lesson four
Drag or expand? http://www.exquisitetweets.com/collection/lukew/2919
http://www.exquisitetweets.com/collection/lukew/2919
Icons • Consider context • Use tooltips • Try your designs out with real users
Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen. Instead, they know what will happen based on earlier experience. ” “ Jakob Nielsen User Advocate and principal of the Nielsen Norman Group
Social security matters Lesson five So does copy!
Social privacy matters Lesson five
Social privacy • Be transparent • Make your privacy policy accessible • Look for serendipitous moments of interaction
Advertising lacks Lesson six
Consistent copy and images • Continue the conversation from ad to landing page • Keep the messages simple • Work with marketing or advertising teams
Categorization is Lesson seven
There’s no perfect way to categorize pages or products (but there’s a right way to do it). Categorization
Focus on building intuitive experiences
A mental model is what the user believes about the system at hand. ” “ Jakob Nielsen User Advocate and principal of the Nielsen Norman Group
Learn from your users • Improve mental models • Add cross-references • Solve for your primary audience(s) • Make sure your search works Categorization
Multi-level navs aren’t user friendly Mega menus and clickable menus help create a better experience for your users. Links should look like links Tried and true link conventions from the early days of the web are still the most effective ways to format your links. Consider more payment options Virtual wallet services are a great way to make checking out easier and more secure. Not all icons are universal Test users for comprehension and use tool tips to describe your most important icons.
10 Most Common Misconceptions About User Experience DesignWhitney Hess
Here's the presentation I gave at Pittsburgh Web Design Day (http://www.webdesignday.com) based on my article on Mashable (http://mashable.com/2009/01/09/user-experience-design/)
Usability vs. User Experience: What's the difference?Domain7
What's the difference between usability and user experience? Is there one? Check out Domain7's quick, handy guide—for designers, developers, and clients alike! Learn more: http://www.domain7.com/blog
Презентация Алексндра Тороша на PHP Frameworkds Day 2014 о фреймворке Phalcon и последних событиях с ним связанных за последний год. Релиз Yona CMS - системы управления контентом на Phalcon с модульной структурой
Секционный доклад
Экскурс в мир WEB разработки
Дмитрий Лаабе
Генеральный директор и основатель рекрутинговой компании IT-Доминанта
Технический директор и программист
портала Айти-Событие
Россия. Санкт-Петербург
http://it-sobytie.ru/events/3120
Владимир Никонов "Вызовы при разработке enterprise продукта"Fwdays
В докладе мы рассмотрим этапы развития приложения, начиная от монолитного Web приложения, до распределенной платформы по управлению бизнес-процессами. Покажем этапы развития, задачи и вызовы, которые возникали на каждом их них. Проанализируем различные аспекты, влияющие на развитие архитектуры, такие как бизнес-требования, технологические тренды и возможные ограничения.
Расширяемая платформа для создания и управления автоматизированными тестами н...jazzteam
Продукт XML2Selenium - это расширяемая, плагинная платформа для создания и управления автоматизированными тестами на основе технологии Java.
XML2Selenium имеет интеграцию с JUnit, работает поверх Selenium (это изменяемо). XML2Selenim позволяет создавать автоматизированные тесты в простом и понятном обычному (без навыков программирования) QA инженеру формате. XML2Selenium позволяет также управлять всеми стадиями работы с автоматизированными тестами, начиная от стадии создания и заканчивая управлением тестами.
Главными конкурентными преимуществами являются
- низкая стоимость вхождения. Начинающие автоматизаторы, и даже QA инженеры без навыков программирования создают качественные тесты, а значит легко поддерживаемые, легко изменяемые, с использованием DDT (Data Driven Testing) подходов, что увеличивает повторно-используемость тестов
- встроенные возможности структуризации тестов по папкам и файлам, а также по тегам, что позволяет качественно отобразить документацию на тесты. Внедряя эту платформу, вы автоматически улучшаете свои процессы управления тестами
- XML2Selenium - это плагинная, расширяемая платформа, позволяющая кастомизировать процессы под ваши нужды, создать новые плагины, добавить интеграцию с нужными системами, и многое другое
- все повторно-используемые части (инклюды, плагины) могут помещаться в репозитории, откуда ими могут пользоваться QA инженеры с других проектов компании, тем самым распространяется опыт и знания в области автоматизации
- XML2Selenium имеет широкий спектр полезных свойств в области автоматизации, таких как поддержка создания видео, снепшотов и скриншотов страниц, Groovy и JS скриптинга, поддержки объектно-ориентированного программирования на XML и многих других
Традиционно многие компании не инвестируют много в QA инженеров, при этом сложность продуктов и количество Use Cases растёт, и компании утыкаются в барьер, когда архитектура тестов становится сравнительно такого же уровня, как и архитектура приложения. Это же касается и автоматизации тестирования. Ключевыми проблемами становятся:
- вопросы поддержки и тестирования многих инсталяций продукта на стороне заказчика
- вопросы тестирования нескольких версий (бренчей) одного и того же продукта
- повторн
Видео с доклада: http://getdev.net/Event/asp-net-mvc-4
Доклад об ASP.NET MVC, откуда и зачем он появился, какие задачи решает, какой подход к разработке исповедует. Этот доклад больше пригодится тем, кто хочет углубить и структурировать свои знания об ASP.NET MVC
Способы оптимизации работы с памятью в Magento 2Amasty
Общая краткая информация по тому, как работает PHP с памятью. Сравнение объема памяти (в байтах) различных массивов, текстовых перменных и объектов. Также некоторые “фишки” для оптимизации расхода памяти в PHP.
Особенности оптимизации работы с памятью в M2. Сравнение некоторых типовых объектов классов по объемам памяти (Модели, Хелперы и т.д.). Способы обработки больших объемов данных в M2. Обработка объемных коллекций, загрузка и обработка их “пачками”. Оптимизация работы массивов объектов.
A joyful shopping experience. Creating e-commerce sites that are effortless t...Amasty
In his presentation for Meet Magento CZ Victor shares his thoughts about the usability and design trends and covers the important things like browsing, searching and navigation as well as cart and checkout.
Generate and send numerous triggered emails based on customer activity to build productive relationships with clients and increase the number of repeated purchases. Customize email templates and effectively manage emails dispatch.
Create informative order statuses to make order processing maximally clear both for customers and for admin users. Easily manage statuses on the grid and timely notify clients about status changes.
Add an unlimited number of extra fields to your checkout page to easily collect and process additional order related data. Display all created order attributes on a handy backend grid to keep necessary information at hand.
Shipping Table Rates for Magento 2 by Amasty | User GuideAmasty
Create an unlimited number of flexible shipping methods with individual rates. Use combinations of a destination address, cart weight, order subtotal and price to accurately calculate shipping.
Customer Group Catalog for Magento 2. User GuideAmasty
Change visibility of certain store products for different customer groups. Hide price or replace it with custom content on category and product pages.
You can learn more at https://amasty.com/customer-group-catalog-for-magento-2.html
Product Parts Finder for Magento 2 | User GuideAmasty
Equip your store with an advanced search option. Let customers easily find necessary repair parts and components by placing year-make-model and other additional product filters on your website.
Edit Lock Magento Extension by Amasty | User GuideAmasty
Lock your backend tabs and pages to prevent them from being edited by multiple admin users simultaneously in order not to lose important store data. Effectively manage the work of admin users and increase their productivity.
Advanced Reports Magento Extension by Amasty | User GuideAmasty
Equip your store with a powerful analytics tool. Use various report types to collect and process important sales information. Study customer demand, evaluate the success of implemented strategies and make firm sales predictions.
A/B Testing Magento Extension by Amasty | User GuideAmasty
Easily run numerous split and multivariate tests based on different product parameters. Test page design elements and gather important statistical data to improve your product pages accordingly.
Advanced Customer Segments Magento Extension by Amasty | User GuideAmasty
Segment your customers and store visitors by various parameters. Export segmentation results for careful analysis and take advantage of targeted marketing campaigns.
Order Archive Magento Extension by Amasty | User GuideAmasty
Automatically archive orders or delete them to keep your order grid clean and save time on store management activities. Use flexible settings to customize archive process according to your needs.
7. Что-то может сломаться
Сложно работать командой
Сложно подключать js плагины
Сложности с переносом функционала
Много времени на введение нового человека
Множество соглашений и стандартов
Традиционный подход
7
8. Набор стандартов, которые позволяют создавать
изолированные и самодостаточные элементы интерфейса.
Веб-компонент имеет:
Персональный тег
Свой JavaScript
Изолированные стили
Свою внутреннею структуру
Веб-компоненты
8
10. Позволяют создавать пользовательские теги.
Основные возможности:
Можно создавать полностью новые теги
<my-element></my-element>
Наследоваться от существующих
<input is=“color-picker” />
Описывать их поведение
Доступен их жизненный цикл
Кастомные элементы (custom elements)
10
11. Позволяет создавать скрытую структуру элемента.
Прячем особенности реализации
Защищаем его от внешних воздействий
Удобно управляем содержимым
Теневая модель документа (shadow DOM)
11
12. Нужны нам для шаблонизации внутри элемента.
<div class=“hidden”> … </div>
Могут содержать стили и html
Контент шаблонов не отображается, пока он не
клонирован
Используется ленивая загрузка (lazy load)
Шаблоны (template)
<template></template>
12
13. Используется для вставки другого HTML, CSS, JavaScript
внутрь страницы.
Мы собираем все наши стили, JavaScript, и верстку
в один файл, и просто подключаем его одной строкой.
<link rel="import" href="/some-module.html“ />
HTML Imports
13
15. Компоненты защищены от внешних воздействий и сами
компоненты тоже не смогут ничего поломать
Готовые компоненты легко использовать
Работать командой будет легче — каждый разработчик делает свой
компонент и не мешает другим
Возможность больше времени уделить разработке каждого
компонента и "довести его до ума"
Компоненты делают из сложной верстки – простую и понятную
структуру
Больше свободы в выборе технологий и языков
Преимущества:
15
16. Пока не очень хорошо
Поддержка браузерами
HTML
Imports
Custom
Elements
Shadow
DOM
Templates
Chrome
+
+
+
+
+
+
+
+
+
+/-
+/-
+/-
+
-
-
-
+/-
-
-
-
Opera Firefox Safari IE/Edge
16
17. Надстройка над спецификацией web components, которая
предоставляет её поддержку актуальными версиями браузеров.
Webcomponents.js
HTML
Imports
Custom
Elements
Shadow
DOM
Templates
Chrome
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/-
+/-
+
+
+
+
+
+
Opera Firefox Safari IE10 IE11+/Edge
17
18. Расширенная поддержка спецификаций web components
Есть библиотека готовых компонентов, к примеру:
<google-map latitude="37.790" longitude="-122.390"></google-map>
Декларативный стиль создания компонентов
https://www.polymer-project.org/1.0/
Polymer ― полифилы от Google
18
19. Будут появляться репозитории с готовым компонентами
(уже есть, но дальше будет больше)
Js плагины будут использоваться всё реже (например,
вместо js плагина для карусели мы получим компонент с
тегом <slide-carousel></slide-carousel> и т. п.)
HTML код станет более понятным и читаемым, как для
человека, так и для робота
Существенно упростится добавление нового функционала
с точки зрения frontend
Перспективы развития компонентного web
19
20. Высокая скорость отклика интерфейса
Возможность создать более интересный UI и UX
Возможность выбора архитектуры на стороне клиента
Более тестируемый frontend
Возможность делать крутые штуки, вроде изоморфных
приложений, распределённых приложений и многое
другое
SPA (Single Page Application)
20
21. Products
Product Categories
Product Images
Product Websites
Customers
Customer Addresses
Inventory
Sales Orders
Order Items
Order Addresses
Order Comments
Как это будет происходить?
Приложение Magento
RESTful API
Ресурсы:
21
23. Основные особенности:
Используется для представления (view)
Компоненты
Виртуальный DOM
Может выполняться и на сервере и на клиенте
Flux архитектура
jsx (JavaScript XML) – XML подобный синтаксис для
описания компонента
React.js
23
24. Компоненты — это функции
Компоненты могут иметь древовидную структуру
Компоненты имеют состояния (states) и свойства (props)
Пример простого компонента:
React.js компоненты
24
26. Имеет мало общего с Angular
Компоненты как и в Polymer
Поддерживает shadow DOM
Type Script
Очень прост в освоении
Пока не production ready
Angular 2
26
28. Особенности такой платформы:
Концепция «Write once, run anywhere»
Использует web view или браузер
Позволяет выполнять JavaScript приложение так, как если
бы это было обычное приложение, написанное на родном
для OS языке
Предоставляется мощный API для использования
нативных функций мобильных устройств
Большие и сложные приложения теряют
производительность, особенно на старых версиях OS
Cordova (PhoneGap, Ionic)
28
29. Особенности такой платформы:
Концепция «Learn once, write anywhere»
Используется нативная реализация компонентов для iOS и
Android вместо WebView или браузера
Асинхронное выполнение приложения без потери
производительности
Используются CSS подобные стили
React Native расширяем, можно создавать модули на
родном для платформы языке и использовать их в своём
приложении
React Native
29
31. Все современные JavaScript библиотеки имеют
компонентную архитектуру и высокий уровень
абстракции. Похоже, что компонентного веб нам не
избежать
JavaScript с каждой своей версией становится всё более
взрослым, а его синтаксис более выразительным. Задачи,
выполняемые этим языком, будут всё более широкими
Развитие браузеров будет всё меньше влиять на
возможности разработки
Что дальше?
31