Какой js-фреймворк выбрать?

Question

[vgbege]

Есть небольшое приложение. Лапша из jQuery/Bootstrap, бэкенд — типа самопальный JSON-RPC-сервер на PHP, данные в MySQL. Формы на весь экран, постраничный вывод, фильтры по нескольким полям, в базе есть многие-ко-многим, древовидные справочники.
Пока оно еще небольшое, захотелось сделать по уму. Готов (даже предпочел бы) перейти с PHP на Node.js
С неделю покурил интернет, никак не определюсь. Angular точно не нравится — много магии, сложности с отладкой. Backbone — вроде как классика, но много делать самому, боюсь опять в лапшу скатиться. Backbone+Marionette? Видел, кстати, что у бэкбона проблемы с вложенными моделями, а у меня оно точно есть. React с виду нравится, но это ж не полный фреймворк. Курить Flux? Выглядит словно там все через события, тоже тот еще отладочный ад.

За что хвататься-то, all?

UPD: Выбрал Ember, курю доки. Переписывать с нуля не захотел, пытаюсь врезать в приложение по частям.

Comments

[Алексей Уколов]

У Бэкбона нет проблем со вложенными моделями, у Бэкбона есть плагины.
P.S. Право слово, ну никто за вас не решит что вам использовать, как не решили в предыдущем миллионе аналогичных вопросов.

[vgbege]

Алексей Уколов: Плагины оно конечно.. Смутило, что они не от backbone team, так можно оказаться перед выбором "оставаться на старой версии или самому лезть править плагин, потому как автор на него давно забил"

[Алексей Уколов]

vgbege: Согласен, но Бэкбон настолько прост (а плагины еще проще), что разобраться с такой ситуацией не проблема. Если вы потом еще и запулите свои правки в основую ветку плагина и мейнтейнер их примет, то вообще будет мир во всем мире.

[vgbege]

Анатолий K: Для небольших залепух мне хватает jQuery без всякой структуры. А тут залепуха явно нацелилась перерасти "небольших", но пока еще не такая большая, чтобы нельзя было начать сначала "как у взрослых"

[vgbege]

Анатолий K: Там ничего необычного, более-менее типичное приложение для учета кадров. Как раз хороший несложный пример для освоения чего-нибудь современного.

[Алексей Уколов]

vgbege: Ну так возьмите и освойте, а вы вместо этого на Тостере прокрастинируете :)

[vgbege]

Алексей Уколов: Да что Тостер, в Гугле уже неделю убил :)

Answer 1

[Станислав Романов]

Ember.js - для крупных веб-приложений хороший выбор. Еще вроде в тренде React.js

В пользу Ember.js:
ember-data - поддержка моделей (в том числе со связями, 1коМ, МкоМ, полиморфные), получение и синхронизация от API, jsonapi.org
ember-easy-form - для форм
ember-validations - для валидации

Comments

[vgbege]

Спасибо, буду смотреть.

[Станислав Романов]

vgbege: Если возьметесь и будут вопросы, пишите мне, подскажу

[vgbege]

Станислав Романов: Вообще выглядит как то, что мне нужно. А насколько безболезненно переходить с jquery/bootstrap на ember? Хотелось бы оставить внешний вид, modal, popover и т.д.

[Станислав Романов]

vgbege: Внешний вид оставите. Правда очевидно что придется их использовать в рамках фреймворка. Я использовал и ember и bootstrap совместно, нормально работает. Modal через {{outlet 'modal'}}, popover и другие плюшки bootstrap через веб-компоненты.

Я ваше приложение не видел, но возможно придется переделать структуру роутов, потому что в Ember роут стартовая позиция состояния приложения, и имеет определенную структуру.

По поводу болезненности перехода, зависит наверное от вас.
Я переходил с backbone. Да по началу трудновато, но сразу чувствуется другой уровень.
Как правильно создавать архитектуру приложения вас научит сам Ember.

Answer 2

[javascript]

Попробуйте www.ember-cli.com — это просто, удобно и быстро

Answer 3

[Константин Китманов]

Берите Backbone + (rivets.js|ractive.js). Если вы уверены, что это именно вложенные модели (со связями многие ко многим, многие к одному), то Backbone.Relational, а если просто вложенные атрибуты, то https://github.com/afeld/backbone-nested или https://github.com/powmedia/backbone-deep-model.

Comments

[vgbege]

Спасибо, посмотрю. А на сервере что посоветуете? Или там кроме экспресса альтернатив нет?

[Константин Китманов]

vgbege: ни с чем кроме express не имел дела, не могу со знанием дела советовать. Но не забудьте поглядеть на loopback.

[vgbege]

