Какие есть способы динамического создания html-страницы?

Question

[Max Rudik]

Добрый вечер!
По мере освоения связки html-css-js постепенно понимаю, что html-страницы не пишут "от руки" как это показано в различных базовых курсах, а динамически формируют. С элементами этого подхода столкнулся, разбирая какие-то базовые примеры на jquery, - .html, .addClass, .createElement и т.д.
С помощью этих методов можно вывести на страницу значение какой-нибудь переменной, но слепить таким способом целую страницу, 10-20 страниц - слабо себе представляю. Плюс вопрос с хранением статического контента - если его некруто хранить на html-страницах, то где его хранить - в массивах и объектах в js-файле? Еще менее удобно.
То есть, предполагаю, что для этого есть какие-то весьма удобные технологии, не связанные при этом с сервером и базой данных. Хотелось бы понять, как к ним подступиться на базе того, что я уже освоил.
Какой следующий шаг был бы логичным и помог бы понять общую картину, как все работает?

Comments

[Vladislav]

Посмотри на какие-нибудь шаблонизаторы.
А по сути тебе все ровно придется писать верстку вручную. Тольок лишь будешь динамически менять ее взависимости от параметров на странице.

Answer 1

[AlexRAV]

но слепить таким способом целую страницу, 10-20 страниц - слабо себе представляю.

вам надо почитать для затравки, например, о CMS. Затем скорее всего о бэкенд части, потому как генерация страниц именно с его помощью и происходит. Никто в светлом уме не верстает 20 разных страничек для однотипных товаров.

Например, Есть у нас интернет магазин смартфонов. Есть модели самсунга, сони, айфона и тд и тп. Верстка у них одинаковая, меняются только данные. Для того чтобы получить страничку с конкретным товаром клиент, то есть юзер, кликает по ссылке с товаром, в этот момент происходит запрос к серверу, в запросе к серверу передается уникальный идентификатор нужной нам странички. На сервере этот запрос обрабатывается, на основании этого уникального идентификатора генерируется запрос к базе данных, который выберет только нужные нам данные (текст, ссылки и прочее) для конкретной страницы. Запрос возвращает бэкенду данные. А бэкенд вставляет их в нужные места на странице. Вуаля. У нас есть одна и та же верстка, но в соответствии с запросом она выдает нам разные данные. Надеюсь понятно объяснил.

Так что без бэкенда в этом деле каши особо не сваришь)

Comments

[AlexRAV]

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

[Max Rudik]

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

[AlexRAV]

Max Rudik вы, к сожалению, неправильно предполагали. Вообще все эти фреймворки крутятся вокруг методологии MVC и с нее надо начинать изучение подоьных фреймворков. А нужна эта методолгия грубо говоря для упрощения разработки, развбиение проекта на части: Модель(Model), Представление(View), Контроллер(Controller).

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

Реакт же это не полноценный MVC-фреймворк, это слой представления в MVC.

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