Создание сайтов. Разработка. Технологии.
Какие технологии будут рассматриваться в этом подкасте?
Я выделяю четыре основных технологических стека или технологических подхода к созданию сайтов.
Каждый их этих подходов отличается от других принципиальным образом. Любые другие подходы, по моему мнению, могут рассматривать как разновидность одного из четырех.
Какие критерии и параметры?
Время жизни технологии — это время в течении, которого она являлась основным инструментом для создания сайтов, точнее для большей части создаваемых в этот период сайтов. По-другому, время жизни показывает насколько современным будет сайт, создаваемый по этой технологии.
Другим параметром, характеризующим технологический подход, является структура или план создания сайта. Его я назвал здесь необходимые ЭТАПЫ разработки. Этот показатель раскрывает как сложность разработки, так и ее специфику.
Какие специалисты необходимы для полноценной реализации технологии? Или какими профессиональными скилами должен обладать разработчик? Чем более современную технологию вы применяете, тем большим количеством профессиональных навыков должен обладать разработчики. Это в конечном счете и определяет за какие денежные средства и в какие сроки будет разработан ваш сайт.
Далее я кратко рассматриваю текущее состояние использования технологии и проблемы, связанные с е использование на современном уровне, т.е. в текущем 2021 году.
Материал подкаста не претендует на полноту и глубину рассмотрения вопроса. Но надеюсь позволит вам при выборе технологического подхода понимать, что вам предлагает разработчик.
Для иллюстрации я создал схему. Приведенные на ней данные лишь иллюстрируют повествование. Указанные на ней языки программирования PHP и JS на самом деле подразумевают множество языков, используемых в разработке.
1. Технология ВЕРСТКА. WEB сайт в интернете изначально представлял из себя текстовый файл специфического формата, который назывался HTML. Этот файл должен быть расположен на компьютере, точнее специальном WEB сервере. На компьютере пользователя устанавливается специальное ПО, называемое WEB браузером. При вводе в строку браузера зарегистрированного имени сайта, или его доменного имени, браузер умеет соединиться с нужным сервером и запросить у него нужную HTML страницу. Сервер обрабатывает запрос и отправляет в браузер пользователя ответ, в котором содержится текст этой страницы. Следующей возможностью браузера является отображение этой страницы на мониторе. В описанном процессе нет ни слова о технологии разработки сайта. Здесь очень примитивно описана технология хостинга – обеспечение доступа к уже готовому сайту. А собственно сайтом является вот именно та текстовая страница в HTML формате или гипертекст. Технология верстки - это процессом создания гипертекстов в формате языка разметки HTML. Для успешной работы по этой технологии необходимы знания языка HTML тегов и языка CSS для описания свойств этих тегов. Эти языки прекрасно понимает ваш браузер, на этих языках вы объясняете ему, что и как должно появиться на мониторе пользователя. Специалист владеющий этой технологией называется верстальщик. Он может создать набор гипертекстовых страниц, которые будут загружаться в браузер по ссылкам, по которым страницы могут загружать в браузер друг друга. Создавая визуальное представление вашего сайта. В HTML формате также можно создавать специальных форм, которые вместе с ссылками позволяют дополнить взаимодействие пользователя с сайтом. Для загрузки каждой страницы по ссылке отправляется новый запрос к серверу и ожидается ответ. Если связь с сервером будет прервана, то ответ не может быть получен, и браузер немедленно сообщит об этом. В таком нативном виде верстка являлась основным инструментом создания сайтов примерно до 2000 года. Эта технология (верстка страниц сайта в текстовом редакторе) потеряла свою актуальность в связи с быстрым развитием других технологических подходов.
2. ВЕРСТКА ПО МАКЕТУ. Для создания более совершенных гипертекстовых страниц, имеющих привлекательность и юзебилити (удобство работы) к верстальщикам был добавлен еще один профессиональный навык дизайнер. WEB дизайнер создает картинку страницы с точными параметрами цветов и размеров, с выбранными изображениями и декоративными элементами. Задача верстальщика теперь состояла в точном воспроизведении макета средствами верстки, т.е. HTML и CSS.
Динамическое создание страниц на сервере стало возможным с привлечением программистов, например, PHP программистов. На сервере располагалось дополнительное ПО способное понимать не только гипертексты, но тексты программ написанные на языке программирования. Гипертекст стал частным случаем более общего понятия текста скрипта. Скрипты можно было встраивать в гипертексты, или в скрипты вставлять кусочки гипертекста. Гипертекст имеет расширение файла .html, а скрипт другое, например «.php». Если в запросе браузера обращение идет к скрипту, то сервер сначала обрабатывает этот скрипт. Результатом всегда является гипертекст, который и отправляется с ответом сервера. Благодаря устройству протокола передачи данных от браузера к серверу, в скриптах могут быть переданы параметры и данные введённые пользователем. Эти данные могут быть обработаны сервером и в итоге влиять на результирующий гипертекст. Но поскольку вся обработка происходит на сервере для реализации такой динамики необходимо каждый раз делать http запрос к серверу, а значит перегружать страницу на экране.
Так как многократные перезагрузки страницы требуют постоянное выполнение определенных действий и на стороне браузера, и на стороне сервера, а также выполнение передачи данных, то нагрузка на систему могла стать чрезмерной. Слабым местом такой технологии может стать и браузер, и сервер, и канал связи. Для разрешения этой проблемы нужно было найти способ снижение нагрузки за счет снижения числа запросов к серверу в первую очередь. Для отображения гипертекста на экране в браузере создается объект, называемый DOM, который является программной копией гипертекста. Для работы с этим объектом в браузер был встроен специальный интерпретатор. Этот интерпретатор принимал на вход javascript (текст, написанный на специальном языке) и изменял свойства объекта DOM. Это открыло возможность работать с уже загруженными данными, обрабатывать действия пользователя без отправки запроса на сервер и без перезагрузки страницы.
С этого момента разработка стала подразделяться на backend и frontend, а навыкам необходимым для разработки по этой технологии добавились backend программист и frontend разработчик. Это наиболее затратный для заказчика подход, поэтому сегодня используется крупными компаниями, которые могут себе позволить использовать большие команды разработчиков. Большие задачи с точки зрения количества кода могут решать только такие команды. Чем меньше команда, тем более мелкие задачи они могут решать за одно и тоже время. Для решение больших задач таким командам потребуется больше времени.
Этот технологический подход был основным с 2000 по 2015 годы. В крупных компаниях он и сейчас основной. Этот очень дорогой подход не только в разработке, но и в дальнейшем сопровождении проекта. Спрос на более дешевые решения был огромен и поэтому где-то с 2010 года стал оформляться новые технологические подходы.
3. Конструктор – это сайт. За десять лет были разработаны огромные библиотеки кода, предназначенные для использование другими разработчиками копипастом. Это снизило вход на рынок услуг разработки, с одной стороны, позволило начать коммерческую работу программистам с более низким общим уровнем программирования, который компенсировался знаниями библиотек, функций, разработанных другими. Это стимулировало спрос на разработку таких библиотек. С другой стороны, более продвинутые программисты начали строить на базе этого функционала целые системы упрощенной разработки сайтов.
Конструктор — это первая попытка свести разработку сайта к манипуляции с готовыми объектами. Вместо хорошего знания языков программирования здесь главным навыком является знания об устройстве конструктора. Разумеется, знания языков добавляют возможности и при разработке с помощью конструктора. Использование конструктора сужает возможности разработки, но ускоряет процесс этой разработки. Чем выше требования сайту, тем менее подходит конструктор для его создания. Чем меньшим бюджетом вы располагаете, тем более вам подходит какой-либо конструктор.
Процесс создания сайтов стал более доступен не искушенной публике. Количество сайтов резко стало расти, так как запрос на использование интернета в бизнесе стал огромным.
Развитие этого направления связано с высоким спросом на недорогие услуги разработки. Поэтому этот подход по-прежнему востребован, но с 2020 года перестал быть лидером массовой разработки. За последние 5 лет сформировался новый технологический подход призванный повысить эффективность сайтов с сохранением высокой скорости разработки.
Конструктор в принципе позволяет изменять сайт прямо в интернет через административный вход на сайт.
Конструктором могут пользоваться как разработчики, причем довольно среднего уровня, так сами заказчики, если они продвинуты или имеют своих специалистов.
4. Фреймворки. Фреймворк эта среда разработки, в которой используются технологические фичи. Это позволяет создавать более универсальные и эффективные элементы, из которых уже можно конструировать сайт. Эти элементы являются компонентами реализующие отдельные функционалы взаимодействия с пользователем, браузером или сервером. Для сайтов, построенных с помощью фреймворков, характерна модульная структура и возможность подключения так называемого технологического сахара, специальных программных модулей, упрощающих подключение к ресурсам.
Фреймворки позволяют специалистам разного профессионального уровня создавать сайты также очень разные по своим возможностям. Поэтому нужно четко отличать разработчика на фреймворке от разработчика использующего возможности фреймворка.
Процесс разработки можно существенно ускорить за счет использования фреймворка. Но недостаточное понимание работы последнего чревато логическими и программными ошибками.
Недостатком этого подхода, по моему мнению, является сложность внесения изменений в уже созданный сайт, и невозможность — это делать без участия разработчика. Дело в том, разработка на фреймворках осуществляется на локальном сервере разработчика, и только затем сначала собирает сайт в окончательный программный код, который уже и размещается на хостинге. внесение изменений в код хостинге уже невозможно, потому что очень трудоемко работать с форматом, в котором там находятся программные продукты. С цель максимальной оптимизации работы сайта результаты разработки на фреймворке хранятся в так называемом, минимизированном формате. Если разработчик не передает вам исходники для локальной разработки, то внести изменения в код может только он. Таким образом, разработчик защищает свои права на разработку и сохраняет контроль за внесением изменений. Это удорожает создание и сопровождение сайта. Необходимо заключать контракт на длительный период и оговаривать условия, на которых права на исходники будут переданы заказчику.
Другим недостатком этого подхода я считаю невозможность замены контента, удаление контента и добавление контента без переделки сайта. Контент частично встроен в исходный код. Это совершенно нормально так как сам фреймворк создан не для заказчика, а для разработчика, причем разработчика высокого уровня. Весь контент легко встраивается в компоненты. Сайт создается на этапе сборки проекта из модулей и компонентов. Изменяя любые компоненты нужно пере собирать весь сайт снова. Готовый к публикации сайт размещается на хостинге. Существуют подходы с использование микро сервисной архитектуры, когда сайт разбит на независимые модули, выполняющие определенный функционал. Это позволяет использовать в одном проекте разные фреймворки, вести независимую разработку микросервисов. Разумеется, это требует еще более разносторонней подготовки специалистов разработчика.
Какие задачи остаются не решеными в существующих походах?
Сформулируем сначала те задачи, которые решены.
1. Вы можете заказать разработку сайта стороннему разработчику. И он создаст сайт по вашему техническому заданию за определенный бюджет.
2. Вы может заключить договор на сопровождение и поддержку сайта либо с разработчиком сайта, либо с другой организацией.
3. Вы может поручить разработку сайта штатным специалистам, которые создадут его либо с использованием конструкторов или фреймворков, либо без их использования.
4. Вы можете самостоятельно разработать свой сайт, если обладаете достаточными навыками.
Если вы не имеете достаточный бюджет, не имеете хостинга, у вас нет своей команды и вы не обладаете достаточными навыками, то вы не можете создать свой сайт иначе как прибегнув к бесплатным конструкторам.
Но главное, что даже если у вас есть все эти необходимые компоненты, вы не сможете создать свой сайт без технического задания. Какой бы вы не избрали путь создания сайта, он будет таким как он описан в вашем ТЗ.
И так сейчас вы не можете:
1. Сделать ТЗ с помощью только офисной программы типа Excel
2. Опубликовать в сети сайт практически мгновенно.
3. Постепенно создавать и развивать страницы вашего сайта прямо в интернет.
4. Добавлять на ваши страницы требуемый бизнес функционал простым изменением контента
5. Редактировать существующие страницы прямо на сайте
6. Гибко управлять окружением сайта.
7. Выставить на продажу, созданный сайт одним нажатием клавиши.
8. Иметь сразу после создания сайта расширенную систему регистрации пользователей и API.
9. Сразу подключить сайт к поисковым системам и организовать SEO-оптимизацию сайта.
10. Сразу после регистрации и публикации страниц сайта получить набор удобных плагинов для взаимодействия с пользователями, в том числе в соцсетях.
Все это вы сможете легко делать если воспользуетесь системой GJS. Все это она уже умеет и об этом я расскажу в следующих подкастах. Конечно если вам это интересно. Поэтому подписывайтесь на мой YouTube канал grandjetstudio. Ваш ждет интересный рассказ о том, как неудовлетворенность существующим положением вещей в сфере разработки сайтов приводит к рождению новых идей и стимулирует творчество. На разработку системы ушло 5 лет работы. Для превращения системы в самый легкий и не дорогой способ создания своего сайта мне необходима ваша поддержка в любой форме. Главное понимать, что это нужно вам. Свою поддержку вы можете выразить прежде всего словами в комментарии, лайками, подпиской на канал, установкой оповещения о новых подкастах. Быстрота выход новых подкастов зависит прежде всего от вашего желания их увидеть. Если окажите финансовую поддержку каналу в любой форме, то вы получите эксклюзивные материалы по устройству системы и как разработать свое техническое задание в виде простого документа. Такое вы не найдете ни на одном из существующих ресурсов.
Вы можете также заказать разработку своего сайта в студии разработки grandjetstudio. Под этим роликом вы найдете все необходимые для сотрудничества ссылки.