- PVSM.RU - https://www.pvsm.ru -
Предлагаю вашему вниманию перевод статьи How To Pick a Frontend Web Framework [1] c сайта top.fse.guru.
Привет, приятель!
Ниже ты найдешь большой список компоновки инструментов и фреймворков. Не волнуйся! Ты можешь выбрать один, в котором точно уверен, или проигнорировать все и придумать свой вариант.
Данная статья предназначена для того, что бы помочь тебе узнать и упорядочить список инструментов которые используются в сфере frontend-разработки. А так же, это неплохой список, из которого ты можешь выбрать то, что тебе придется по душе.
Да, я использую это как напоминалку с разными вариантами настройки которые мне могут пригодится.
Кроме того, именно сюда я направляю людей, которые спрашивают меня: «Что мне использовать для разработки?». Потому что, как вы знаете, нет идеального варианта, но есть возможность упростить себе выбор.
А так же, я часто переписываю эту статью, потому что узнаю что-то новое и меняю свое мнение о старом. (И потому-что, пока вы читали эту статью, было собрано и выпущено 37 новых библиотек).
Если у вас крупный и, в перспективах, долгоиграющий проект, вам пригодится:
1. Модульная структура проекта. Лично я предпочитаю модульную архитектуру. И многие фреймворки мне ее предоставляют. Но в крайних случая можно пользоваться и BOT [2], Elm Architecture [3], re-frame [4] и CycleJS [5].
2. Загрузчик модулей/Bundler (RequireJS [6], Browserify [7], Webpack [8], ComponentJS [9], SystemJS [10]). Эти вещи помогут сохранить ваш код легкочитаемым и простым в поддержке.
3. Менеджер пакетов (npm [11], jspm [12], bower [13]). Лично я остальным предпочитаю npm, ибо, де-факто, это стандарт в мире JS- и node-разработчиков.
Так же, я полагаю, что bower со временем станет популярней — это замечательный инструмент для быстрой загрузки компонентов. Но, увы, он не так силен в управлении компонентами и зависимостями как npm. Ваше мнение может отличаться.
4. Автоматизация сборки и компиляции (grunt [14]/gulp [15]/broccoli [16]). Ибо жизнь и без того коротка, чтобы делать это снова, и снова, и снова.
5. CSS-препроцессоры (jss [17]/stylus [18]/sass [19]/css-modules [20]) и -постпроцессоры (csso [21]/autoprefixer [22]/postcss [23]). Эти инструменты сделают ваш CSS чуточку лучше и исключат некоторые проблемы с кросс-браузерностью.
Да, я знаю. 2016. Но в любом случае, это [24]до сих пор, как заноза в заднице.
6. Markup/UI-фреймворки (Bootstrap [25], Zurb Foundation [26], Elemental UI [27], Material Lite [28]). Эти вещи несут тонны знаний и 1000 лет страданий веб-разработчиков. Они помогут вам справиться с основной разметкой и стилями.
Однако, если вы считаете, что вы герой разметки и эксперт фронтенда, или вашей компании нужен свой собственный [29]стиль, вы можете разработать собственное решение [30].
В таком случае, я предлагаю выбрать вам методологию (BEM [31], OOCSS [32]), что сэкономит ваше время.
Лично я предпочитаю схему BEM и собственное рабочее окружение. Пару мыслей об этом вы можете найти в стайлгайде для Brainly.com [33], который я помогал собирать.
Если вы не знаете с чего начать разработку собственных методов, вам стоит посмотреть на HTML5 Boilerplate [34].
7. Тестеры (jasmine [35], karma [36], mocha [37], tape [38], intern [39]). Все требует проверки. Без исключений.
8. Инструменты, обеспечивающие качество кода (eslint [40], husky, editorconfig [41]). Вы же не хотите превратить свой код в свалку?
9. Сообщества, где вам помогут (chats [42], IRC, meetups, twitter).
Вы живете не в бункере (ведь так?). Люди могут знать. И в общем то, любят помогать другим.
А вот набор важных вопросов, на которые необходимо ответить, прежде чем приступать к разработке и решению поставленных проблем.
Вы готовы?
1. Нужно ли работать над проектом в команде? Кто они и чего хотят? Данный ответ поможет выбрать вам язык и рабочее окружение, полезные для вас и вашей компании.
2. На чем лучше сосредоточиться: качество, скорость, простота поддержки? Здесь вы поймете, на сколько сильно можно экспериментировать и не ошибиться в выборе инструментов.
3. Стоит ли передавать мой проект в «Третьи руки»? Понимая это, вы сможете ограничить набор инструментов и выбрать, для помощи и поддержки, наиболее подходящее сообщество.
4. Стоит ли браться за основной продукт, или ограничиться дочерними проектами? Если вы возьметесь за основной проект, это позволит использовать вам проверенные технологии и фреймворки, что сохранить ваше время и нервы.
5. Является ли проект интерактивным, или это набор статических документов? Может оказаться, что все что вам понадобится это HTML, CSS и немного магии. А также генератор сайтов или CMS.
6. Это один проект или группа родственных проектов? Вы сможете использовать набор компонентов и стайлгайд, если даже ваш проект — набор статических документов, что бы уменьшить рутинную работу и упорядочить ваш код. А так же, предусмотреть СЕО и рендер со стороны сервера.
Ответив на эти важные вопросы, настало время поговорить со своими товарищами и выбрать язык. Потому что, есть много вещей удостоенных внимания, помимо этого [43] безумного javascript!
1. Есть ли у вас команда JS-разработчиков? Рассмотри возможность использования ES6 [44] (с Babel [45]). Это сделает твою жизнь чуточку легче.
2. Вы предпочитаете типизированные языки? С типами вы на «Ты»? Посмотри на typescript [46].
3. Вы спокойно плаваете в функциональном программировании? Ты можешь начать с малого, с ES6 и библиотек типа lo-dash [47] или ramda [48]. Есть несколько хороших книг [49] и уроков [50], которые помогут тебе [51] освоиться на этом пути.
4. Вы пробовали себя в функциональном JS, и хотите еще больше хороших плюшек? Попробуй elm [52]. Это просто шикарно!
5. Вы full stack разработчики? Попробуй clojurescript [53]. Это не менее шикарно!
6. Вам нравится Scala? Пробуем scalaJs [54].
7. Вы знаете и любите Haskell? Попробуй purescript [55]. Без понятия, на сколько это круто.
8. Не хватает безумия? Вот список язык, компилирующихся в javascript [56]. Выбирай любой и наслаждайся.
1. Все что тебе нужно, это простое работающее приложение? Нет времени на «фундаментальные разработки»? Твой выбор — angular [57]. Начинай без промедлений [58].
2. Необходима простота и скорость? А так же есть время на поддержку в будущем? Выбирай angular [57]. Но, будь во всеоружии [58].
3. Вы бекэндеры, пытающиеся заниматься фронтендом, так как нет иного выхода? Да, да, angular [57]. Начни разрабатывать фронтенд! [58]
4. Необходимо быстро начать и быстро разработать. с возможными допущениями? Пробуем ampersand [59]/backbone [60]+ библиотеки, подходящие под ваши запросы.
5. Запросы те же, проекты больше? Добавляем marionette [61]/chaplin [62] к backbone и подумываем о переходе на ReactJs [63].
6. Есть время на эксперименты, с желанием, в будущем получить работающий вариант? Пробуем mithril [64]/knockout [65]/aurelia [66] с необходимыми библиотеками.
7. Ты в целом неплохо разбираешься в интерфейсах и знаешь базу функционального программирования? Пробуй ReactJs [63] + redux [67] + ImmutableJS [68] + библиотеки.
8. Больше навыков функционального программирования? Безумное приложение? Добавь реактивного программирования (bacon [69], rxJS [70]) или попробуй Cycle.js [5] (на свой страх и риск).
Примечание 0: Возможно, будет хорошей идеей взяться за реактивное программирование в любом случае, и походу обучать ему других.
Примечание 1: Пожалуйста, не путайте реактивное программирование с FRP [71]
9. Ваше приложение будет расти, команда развиваться, и у вас есть время на обучение? Потратьте его на emberjs [72]. Поверьте, это не плохое вложение.
10. Приложению необходим функционал его «страших братьев»? В нем будут таблицы, чаты и прочие вещи для аналитики? Корпоративное приложение? Пробуй ExtJS [73].
11. Вы студия? Тогда, у вас уже должен быть набор любимых инструментов. В любом случае, ориентируйтесь на то, что вы лучше знаете и чаще используете.
12. Фрилансер? Адаптируйся под условия. Попробуй Angular. Не мучайся. Пусть страдают другие, если хотят.
Примечание: Но вряд ли вы что-то сделаете, если клиент не захочет за это платить.
13. Пытаешься собрать конечный продукт? Адаптируйся под конкретные нужды и выбирай из приведенного выше списка.
14. Ты точно знаешь, что хочешь получить на выходе (например, мобильное приложение с десятью экранами)? Поэкспериментируйте пару недель с ionic [74], famous [75], Sencha Touch [76].
1. Изучите документацию для фреймворков и инструментов, которые вы выбрали.
2. Поспрашивайте более опытных людей для лучшего старта.
3. Настройте инструменты.
4. Хак. Я бы посоветовал вместо проектирования [77].
5.…
6. PROFIT!1
Посмотрите на TodoMVC Examples [78] и найдите пример с фреймворком, который вы выбрали.
Но помните, что это лишь примеры, которым вряд ли суждено разрастись до серьезных проектов
Хорошо, хорошо успокойтесь.
Если вы не можете решить, возьмите EmberJS, или, если чувствуете в себе силы ReactJs + Redux + ES6 + webpack + npm + jss + autoprefixer + eslint + Elemental UI + karma. И прочтите это [79]!
Это оно. Не спрашивайте почему, а просто возьмите и начинайте разрабатывать.
За ним будущее веб разработок. Вот неплохая статья [80], объясняющая это.
А так же им пользуется огромное количество людей. Вы несомненно должны попробовать его в каком-нибудь из своих проектов. Это будет весело, я гарантирую!
Счастливого плавания!
Если вас заинтересовало, и вы желаете более детально углубиться во фронтенд разработку, загляните сюда [81].
P.S.: Целью перевода было не уличение автора во лжи, обмане и невежестве. Не разбавления своими мыслями и замечаниями. Целью перевода был перевод.
Автор: Bellicus
Источник [82]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/112759
Ссылки в тексте:
[1] How To Pick a Frontend Web Framework: https://top.fse.guru/how-to-pick-a-frontend-web-framework-652186bbf6c5
[2] BOT: http://www.chris-granger.com/2013/01/24/the-ide-as-data/
[3] Elm Architecture: https://github.com/evancz/elm-architecture-tutorial/
[4] re-frame: https://github.com/Day8/re-frame
[5] CycleJS: http://cycle.js.org/
[6] RequireJS: http://requirejs.org/
[7] Browserify: http://browserify.org/
[8] Webpack: https://webpack.github.io/
[9] ComponentJS: http://componentjs.com/
[10] SystemJS: https://github.com/systemjs/systemjs
[11] npm: https://www.npmjs.com/
[12] jspm: http://jspm.io/
[13] bower: http://bower.io/
[14] grunt: http://gruntjs.com/
[15] gulp: http://gulpjs.com/
[16] broccoli: http://broccolijs.com/
[17] jss: https://github.com/kof/jss
[18] stylus: http://learnboost.github.io/stylus/
[19] sass: http://sass-lang.com/
[20] css-modules: https://github.com/css-modules/css-modules
[21] csso: http://css.github.io/csso/
[22] autoprefixer: https://github.com/postcss/autoprefixer
[23] postcss: https://github.com/postcss/postcss
[24] это : http://caniuse.com/#search=svg
[25] Bootstrap: http://getbootstrap.com/
[26] Zurb Foundation: http://foundation.zurb.com/
[27] Elemental UI: http://elemental-ui.com/
[28] Material Lite: http://www.getmdl.io/
[29] собственный : https://uxmag.com/articles/anchoring-your-design-language-in-a-live-style-guide
[30] решение: http://styleguides.io/
[31] BEM: https://en.bem.info/
[32] OOCSS: http://oocss.org/
[33] Brainly.com: https://github.com/brainly/style-guide#methodology
[34] HTML5 Boilerplate: https://html5boilerplate.com/
[35] jasmine: http://jasmine.github.io/
[36] karma: http://karma-runner.github.io/0.13/index.html
[37] mocha: https://mochajs.org/
[38] tape: https://github.com/substack/tape
[39] intern: https://theintern.github.io/
[40] eslint: http://eslint.org/
[41] editorconfig: http://editorconfig.org/
[42] chats: https://github.com/mr-mig/ru-it-chats
[43] этого: https://www.destroyallsoftware.com/talks/wat
[44] использования ES6: https://gist.github.com/getify/7ae82fdc2e86bf66bcba#file-gistfile1-md
[45] Babel: https://babeljs.io/
[46] typescript: http://www.typescriptlang.org/
[47] lo-dash: https://lodash.com/
[48] ramda: http://ramdajs.com/docs/
[49] книг: https://leanpub.com/javascript-allonge
[50] уроков: http://reactivex.io/learnrx/
[51] помогут тебе: https://github.com/MostlyAdequate/mostly-adequate-guide
[52] elm: http://elm-lang.org/
[53] clojurescript: https://github.com/clojure/clojurescript
[54] scalaJs: http://www.scala-js.org/
[55] purescript: http://www.purescript.org/
[56] список язык, компилирующихся в javascript: https://github.com/jashkenas/coffeescript/wiki/list-of-languages-that-compile-to-js
[57] angular: https://angularjs.org/
[58] Начинай без промедлений: http://www.fse.guru/2-years-with-angular
[59] ampersand: https://ampersandjs.com/
[60] backbone : http://backbonejs.org/
[61] marionette: http://marionettejs.com/
[62] chaplin: http://chaplinjs.org/
[63] ReactJs: https://facebook.github.io/react/
[64] mithril: http://mithril.js.org/
[65] knockout: http://knockoutjs.com/
[66] aurelia: http://aurelia.io/
[67] redux: https://github.com/rackt/redux
[68] ImmutableJS: https://facebook.github.io/immutable-js/
[69] bacon: https://baconjs.github.io/
[70] rxJS: http://reactivex.io/
[71] FRP: https://youtu.be/Agu6jipKfYw?list=PLZlJZzHmx31XvgT96DfbXQ4IMb1ryztbp
[72] emberjs: http://emberjs.com/
[73] ExtJS: https://www.sencha.com/products/extjs/
[74] ionic: http://ionicframework.com/
[75] famous: http://famous.org/
[76] Sencha Touch: https://www.sencha.com/products/touch/#overview
[77] проектирования: http://www.fse.guru/software-engineering-101-preface
[78] TodoMVC Examples: https://github.com/tastejs/todomvc
[79] это: http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html
[80] Вот неплохая статья: http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome
[81] сюда: http://www.frontendhandbook.com/
[82] Источник: https://habrahabr.ru/post/277547/
Нажмите здесь для печати.