Сразу ввожу одно очень важное определение, процитировав первую же ссылку в Яндексе: "Фреймворк - программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта."

По долгу службы я начал разбираться с JavaScript'ом и фреймворком "Vue.js". Таковой мне порекомендовали. Хочется сразу отметить, что самое толковое, что есть в отношении этого фреймворка - это основная документация, официальное руководство от производителя. У меня был (да и остаётся не заданным) ряд вопросов к авторам различных статей на «Хабре» (https://habr.com/) из серии "как?", "что?" "откуда?", "почему так?" Метался из стороны в сторону, от статьи к статье, и спустя время всё равно приходил на страницы основной документации и находил там правильные ответы на свои вопросы.

Да, признаюсь, первое прочтение не дало, ровным счётом, ничего, но как только появлялись конкретные задачи - находились и решения к ним.

Поэтому первое, что мне хочется выделить и сохранить здесь - это ссылку на официальное руководство "Vue.js".

https://ru.vuejs.org/v2/guide/

Без него просто никуда.

Таким образом, имеется вполне конкретная цель: разобраться с "Vue.js". А на вопрос "зачем?" отвечают поставленные мною самим и моими коллегами задачи:

- предоставить результат конвертации данных из локальной базы в серверную в удобной форме для анализа приёмочной комиссией;
- следовательно: разработать графический пользовательский интерфейс для демонстрации с использованием передовых Интернет-технологий;
- следовательно: выбрать перспективный фреймворк на замену "Flex";
- следовательно: изучить объектную модель выбранного перспективного фреймворка;
- следовательно: перейти от строк таблиц базы данных к экземплярам классов, хранимым в оперативной памяти;
- следовательно: подобрать нужные структуры (деревья / таблицы / поля) и настроить фильтры для приемлемой демонстрации сведений, необходимых для анализа приёмочной комиссией.

Такое, как видите, получается классическое решение задачи, позиционируемой на этапе анализа предметной области согласно спиральной модели жизненного цикла любого программного обеспечения.

Специфика разработчика: я являюсь специалистом, которого в вузе пять лет учили создавать только толстые клиентские приложения. Очень лениво мне сейчас в красках рассказывать, что такое толстый клиент, но раз это обучающая статья, то это необходимо сделать. Буду краток. Толстый клиент - это программное обеспечение, размещаемое на рабочем компьютере конечного пользователя, которое решает не только задачи отображения информации в удобной форме, но и само проводит какие-то расчёты, причём не обязательно сопрягается с базой данных для хранения результатов и исходных данных. Входная и выходная информация толстых клиентов может храниться всего навсего в текстовых файлах и этого достаточно. Тот проект, над которым я работал во время написания кандидатской диссертации, тоже являлся толстым клиентским приложением. И это такой качественный, надёжный и самодостаточный толстый клиент.

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

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

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

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

Да, энтузиасты решили какие-то свои, частные задачи, но они являются, преимущественно, задачами построения типовых сайтов, а не задачами организации специфической информационно-управляющей системы. Поэтому копался я, копался, а всё равно вернулся к официальному руководству, к разделу с примерами:

https://ru.vuejs.org/v2/examples/

И это, опять же, дало мне куда больший рывок, чем все те статьи на "Хабре", которые были прочитаны. И если раньше я считал "Хабр" за классную IT-площадку, то теперь меня "Хабр", откровенно, бесит, потому что в моём нынешнем представлении действительности - это сборище хвастунов, которые не нацелены научить своих читателей. Они просто показывают там, какие они молодцы, что они что-то сделали, они разобрались. Вернее, не так. Все они, априори, считают, что все их читатели, без исключения, знакомы с азами передовой разработки веб-приложений на языке JavaScript.

То есть, давайте мельком взглянем, с чего же начинается большинство статей по веб-разработке на "Хабре"? Например, просто типовая статья без оглядки на конкретное приложение / примочку:

"Выполните следующие шаги, чтобы установить [примочку] и начать работу с ней.

• Создайте директорию для вашего проекта. С точки зрения сервера эта директория будет корневой.
• Откройте эту директорию через терминал.
• Теперь скачайте и установите [примочку]. Аргумент -g указывает npm на то, что пакет следует скачивать в основную папку для хранения пакетов, а не в текущую директорию.

• $ npm install -g grunt-cli"

npm install, npm install, npm install…

Весь "Хабр" пестрит этим. Но реально нет там такой статьи, где тебе расскажут специфику от нулевой отметки о том, что, да откуда берётся? То есть по каким-то другим, постановочным статьям на "Хабре" ещё можно понять, что под терминалом понимается, на самом деле, консоль, а под консолью, в свою очередь, понимается "Командная строка" операционной системы, которая вызывается либо через "Пуск > Все программы > Стандартные > Командная строка", либо просто нажимается "Пуск" и в строке поиска прописываются три заветные буквы "cmd", которые подтверждаются нажатием на клавишу "Enter".

Но даже если ты нашёл определение терминала и попытался ввести упомянутую конструкцию "npm install", то всё равно ничего не получится, потому что автор не потрудился сказать, что когда-то давно он установил на свой компьютер программное обеспечение "Node.js", который позволяет ему устанавливать все примочки для проектов без особого труда.

Да, я нашёл ответы на эти вопросы и скачал себе "Node.js". Да, у меня заработали команды "npm install". Но вы думаете это помогло мне постичь данный дзен? Естественно нет. Это была дорога, которая лишь вывела меня на свет, на вершину горы, но к обрыву. А дальше-то что? Идти некуда. И вернулся я к истокам.

