I am a technical person, a lot of time in the use of rigorous thinking to solve real problems. In order to be able to solve a problem smoothly, safely, reliably and stably, it is inevitable to come up with several schemes to compare and balance, in order to screen out the best scheme. The so-called optimal does not mean that the performance must be the best, the most secure, the most stable, and the lowest cost, but the scenario to solve the problem is the optimal. To achieve the optimal scene, it is necessary to weigh the advantages and disadvantages of various elements, comprehensive consideration, such as sacrificing part of safety to meet the performance requirements, sacrificing part of performance for stability, to consider slowing down the development efficiency in order to develop quality and so on. Today we are going to discuss from a variety of perspectives: why choose EmberJS to develop dashboards and CMS systems?

What is emberjs

Before we get started, let’s take a look at a set of Github data

https://github.com/emberjs/ember.js

https://github.com/angular/angular.js

https://github.com/vuejs/vue

https://github.com/facebook/react

https://github.com/riot/riot

Note: Statistical time is at the time of writing

Emberjs, like other frameworks of its kind, is proving popular, at least on Github, but the scenarios and problems each framework addresses are different.

Emberjs is a full-stack front-end framework based on jquery, which provides all the solutions from routing layer -> View layer -> data and network interaction layer. Only EmberJS is enough to solve all the complex problems encountered by front-end single-page applications, and also has good development efficiency and quality.

Full stack solution

Emberjs is a large and comprehensive framework that covers almost every aspect of single-page application development: Component, Model, Service, Route, Temlate, ember-data. Emberjs allows you to accomplish complex applications of almost any size without worrying that it doesn’t offer rich features or that you need to resort to other third-party libraries (which may or may not integrate well with the framework itself).

Based on the jquery

Emberjs is fully jquery-based, which means that any jquery-based third-party library can be integrated with the Ember App, and there are countless frameworks and plug-ins built on jquery over the years. Where there is no need to reinvent the wheel, rich third-party wheels can be replaced. For example, bootstrap, semantic-UI, a large and complete UI framework, and jquery-file-upload, a File Upload component compatible with various major browsers. To take advantage of this, a large number of jquery plug-ins can be quickly incorporated into an Ember app and reused easily with the Ember Component.

Good compatibility

Minimum compatible with IE 8.

Convention over Configuration

Application development, management and maintenance of the complex single page, is a very test organization structure, the reuse of components, network interaction, the state of the global management, complex form data, routing, and so on all need to carefully design and strict code specifications to ensure maximum under many collaborative development, code still has good maintenance costs and efficient high-quality output. Emberjs has defined the basic structure of the application at the framework level in accordance with the concept of configuration. Developers only need to follow the trend to ensure the maintainability and collaboration of the code.

Two-way binding of data

Unlike React, where data flows only in one direction, data in EmberJS is bidirectional by default, which means that data changes are completely handled by the framework. Although bidirectional data binding in complex applications tends to lead to data state changes that are difficult to track and maintain, for frequent and complex form processing, Bidirectional binding can greatly improve the efficiency of development. With certain constraints and specifications, bidirectional binding can occur within a controllable range without causing too much impact on maintenance.

Traditional string templates

For many backend programmers who are used to traditional templates, string templates are easy to understand, cost little to learn, and react well to HTML structures and views, which is quite different from the React JSX syntax. This is reason enough for back-end programmers like me to prefer EmberJS.

Complete build tools and build processes

The EmberJS community provides complete build tools and build processes to ensure efficient ember app development and distribution, enabling one-click development and deployment in a variety of environments.

Progressive downward compatibility

Front-end development is changing with each passing day, new technologies emerge in endlessly, in order to always benefit from the development of new technologies and new solutions, need to constantly upgrade and optimize. This also brings a considerable upgrade maintenance cost. A framework that doesn’t take legacy systems into account can be costly to upgrade, a cost that can’t be afforded by a small team with limited manpower and precious time. Emberjs does this very well, with a smooth transition from version to version rather than massive changes. Angular is very radical in this regard.

