Какие есть способы динамического создания html-страницы?
Добрый вечер!
По мере освоения связки html-css-js постепенно понимаю, что html-страницы не пишут «от руки» как это показано в различных базовых курсах, а динамически формируют. С элементами этого подхода столкнулся, разбирая какие-то базовые примеры на jquery, — .html, .addClass, .createElement и т.д.
С помощью этих методов можно вывести на страницу значение какой-нибудь переменной, но слепить таким способом целую страницу, 10-20 страниц — слабо себе представляю. Плюс вопрос с хранением статического контента — если его некруто хранить на html-страницах, то где его хранить — в массивах и объектах в js-файле? Еще менее удобно.
То есть, предполагаю, что для этого есть какие-то весьма удобные технологии, не связанные при этом с сервером и базой данных. Хотелось бы понять, как к ним подступиться на базе того, что я уже освоил.
Какой следующий шаг был бы логичным и помог бы понять общую картину, как все работает?
Оценить 1 комментарий
Посмотри на какие-нибудь шаблонизаторы.
А по сути тебе все ровно придется писать верстку вручную. Тольок лишь будешь динамически менять ее взависимости от параметров на странице.
вам надо почитать для затравки, например, о CMS. Затем скорее всего о бэкенд части, потому как генерация страниц именно с его помощью и происходит. Никто в светлом уме не верстает 20 разных страничек для однотипных товаров.
Например, Есть у нас интернет магазин смартфонов. Есть модели самсунга, сони, айфона и тд и тп. Верстка у них одинаковая, меняются только данные. Для того чтобы получить страничку с конкретным товаром клиент, то есть юзер, кликает по ссылке с товаром, в этот момент происходит запрос к серверу, в запросе к серверу передается уникальный идентификатор нужной нам странички. На сервере этот запрос обрабатывается, на основании этого уникального идентификатора генерируется запрос к базе данных, который выберет только нужные нам данные (текст, ссылки и прочее) для конкретной страницы. Запрос возвращает бэкенду данные. А бэкенд вставляет их в нужные места на странице. Вуаля. У нас есть одна и та же верстка, но в соответствии с запросом она выдает нам разные данные. Надеюсь понятно объяснил.
Так что без бэкенда в этом деле каши особо не сваришь)
Возможно я не так понял вопрос и в таком случае вам действительно нужен jade. Очень хорошая штука, которая избавляет нас от кучи скобок и лишней писанины. В тому же поддерживаются циклы и можно легко сгенерировать какой-либо тестовый контент, а при наличии бэкенда и реальные данные)
А для чего тогда используются все эти реакты и ангуляры? Я так предполагал, что именно с их помощью создаются динамические приложения, не нуждающиеся в серверной части.
Max Rudik вы, к сожалению, неправильно предполагали. Вообще все эти фреймворки крутятся вокруг методологии MVC и с нее надо начинать изучение подоьных фреймворков. А нужна эта методолгия грубо говоря для упрощения разработки, развбиение проекта на части: Модель(Model), Представление(View), Контроллер(Controller).
Для примера приведу как я загадил проект(не ошибается лишь тот, кто гичегомне делает) и чего не получилось бы, используй я фреймворк. На старте у меня был сайт, с небольшим каталогом мобильных приложений, связанных с музыкой, натянутый на корпоративную цмс, ничего особенного. Потом мне сказали что туда нужно поставить аудио плеер, затем сказали что музыкал в плеере не должна останавливаться при переходах между страницами, потом еще что-то и т.д. и т.п. И вроде бы все эти задачи по отдельности можно решить не используя фреймворк и жить спокойно. Но оглянувшись назад чепез полгода работы над проектом я понял насколько все плачевно. Код, хоть и разделенный по отдельным файлам превратился в кучу спагетти-кода, стостоящего из множества jquery селекторов, безумных условий и всего прочего. Разобраться во всем этом было почти нереально и при первом же редактирлвании кода становилось понятно, что к коду вообще лучше не прикасаться чтобы он не сломался. Сейчас я понимаю, что множество проблем в поддержке можно было бы решить путем разделения котроллера и представления. Ангуляр представляет вам возможность разделения контроллера и представления, связывая их через модель. Делая там образом контроллер независимым от представления, а представление от контроллера. К тому же он накладывает рамки, благодаря которым удается создавать независимые друг от друга компоненты, что впоследствии позволяет безболезненно выдрать один компонент из проекта или так же безболезненно вставить новый.
Реакт же это не полноценный MVC-фреймворк, это слой представления в MVC.
В любом случае, для более менее серьезных проектов, без бэкенд части вам не обойтись.
Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5.
Научитесь создавать интерактивные сайты, активно работающие с данными, воплощая в них мощные комбинации свободно распространяемых технологий и веб-стандартов.
Для этого достаточно обладать базовыми знаниями языка HTML. Это популярное и доступное пособие поможет вам уверенно освоить динамическое веб-программирование с применением самых современных языков и технологий: PHP, MySQL, JavaScript, CSS и HTML5.
С каждой из упомянутых технологий вы познакомитесь отдельно, научитесь применять их в комбинации друг с другом, а по ходу изложения освоите ценные практические приемы веб-программирования.
В конце книги весь изученный материал будет обобщен: вы создадите полнофункциональный сайт, работающий по принципу социальной сети. Изучите важнейшие аспекты языка PHP и основы объектно-ориентированного программирования.
Откройте для себя базу данных MySQL. Управляйте cookie-файлами и сеансами, обеспечивайте высокий уровень безопасности. Пользуйтесь фундаментальными возможностями языка JavaScript.
Применяйте вызовы AJAX, чтобы значительно повысить динамику вашего сайта. Изучите основы CSS для форматирования и оформления ваших страниц.Познакомьтесь с возможностями HTML5: геолокацией, работой с аудио и видео, холстом.
Фактически любой человек, стремящийся изучить основные принципы, заложенные в основу технологии Web 2.0, известной как AJAX, сможет получить весь-AJAX, сможет получить весьма обстоятельные сведения об основных технологиях: PHP, MySQL, JavaScript, CSS и HTML5, а также изучить основы библиотеки jQuery.
Эта книга предназначена для тех, кто хочет изучить способы создания эффективных и динамичных сайтов. Сюда можно отнести веб-мастеров или специалистов по графическому дизайну, которым уже приходилось создавать статические сайты и у которых есть желание вывести свое мастерство на следующий уровень.