Но если считаете, что понимаете авторов и всю нитку повествования с этими всякими "npm", то следует скачать первым делом "Node.js" (https://nodejs.org/en/), ибо без него машина не просто не тронется с места, она даже не заведётся.

Далее я бился над проблемой поиска IDE (среда разработки приложений). Без IDE как без рук. И я спорил, спорил, спорил с коллегами о том, что все эти фреймворки, которые они рекомендуют, конечно, дело хорошее, но вот с наличием среды разработки для их использования какая-то информационная пропасть. Но то было мышление программиста, работавшего долгое время с толстыми клиентскими приложениями... А в споре, как известно, рождается истина. И мне дали понять, что я бьюсь головой об стену в поисках IDE одним простым вопросом:

- А зачем тебе IDE?
- Как же? А кто всё это безобразие компилировать будет? – Возразил я.
- Это же JavaScript, он, по сути, компилируется браузером. Можно писать код хоть в блокноте.

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

И, конечно, как только я сел и тупо скопировал простейший пример "Vue.js" в блокнот, то он у меня, не поверите, заработал.

Не сразу, естественно, ибо есть специфика на сайте - там всё поделено на рубрики:

- результат (Result);
- гипертекстовая разметка (HTML);
- скрипт, программный сценарий (Script);
- настройка стилевого оформления (CSS).

Если понимаешь, как взаимно увязать фрагменты этой мозаики - всё будет работать.

Результат

Гипертекстовая разметка

Сценарий

Стиль

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

Самый же простой пример из официального руководства реализуется без каких-либо стилей. Он может быть размещён в одном единственном текстовом файле с гипертекстовой разметкой "index.html".

Простой пример с сайта

Он, конечно, сразу тоже не заработает, так как здесь пропущена одна существенная деталь - ссылка на модуль (ядро) фреймворма "Vue.js", хотя про это в тексте сказано, но надо же читать данный текст внимательно.

А если быть совсем внимательным, то до этого фрагмента присутствует целый абзац про то, как подключается ядро "Vue.js" и какие у него существуют разновидности. Я взялся использовать версию для разработки.

Подключение ядра

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

Итак, ниже представляю вашему вниманию рабочий код, который будет выдавать некоторое сообщение (message) из сценария напоказ зрителю нашей веб-странички.

Код гипертекстовой и сценарной разметки, записанный в блокноте

Вот он один единственный файлик в папке у меня на жёстком диске.

Скриншот файлового менеджера Total Commander

Откроем теперь этот файлик через браузер "Google Chrome". Впрочем, не обязательно в "Хроме". Есть и куча других, совместимых браузеров. Просто после очередной переустановки системы быстрее было добраться до "Хрома". Так, вообще, я "Оперу" люблю, а с "Internet Explorer'ом" "Vue.js" не дружит.

Результат

Всё работает!

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

Сегодня ресурс жив, как говорится, а завтра - мёртв, потому хочется иметь некоторою гарантию того, что всё будет работать, даже если веб-ресурс загнётся.

Это как с видеороликами в сети. Если тебе что-то из мира видео очень понравилось, а спустя время захотелось пересмотреть, вот, в 70% случаев найти не удастся, особенно, если это видео так и не выбивалось в лидеры просмотров. Поэтому хорошее доброе правило: понравилось - сохрани на жёсткий диск.

Точно так же поступим и со "Vue.js". Фреймворк, считаем, нам понравился. Пройдём по ссылке https://cdn.jsdelivr.net/npm/vue/dist/vue.js, которую мы указали для подключения ядра.

Там содержится код этого самого ядра.

Содержимое ссылки

Скопируем код полностью, предварительно выделив сочетанием клавиш "Ctrl" + "A" (Выделить всё). Вставим в новый блокнот и сохраним под именем "Vue.js" в той же папке, где ранее был создан "index.html"

Копия текста ядра в блокноте

Сохранение "Vue.js"

Теперь, вообще говоря, в нашей папке стало два файла, а не один, да и тяжелее стал сам проект, но это верный путь к надёжности.

Скриншот файлового менеджера Total Commander

В коде "index.html" теперь мы делаем небольшую замену - сокращаем ссылку во фрагменте подключения ядра.

Изменения в коде

Эврика! Теперь мы можем демонстрировать данный простой проект и в условиях отсутствия подключения к Интернету. К этому всё и шло.

Ну да, вот такой я человек - у меня всё должно быть надёжно и под рукой. Работать мои программы должны всюду, где бы я ни оказался. Всякие же в жизни ситуации бывают. Никогда заранее не знаешь, когда в очередной раз выдастся момент немного покодить.

Очень надеюсь, что мне не станет лень в перспективе рассказать и о других интересных вещах, с которыми я столкнулся на пути освоения фреймворка "Vue.js".

Вложение: 5952342_vue_hello_offline.rar

Серия сообщений "Vue.js":
Часть 1 - ПЛАГИН -xBASEVIEW- ДЛЯ -TOTAL COMMANDER-. ВВЕДЕНИЕ
Часть 2 - JSON TEST
Часть 3 - ФРЕЙМВОРК VUE.JS. С ЧЕГО НАЧАТЬ. РАБОЧИЙ ПРИМЕР
Часть 4 - АВТОМАТИЗИРУЕМ СОСТАВЛЕНИЕ СПИСКОВ С VUE.JS. ПРИМЕРЫ
Часть 5 - ДЕЛАЕМ ПРОГРАММИРОВАНИЕ СО VUE.JS УДОБНЕЕ И ПРИЯТНЕЕ
Часть 6 - УЧЕБНО-МЕТОДИЧЕСКОЕ