Как бэкендеру понять фронтенд?

Мой блог читают в основном PHP-программисты. Но почти все новые проекты сейчас делают с отдельным JS-фронтендом, а программисты классических сайтов становятся мало кому нужны. Если им не уходить намеренно только в бэкенд, то есть риск стать устаревшим разработчиком, умеющим делать только примитивные вещи на jQuery. Для более удобной работы там придуманы свои фреймворки.

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

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

Как это понять наиболее оптимально? Об этом мы поговорим в новом видео:

Комментарии

 

Роман Моисеенко

Спасибо за видео. Сподвигли изучить js-фрейморк, как закончу крупный проект, обязательно на касты перейду (т.к. у вас лучшая подача, чем что либо я видел), но сначала хотелось бы прочитать хорошую статью, какие плюсы дают JS-фреймворки, и какие минусы, падает ли или растет скорость обработки данных, рендеринга и т.п. В сети пока нормальной статьи не нашел.

Ну и второй вопрос, если есть работающий проект на Yii2, насколько сложно будет переделать рендеринг+JQuery на полноценный JS-фреймфорк?

Ответить

 

Дмитрий Елисеев

Актуальность зависит от процентного соотношения статичности и динамичности:

Если нужна просто HTML-страница без динамики, то можно её просто отрендерить в PHP.

Если нужна страница + немного интерактива вроде кнопки лайка или отправки комментария из формы без перезагрузки страницы, то можно отрендерить страницу и добавить немного jQuery или нативного JS для Ajax-запроса.

Если интерактива нужно много, то получится огромная куча jQuery-кода. И если захочется подключить шаблонизатор jQuery-templating для генерации элементов страницы налету из JS, то получится дублирование шаблонов в PHP и JS.

Так что если весь проект статический, то можно разрабатывать его как и раньше.

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

Ответить

 

Дмитрий Елисеев

Если это недоступный снаружи проект кабинета, админки и т.п. которому не нужна индексация поисковиками, то можно перевести непосредственно на React, Vue или Angular.

Но если это индексируемый классический публичный сайт, то переходить нужно на их гибридные модификации вроде NextJS или NuxtJS с Server Side Rendering (SSR), в которых в первый раз страница генерируется на сервере и потом к ней подключается JS.

Если есть работающий классический проект с кучей Ajax/Pjax-кода, то рядом с папкой проекта можно создать новую папку frontend и там сделать проект на NextJS.

Потом страницу за страницей переносить на фронтенд и в Yii постепенно добавлять API-контроллеры на основе yii\rest\Controller для возврата данных, нужных этим страницам. И настроить Nginx так, чтобы старые страницы он так и проксировал на php-fpm c Yii, а новые уже открывал с фронтенда.

Ответить

 

Роман Моисеенко

Спасибо за информацию. У меня как раз индексируемый публичный сайт, значит гибридная версия.

Кстати, во всех статьях описывающих/восхваляющих JS-фреймоворки ничего не сказано, что сайт становится плохо индексируемый :(

Ответить

 

Дмитрий Елисеев

Для этого в документации всех фреймворков и имеется отдельный пункт, что если нужна индексация, то сделайте SSR сами или перейдите на готовую гибридную версию.

В большинстве случаев интерактивными делают только кабинеты и внутренние CRM и ERP. Им индексация не нужна. А сайт порой верстают простым статическим лендингом.

Ответить

Оставить комментарий

Войти | Завести аккаунт | Войти через


(никто не увидит)





Можно использовать теги <p> <ul> <li> <b> <i> <a> <pre>