Как устроена архитектура современного front-end приложения?

Question

[Snewer]

Здравствуйте!

Занимаюсь backend разработкой, но иногда есть необходимость (для своих проектов) заниматься и frontend. Уровень - jQuery. В принципе, реализовать могу все что задумываю, но на выходе - спагетти код. Смотрел в сторону Angular, React, Vue, но не могу до конца расставить все точки.

Обычно делал как: есть у нас какой-то маршрут, и контроллер возвращает для него представление, а уж там если потребуется и динамическое изменение данных при обращении к API (через Ajax). Что происходит при работе с SPA фреймворками? Всего лишь одна точка входа? Вся логика всего проекта загружается вместе с js сразу? Данные берутся только по API или же часть генерирует сервер в виде html?

Спасибо.

Answer 1

[Дмитрий Тимофеев]

Так сразу не ответишь. Почитайте Интернет, много всего. ITDVN на ютубе посмотреть можно. На хабре много интересных статей. Например, свежий, "легкий" пост https://habrahabr.ru/post/321844/

По сути архитектура не менялась с появления скриптов в браузере. Три уровня операций в архитектуре:
1) Верстка. Раньше были таблицы, потом стали дивы. Все писали свои библиотеки. Затем библиотеки стали выкладывать в общий доступ - появились CSS-фреймворки Bootstrap, Foundation и так далее. Стало слышно о предпроцессорах CSS - less, sass. В 2014 году Гугол выпустил свой подход к дизайну Material Design. На базе него есть масса CSS-фреймворков. Сейчас переходим на флексы, приятная вещь.
1.2) Лет пять назад начался бум мобильного трафика со смартфонов. Поэтому появились медиа-запросы и адаптивная верстка. Я сам года полтора назад взял ксиаоми 5.5 дюймов - первое время в деревне балдел :) Важный элемент.
2) DOM. Операции по работе с DOM. Парсинг HTML дерева. Раньше писали большие библиотеки для разных браузеров (в основном на Javascript). Модно было менять картинки в меню по наводке мыши. Потом появился jQuery, он во многом снял вопросы о кросс-браузерности. Сейчас это все переросло в JS-фреймворки. Самые популярные, насколько понимаю - Angular, React. Их много.
3) Запросы на сервер. Когда то давно это называлось XmlHttpRequest в виде COM-объекта в IE. Потом модное слово Web 2.0. Далее - мода на Ajax. Потом появился jQuery - это правда очень хороший и качественный продукт. И опять же JS-фреймворки.
---
Эти операции за последние лет 15 обросли кучей терминов и технологий. Каждый считает, что он сможет написать лучше - и делает свою систему, технологию, подход, фреймворк и так далее. Не говорю, что это плохо - может и хорошо, но бардак аццкий.

И в серверных технологиях много нового, хотя гиганты вроде Явы, Майкрософта, Оракла - удержались. Вокруг конечно создали много всего, но ИМХО - как был PHP и ASP в Интернете, так и остались. Хотя, такие штуки как REDIS весьма полезны :)

ЗЫ: я лично смотрю в сторону Angular 2 или React (скорее всего буду пробовать обоих) и Bootstrap 4 с флексами. Если бутстрап до апреля не забЭтится - выкину и напишу свои небольшие библиотеки, мне много не надо :) Хотя мне пока что и на ASP.NET Forms и ASP.NET MVC неплохо живется, ну jQuery конечно, Yandex MAP API, бустрапа в меру. Но у всех свои мнения :)

Comments

[ByRon]

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

[Сергей]

Зачем вам вообще бутстрап? Он создавался для быстрого прототипирования интерфейсов. Если вам нужна сетка на флексбоксах то вот она flexboxgrid.com Зачем тянуть все это ненужное барахло вместе с сеткой? Чтобы потом перебивать стили и получать на выходе раздутый css без всякой методологии и кучу лишних библиотек? От jQuery тоже все современные разработчики уже отказались, это древняя библиотека, которая свое уже отжила.

Answer 2

[xmoonlight]

1. Логика работы SPA - грузится сразу на клиент при первом обращении.
2. По событиям (читай "кликам") - подгружается только разметка блоков и/или JSON-данные по ajax (или данные непрерывно поступают через websocket).
3. Если функционал страницы специфический (сильно отличается от обычных): то также загружаются дополнительные JS-модули через AJAX.

