Pull to refresh

Как выбрать фреймворк для frontend-разработки

Reading time 6 min
Views 116K
Предлагаю вашему вниманию перевод статьи 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. Это один проект или группа родственных проектов? Вы можете захотеть использовать компонентный подход и стайлгайд, если даже ваш проект — набор статических документов, что бы уменьшить рутинную работу и упорядочить ваш код. А так же подумайте над SEO и рендере на стороне сервера в этом случае.

Список языков и надстроек


Ответив на эти важные вопросы, настало время поговорить со своими товарищами и выбрать язык. Потому что, есть много вещей достойных вашего внимания, помимо этого безумного javascript!

1. Есть ли у вас команда JS-разработчиков? Рассмотри возможность использования ES6Babel). Это сделает твою жизнь чуточку легче.

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: Возможно, будет хорошей идеей взяться за reactive streams в любом случае, и походу обучать ему других.

Примечание 1: Пожалуйста, не путайте reactive streams с 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.: Целью перевода было не уличение автора во лжи, обмане и невежестве. Не разбавления своими мыслями и замечаниями. Целью перевода был перевод.
Tags:
Hubs:
+20
Comments 62
Comments Comments 62

Articles