Что такое frontend окружение?

Question

[Владислав Михайлов]

Подскажите пожалуйста, что такое frontend окружение?

Answer 1

[Сергей Попов]

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

Вот все вот эти инструменты и составляют, в основном, окружение фронтенда. Они помогают упростить рутинную работу, автоматизировать все процессы, которые происходят во все моменты работы над приложением, его публикацией, версионированием и так далее. Возможно, настройка этого окружения требует времени и определенных знаний, но то время, которое экономится - бесценно.
На начальных этапах, уже есть готовые шаблоны. К примеру, когда работаешь над Vue.js проектом, ты вполне можешь использовать vue-cli шаблон webpack-simple, который включает все те пункты, которые я перечислил. Как-то так.

Comments

[Dima Polos]

Вот выше все описано, перечислю на конкретике:
-npm
-grunt
-babel
-webpack
-gulp
-less
-sass
-scss
-git
-pug
-twig
-react
-angular
-vue
-express
-bwsync
-phpstorm
-netbeans
-webstorm
Порядок случайный)

[Сергей Попов]

Dima Polos, Блин! Про препроцессоры забыл, про ide и шаблонизаторы! Чеееерт!

[Dima Polos]

Сергей Попов, зоопарк итак хороший получился) Зато про всё остальное упомянули.

Answer 2

[Максим Федоров]

Окружение — необходимые программы, операционная система для основной работы, дополнительные помощники (дополнители, сборщики, интерпретаторы и прочее) для работы фронтенда :)

Сейчас в любой не понятной ситуации разворачиваю виртуалку с php, node, mysql, nginx, git, mongo, posgres на борту и вам советую

Сейчас фронту нужно обязательно иметь Node.js и хорошую IDE (любую, на вашем месте взял бы Phpstorm или Pycharm. Так понял вы по Питону, но вот не знаю как в Pycharm с JS)

Окружение: базовое

• ОС с удобной консолью (MacOS, Linux), если вы на Windows — ставьте виртуалку с Linux, вам ооочень будет полезно работать только с ней, также для Windows нужен SSH-клиент, чтобы стучаться на свои проекты на виртуалке/удаленные
  
• IDE чтобы можно было удобно работать, хорошая IDE возьмет кучу работы в виде сборки, тестирвоания и ускорения работы
  
• Chrome Dev Tools (по кнопке F12 уже можно много чего. возможно нужны будут плагины для Vue/React)
  
• GIT — мастхев, для того, чтобы вести проекты, участвовать в чужих и контролировать свою/чужую работу, для Windows вроде есть какие-то клиенты
  

Окружение: софт

• Настроенный веб-сервер (Nginx/Apache)
  
• NodeJS (на ней работают все фронтенд решения)
  
• NPM (идет с Node) для установки пакетов
  
• SASS/LESS/PostCSS
  
• Сборщики и автоматизаторы — кажется сейчас можно работать с одним Webpack