[Из песочницы] Как выбрать фреймворк для frontend-разработки
Предлагаю вашему вниманию перевод статьи How To Pick a Frontend Web Framework c сайта top.fse.guru.
Привет, приятель!
Ниже ты найдешь большой список компоновки инструментов и фреймворков. Не волнуйся! Ты можешь выбрать один, в котором точно уверен, или проигнорировать все и придумать свой вариант.
Данная статья предназначена для того, что бы помочь тебе узнать и упорядочить список инструментов которые используются в сфере frontend-разработки. А так же, это неплохой список, из которого ты можешь выбрать то, что тебе придется по душе.
Да, я использую это как напоминалку с разными вариантами настройки которые мне могут пригодится.
Кроме того, именно сюда я направляю людей, которые спрашивают меня: «Что мне использовать для разработки?». Потому что, как вы знаете, нет идеального варианта, но есть возможность упростить себе выбор.
А так же, я часто переписываю эту статью, потому что узнаю что-то новое и меняю свое мнение о старом. (И потому-что, пока вы читали эту статью, было собрано и выпущено 37 новых библиотек).
С чего же начать?
Если у вас крупный и, в перспективах, долгоиграющий проект, вам пригодится:
1. Модульная структура проекта. Лично я предпочитаю модульную архитектуру. И многие фреймворки мне ее предоставляют. Но в крайних случая можно пользоваться и BOT, Elm Architecture, re-frame и CycleJS.
2. Загрузчик модулей/Bundler (RequireJS, Browserify, Webpack, ComponentJS, SystemJS). Эти вещи помогут сохранить ваш код легкочитаемым и простым в поддержке.
3. Менеджер пакетов (npm, jspm, bower). Лично я остальным предпочитаю npm, ибо, де-факто, это стандарт в мире JS- и node-разработчиков.
Так же, я полагаю, что bower со временем станет популярней — это замечательный инструмент для быстрой загрузки компонентов. Но, увы, он не так силен в управлении компонентами и зависимостями как npm. Ваше мнение может отличаться.
4. Автоматизация сборки и компиляции (grunt/gulp/broccoli). Ибо жизнь и без того коротка, чтобы делать это снова, и снова, и снова.
5. CSS-препроцессоры (jss/stylus/sass/css-modules) и -постпроцессоры (csso/autoprefixer/postcss). Эти инструменты сделают ваш CSS чуточку лучше и исключат некоторые проблемы с кросс-браузерностью.
Да, я знаю. 2016. Но в любом случае, это до сих пор, как заноза в заднице.
6. Markup/UI-фреймворки (Bootstrap, Zurb Foundation, Elemental UI, Material Lite). Эти вещи несут тонны знаний и 1000 лет страданий веб-разработчиков. Они помогут вам справиться с основной разметкой и стилями.
Однако, если вы считаете, что вы герой разметки и эксперт фронтенда, или вашей компании нужен свой собственный стиль, вы можете разработать собственное решение.
В таком случае, я предлагаю выбрать вам методологию (BEM, OOCSS), что сэкономит ваше время.
Лично я предпочитаю схему BEM и собственное рабочее окружение. Пару мыслей об этом вы можете найти в стайлгайде для Brainly.com, который я помогал собирать.
Если вы не знаете с чего начать разработку собственных методов, вам стоит посмотреть на HTML5 Boilerplate.
7. Тестеры (jasmine, karma, mocha, tape, intern). Все требует проверки. Без исключений.
8. Инструменты, обеспечивающие качество кода (eslint, husky, editorconfig). Вы же не хотите превратить свой код в свалку?
9. Сообщества, где вам помогут (chats, IRC, meetups, twitter).
Вы живете не в бункере (ведь так?). Люди могут знать. И в общем то, любят помогать другим.
Хорошо, что дальше?
А вот набор важных вопросов, на которые необходимо ответить, прежде чем приступать к разработке и решению поставленных проблем.
Вы готовы?
1. Нужно ли работать над проектом в команде? Кто они и чего хотят? Данный ответ поможет выбрать вам язык и рабочее окружение, полезные для вас и вашей компании.
2. На чем лучше сосредоточиться: качество, скорость, простота поддержки? Здесь вы поймете, на сколько сильно можно экспериментировать и не ошибиться в выборе инструментов.
3. Стоит ли передавать мой проект в «Третьи руки»? Понимая это, вы сможете ограничить набор инструментов и выбрать, для помощи и поддержки, наиболее подходящее сообщество.
4. Стоит ли браться за основной продукт, или ограничиться дочерними проектами? Если вы возьметесь за основной проект, это позволит использовать вам проверенные технологии и фреймворки, что сохранить ваше время и нервы.
5. Является ли проект интерактивным, или это набор статических документов? Может оказаться, что все что вам понадобится это HTML, CSS и немного магии. А также генератор сайтов или CMS.
6. Это один проект или группа родственных проектов? Вы сможете использовать набор компонентов и стайлгайд, если даже ваш проект — набор статических документов, что бы уменьшить рутинную работу и упорядочить ваш код. А так же, предусмотреть СЕО и рендер со стороны сервера.
Список языков и надстроек
Ответив на эти важные вопросы, настало время поговорить со своими товарищами и выбрать язык. Потому что, есть много вещей удостоенных внимания, помимо этого безумного javascript!
1. Есть ли у вас команда JS-разработчиков? Рассмотри возможность использования ES6 (с Babel). Это сделает твою жизнь чуточку легче.
2. Вы предпочитаете типизированные языки? С типами вы на «Ты»? Посмотри на typescript.
3. Вы спокойно плаваете в функциональном программировании? Ты можешь начать с малого, с ES6 и библиотек типа lo-dash или ramda. Есть несколько хороших книг и уроков, которые помогут тебе освоиться на этом пути.
4. Вы пробовали себя в функциональном JS, и хотите еще больше хороших плюшек? Попробуй elm. Это просто шикарно!
5. Вы full stack разработчики? Попробуй clojurescript. Это не менее шикарно!
6. Вам нравится Scala? Пробуем scalaJs.
7. Вы знаете и любите Haskell? Попробуй purescript. Без понятия, на сколько это круто.
8. Не хватает безумия? Вот список язык, компилирующихся в javascript. Выбирай любой и наслаждайся.
Список фреймворков
1. Все что тебе нужно, это простое работающее приложение? Нет времени на «фундаментальные разработки»? Твой выбор — angular. Начинай без промедлений.
2. Необходима простота и скорость? А так же есть время на поддержку в будущем? Выбирай angular. Но, будь во всеоружии.
3. Вы бекэндеры, пытающиеся заниматься фронтендом, так как нет иного выхода? Да, да, angular. Начни разрабатывать фронтенд!
4. Необходимо быстро начать и быстро разработать. с возможными допущениями? Пробуем ampersand/backbone + библиотеки, подходящие под ваши запросы.
5. Запросы те же, проекты больше? Добавляем marionette/chaplin к backbone и подумываем о переходе на ReactJs.
6. Есть время на эксперименты, с желанием, в будущем получить работающий вариант? Пробуем mithril/knockout/aurelia с необходимыми библиотеками.
7. Ты в целом неплохо разбираешься в интерфейсах и знаешь базу функционального программирования? Пробуй ReactJs + redux + ImmutableJS + библиотеки.
8. Больше навыков функционального программирования? Безумное приложение? Добавь реактивного программирования (bacon, rxJS) или попробуй Cycle.js (на свой страх и риск).
Примечание 0: Возможно, будет хорошей идеей взяться за реактивное программирование в любом случае, и походу обучать ему других.
Примечание 1: Пожалуйста, не путайте реактивное программирование с FRP
9. Ваше приложение будет расти, команда развиваться, и у вас есть время на обучение? Потратьте его на emberjs. Поверьте, это не плохое вложение.
10. Приложению необходим функционал его «страших братьев»? В нем будут таблицы, чаты и прочие вещи для аналитики? Корпоративное приложение? Пробуй ExtJS.
11. Вы студия? Тогда, у вас уже должен быть набор любимых инструментов. В любом случае, ориентируйтесь на то, что вы лучше знаете и чаще используете.
12. Фрилансер? Адаптируйся под условия. Попробуй Angular. Не мучайся. Пусть страдают другие, если хотят.
Примечание: Но вряд ли вы что-то сделаете, если клиент не захочет за это платить.
13. Пытаешься собрать конечный продукт? Адаптируйся под конкретные нужды и выбирай из приведенного выше списка.
14. Ты точно знаешь, что хочешь получить на выходе (например, мобильное приложение с десятью экранами)? Поэкспериментируйте пару недель с ionic, famous, Sencha Touch.
Как начать программировать?
1. Изучите документацию для фреймворков и инструментов, которые вы выбрали.
2. Поспрашивайте более опытных людей для лучшего старта.
3. Настройте инструменты.
4. Хак. Я бы посоветовал вместо проектирования.
5.…
6. PROFIT!1
Я понятия не имею как начать пользоваться фреймворками, которые вы посоветовали?
Посмотрите на TodoMVC Examples и найдите пример с фреймворком, который вы выбрали.
Но помните, что это лишь примеры, которым вряд ли суждено разрастись до серьезных проектов
Я не могу принять решение. Как мне быть?
Хорошо, хорошо успокойтесь.
Если вы не можете решить, возьмите EmberJS, или, если чувствуете в себе силы ReactJs + Redux + ES6 + webpack + npm + jss + autoprefixer + eslint + Elemental UI + karma. И прочтите это!
Это оно. Не спрашивайте почему, а просто возьмите и начинайте разрабатывать.
Слишком много упоминаний ReactJs. С чего бы?
За ним будущее веб разработок. Вот неплохая статья, объясняющая это.
А так же им пользуется огромное количество людей. Вы несомненно должны попробовать его в каком-нибудь из своих проектов. Это будет весело, я гарантирую!
Счастливого плавания!
Если вас заинтересовало, и вы желаете более детально углубиться во фронтенд разработку, загляните сюда.
P.S.: Целью перевода было не уличение автора во лжи, обмане и невежестве. Не разбавления своими мыслями и замечаниями. Целью перевода был перевод.
