Webdevkin. Статьи по теме "Фронтенд"

Сборка фронтенда - часть 2. Тестовое приложение Backbone + Require.js

сентябрь 27 , 2016

В предыдущей статье мы договорились разобраться, как собирать фронтенд с помощью gulp. Но предварительно нужно сделать тестовое приложение для того, чтобы было что собирать. В качестве примера сделаем простенькую страничку на Backbone. Управлять модулями будем с помощью require.js. Работать с dom поможет добрая jQuery, а с данными - lodash. Подгружать html-шаблоны мы сможем с помощью requirejs-text.

Так как приложение тестовое, я не буду уделять внимание функциональности - все предельно просто. Обычная страничка с парой текстов и картинкой. Мы создадим одну модель, представление view к ней, загрузим html-шаблон и отрендерим все это добро. Предполагаю, что Вы уже знакомы с Backbone и Require.js, поэтому подробно каждую строчку расписывать не буду. Код очень простой, но все-таки без знания основ этих библиотек не все будет очевидно.

Если Вы не знакомы с Backbone, но интересуетесь созданием Single Page Application в целом и этой замечательной библиотекой в частности, оставляйте комментарии в статье, что-нибудь придумаем :-)

А теперь к делу.

Метки:
Читать дальше

Сборка фронтенда - часть 1. Основы сборки и организация проекта

сентябрь 24 , 2016

Уже давно инструменты сборки фронтенда перешли из разряда экзотики в необходимую часть работы над проектом. Я хочу поделиться некоторыми наработками по части организации проекта, его структуры, рассказать, какие задачи я решаю с помощью сборки и какими инструментами. Мы напишем небольшое тестовое приложение в связке Backbone + Require.js. Настроим окружение для работы над проектом в режиме "девелопмента" и "продакшена", посмотрим на их отличия. И в конце напишем задачи для сборки проекта с помощью инструмента сборки gulp и его плагинов.

Будут рассмотрены такие вопросы: работа со стилями sass с использованием sourcemaps, склеивание и сжатие js-файлов, сборка requirejs с помощью rjs, препроцессинг html, очистка и копирование файлов, оптимизация изображений, поднятие локального веб-сервера и режим наблюдения - watch-таски.

Добро пожаловать в статью, будет много интересного!
P.S. Материала много, поэтому статья будет разбита на 3 части: основы сборки и организация проекта, написание тестового приложения на Backbone + Require.js и собственно сборка с помощью gulp.

Метки:
Читать дальше

Фильтры в интернет-магазине. Урок 6 и заключительный. Завершаем отделку

сентябрь 13 , 2016

Свершилось! Заключительный урок серии "Фильтры в интернет-магазине". В статье доработаем некоторые детали, чтобы придать каталогу завершенный вид. Мы узнаем, как обновлять список брендов и цены при смене категории, а также некоторые другие вещи. Начинаем.

Читать дальше

Фильтры в интернет-магазине. Урок 5. Принимаем данные от сервера и отображаем их на клиенте

сентябрь 4 , 2016

Пятый урок серии будет очень невелик. Настолько, что сначала я хотел включить его в заключительный урок серии про фильтры. Но все-таки решил выделить отображение товаров в браузере в отдельную статью. Этот урок будет очень позитивным в том плане, что небольшие усилия позволят нам, скажем так, "вживую" увидеть результат своей работы: меняем настройки фильтров в браузере и сразу видим отфильтрованный каталог. В принципе это и есть цель всей нашей работы. В заключительном же, шестом уроке, я расскажу о нескольких специфических вещах, которые требуют не столько написания кода, сколько разъяснения, зачм этот код нужен. А пока быстро пройдем пятый урок и полюбуемся, что у нас получится.

Читать дальше

Фильтры в интернет-магазине. Урок 3. Собираем данные на клиенте и отправляем на сервер

август 24 , 2016

Мы добрались до третьего урока серии, посвященной фильтрам в интернет-магазинах. Сейчас мы научимся собирать данные на клиенте и отправлять их на сервер. На сервере напишем небольшую заглушку, возвращающую нам какие-то сведения. Как и предыдущие уроки, этот представляет собой логически завершенную часть, по прохождении которого Вы увидите законченный результат.

Читать дальше

Фильтры в интернет-магазине. Урок 2. Структура проекта и верстка

август 9 , 2016

Переходим ко второй части наших уроков. Здесь рассмотрим структуру проекта, его файлов и папок, сверстаем блоки с фильтрами, товарами и подключим плагин jQueryUI.slider для регулировки цен.

Читать дальше

Фильтры в интернет-магазине. Урок 1. Структура базы данных

август 8 , 2016

В первом уроке из серии статей, посвященных созданию фильтров в интернет-магазине, мы определимся, какие данные в базе нам нужны. Создадим нужные таблицы и заполним их тестовыми данными. Приступим

Читать дальше

Фильтры и сортировка в интернет-магазине на ajax, php и mysql. Серия уроков

август 7 , 2016

Тема интернет-магазинов набирает обороты. После корзины на фронте, отправки заказов и доставки рассмотрим, как сделать фильтрацию и сортировку товаров в связке ajax, php и mysql. Материал довольно большой, и я решил провести эксперимент. Вся информация будет содержаться не в одной большой статье, а разбита на серию небольших уроков. Каждый урок будет посвящен отдельной логически обособленной части, и в конце урока мы будем получать законченную часть нашего приложения, например, готовую структуру данных, верстку или js-код. После прохождения всех уроков мы построим законченную систему фильтров, небольшую, но расширяемую под свои нужды.
Думаю, такое разбиение на уроки даст нам некоторые преимущества. Во-первых, материал легче усваивается небольшими порциями, а во-вторых, нам не понадобится полностью проходить всю огромную статью целиком, прежде чем увидеть какой-то результат. Что-то работающее будет в конце каждого урока. Итак, начали.

Читать дальше

Как добавить доставку в интернет-магазине

июль 31 , 2016

Этот пост будет дополнением к статье Реализуем оформление заказа в интернет-магазине. Предполагается, что читатель знаком с материалом и кодом оной статьи. Мы рассмотрим, как добавить возможность выбора вариантов доставки при оформлении заказа, как рассчитать общую стоимость заказа для покупателя, как отправить эти данные на сервер и отобразить в письме. И для небольшого разнообразия сделаем бонус для покупателя в виде бесплатной доставки при большой сумме покупок.

Читать дальше

Простой скрипт для создания оглавления или содержания статьи на сайте

июнь 24 , 2016

У меня давно была мысль сделать что-то вроде оглавления или содержания статьи на webdevkin-e. Многие посты объёмны и ориентироваться по ним не очень удобно. Идея была в том, чтобы в начало каждой статьи поставить из названий подразделов, клик на которые отправлял бы на соответствующее место страницы. Все это элементарно делается через якоря, атрибут id или name (устарел) тега a, но создавать врукопашную такие списки для каждой страницы было очень лениво. Поэтому я написал небольшой скрипт, если хотите - плагин или виджет, который автоматически создает оглавление для каждой статьи, прикрутил его к своему блогу и хочу поделиться реализацией с общественностью.

Читать дальше