Константин Китманов: Спасибо.

Answer 4

[Роман Ахмадуллин]

Есть еще такой небольшой и прикольный фреймворк, как Riot. Мне он очень понравился, когда я с ним игрался. Позволяет в очень простой форме описывать JS-компоненты, при этом HTML и JS код лежат прямо рядом друг с другом (это то достоинство, которым хвалится React). Но при этом Riot в несколько раз проще остальных фреймворков, чем и хвалятся его авторы.

И ведь не всегда обязательно держать в памяти какие-то полноценные модели. Можно просто генерировать объект данных на PHP/другом серверном языке, а потом передавать его в виде JSON своему JS-компоненту при инициализации, который уже впоследствии сгенерирует, например, нужную форму и предоставит возможность отправить её данные на нужный URL.

Comments

[vgbege]

честно сказать, читал про него статейку, не понравилось совсем
https://medium.com/i-m-h-o/oversimplifying-things-...

[Роман Ахмадуллин]

vgbege: почитал статью) как раз недавно на Хабре читал такой статью, которая довольно хорошо подходит в качестве ответа на то, что вы мне скинули в качестве аргумента против Riot. Вот эта статья: habrahabr.ru/post/253297

От себя скажу следующее: видно, что автор указанной вами статьи привык полагаться во всём на большие и тяжелые фреймворки, представляющие из себя подобие швейцарских ножей с кучей финтифлюшек на все случаи жизни, и которые делают большую часть работы за него. Его не устраивает, что Riot решает только небольшое количество конкретных задач, а именно: генерация необходимой HTML структуры и реакция на возникающие в ней события.

И на мой личный взгляд, так и должно быть. Это делает тебя независимым от кучи магического кода, который для тебя просто непонятен, и если ты не сможешь до конца разобраться в том, как работает выбранный тобою швейцарский нож, или не сможешь найти решение исправления какого-то странного бага, на который ты напоришься, тебе ничего не останется делать кроме того, чтобы упрашивать авторов своего ножа исправить эту проблему и ждать её исправления.

Поэтому я и порекомендовал автору использовать именно маленький и простой Riot вместо траты кучи времени на обучение работы с чьими-то сложными швейцарскими ножами, которые всё равно никогда не будут способны обеспечить 100%-ю гарантию того, что их функционала окажется именно столько, сколько вам необходимо.

[vgbege]

Роман Ахмадуллин: статью видел, тоже не понравилась :)
Там про сферического программиста в вакууме, который в основном пишет в одиночку, не факт, что потом свой код поддерживает, ну и никому его не передает.
Насчет магического кода согласен, потому-то мне не понравился ангулар.
Насчет траты времени - ну, тут больше половины академического интереса, так что все нормально, реально для таких вещей мне и голого jquery хватает.

[Роман Ахмадуллин]

vgbege: может это и про сферического программиста в вакууме, однако, написано оно от человека, который уже 10 лет работает в веб-разработке, и также он работал в известных организациях нашего мира. И более того, я прекрасно его понимаю. Ведь реально куда полезнее знать известные паттерны проектирования, грамотные подходы к решению конкретных задач и уметь самому проектировать приложения, чем просто бездумно использовать всякие жирные фреймворки в качестве "решалок-всех-проблем-разработки".

И как верно замечено в той статье: такие фреймворки удобно использовать в простых проектах, которые пишутся быстро и впоследствии не будут развиваться во что-то более сложное и многогранное. Когда же у нас встаёт задача создать что-то более сложное, что планируется поддерживать много лет, то в конце-концов в жизненном сроке вашего проекта обязательно наступит такой момент, когда версия того жирного фреймворка, которую вы взяли за основу, устареет и перестанет поддерживаться, и вы останетесь с целой грудой непонятно кем написанного кода, который придётся и дальше развивать, поддерживать и преодолевать все его архитектурные ограничения, на которые вы изначально было положились.

А теперь представьте другой вариант той же ситуации: кто-то из опытных разработчиков самостоятельно продумывает и создаёт грамотное архитектурное решение для проекта, которое содержит в себе только то, что необходимо, и старается логично связать вместе все его компоненты. На самом деле это реально не настолько сложно, как кажется. Ведь это всего лишь браузер, и это всего лишь HTML-код. Там нет ничего сверхъестественного, и вполне можно написать свою собственную систему, которая будет работать именно так, как нужно, ни больше и ни меньше.