Обычно используется 3 основных составляющих:
1. Роутер - передача управления нужному модулю на основе URI-строки.
2. Application - код основного приложения
3. Шаблонизатор - для вставки полученных через AJAX значений в разметку.

Для подгрузки блоков через AJAX: https://github.com/xmoonlight/includeHTML
Для шаблонизации данных: https://sitecoder.blogspot.ru/2017/01/rex-tiny-tem...

Comments

[Snewer]

Спасибо за ответ! Предположим есть у нас соц. сеть. Есть раздел личных сообщений и групп. Это одна SPA или два SPA приложения выходит?

[xmoonlight]

Степан Романов: Если у сайта более одного SPA - это уже никакое не SPA! Всё разделяется на модули. Как Вы их будете загружать (сразу или по-требованию функционала) - зависит от разницы функционала и объёма данных. Здесь, думаю стоит всё загружать сразу.

[Snewer]

xmoonlight: ну вот ковырял я фронэнд госуслуг. Вроде там angular. Но если открыть какую-либо страничку и посмотреть исходный код - часть данных там присутствует. Почему так?

[xmoonlight]

Степан Романов: потому, что это статические данные.

Answer 3

[Philipp]

В одностраничном приложении (SPA) присутствует единая точка входа. Это загрузка основного скрипта, который будет отвечать за логику работы приложения. Это как index.php в корне веб-сайта. Ну а дальше он уже сам решает, что делать. В основной скрипт обычно включены составляющие отвечающие за маршрутизацию и загрузку других частей приложения. Вы можете представить себе SPA как набор кирпичиков с раствором в виде основного скрипта.
Так вот эти кирпичики могут быть загружены сразу, а могут лишь в тот момент, когда они потребуется, примерно как Autoloader в Composer.

Относительно загрузки есть несколько разных подходов.
1. Когда грузится только загрузчик и затем остальные скрипты и шаблоны подгружаются по необходимости.
2. Когда все (скрипты+шаблоны) собирается в огромный JS-файл. Это файл потом работает.
3. Когда JS идет большим файлом, а шаблоны отдельно (так работает AngularJS 1).

Есть множество различных сборщиков, например WebPack, Gulp, Brunch, Grunt. Их вариаций много, не пугайтесь.

После начальной загрузки приложение решает, что должно быть запущено первым. Обычно это какие-то системные вещи, вроде загрузки шаблонизатора, всяких кэшей и роутера.
Далее роутер рабирает маршрут и запускает нужный модуль (контроллер/компонент); в зависимости от фреймворка это выглядит по-разному, но суть одна и таже.
Каждый компонент отвечает за модификацию отдельных узлов дерева состояний, которое так или иначе спроецировано на DOM. Если смотреть на бэкенд, это как подставлять в шаблон данные, только на бэкэнде это происходит в один проход, а здесь перестройка происходит сразу после изменения оригинальных данных.
В каждом феймворке это сделано по-своему. Смысл одинаков - проекция данных на DOM.
Данные вытаскиваются приложением самостоятельно, могут быть загружены через Ajax. У меня есть приложение, где транспорт идет через веб-сокеты. Можно даже через iframe заморочиться, это не имеет значения.
Иногда сервер отдает страничку с изначально подготовленными данными. Это делается в разных целях, в основном для уменьшения скорости старта приложения.

Из личного опыта скажу, что вам следует начинать с Angular 2, т.к. он сделан намного проще остальных в плане использования.

Comments

[Сергей]

По поводу сборщиков, не совсем согласен, по мне так WebPack и Gulp разные по смыслу инструменты, которые применяются обычно в проектах совместно.

Answer 4

[pwnz2]

Напишу краткий ответ.

Начни изучать VueJS. Просто потому что он прост в изучении и начинании и не только, также он приобрел все хорошие стороны таких фреймов как Angular, React, Ember. Его можно использовать просто подключив к странице как и jQuery. Далее иди в сторону бандлеров, изучи webpack и начни использовать готовый шаблон vue-webpack который очень просто можно скачать с vue-cli.