Altabel Group's Blog

Posts Tagged ‘Flux

Let`s start from a bit of history. React.js is a JavaScript library for building UIs. It was created by Facebook development team to deal with large applications with data that changes over time: react.js hits the “refresh” button any time data changes, and knows to only update the changed parts. Firstly, react was used in-house at Facebook and then it was released as an open-source project and it has quickly gained popularity among developers.

Facebook is not the only one to use React:

Instagram is 100% built on React, both public site and internal tools ;

Yahoo`s mail client is made in React;

Netflix – the biggest paid video-streaming service;

Sberbank, bank #1 in Russia, is built with React;

Khan Academy uses React for most new JS development.

React in comparison to Angular.js isn`t a complete framework. However we can`t say that React.js is only “V” in the MVC. After a closer look, you can actually see that React.js is more than just “V”, it has quite some features of the C (controller) part as well. This is why React is so confusing to understand.

Let`s see why React.js stands out from the crowd:

Convenient architecture

Flux – is highly competitive to MVC. One-way data flow provides maintainability and efficient arrangement of data and DOM elements.

Virtual DOM

React developers suggested using “virtual DOM” in order to solve performance issue for websites with too dynamic DOM. All changes in a document are made there first, and then React looks for the shortest path to apply them in a real DOM tree. This approach makes the framework fast.

Components

React is fundamentally different than other front-end frameworks in that each asset is made up of many isolated components. Want a button changed across the whole platform? Change it once and voilà it`s changed everywhere.

By making the creation, distribution and consumption of isolated reusable components more straightforward, developers are better able to save time by using and creating common abstractions. This is true of both low level elements like buttons and high level elements such as accordions.

JSX

React.js uses a special syntax called JSX, which allows to mix HTML with Javascript. Markup and code are composed in the same file. This means code completion gives you a hand as you type references to your component’s functions and variables.

SEO  friendly

React is significantly more SEO friendly than most JavaScript MVC frameworks. As it is based on a virtual DOM you can use it on the server without needing a headless browser on the server such as Phantom.js to render pages to search engine bots.