При этом, чтобы избежать таких ситуаций, когда весь код оказывается непонятен всем сторонним разработчикам, вполне достаточно давать всем компонентам системы и всем их методам ясные и простые имена, а также не забывать комментировать сложные и неочевидные места. Да, всё это можно получить только опытного и ответственного разработчика, любящего свою работу, но ведь именно такие люди и называются профессионалами своего дела, не так ли? И это тот образ, к которому следует всем нам стремиться, а не пытаться решать все свои проблемы банальным сваливанием всей ответственности некой группе разработчиков некого жирного фреймворка-решалки-всех-проблем-мира.

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

[vgbege]

Роман Ахмадуллин: В основном соглашусь. Но это тоже про сферического system architect в вакууме. Немногие фирмы имеют такие проекты с такими бюджетами. Фреймворк - системный архитектор/тимлид для бедных.

[Роман Ахмадуллин]

vgbege: да нет же, опять вы совершенно не правы и видимо так ничего и не уяснили из всего, что я написал.

Крутой и модный фреймворк - это не панацея от всех проблем фронтэнда. Кривые руки он не исправляет, лишь задаёт рамки и диктует свои правила.

Я уже много лет занимаюсь разработкой и все ещё ни разу не использовал огромные фреймворки для написания всего сайта. Зачастую мне хватает самого минимума из них и нескольких своих библиотек, которые я написал несколько лет назад. Даже бакбон я до сих пор использовал только для тех целей, для которых был создан Riot, а именно - для генерации html и реакции на возникающие события. Все остальные части сайта очень неплохо работают на своих собственных простеньких компонентах, состоящих из совсем небольшого количества кода. Причём там почти не ничего не правилось за все это время: они слишком простые и маленькие.

И да, конечно же я не живу в вакууме и не пишу проекты, которые потом никто больше не поддерживает.

[vgbege]

Роман Ахмадуллин: Ах, оставьте, я тоже за все хорошее против всего плохого, честно-честно! :)
Если не секрет, раз уж Вы сами начали про регалии, о каких приложениях идет речь? Сколько человек в команде? Что-нибудь выставлено в интернет, можно посмотреть?

[Роман Ахмадуллин]

vgbege: вы сами подвели меня к этому своими бесконечными рассказами про сферических программистов в вакууме.

Пожалуйста. Из того, что я писал и что работает и по сей день. Я писал только код, если что. Я не дизайнер.

itcmalik.com - писал его уже года три или четыре назад. Фронтенд весь написан вручную небольшими компонентами. Естественно, с использованием jQuery. Никаких фреймворков. Аякс-навигация и всё такое.

quran-online.ru - мой личный проект, который я начал писать где-то полтора года назад и который развиваю и по сей день. Компоненты используются почти те же самые, которые использовались в предыдущем примере, лишь с небольшими доработками. Плюс написано несколько дополнительных, специально для этого сайта. Снова никаких жирных фреймворков, почти все написано вручную. Советую поизучать данный сайт повнимательнее, там много интересных мелочей, вплоть до мгновенного переключения дизайна и горячих клавиш для навигации по сурам и аятам Священного Корана.

Ну и наконец, вот вам проект, в котором я был тимлидом в течении года, написал для него всю основу на фронтенде и бэкенде (бэкенд на Кохане), в подчинении у меня было три разных программиста: 36n6.ru

Советую заглянуть в разделы учреждений и врачей, там много интересных ui-элемкетов. И снова: тут использовались почти все те же самые мои собственные компоненты с небольшими доработками конкретно для этого проекта. Плюс, там некоторые сложные ui-элементы отображаются с помощью Backbone. Данный проект продолжает развиваться двумя другими программистами, которые ранее были у меня в подчинении. Я ушёл оттуда по своим личным проблемам со здоровьем и лишь изредка помогаю небольшими доработками.

Сейчас я разрабатываю ещё один проект, и снова с нуля, и снова я использую там почти те же самые компоненты. И мне реально до сих пор ни разу сильно не понадобились какие-то большие фронтенд-фреймворки для всего того, что мне надо было сделать. И я пока даже не думаю о том, чтобы использовать их в своих проектах.

Надеюсь, я смог удовлетворить ваше любопытство. Всего хорошего вам, и до свидания)

[vgbege]

Роман Ахмадуллин: эээ... а в чем тайный смысл по клику на суру в левом меню заново получать код меню с сайта и его перерисовывать?

[Роман Ахмадуллин]

vgbege: вам так жалко, что ваше устройство загрузит дополнительно килобайт данных при запросе?) Я не стал усложнять компонент аякс-навигации только ради этого, оно и так прекрасно работает и не оказывает особое влияние на удобство и производительность.

[vgbege]

Роман Ахмадуллин: Прямо не знаю, что ответить :)
Ладно, давайте останемся каждый при своем мнении.

Answer 5

[Igor Kalashnikov]

