Как выбрать фреймворк для frontend-разработки +20
Веб-разработка, JavaScript, HTML
Рекомендация: подборка платных и бесплатных курсов Smm - https://katalog-kursov.ru/
Предлагаю вашему вниманию перевод статьи 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.: Целью перевода было не уличение автора во лжи, обмане и невежестве. Не разбавления своими мыслями и замечаниями. Целью перевода был перевод.
К сожалению, не доступен сервер mySQL