Месяц: Июнь 2022

Пролог

Здравствуйте всем, это пролог к серии статей сериала “ООП здорового человека(Сезон 1)”. Данная серия статеек об объектно-ориентированном программировании “здорового человека”(в предыдущей записи я привел пример ООП курящего). Современное ООП это не только работа из сущностями как с объектами, но и следование некоторым механизмам, принципам и шаблонам проектирования кода.

В данном цикле мы рассмотрим все механизмы и принципы. Здесь будут не только выдержки из Википедии и иных источников, но также примеры кода(где возможно и, разумеется, на PHP) и их разбор.

Сериальчик стоит глянуть как новичкам, так и прожжённым программистам. Первым – для того чтоб легко “въехать в тему”(рассказываю максимально доступно); вторые больше мне нужны – для исправления моих ошибок(если будут). В целом, не стесняйтесь – комментируйте(только прошу – коль критикуете – объясняйте за что и где)!

Содержание:

Знакомимся с Vue js

Привет всем в первой статье посвященной javascript. Знаю, что не всем он по душе(как и пхп), но да ладно(учитывая, что это единственный прод. язык фронтэнда). Я не буду разглагольствовать о том как он работает или его синтаксисе, начну сразу с фреймворка.

Vue что это и почему он?

Сперва, я познакомился с чистым js(разумеется), потом с jQuery и React, и в конце с Vue(ну как “в конце” – на данный момент). jQuery это первая попытка использования языка в ООП виде(в js вообще своеобразный ООП), эта библиотека долгое время была ультимативной на рынке. Потом начали появлятся полноценные фронтэнд фреймворки. React это первый с коим я познакомился(тк он использовался в WP), но именно Vue есть вершиной(на сейчас), имхо. Я не хочу обидеть React, однако , именно Vue содержит то, о чем говорит “реакт” – реактивность. Немного подробнее: первый при получении изменений перерисовывает ввесь компонент, второй – именно изменившуюся часть компонента.

И, главная, как по мне особенность, шаблонизатор этих фреймворков – JSX для React и HTML Vue. Дело в иом, что я часто верстаю компоненты, а потом переношу в фреймворк, при этом JSX требует замены гипертекстовых атрибутов на специальные(да, некоторые редакторы умеют делать это автоматом). Также, в JSX мне не удалось добиться работы эммета и аводополнения доступными классами; но шаблонизатор вью это делает без проблем.

Настройка среды разработки

Хвати мерять фреймворки достоинствами(ибо я не знаю, кто из них обьективно круче), подойдем к разработке; нет, писать код в этой статье я не буду – расскажу о подготовке к началу разработки.

Первое, что нужно сделать, так это(как и с любым другим js-фреймворком) установить NodeJS. Затем специальное расширение для браузера Vue Devtools, которое в панель разраба браузера добавит вкладку Vue

Vue Devtools
Vue Devtools

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

Примечание

Я работал не в большом количестве редакторов кода, поэтому не сочтите это за объективное мнение.Из всего, где я писал код, наиболее удобным(экспорт модулей, умное автодополнение, работа с отступами …), качественно проработанным показался PhpStorm(полагаю, как и другие их продукты для фулл-стек разработки). Это бесплатная реклама продукта jetbrain-ов, но их среды этого достойны,имхо.