React.js is a new interesting emerging Javascript library. It does have some drawbacks however it`s an excellent alternative for building large apps where data changes quickly. We are curious to hear about your experience in using React.jsJ Have you tried it?

 

Anna Kozik

Anna Kozik

Business Development Manager

E-mail: Anna.Kozik@altabel.com
Skype: kozik_anna
LI Profile: Anna Kozik

 

altabel

Altabel Group

Professional Software Development

E-mail: contact@altabel.com
www.altabel.com

jsframework

Whether you’re building apps for the browser, mobile or desktop, Aurelia can enable you to not only create amazing UI, but do it in a way that is maintainable, testable and extensible.

Retrospective and today

Aurelia is a project of Rob Eisenberg, the author of a very popular MV * – framework for Caliburn.Micro XAML-platforms, Durandal. Understanding all the disadvantages of Durandal, Eisenberg engaged in the development of so-called NextGen framework. In 2014 he began to work in Angular team on the second version of the framework. However, several months later, Rob decided to leave the Angular team since the direction of Angular 2, in his opinion, had changed a lot. He gathered a large team and returned to work on the framework of his dreams. And Aurelia is the result of that work.

JavaScript of tomorrow?

By using modern tooling Aurelia was written from the ground up in ECMAScript 2016. This means you have native modules, classes, decorators and more at disposal.
Aurelia is written in modern and future JavaScript, it takes a nowadays approach to architecture. It’s built as a series of collaborating libraries, which form a powerful and robust framework for building Single Page Apps (SPAs). However, Aurelia’s libraries can often be used individually, in traditional web sites or even on the server-side through technologies like NodeJS.
Aurelia’s code is open sourced under the MIT License, a very permissive license used by many popular web projects today. The starter kits are available under the Creative Commons 0 license. There is also a Contributor for those who wish to join the team in working on Aurelia. Ultimately, this means that you can use Aurelia without fear of legal repercussions and it can be build in the same confidence.

Benefits of Aurelia

Clean and Unobtrusive – Aurelia is the only framework that lets you build components with plain JavaScript. It stays out of your way so your code remains clean and easy to evolve over time.

Convention over Configuration – Simple conventions help developers follow solid patterns and reduce the amount of code they have to write and maintain. It also means less fiddling with framework APIs and more focus on their app.

Simple, But Not Simplistic – Because of the simple design developers are able to learn a very small set of patterns and APIs that unlock limitless possibilities.

Promotes the “-ilities” – Testability, maintainability, extensibility, learnability, etc.- Aurelia’s design helps developers to naturally write code that exhibits these desirable characteristics.

Amazingly Extensible – Aurelia is highly modular and designed to be customized easily, so developers will never hit a roadblock or have to “hack” the framework to succeed.

Web Standards Focused – Focused on next generation JavaScript and Web Components, and avoiding unnecessary abstractions that obscure the underlying web, Aurelia is the cleanest and most standards-compliant framework today.

Integrates Well with Others – Easily integrated with any 3rd party library or framework: for instance, with jQuery, React, Polymer, Bootstrap, MaterializeCSS and much more.

TypeScript Support – Each Aurelia library is released with its own d.ts files. There are also official TypeScript beginner kits and production quality starter kits.

An Official Product with Commercial Support – Being an official product of Durandal Inc., it has commercial and enterprise support available, so you can use Aurelia for building core technology for your business.

Thriving Community and Ecosystem – Having one of the largest developer gitter channels in the JavaScript world, oodles of contributors and a huge core team, Aurelia has been used to build just about every type of application and is used by large, well-known multi-national companies and enterprises.
 
Aurelia, Angular and React.js – what’s common and what’s different?
 

Aurelia vs. Angular

Similarities between Aurelia and Angular 2:

  • Aurelia offers ES6-support out of the box and supports all forms of alternative abstraction syntax such as TypeScript and CoffeeScript. Migration documentation about migrating from Angular 1 and 2 have been put on the roadmap.
  • The basis of both Angular 2 and Aurelia application comprise components associated with the corresponding template.
  • Differences in vision details and options range:

  • The syntax is much simpler and more explicit (i.e. self-explanatory) than Angular 2 and looks a lot like standard JS syntax. ES6 and JSPM are used by default and a gulp file with a custom-built system to transpile ES6 to ES5 using the Babel transpiler is included in the standard package.
  • Aurelia also uses conventions instead of its own syntax and boilerplate code. No special characters like the ones in Angular 2 (*, (), [] en #) here.
  • Aurelia is built in a modular way making it very pluggable. You can plug in internationalization, routing, virtualization, animation, … Besides that, third party plugins are available as well such as the aurelia-flux plugin adding the Flux dispatcher to Aurelia.
  • The presence of a root-component is necessary; it represents an application (app). The metadata may / should be attached to components by using decorators. Component initialization is performed by using dependency injection. In addition, each component has a declared lifecycle, which can be built by using the lifecycle hooks. The components may be formulated into a hierarchical structure.
  • Communication between the component and the template is performed by using data binding. The process of template rendering to the final HTML can be integrated by using pipes (Angular) or value converters + binding behaviours (Aurelia).
  • The main advantage of Aurelia in comparison to Angular is an advanced composition mechanism and template parts. Aurelia is designed with an emphasis on unobtrusive, the number of framework structures in the final code is minimal. Aurelia is more compact, while Angular sometimes simply forces to produce copy-paste.
  • Aurelia is new to the market while Angular has a big user base because it’s already been around for 6 years. On the other hand, Aurelia has great documentation available, it’s an official product of Durandal Inc, and the company has a long term vision for the product, something the Angular team doesn’t seem to have and is blamed for a lot.

Aurelia vs. React.js

  • While on the surface it might not seem fair to compare Aurelia to React.js, they’re both being used for the same things. Despite the fact that React.js is a fully-fledged and functionally released product without the early preview alpha tag and Aurelia is not, at current stage they are both pretty at the same level. You can achieve the same tasks within both, just in different ways.
  • As for React components and Aurelia’s ViewModel’s, they are both quite similar in that you’re essentially using a class to define properties and methods bound to a particular view. The primary difference between them is React doesn’t separate the logic from the view, meaning in React the View and ViewModel are both within the same file.
  • However, that’s not to say that Aurelia doesn’t allow you to achieve the same thing by rendering the View from within the ViewModel as well and forgoing a traditional View.
  • The original intent behind React.js was not to be a competitor to the likes of Angular or Aurelia, but rather be the library that everyone uses with their SPA framework like Angular to improve performance.
  • Therefore, this means you can easily use React.js within Aurelia. Aurelia and React.js can be used together and in doing so, it provides you with a level of power other frameworks cannot without subsequent complexity and strict convention like EmberJS.

Aurelia vs. Angular and React

  • Two-way binding is provided out of the box and the framework does so very precisely. By default, 1-way databinding is used except for form controls, a clear plus when compared to React. Do keep in mind that two-way data binding can only be done through explicit syntax, as is the case in Angular 2.
  • The learning curve for Aurelia is comparable to that of Angular 2 and thus a lot steeper than React’s. Luckily, the extensive documentation makes up for that a great deal.
  • Angular 2 and Aurelia Architecture is very similar. Aurelia looks a lot like Angular 2 in the sense that it’s a complete framework that relies on the web standards. It’s as pluggable as React is and as Angular 2 will be.
  • While Angular was created by Google and React by Facebook, they don’t provide commercial or enterprise support, something that Aurelia will do.

 
Conclusion

It goes without saying why these three frameworks are so popular. They all have a lot of strong advantages. Eventually, I’m favoring Aurelia: there’s solid documentation available and the overall philosophy is the same with Angular 2, but Aurelia is a better choice from the syntax and execution point of view. The architecture and syntax vision of Aurelia team seems to be more clear than the vision of the Angular team. The company and enterprise support of Aurelia is also a big pro.
What is your personal experience with these frameworks? Which one would you choose for your projects and why? What’s your prediction “who” will win the crown in the nearest future? Please feel free to share your thoughts with us.

Thank you in advance!

 

Darya Bertosh

Darya Bertosh

Business Development Manager

E-mail: darya.bertosh@altabel.com
Skype: darya.bertosh
LI Profile: Darya Bertosh

 

altabel

Altabel Group

Professional Software Development

E-mail: contact@altabel.com
www.altabel.com


%d bloggers like this: