• Choosing a frontend Framework in 2017
  • By Taras Mankovski
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: LeviDing
  • Proofreader: Sunui, warcryDoggie


The front-end framework ecosystem has flourished over the past seven years. We’ve learned a lot about building and maintaining large applications. We see a lot of new ideas coming out. Some of these new ideas changed the way we build Web applications, while others were scrapped because they didn’t work.

In the process, we see a lot of hype and conflicting views, and choosing a framework becomes fraught with difficulties. It’s even more difficult when you’re choosing a framework for an organization that maintains an application for a long time.

In this article, I want to describe the evolution of our understanding of how to build modern Web applications and propose an approach to how to choose among the many technologies.

Before I start, I want to go back to the first library that makes building web applications feel more like programming. Backbone.js was released in October 2010 and reached version 1.0 in March 2013. It was the first widely used JavaScript library to adopt a separation between model and view.

Backbone.js models represent data and business logic. They trigger changes to the view layer. When the change event is triggered, the view that displays the model data is responsible for applying the change to the DOM. Backbone doesn’t know your preferred HTML template method, but needs to write the render function to update the View to the DOM.

When Backbone 1.0 was born, angular. js was released and popularized. Instead of focusing on models like Backbone, it focuses on making views better.

Angular.js takes the idea of compiling templates to make HTML dynamic. It allows you to inject behavior into HTML elements using instructions. You can bind the model to the view, and the view updates automatically when the template changes.

Angular.js is growing rapidly in popularity because it’s easy to add angular.js to any project and easy to get started. Many developers are attracted to Angular.js because it was developed by Google, which gives angular.js its inherent reliability.

Around the same time, the Web component specification promised to enable developers to create reusable components that are separate from their context and easily combined with other components.

The Web component specification is composed of four separate specifications.

  • HTML templates – Provide HTML tags for components
  • Custom Elements – provides a mechanism for creating custom HTML elements
  • Shadow DOM – Separates the interior of a component from the context in which it is rendered
  • HTML import – Makes it possible to load Web components into a page

A team at Google created a patch library that provided Web components for all browsers at the time. The library is called Polymer and opened source in November 2013.

Polymer is the first library that makes it possible to build interactive applications by combining components. Early adopters benefit from composability, but finding performance problems still requires a framework to solve.

At the same time, a small group of developers, inspired by the idea of Ruby on Rails, wanted to create a contract-based, community-driven open source framework for building large Web applications.

They started developing on SproutCore 2.0. SproutCore 2.0 is an MVC-based framework with a clear separation between model, controller, and view. The new framework is called ember.js.

The first challenge in creating a convention based framework is to find common patterns for large Web applications. The ember.js team looked at large Backbone apps to find similarities.

They found that some parts of the application were consistent, while others changed. This is where nested views are needed.

They also see urls as a key role in the architecture of Web applications. They combined the idea of nested views with the importance of urls to create a routing system that acts as an entry point into the application and controls the initial view rendering.

Elements of ember.js – An in-depth introduction to the original Ember JS

The Ember community, led by the ember.js core team, released ember.js 1.0 in August 2013. It has an MVC architecture, a powerful routing system, and components for compilable templates. Ember.js, like Angular.js and Polymer, relies on bidirectional binding to keep views and states in sync.

In the middle of 2014, a new library began to catch the attention of developers. Facebook created a framework for their platform and released it under the name ‘React’.

While other frameworks relied on object mutation and property binding, React introduced the idea of treating components such as pure functions and component arguments as function arguments.

Component is returned to the original function of DOM – facebook. Making. IO/react/docs /…

When the value of an argument changes, the component’s render function is called and returns a new component tree. React compares the returned component tree to the virtual DOM tree to determine how to update the real DOM. This technique of re-rendering everything and comparing the results to the virtual DOM has proven to be very effective.

React. Js Reconciliation

Angular.js developers face performance issues caused by the Angular.js change detection mechanism. The Ember community is learning how to tackle the challenges of maintaining large applications that rely on bidirectional binding and observer patterns.

React focuses on the problems that Polymer fails to solve. React shows how to improve the performance of component architectures. React beat Ember and Angular.js in benchmark testing. Some Backbone developers are experimenting with new technologies by adding React as a view to their applications to solve their performance problems.

In response to the React threat, the Ember core team developed a plan to incorporate ideas developed by React into the Ember framework. They recognized the need to improve backward compatibility and created a version upgrade pathway that allows existing applications to upgrade to Ember with the new React-Inspired rendering engine.

