Как изучать курс разработчика Bitrix Framework (frontend)

В процессе подготовки разработчиков мы столкнулись с вопросом эффективного изучения курса "Разработчик Bitrix Framework". На наш практический взгляд информация в нем подана не совсем корректно и неудобно для изучения. Поэтому мы предлагаем свой способ изучения курса (основываясь на базовом курсе от 1С-Битрикс). Данная статья направлена на frontend разработчиков!

Что необходимо знать для полноценного начала изучения и дальнейшей работы?

• HTML5 / CSS3
• Работа с предпроцессорами
• Понимание структуры DOM, возможность напрямую влиять на элементы DOM посредством JS (без использования библиотек)
  
• Работа с jQuery на уровне разработки собственного функционала и использования готовых библиотек с кастомизациями

С чего начать изучение курса Разработчик Битрикс Фреймворк для frontend?

С золотых правил разработки. Их перечень собран тут:

Шаг 0. Золотые правила разработки

Сейчас вам будет далеко не всё понятно, но ничего страшного! Просто держите эту ссылку на виду и при возникновении спорных моментов открывайте и ищите ответ!

Файловая структура

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

Итак, читаем:

Шаг 1. Архитектура 1С-Битрикс

Шаг 2. Структура файлов

Все неясные термины всегда можно подсмотреть в глоссарии.

Шаблонизация с точки зрения frontend

Самая простейшая Frontend работа связана с разработкой шаблонов для Битрикса. Как это делается, описано здесь:

Шаг 3. Как сделать шаблон для 1С-Битрикс

Особое внимание уделите:

• Где в файловой структуре размещается шаблон (мы требуем размещение разрабатываемых шаблонов строго в папке /local/templates/. Подробно про папку local и её роль в разработке написано здесь)
• Структура файлов и папок шаблона, необходимая для корректной работы

Компоненты и их шаблоны

Шаг 6. Что такое компоненты, какие они бывают и за что отвечают. Ознакомительная глава, чтобы вы понимали, как в Битриксе реализована MVC модель и не пытались решать frontend задачи там, где это делать нельзя.

Шаг 7. Шаблоны компонентов (особое внимание обратите на то, что файлы стилей и скриптов компонентов должны храниться в папке шаблона компонента. Это важно для оптимизации скорости работы сайта. Принцип простой: если данные стили и скрипты используются только в этом компоненте и не затрагивают глобально странцицы сайта, их необходимо выносить в локальные файлы в папке шаблона).

Интересное и полезное по теме Frontend разработки на 1С-Битрикс:

• Битрикс и React
• Битрикс и Vue.js

Видео по теме