Зачем нужны фронтенд фрэймворки и что выносить в них, а что в бэкенд?

Question

[vism]

Я по сути бэкэндщик, с верской средне, яваскрипт на фронте - jquery.
Но щас ушел во фриланс, а там везде ангуляры да реакты.
А я вобще не понимаю зачем они, что они дают.

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

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

Comments

[Stanislav]

Для более удобной работы с AJAX. Обычный сайт работает как? Мы посылаем один большой запрос, а сервер отдает нам одну большую страницу. Фронтенд-фреймворки разработаны так, чтобы было удобно слать ajax запросы и чтобы их было также удобно подставлять в html, тем самым заменяя только части страниц. Для несложного проекта вполне подойдет и JQuery, но если хотите создать что-то большое и интерактивное - то тут лучше прибегнуть к помощи фреймворка, ибо с JQuery вам придется писать очень много кода.

[vism]

Stasgar: Да я вроде делал достаточно крутые вещи без фрэйворковю и аяксы и обновления всякие.

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

А если это фронтенд фреймворк у меня произойдет куча запросов для каждого блока? Или не так оно делаетсяю не могу понять выгоду

[vism]

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

[Stanislav]

vism: заходите на сайт - в первый раз загружается вся страницы, дальше работу с запросами берет на себя фронтенд фреймворк. Также можно и роутинг на стороне клиента замутить. Вот здесь хороший ответ дали: В чем могут помочь js фреймворки(React, Angular)? Вот еще интересная статья: verakolotyuk.github.io/blog/2014/03/04/about-js-fr...

[Stanislav]

vism: "И если мне надо сделать модалки и слайдеры, или прочее.". Нет, вам ничего не мешает использовать js так-же, как и без фреймворка. Фреймворк НЕ решает задач сделать что-то "красивенько, и чтоб двигалось", он решает задачи удобства поулчения и вывода данных.

[vism]

Stasgar: Тоесть используя фрэймфорк я по сути должен делать синглпейдж?
А быть если скрипты нужны на одних страницах и не нужны на других? (ссылки пока не прочел)

[Stanislav]

vism: почитайте. Использовать фронтенд-фреймворк нужно тогда, когда нужно . Для большинства веб-сайтов это не нужно.

[vism]

Stasgar: на апворке блин всем нужно))))

[Stanislav]

vism: на апворке многим и wordpress нужен) Суть в том, что если вы хотите создать действительно большой проект, с большой логикой подгрузки данных аяксом, да и еще хотите, чтобы этот проект можно было поддерживать другим программистом/командой программистов, то очень важно сделать его грамотно, в этом фреймворк и помогает - решает проблемы элегантным и понятным другим программистам методом. В любом случае, изучить такую технологию - будет очень полезно любому бэкэнд-разработчику. За пару вечеров можно уже понять что к чему.

[Stanislav]

По сути, если используете тот-же ангуляр, то сервер будет выступать в роли REST API, т.е. просто выдавать данные по запросам. Вот кстати примерчик роутинга: https://www.w3schools.com/angular/angular_routing.asp

[vism]

Вобщем ссылки которые вы давали я вчера прочел, после чего пошел на тостер)
По сути если ранее, я писал ХТМЛ в шаблонах, тоесть вьюшки.
Щас по сути роль вьюшек выполнять будет допустим ангуляр?
Это по сути я делаю не хтмл к которому цепляю яваскрипт, а яваскрипт к которому цепляю хтмл?

[vism]

Или допустим еслиб тостер был на ангуляре допустим, мы бы видели коментарии без перезагрузки страницы?) хотя это сокеты ведь)

Answer 1

[planc]

у тебя 2 виртуальных хоста допустим на nginx
на одном backend который отдает данные в формате json
на втором статика frontend ( html + js ) которая дергает json у backend

когда пишешь фронтенд у тебя все удобно разнесено по модулям, есть шаблонизатор как на backend, роутер и тд

модалки и слайдеры тебе предоставляет css фреймворк (bootstrap, foundation, bulma и тд), только классы динамически с помощью js подставляй

что бы понять глянь этот курс по angular 1 (не особо актуально, но займет всего 3-4 часа):
https://www.codeschool.com/pages/angular-1-vs-2

потом с рутрекера на выбор:
Vue JS 2 - The Complete Guide (incl. Vuex)
или
Angular 2 - The Complete Guide

вот еще по vue бесплатное:
vuecasts.com

Comments

[vism]

вобщем удобно для разработки.
По сути морда получается как приложение для браузера?
Только при этом получаем ужасную проблему с сео?

[planc]

из веб морды для браузера, можно еще сделать мобильное приложение
https://ionicframework.com/
про сео в этом видео https://www.youtube.com/watch?v=JlP5rBynK3E

[vism]

planc: про сео вот смотрел, как я поеял нужен пререндер