Не знаю, чем вам Ангуляр не угодил, по моему самый вменяемый фреймворк. Сейчас вышла вторая версия, там все еще круче и проще: angular2.com
Единственно что документации еще нет, и судя по тому что говорил чувак в видео пока не особо предвидится.

П.С. да вы только поглядите как клево для него оформили бестпрактисы : trochette.github.io/Angular-Design-Patterns-Best-Practices

Comments

[vgbege]

Ну, из того, что я про него понял - много магии, необходимость изучать "язык в языке", если в директивах что-то не так написал - фиг отладишь, в Angular2 забили на обратную совместимость. Еще 2000 элементов какие-то... Не понравился, в общем :)

[Igor Kalashnikov]

vgbege: я JSом плотно увлекся последние полгода, до этого плотно сидел на J2EE. Может поэтому он мне, наоборот показался достаточно логичным и простым.

Например, мне кажется такое описание REST-сервиса - очень круто:

this.instance = $resource('https://api.cloud.appcelerator.com/v1/posts/:methodName',
    {
      key: ACS_API_KEY,
      _session_id : function() { return Session.sessionId; }
    },
    {
      create  :   {method: 'POST',    params: { methodName: 'create.json'               }},
      count   :   {method: 'GET',     params: { methodName: 'count.json'                }},
      query   :   {method: 'GET',     params: { methodName: 'query.json', isArray:true  }},
      show    :   {method: 'GET',     params: { methodName: 'show.json',  isArray:true  }},
      update  :   {method: 'PUT',     params: { methodName: 'update.json'               }},
      delete  :   {method: 'DELETE',  params: { methodName: 'delete.json'               }}
    }
  );

Даже начал делать себе "стартер-кит", в связке с Phalcon (хотелось очень быстрый REST на PHP).
Правда я не выложил до конца связанную версию, но можете поглядеть: https://github.com/zo0m/angularjs-phalcon-rest-ze-...

[copal]

Странный какой-то ангуляр... Говорили что он будет на typescript, а на сайте который Вы показали, код вообще не понятно от чего. Если это typescript то где типы?

@Component ({
selector: 'name-change',
template: new TemplateConfig({
url: '/name-change.html'
})
})
class NameChangeApp {
name;
constructor() {
this.name = '';
}
changeName(newName) {
this.name = newName;
}
}

[copal]

vgbege: как это забили на обратную совместимость?

[copal]

Angular2 им уже можно пользоваться?)

[vgbege]

copal: я ж не знаю деталей, просто в интернете прочитал
например www.i-programmer.info/news/167-javascript/7932-ang...

[copal]

Ihor Kalashnikov: Вы уверены что он уже вышел? даже ts на котором он якобы написан ещё не вышел..

[Igor Kalashnikov]

copal: на сайте видео, посмотрите) вышел, но документацию еще не написали. я смотрел давно, но вроде чувак из Фаербейза не особо торопился с ней))) но пользоваться можно, правда я бы в критических аппликухах не решился, а вот себе или админку, вот собираюсь).
Вот пример:
https://github.com/davideast/ng2do

Код что я показал - для angular-а первого, это я себе для приложения админку делал на нем и код оттуда.

[0xigen]

недавно статья на хабре была, вроде как вот офф сайт новорго Angular-а habrahabr.ru/post/252337/#comment_8317519

[Igor Kalashnikov]

0xigen: о, спасибо. Действительно https://angular.io/ кстати, там нашел достаточно интересный блог victorsavkin.com одного из авторов, сейчас сижу читаю

Answer 6

[Konstantin]

Если у вас небольшое приложение, то никакого смысла во фреймворках нет, в них вообще смысла нет :)
Пишите нативно с использованием простых библиотек. Старт, конечно, будет подольше чем на фреймворке, зато поддержка будет максимально быстрой и эффективной, да ещё и не нужно будет, в случае необходимости, искать специалиста со знанием пресловутого фреймворка.

Comments

[Алексей Уколов]

Спасибо, повеселили.

Answer 7

[Евгений Неверов]

Берите meteor.com =)

Answer 8

[Агнислав]

Для небольших приложений Ангулар - самое оно. Позволяет именно писать приложение, пользуясь кучей готового функционала, не отвлекаясь на написание кода. Отладка - удобная. Бэкбон - он именно, что "костяк" - задаёт структуру, но много надо писать ручками. Насчёт эмбера не скажу, не юзал, но многие его считают прямым конкурентом ангулару.

Comments

[vgbege]

Ага, спасибо. Ангулар мне почему-то не понравился, от слова совсем. Как говорится, "чую, что бесовщина, но обосновать не могу" :)
Взялся за эмбер уже.