В этом году писать итоги странно. Вроде бы итоги года, а по факту - двух месяцев. Почти весь 2018-й я бессовестно пропадал, а вернулся и стал писать дальше только в середине ноября.

В своих постах я часто упоминаю javascript-шаблонизацию. Underscore и lodash-шаблоны, может, видели. И недавно понял свою ошибку. Я пишу про шаблоны так, как будто прям каждый обязан знать, что это такое. А если не знает, то легко загуглит. А давайте-ка вместе и погуглим. Чуть не первая статья, с хабра, цитирую
— Лучшим выбором оказываются шаблоны, потому что это приводит к более чистому базовому коду и лучшему процессу работы с ними.

Хм, ну окееей. Погуглим еще. Сайт developer.mozilla.org, серьезные ребята, почитаем.
— Шаблонными литералами называются строковые литералы, допускающие использование выражений внутри. С ними вы можете использовать многострочные литералы и строковую интерполяцию.

Че-то это вообще не то. Это что-то из es6. Ну и третья попытка:
— Неплохо бы использовать механизм шаблонизации на стороне клиента, чтобы отделить поведение приложения от его внешнего вида

Я в свое время читал похожие умные слова и ни фига не понимал. Если Вы понимаете, то читать дальше будет не интересно. Зайдите на хабр и прочитайте лучше там. А вот те, кто по этим фразам с трудом улавливает, о чем речь, но хочет понять, оставайтесь. Попробуем вместе разобраться, что такое javascript-шаблонизация, зачем она нужна и когда применяется.

В первом уроке админки на vue мы вывели на страницу товары и реализовали поиск. Сегодня прикрутим к списку товаров несколько фильтров и сортировок. Это будут фильтры по категориям, брендам, ценам и сортировки по рейтингу и ценам. Главная цель статьи - показать, что на vue делать такие вещи быстро и удобно.

От Питера до Валдая всего 300 километров. Если ехать без коляски и не останавливаться на сон, спокойно добираешься за 4 часа. Трасса М-10 чуть подправила планы, приняв в себя грузовиков больше привычного лимита "дохрена на километр". В итоге доехал за 4,5.

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

С админкой на файлах мы закончили, пора переходить к вещам посерьезнее. На очереди админка для интернет-магазина, уже на базах данных, все как положено. За магазином далеко ходить не нужно, возьмем наш shop.webdevkin.ru. Будет здорово, если Вы с ним уже знакомы. Если нет, то посмотрите статью Структура базы данных в интернет-магазине, для админки этого хватит. К тому же по ходу уроков я буду стараться пояснять неочевидные моменты и давать ссылки на нужные места магазина. Постараемся не заблудиться :-)

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

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

В трех предыдущих уроках админки мы подготовили верстку и серверную часть. Осталось вдохнуть жизнь в статичную страничку яваскриптом. Или выдохнуть, кому как нравится. Давайте подумаем, что хотим сделать.

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

С постановкой задачи разобрались, давайте приступим.

Привет! Пишу тебе письмо в 2023-й из 2018-го. Интересно, прочтешь ли ты эти строки? Пять лет все-таки. Тут через год не знаешь, как жизнь обернется. А пять вообще вечностью кажутся. Надеюсь, все-таки прочитаешь. Может, вгрустнешь, а может, порадуешься привету из прошлого.

Главное, чтобы ты, уже большой дядя, нашел время на это письмо. И смелость. Поди ссыкотно будет читать. Но ты справишься, я в тебя верю.

Не знаю, как у тебя сложилась жизнь. Может, есть собственный крутой проект. А может, имеешь небольшой бизнес, да хоть веб-студию. Или работаешь в Стабильной Развивающейся Компании. Или хипуешь на фрилансе и мотаешься по миру с ноутбуком за плечами. Как бы ни было, надеюсь, что ты все так же юн душою, в плейлисте Amy Macdonald, а Достучаться до небес любимый фильм.

Я тут посижу с тобой, пивка попью, поспрашиваю о том о сем. Что в айти в 2023-м, как в мире обстановка, как живешь, как развлекаешься. Всего чуть-чуть.

В предыдущем уроке админки мы разобрались с конфигами и значениями параметров. Сегодня научимся выводить настройки в браузере. А чтобы не было скучно просто писать html, подключим к проекту шаблонизатор Twig. Ему и будет посвящена основная часть статьи.

У Twiga отличный функционал и простой синтаксис. В дебри лезть не будем, нам хватит и малой части его возможностей. Начинаем.

В первой статье об админке мы разобрали простой способ чтения настроек из отдельных файлов.

Плюсы такого подхода:

1. Внедряется за 15 минут 10-ю строками кода
2. Одна настройка - один файл

Для случаев, когда нужно быстро внедрить и забыть, такое решение подходит. 

Минусы:

• 1. Для правки настроек приходится лезть на ftp
• 2. Чем больше настроек, тем больше файлов, а значит и больше шансов ошибиться
• 3. Настройки хранятся только в строковом виде, из чего вытекают два подпункта
• 3.1. При чтении приходится их конвертировать
• 3.2. Опять легко ошибиться: вместо числа вбить строку и поломать приложение

Давайте напишем больше 10 строк кода, но зато эти минусы устраним.