Что выбрать для SPA?

Question

[devall]

Вопрос холиварный, но все же.
Посоветуйте, что выбрать для нового проекта, онлайн сервиса с требованиями, некоторые пункты выделю, чтобы было понятно, что в итоге нужно от фреймворка:
1) Богатый интерфейс с множеством форм
2) Авторизация и разделение пользователей по ролям
3) Различные уведомления о новых событиях (пришла почта, менеджер спустил задачу, приближается срок выполнения и т.п.)
4) Мобильный клиент либо работа самого приложения в мобильном браузере
5) Относительно быстрый старт для написания прототипа
Пока что остановился на двух фреймворках (подходах)
1) Ember.js - подкупает полным покрытием по всему, что нужно в приложении, но отпугивает сложность и отсутствие различных туториалов и уроков. Радует наличие CLI с автосборкой и т.п. (хотя это сейчас прикручивается довольно легко для любого фреймворка). Плюс ко всему с ходу неясно, как решить некоторые моменты (например обновление интерфейса по приходу данных с сервера и т.п., обновление разных частей приложения при изменении данных в одном контроллере, по событиям и т.п.) Материалы для изучения с официального сайта уж очень поверхностны на первый взгляд, а где смотреть готовые примеры не нашел. Возможно ли с ним быстро "стартануть" и сделать некий прототип приложения?
2) React + flux. Радует то, что сам подход позволяет строить сложные интерфейсы, которые как минимум не будут тормозить. Но отпугивает то, что все придется решать самому: какая структура проекта, какой роутер использовать, как организовать хранилища и модели, как общаться при этом с сервером, как наиболее грамотно сделать авторизацию пользователей. Не нашел примеры рабочих приложений, да хотя бы готовых каркасов с минимумом необходимых вещей (роутинг, модели, авторизация), все собирают что-то свое из разных модулей, но в итоге нужно хорошо знать подводные камни этих решений. Даже банальный выбор между flux библиотеками становится далеко не банальным. В этом подходе получается полная гибкость, но как бы при этом по мере роста приложения все это не смешалось в кашу и не обросло костылями? Может кто-нибудь подсказать пример построения хорошего каркаса приложения? Может уже есть готовые фреймворки на базе этих библиотек? Либо кто-нибудь уже обкатал связку на своих проектах?

Но этот перечень не окончательный, готов рассмотреть и других кандидатов.
Ангулар не предлагать.

Answer 1

[liubko]

EDIT:
сделал boilerplate
---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----

React, Fluxxor, react-router, flowtype, webpack, babeljs, axios

структура:

--app/
----actions/
------index.js
------Article.js
----api/
------index.js
------Article.js
----stores/
------index.js
------Article.js
----pages/
------ArticlePage.js
------ArticlePage.less
----components/
------MyComponent.js
------MyComponent.less
----main.js
----router.js
----EventConstants.js

pages/ArticlePage.js:

var React = require("react/addons");
var Fluxxor = require("fluxxor");

require("./ArticlePage.less");

var ArticlePage = React.createClass({
  // Компоненты подписываются на изменения в store
  mixins: [
    Fluxxor.FluxMixin(React),
    Fluxxor.StoreWatchMixin("article")
  ],

  getStateFromFlux() {
    // достаем данные из store
    return {
      articles: this.getFlux().store("article").getArticles()
    };
  },

  componentWillMount() {
    // вызываем action
    this.getFlux().article.fetch();
  },

  render() {
    // render articles
  }
});

module.exports = ArticlePage;

action/Article.js:

var EC = require("../EventConstants");
var api = require("../api/");

module.exports = {
  fetch() {
    // в api делаем сам запрос к серверу
    return api.article
      .fetch()
      .then(data => {
        this.dispatch(EC.SERVER.RECEIVE_ARTICLES, data.articles);
        return data.articles;
      });
  }
};

store/Article.js:

var Fluxxor = require("fluxxor");
var EC = require("../EventConstants");

var ArticleStore = Fluxxor.createStore({
  initialize() {
    this._articles = [];

    this.bindActions(
      // подписываемся на событие
      EC.SERVER.RECEIVE_ARTICLES, this.handleReceive
    );
  },

  /*==========  Getters  ==========*/
  getArticles() {
    return JSON.parse(JSON.stringify(this._articles));
  },

  /*==========  handlers  ==========*/
  handleReceive(user) {
    this._articles = user.addresses;
    // Все компоненты которые подписаны на store будут уведомлены
    // в них также визовется getStateFromFlux
    this.emit("change"); 
  },
});

module.exports = ArticleStore;

EventConstants.js:

module.exports = {
  UI: {
    // тут ивенты которые не обращаются к серверу
  },

  SERVER: {
    RECEIVE_ARTICLES: "SERVER:RECEIVE_ARTICLES",
  }
};

Answer 2

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

Напишу про Ember.js

1) Богатый интерфейс с множеством форм

Используйте ember-easy-form

2) Авторизация и разделение пользователей по ролям

За роли не подскажу, а для авторизации ember-simple-auth лучший выбор, имеет несколько стратегий авторизаций из коробки, и можно дописать свои.

3) Различные уведомления о новых событиях (пришла почта, менеджер спустил задачу, приближается срок выполнения и т.п.)

Ember.js для работы своего хранилища использует адаптеры и сериалайзеры. Из коробки - REST, ActiveModel, Fixture. Их можно указывать для всего приложения разом, и для конкретного типа модели в частности. Мы для работы уведомлений и чата расширили адаптер и сериалайзер для WebSockets, и у нас все приложение работало через REST, а при авторизации поднимается сокетное соединение именно для этих моделей.

5) Относительно быстрый старт для написания прототипа

Большинство вещей у вас получится быстро. Для некоторых придется разобраться, например



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

Материалы для изучения с официального сайта уж очень поверхностны на первый взгляд, а где смотреть готовые примеры не нашел.

Я работаю примерно по такой схеме:
1. Так как модели в DS по сути повторяют структуру БД (реляционной), начинаю я с созданя моделей. Если API не готов, использую FIXTURES.
2. Затем пишем роутер, для нужного раздела.
3. Если требуется - контроллер + темплейт делаются обычно одновременно так как взаимосвязаны.
4. В зависимости от задачи, дописываются компоненты, расширяются классы и пр., если задача еще не решена, переходим к пункту 1.

Возможно ли с ним быстро "стартануть" и сделать некий прототип приложения?

Попробуйте написать прототип, без вещей которым могут вызвать сложности, если понравиться все походит, добавите и авторизацию и сокеты и пр.

Answer 3

[veitmen]

Есть еще ExtJs. Мне нравится. Использовал. Есть куча сэмплов. Быстро можно сделать прототип.

Но в целом, некоторые вещи, которые вы хотите, не совсем касается фреймворков для реализации SPA. Например:
2) Авторизация и разделение пользователей по ролям - отдельно реализуется проверка на стороне сервера. Далее уже в зависимости от прав проверяется возможность выполнения какого либо метода API + скрыть\показать элементы интерфейса.
3) Различные уведомления о новых событиях (пришла почта, менеджер спустил задачу, приближается срок выполнения и т.п.) - это реализуется опять таки частично на сервере, частично на клиенте. Только клиентский фреймворк не поможет. Вообще используют либо LongPooling, либо, что лучше, WebSocket. Либо вообще фреймворк, который позволит абстрагироваться от собственно способа оповещения клиента.

А вообще ReactJs - круто. Очень быстро. Но это только фреймворк для реализации UI, не более. Flux - это подход, который просто описывает то, кто с кем и как взаимодействует. Да, удобно для ReactJS, но не панацея.

Comments

[devall]

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