Over the course of the four minor releases, ember.js has deprecated Views, moved the community to a CLI-based build process, and made component-based architecture the foundation of Ember application development. This process of gradual and significant refactoring of the framework, called stability without stagnation, has become a fundamental tenet of the Ember community.

While Ember is learning from React, the React community is adopting routing popularized by Ember. Large React applications are written using the React Router, which evolved from the router.js branch used for Ember routing.

One of Ember’s greatest contributions to building modern Web applications is their leadership and popularity in using command-line tools as the default interface for building and deploying Web applications. This tool is called EmberCLI. It inspired create-react-app and AngularCLI for React. Every Web framework today provides a command-line tool to simplify the development of Web applications.

In the first half of 2015, the angular. js core team concluded that their framework was entering an evolutionary dead end. Google needs a tool that developers can use to build powerful applications, and angular. js is not that tool. They started working on a new framework that would be the spiritual successor to Angular.js. Unlike Angular.js, which has become popular without much support from Google, the new framework is fully supported by Google. Google has assigned more than 30 developers to work on the framework, called the spiritual successor to Angular.js.

The scope of the new framework is much larger than angular.js. The Angular team calls the new framework a platform because they plan to provide professional developers with everything they need to build Web applications. Angular, like Ember and React, uses a component-based architecture, but it was the first framework to make TypeScript its default programming language.

Angular components with TypeScript — github.com/johnpapa/an… TypeScript provides classes, modules, and interfaces. It supports optional static type checking and is a great language for Java and C# developers. Having the Visual Studio Code editor provides great intelligent support for TypeScript Code.

To presents the intelligent support Apps – the original: rafaelaudy. Making. IO/simple – angu…

Angular is highly structured and based on common standards, but there are still configuration mechanisms. It has a powerful router. The Angular team is working to provide a new framework for Google developers from a professional development environment perspective. This focus on completeness is very beneficial to the entire Angular community.

In May 2017, Polymer 2.0 improved the binding system to reduce the reliance on heavy polyfills and to align with the latest JavaScript standards. The new version introduces some breakthrough changes and provides detailed plans for users to upgrade to the new version. The new Polymer comes with a command-line tool to help build and deploy Polymer projects.

As of June 2017, all top frameworks use component architectures as development paradigms. Each framework provides routing as a means of breaking applications into logical chunks. All frameworks can use state management techniques like Redux. React, Ember, and Angular all allow server-side rendering SEO and fast initial startup.

So how do you know what tools to use to build a modern Web application? I suggest you look at the demographics of each organization to determine which framework fits best.

React is a library of pieces like a jigsaw puzzle. React provides a thin view layer and leaves it up to developers to choose the rest of the architecture. There’s nothing in the box, so your team has complete control over what you use. If you have a team of experienced JavaScript developers who are comfortable with functional programming and immutable data structures, React is a good choice. The React community is at the forefront of innovation when it comes to using Web technologies. If your organization needs to use the same code base to cross-platform, React allows you to write Native Web applications using React Native and VR devices using ReactVR.

Angular is a great platform for enterprise developers with a Java or C# background. TypeScript and Intellisense support will make these developers feel familiar. While Angular is new, it already has a number of third-party component libraries that companies can buy and start using immediately. The Angular team is committed to iterating through the framework quickly to make it better without breaking backward compatibility again. Angular can be used to build high-performance native applications using NativeScript.

Ember.js is a productivity framework that optimizes small teams and highly skilled indie developers. Its conventions on configuration provide an excellent starting point for new developers and organizations to maintain large projects over the long term. The promised “stability without stagnation” has proven to be an effective way to maintain large applications without needing to be rewritten when best practices change. Stability, maturity, and a commitment to creating shared code have fostered an ecosystem that makes most development surprisingly easy. If you are looking for a reliable framework for long-term projects, Ember is a good choice.

Polymer is a particularly suitable framework for large organizations that wish to create a single style guide and a collection of components to be used throughout the organization. The framework provides comparable development tools. Polymer is a good choice if you want to incorporate modern features into your application without having to write a lot of JavaScript.

We’re learning how to build applications for browsers, and bringing together good ideas. The creators of all frameworks care deeply about the people who use their libraries. The question is which community and ecosystem is the best choice for your organization and use cases.

I hope this article helps shed light on the evolution of the modern Web ecosystem and helps you build the next generation of modern Web applications.

Leave your thoughts in the comments section.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. Android, iOS, React, front end, back end, product, design, etc. Keep an eye on the Nuggets Translation project for more quality translations.