What to choose for SPA?

Question

Ember.js

A tricky question, but still.
Advise what to choose for a new project, an online service with requirements, I will highlight some points so that it is clear what is ultimately needed from the framework:
1) A rich interface with many forms
2) Authorization and separation of users by roles
3) Various notifications about new events (mail arrived, the manager missed the task, the deadline is approaching, etc.)
4) Mobile client or the operation of the application itself in a mobile browser
5) Relatively quick start for writing a prototype
So far I have settled on two frameworks (approaches)
1) Ember.js - captivates with a complete coverage of everything that is needed in the application, but it scares away the complexity and lack of various tutorials and lessons. Pleased with the presence of CLI with auto-assembly, etc. (although this is now screwed on quite easily for any framework). Plus, it’s not clear right away how to solve some issues (for example, updating the interface when data arrives from the server, etc., updating different parts of the application when data changes in one controller, by events, etc.) Materials for studying from the official The site is already very superficial at first glance, but I did not find where to look at ready-made examples. Is it possible to quickly "start" with it and make a certain prototype of the application?
2) React + flux. The good news is that the approach itself allows you to build complex interfaces that at least will not slow down. But it’s scary that you’ll have to decide everything yourself: what project structure, which router to use, how to organize storages and models, how to communicate with the server, how to most competently authorize users. I didn’t find examples of working applications, or at least ready-made frameworks with a minimum of necessary things (routing, models, authorization), everyone assembles something of their own from different modules, but in the end you need to know the pitfalls of these solutions well. Even the banal choice between flux libraries becomes far from banal. This approach provides complete flexibility, but how would at the same time, as the application grows, all this does not mix into porridge and is not overgrown with crutches? Can anyone suggest an example of how to build a good application framework? Maybe there are already ready-made frameworks based on these libraries? Or has anyone already run a bunch on their projects?
But this list is not final, I am ready to consider other candidates.
Do not offer Angular.

Answer 1

EDIT:
made boilerplate
---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- -- -- ---- ---- ---- ---- ---- ---- ---- ----
React , Fluxxor , react-router , flowtype , webpack , babeljs , axios
structure :

--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

I will write about Ember.js
Use ember-easy-form
I won’t tell you for the roles, but for authorization ember-simple-auth is the best choice, it has several authorization strategies out of the box, and you can add your own.
Ember.js uses adapters and serializers to operate its storage. Out of the box - REST, ActiveModel, Fixture. They can be specified for the entire application at once, and for a particular type of model in particular. We extended the adapter and serializer for WebSockets for notifications and chat, and the whole application worked for us via REST, and during authorization, a socket connection is raised specifically for these models.
Most things will work out quickly. For some, you will have to figure it out, for example
, you will need to understand what to override and how, although some ready-made solution can help here.
I work approximately according to the following scheme:
1. Since the models in DS essentially repeat the structure of the database (relational), I start by creating models. If the API is not ready, I use FIXTURES .
2. Then we write a router for the desired section.
3. If required - the controller + template are usually made at the same time as they are interconnected.
4. Depending on the task, components are added, classes are extended, etc., if the task has not yet been solved, go to step 1.
Try to write a prototype, without things that can cause difficulties, if you like everything, add both authorization and sockets, etc.

Answer 3

There is also ExtJs. I like. Used. There are a lot of samples. You can quickly prototype.
But in general, some of the things you want aren't really about frameworks for implementing SPAs. For example:
2) Authorization and separation of users by roles - a separate check is implemented on the server side. Further, depending on the rights, the possibility of executing any API method + hide / show interface elements is checked.
3) Various notifications about new events (mail has arrived, the manager has released the task, the due date is approaching, etc.) - this is again implemented partially on the server, partially on the client. Only the client framework will not help. In general, they use either LongPooling or, better, WebSocket. Or, in general, a framework that will allow you to abstract from the actual method of notifying the client.
In general, ReactJs is cool. Very fast. But this is only a framework for implementing the UI, nothing more. Flux is an approach that simply describes who interacts with whom and how. Yes, it is convenient for ReactJS, but not a panacea.