What kind of scenarios does EmberJS fit into

  • Full stack solution

  • Based on the jquery

  • Convention over Configuration

  • Two-way binding of data

  • Traditional string templates

  • Complete build tools and build processes

Based on these features, EmberJS is suitable for:

  • Need an all-in-one solution (lazy)

  • It doesn’t really care about size, it doesn’t really care about performance (performance is not the most important factor)

  • You need a large and complete CSS framework like Bootstrap, Semantic-UI, Foundation.

  • Complex form processing (frequent creation and modification, queries)

  • Use third-party libraries of high quality to solve existing problems (lack of time and effort to build wheels)

  • Non-professional front-end programmer development and maintenance (back-end programmer development and release)

  • Can’t spend too much time on organizational structure and code specification (frequent business changes, multiple cross development, lack of enough experience and time for architectural design, lack of front-end)

A variety of complex dashboards and content management applications with these features. These applications have low performance requirements, but require frequent changes in requirements, complex form processing, and frequent changes in page organization and interaction due to frequent changes in back-end logic and data structures. Ember’s idea of conventions over configurations fits the need for code to be consistent and maintainable with frequent changes.

The problem of emberjs

1. It’s huge

Emberjs is huge

framework version MinifiedSize (gzip)

Ember

2.5.0

117.26 KB

Angular

1.5.0

53.17 KB

React

15.0.2

43.62 KB

Vue

1.0.21

25.98 KB

Riot

Against 2.4.1

9.23 KB

Emberjs is too bulky for its size alone, but in many scenarios, size is not a consideration at all.

2. The performance

Since EmberJS provides almost all of the solutions needed for single-page application development, there is a gap between the performance of vuejs, ReactJS, Riot and other uI-focused frameworks. In addition, the nature of string templates and emberJS’s bidirectional binding mechanism, Poor performance is a problem with EmberJS, but it doesn’t mean there isn’t room for improvement. Discourse is a good example. See the Discourse team’s emberJS optimization at https://eviltrout.com/.

3. Poor flexibility

Large and complete frames are inherently flawed

4. A steep learning curve

Emberjs has many features and a relatively complex development environment, which requires a long time to get started and practice, especially for beginners who just touch the full-stack front-end framework. It takes a certain amount of time to master component interaction, odd-even data binding application scenarios, plug-in development and so on.

Emberjs development is surprisingly fast once mastered.

Choose the right one is the best

Our team uses ReactJS, EmberJS, Vuejs, Riot, and some Angular legacy projects in production.

Angular was an initial attempt to use the JS Framework, which was never implemented on a large scale in production and is now largely abandoned.

Riot is a great framework, small, powerful, and flexible, which is why, after a certain size of code, if the architecture doesn’t keep up with the code and complexity, it becomes less and less maintainable. Riot has very few wheels.

The emergence of React has brought about the leapfrog development of the front end and a new way of thinking to build the UI layer of the front end, almost a new ecology. Because of this, all the wheels used by React need to be rebuilt to give full play to the advantages brought by React. Also, the syntax of JSX is completely inconsistent with the code as a view design philosophy and takes time to get used to.

Vue is also an excellent framework with strong interface expressiveness and low learning cost, making it easy to get started. Also, VUE retains the template concept of HTML structure, namely view, which is very easy to use. Combined with VUE-Router and VUex, it can also build very complex applications. Vue’s ecology also lacks enough wheels.

React and Vue are better choices for large-scale, high-performance, flexible scenarios where wheels have to be built and multiple people collaborate. However, emberJS may be a better choice for business scenarios with numerous forms processing, complex requirements, and frequent changes such as Dashboards and CMS.

Spread the word

The first EmberJS forum in the country: http://emberjs-china.org/

Based on the semant – UI ember addon: https://github.com/wecatch/ember-semantic-ui

Much ember – data simple ORM: https://github.com/wecatch/ember-easy-orm