I possess over 9 years of professional experience working with many clients and developers from all around the world. I have a variety of front-end programming skills and a vast knowledge of code styles. I enjoy sharing my skills and knowledge with others by contributing to the Open Source community and mentoring new developers.

Dariusz Pieńczykowski

I am an agile Team Leader, Project Manager, and testing advocate supporting other developers. Having optimization and scalability in mind, I have led software teams for over 11 years in the end-to-end project development lifecycle, e.g., architecture design, code, and documentation review. I specialize in creating eHealthcare solutions that meet HIPPA requirements. 

Szymon Kieloch

Tomasz is a Tech Expert with an enormous experience in both back-end and front-end solutions. He ensures that quality processes and automations are carried out through the whole software development cycle.

Tomasz Bąk

\[TOC\]

First things first, it is important to remember that Angular is a framework and React is a library, which influences the way we compare those two. Obviously, the learning curve with React will be smaller and blending it will other libraries will be easier. Moreover, it allows the twelve-factor methodology to be applied. Using Angular forces you to do everything the ‘Angular way’ but let’s not get ahead of ourselves.

## Why Migrate to React?

There are many reasons behind the decision to migrate from Angular to React. Most of them are related to it being closer to JavaScript and taking full advantage of modularity.

### React is an innovative place

React consists of building blocks, giving you the flexibility to pick and choose the ones suitable for the particular problem you are experiencing. They are also easy to exchange if you ever feel the need to. This exchangeability of React allows experimenting with novel approaches and get them adopted by the community, making React innovative.

Redux and MobX can be used for state management while the React core can be exchanged for other building blocks like Inferno and Preact.

Such approaches are impossible with Angular, since it provides its own solutions.

<Baner name={react} />

### JSX syntax blends well together with javascript

JSX is React’s own syntax for component building that can be mixed up with JavaScript and HTML. JavaScript can be used for composing and manipulating DOMs and you can make use of its built-in functionalities like map and filter. This way the full potential of JavaScript can be used within your HTML code. This can speed up the development time even 4x.

On the other hand, we have Angular, which does not like to mix logic and view, even though there is a way to achieve the same things as in JSX.

### React has a simple API

React components come with lifecycle methods. There are only 9 of them that you and use to control your component. Usually, you need only a couple of them even in the case of mature React applications.

Apart from that, you should know a React ES6 class component method `setState()` which is used to update internal components state. Obviously, there are more concepts like props and state, but you can read all about them in the official React documentation.
With React you get no steep learning curve. It essentially is a view library that was made to solve one problem. And it does it well.

<ReadMore> Read also: [Outsourcing ReactJS Development Services | Learn How To Do It Right](https://selleo.com/blog/outsourcing-reactjs-development-services) </ReadMore>

### Lightweight Components

React has two different ways of defining components: functional stateless components and  ES6 class components. Even though functional stateless components are only functions, they come with no boilerplate, which means you should use them when access to the component state or lifecycle methods is necessary. By doing that you are making sure that the components are lightweight and you are keeping them small while being reusable.

### Functional Programming

Functional programming is a declarative programming style where everything is bound in mathematical functions style. This type of programming feels natural in React and its ecosystem, mostly because of its similarity to JavaScript. In React, functions should be defined with no side-effects making them predictable - since they always return the same output - and composable - because functions of higher order can be used to compose them into each other.
React is considered being the leader of functional programming among other JavaScript libraries.

<ReadMore> Read also: [How To Hire React.js Developers](https://selleo.com/blog/how-to-hire-react-js-developers) </ReadMore>

### Unidirectional Data Flow

Contrary to Angular, React does not have two-way data binding. It follows the rule of unidirectional data flow, which means that the process of debugging is a lot easier. In React, child components are nested within higher-order parent components.

A component deals with updating the internal component state through `setState()`.
What is more, React gives you complete control over the native HTML elements. All that makes React state management predictable and maintainable.

### Community

The community is also an important factor you should consider when choosing a framework. The React people are constantly supporting and encouraging each other. No matter if your contribution was related to a blog article or the implementation of a new library. Where there are people there are answers. In a community, nothing goes unresolved. Somebody somewhere will have an answer to your problem or will help you come up with one.
What is more, the people standing behind React crave innovation and are experimenting every day, that is why new solutions are welcomed.

Obviously, that that goes not only for React but Angular as well, and every other community. Every programming language has amazing people present behind the scenes, who day by day work on improvements and are ready to help you anytime. However, in my personal experience, there are more high-quality 3rd party libraries in React then in Angular, which goes to show how popular React really is.

<Baner name={react-native} />

### Migration Strategy

There are a couple of different approaches to migration from Angular to React.
You can decide to work bottom-up or top-down. In a bottom-up approach you will embed React components into Angular application, but have to bear in mind that this can the state management layer migration. On the other hand, in the top-down approach, you replace
big chunks of code, usually URL based, with React ones. This means having two separate state management layers.

A very popular one is the so-called Strangler pattern which consists of modularizing a monolithic architecture and slowly converting it over time. This method includes the creation of a new, parallel view and allowing the two views to coexist to later remove it as users stop using it. To start applying this approach we first have to identify the bounded contexts in the application design. It is important to choose a bounded context that is the smallest and least expensive to refactor.

## Summary

The goal of every library or framework is to provide tools and solutions that increase productivity and be adaptive to ongoing changes in the industry. React is an amazing library giving developers lots of possibilities. It introduces innovation thanks to its building blocks, offers lightweight components and promotes functional programming.
However, if you are thinking about migration from Angular to [React](https://selleo.com/react-expert-developers-team) make sure to consider the business value and costs it will inevitably entail. Thankfully, with React you gain access to a much larger community and 3rd party libraries which should be able to cover for the migration costs.

There are many reasons behind the decision to migrate from Angular to React. Most of them are related to it being closer to JavaScript and taking full advantage of modularity.

Why Migrate From Angular to React in 2019?

**Why frontend frameworks?**

* with better smartphones & browsers the limiting factor shifts from technology to design
* BE & FE project separation – faster workflow
* FE team / codebase can be used to build web & native mobile apps (React, Angular2)

**Why Angular2?**

* componentization
* modern web workflow with node / npm / Webpack
* ES6/TypeScript (Microsoft)
* RxJS Observables (Microsoft)
* Angular Material (Google)
* web & NativeScript (Telerik)

**Angular 2 Workshops – 23.04 (Sat) @ Selleo Office**

* Getting started with Angular 2
  * project structure, Webpack, TypeScript
  * installing common packages (bootstrap-sass, ng2-bootstrap, lodash etc.)
* Components, router, forms
  * CRUD without API
* Working with API
  * API wrapper, Login/Logout

Useful links:

* [https://angular.io/docs/ts/latest/guide/](https://angular.io/docs/ts/latest/guide/)

* [https://angular.io/docs/ts/latest/cheatsheet.html](https://angular.io/docs/ts/latest/cheatsheet.html)

* [https://egghead.io/technologies/angular2](https://egghead.io/technologies/angular2)

* [https://github.com/rangle/ngCourse2](https://github.com/rangle/ngCourse2)

* [https://github.com/preboot/angular2-webpack](https://github.com/preboot/angular2-webpack)

* [https://github.com/mgechev/angular2-style-guide](https://github.com/mgechev/angular2-style-guide)

More links at:

* [https://github.com/timjacobi/angular2-education#introduction](https://github.com/timjacobi/angular2-education#introduction)

Angular 2 Learning Materials

**Angular 2 uses RxJS Observables for events (i.e. [valueChanges](https://angular.io/api/forms/AbstractControl) and server requests handling [Http](https://angular.io/api/http/Http). Observables are similar to Promises as they both deal with async behavior, but they are much bigger abstraction that provides [iterable streams](http://reactivex.io/intro.html) and [operations](http://reactivex.io/documentation/operators.html) for creating, transforming, filtering, combining and error handling.**

In this article, I will share some ideas how you can use RxJS Observable streams to handle server side pagination. I will use [GitHub Search](https://developer.github.com/v3/search)[ API](https://developer.github.com/v3/search) as example. You find full source code and live example at <https://github.com/tb/angular2-reactive-examples>.

## Creating params$

To make a GitHub Search API request we will need 3 params: search term, page number and per page count. We can get those values from valueChanges. To combine the parameters we can use [combineLatest](http://reactivex.io/documentation/operators/combinelatest.html) which will emit params whenever any of params has emitted a new item. For the page and perPage we can initiate the values using [startWith](http://reactivex.io/documentation/operators/startwith.html).

## Mapping params$ to results$

Once we have the params we can map them to API requests using [switchMap ](https://stackoverflow.com/questions/28175702/what-is-the-difference-between-flatmap-and-switchmap-in-rxjava) like this:

 There are 3 possible values for the results$ stream:

* if search term is empty string – we return empty results
* if search term is provided – we make the request
* if error occurs – we return empty results with error details

The results$ stream abstracts the API and ensures we always get same format of the results data that sets UI into expected state.

## Updating pagination based on results$

Finally, we need to update the pagination UI. To do this, we combine totalCount$ stream with perPage$ stream and generate pages numbers for page dropdown.

## SUMMARY

Angular 2 Observables unify UI events and asynchronous API requests handling and allow us to express application business logic in new way. In this post I have shared some of my experiences with Rx Observables.
On the GitHub project page I have included plan for further development of this example **<https://github.com/tb/angular2-reactive-examples#github-search-example>**. For questions and suggestions please use Github project issues.

Hire [front-end developers](https://selleo.com/front-end-developers) to design and build great apps.

In this article I will share some ideas how you can use RxJS Observable streams to handle server side pagination. I will use GitHub Search API as example.

Angular 2 Server Side Pagination With Observables

**In my presentation delivered during Haxorz Unconference I explained basics of Functional Reactive Programming with RxJS using short samples and a GitHub search in Angular 2 app example.**

<SlideShare id="v7Nr9cNTBIYhg9" />

**[e2e testing with cypress](//www.slideshare.net/t.bak/e2e-testing-with-cypress "e2e testing with cypress")** from **[Tomasz Bak](https://www.slideshare.net/t.bak)**

In my presentation delivered during Haxorz Unconference I explained basics of Functional Reactive Programming with RxJS using short samples and a GitHub search in Angular 2 app example.

Functional Reactive Angular 2

**If you are a web developer or a businessman, wondering what web application to choose for your specific needs, take into consideration Angular.js. **This open-source framework, supervised by Google and individual or corporate development teams, can be used to s**implify the development and testing of single-page applications**. Angular.js developers use it for building dynamic mobile and desktop Web applications to accomplish their tasks in the best possible way.

Many developers decide to learn and use Angular.js because this framework allows them to use HTML as a template language and then develop its syntax to express their application’s components clearly. **[**Angular.js developers**](https://selleo.com/)** state that what saves their time is the Angular’s data binding and dependency injection solutions. Further, they explain that as a declarative language for static documents, HTML brings about much effort to solve some impedance mismatch between dynamic applications and static documents. Therefore**, Angular.js developers introduced a construct called directives to teach a browser new syntax**, and this way minimize the discrepancy occurring between document centric HTML and time consuming steps to create new HTML constructs. The directives introduced to Angular. js by developers include,

* Data binding
* Document Object Model (DOM) control specifications for repeating, showing and hiding DOM elements
* Support for forms and form validation
* Adding new behavior to DOM fragments, such as DOM event handling
* Grouping of HTML into reusable components. (AngularJS Guide, 2016)

Thanks to many good solutions, **Angular.js developers** **get full control over the initialization process in automated tests**. For example: A developer can load only necessary services and successfully perform automatic tests using the separation feature module. Besides, if following “one file – one module” principle, they do not need to remember module loading order.

Concluding, we want to signalize that because of its large community (the core team members and many contributors), the [Angular.js open-source framework has been evolving dynamically](https://selleo.com/blog/migrating-to-angular2). A lot of Angular modules can be found at the Angular Modules website (most popular include AngularUI for AngularJS, Angular directives for Twitter’s Bootstrap, Angular authorization, and restangular). So, why not to [choose Angular.js for your next project](https://selleo.com/contact)?

If you are a web developer or a businessman, wondering what web application to choose for your specific needs, take into consideration Angular.js.

With Angular Js Developers Can Bootstrap Their Apps Easily

**Over the last few years we have seen Angular becoming the** [most popular frontend framework](https://2019.stateofjs.com/front-end-frameworks/)**. Angular 2 release is expected to ship in few months. Much of the excitement comes from new** [rendering architecture](https://docs.google.com/document/d/1M9FmT05Q6qpsjgvH1XvCm840yn2eWEg0PMskSQz7k4E/edit#heading=h.nhg64961z5gu) **that splits application and rendering and allows:**

* web apps split across browser’s main process and **web workers** (better performance)
* **native mobile apps** built with Angular 2 with [NativeScript](https://www.nativescript.org/)
* **server-side rendering** (faster startup, SEO)

On top of that, Angular 2 embraces TypeScript, components and new template syntax.

### NEW SYNTAX AND SEMANTICS

**Angular 2 application is a** tree of components\*\*, similar to Ember and React. Essentially, a component is a controller class (equivalent of\*\* V**iewModel in [MVVM](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvvm)**) with a template that represents a UI element. Components are important part of the Angular 1 to Angular 2 migration.

Angular 1 components (**directives with *controllerAs***) are considered to be the [best practice](https://github.com/johnpapa/angular-styleguide#directives-and-controlleras) since they were introduced in Angular 1.2. However, Angular 1 components and router definitions are much more verbose and lack conventions that make components much easier to write with Angular 2.

![Img](https://a.storyblok.com/f/86602/300x269/78b8fe0d07/migrating-to-angular2-typescript-300x269.png)

**Angular 2 is written in TypeScript, which is a superset of ES6. Now application’s code is structured using ES6 modules and a new dependency injection that can take advantage of TypeScript types. TypeScript makes your IDE much smarter with type errors and a better auto-completion in code and templates. See** [5 min quickstar](https://angular.io/docs/js/latest/quickstart.html) for Angular 2 code example.

### INCREMENTAL UPGRADE

You will be able to run Angular 2 within your Angular 1 application using ng-upgrade. **This allows** [seamless upgrade](https://angularjs.blogspot.com/2015/08/angular-1-and-angular-2-coexistence.html) **component by component.**  Angular 1.5 release is expected to include a new router and a component helper. It is an important part of the migration process.

Here is a short list of steps to take in order to be closer to Angular 2:

* upgrade Angular to the latest version
* organize your code with ES6 modules and classes
* use Webpack as module bundler
* replace controllers with directives with *controllerAs* and *bindToController*
* replace $watch calls with with declarative annotations like ng-change or RX.js observables

CONCLUSION

It is clear that migration to Angular 2 will require some effort, but expected benefits are definitely worth it. We encourage you to take this incremental upgrade approach and start it today.

Over the last few years we have seen Angular becoming the most popular frontend framework. Angular 2 release is expected to ship in few months.

Migrating To Angular 2

**It sometimes happens that a project does not get launched on time, it exceeds the initially planned costs or lacks some of the required functionalities. Why is that? There might be several reasons for it: project management,  vague requirements, poor technical performance or constant changes to the project scope.**

There is nothing particularly unusual in the fact that customers want to implement some changes, especially when they are presented with an application for the first time. But making changes is often costly, time-consuming and requires extra effort. Thus changes introduced may have a significant impact on the application in the later stages of implementation as well as the final price. Many techniques are used to minimize the number of changes, but it is not always possible to eliminate them.

**A good way to reduce extra work is by turning to Single-page applications. They are perfect for a number of platforms, allow to use server side in a minimalistic way and provide a fairly fluid user experience. The article briefly presents the concept of SPAs as well as explores the pros and cons of using Ember.js and Angular to implement SPAs.**

### **What are SPAs?**

A crucial difference between Single-page applications and standard ones is the one-page interface and moving logic from the server to the client side. Most of the application logic is written with client-side technology using JavaScript and is executed in the browser. HTML markup, JavaScript and CSS are loaded once when the application starts, while all the other required resources are retrieved dynamically when needed. One example of a SPA is Gmail.

## The history of Single-page applications

The history of SPAs begins with the introduction of AJAX  in 2005. AJAX  is a JavaScript-based technology that makes it possible to fetch data from the server in real time. The interaction with the server is done without reloading the entire document, in an asynchronous manner. This is to enable a more dynamic interaction with the user than in the traditional model, where each new data request meant that the whole HTML page had to be reloaded. The AJAX technology made it possible for the content to be updated on the same page. However, a serious drawback of the AJAX technology is that its implementation within a website usually requires fairly strong programming language skills. The problem was solved with the introduction of jQuery, which was designed to make client-side HTML scripting and building AJAX websites much easier.

The next step came with Backbone.js and the popularization of the MVC framework. An application based on the MVC model contains three separate components: models (which process database logic), views (user interface components) and controllers (which contain the logic that controls the whole application).  With MVC frameworks, web programmers are now able to create bigger Single-page applications than they used to.

The Backbone.js framework would not be as functional if it were not for its integration with the jQuery / Zepto libraries and Underscore.js / lodash.js. As a result, many operations have been simplified and can be performed more quickly. Another advantage of Backbone.js is its stability and access to technical documentation and numerous case studies. There are quite a few professional web applications available on the market that were created using Backbone.js. What is more, the framework also enjoys one of the largest communities of users, which is particularly helpful if you have any questions to ask or need a tutorial.

### **What are the benefits of SPAs?**

As previously mentioned, Single-page applications rely on client-side operations and on performing the functionality within a single page that relies on JavaScript and AJAX. There are several benefits to this solution: one of them is greater efficiency, which results in better and more native-app-like [UX](https://selleo.com/ux-design).?

![Img](https://a.storyblok.com/f/86602/571x294/643d7698e1/single-page-app.png)

**If the majority of application features are executed on the client side, the server load is smaller, thus allowing the application to work with more users. Consequently, the maintenance of the application is much more cost-efficient.**

SPAs usually operate through two independent paths: a frontend and a REST API, which only redirects the request to the database. Some of the apps can communicate directly with the frontend.

**What is more, unlike traditional web applications, a SPA can go offline.** When users do not have access to the network, they can still use the app and all the changes will be synchronised later. It can also be a competitive advantage – if other apps have a similar range of functions, but do not operate offline; at least some users are likely to opt out for the solution with offline mode.

Another benefit worth mentioning, is the fact that because with SPAs more logic is moved to the client side, [frontend web developers](https://selleo.com/front-end-developers) are more independant and can implement features with **less dependency on backend skills**.

### Ember.js

In December 2011 the project previously known as SproutCore 2.0, created by **[Yehuda Katz](https://www.yehudakatz.com/)**, was renamed to Ember.js. It is an open JavaScript library that makes it easier to write client-side web applications that are competitive to native applications; the solution is based on the Model-View-Controller (MVC) pattern. Its core concepts include routes, templates, models, controllers, views and components.

![Img](https://a.storyblok.com/f/86602/225x225/75a20ca85b/ember-logo.jpg)

The templates are written in the Handlebars templating language, backed by a model and updating automatically whenever the model changes. Then there are routes, whose purpose is to make the templates display a particular model. Every route is connected to a given model, which stores the current state of the application.

Controllers respond whenever a user interacts with a template. They are also responsible for exposing the data to the template. Views are generally created in order to convert primitive browser events to meaningful actions in the application. These are later sent to the controllers or routers, which are responsible for reacting to the event. The basic function of the components is to define application-specific HTML tags and implement their behaviour with the help of JavaScript. Thanks to components developers can create reusable elements and use them to simplify the templates.

### Angular.js

**Angular.js is another open-source web application framework used to create single-page applications whose history starts in 2009**. It was developed by [Miško Hevery](https://twitter.com/mhevery) and Adam Abrons and is now maintained by the Google community.

The philosophy behind Angular.js is based on a distinction between declarative and imperative programming. According to Angular.js developers, the former should be used for building UI and wiring software components, while the latter is perfect for expressing business logic. **It is based on a concept that HTML, while excellent for static documents, was never designed for rich web applications. To overcome this limitation, Angular.js enhances the HTML to make it suitable for describing dynamic views.**

**The most crucial components of an Angular.js application are the so-called directives. These are markers on a DOM element, e.g. an attribute or a CSS class, which are added to implement new behaviour. They ensure that the traditional HTML elements become more interactive.**

The building blocks of AngularJS are organized into models, views, controllers, and (optionally) services. The model refers to JavaScript objects which correspond to the data the application can access.

The role of views is twofold: to provide the user with the data from the models in a visual and useful format, and to translate user interactions into actions specific to the application.  Controllers define the application logic and are responsible for connecting models to the right views. Services can perform various tasks from providing remote data to ensuring the implementation of an algorithm.

### **Ember.js and** Angular.js **– similarities**

Both of the frameworks in question are open-sourced and aimed at creating single-page applications using the MVC model. The application is divided into three components (a model, a view and a controller). The binding code is moved to a separate class file and the code can be reused several times.

They also tend to push the templating to the browser in order to free the server, which now only fetches data. **As a result, client-side developers have greater control over the templates. It proves useful when you want to update one section of the website without refreshing the whole page. It is a great solution with which the code can be easily reused and maintained.**

Another similarity between Ember.js and Angular.js is that they both use two-way data binding, thanks to which developers can avoid writing some parts of the boilerplate code, which would be used for manipulating the DOM in regular web apps. Both Angular.js and Ember.js share a similar concept of routing.

### Ember.js and Angular.js – differences

**There are a few differences between the two frameworks, particularly when it comes to templating.** With Angular.js, the templating engine is HTML, while Ember.js uses handlebars, which enable embedding expressions that change what is displayed. Ember requires additional Handlebars and jQuery libraries to function, while Angular can stand on its own.

When it comes to the **learning curve**, it can be quite steep in both frameworks. Learning Ember, however, takes more time at the beginning, as it requires developers to **follow a convention**, as opposed to Angular; the latter offers more freedom in this respect, but this comes also with a negative side – the codebase might be of much lower quality, if the developers involved in the project have a low or varied level of skills. Angular seems quite easy at first, but once you have mastered the very basics the learning curve gets steeper.

**Because of the technique called “dirty checking”, which is used for monitoring the changes, Angular.js may have problems updating an interface with a large number of bindings.** The process of dirty checking involves scanning each object together with its bound properties in order to compare the current value to the previous one. The bigger the number of objects, the more expensive it becomes. Performance issues may be encountered when the application displays more than 2000 bound objects at a time. With Ember, you do not need to think about such limitations.

It is also worth mentioning that a number of professional service applications and big companies decided to use Ember.js over other MVC frameworks. These are Yahoo, Yapp, Zendesk, Discourse, Groupon, LivingSocial and many more. All said, there are projects where Angular may very well satisfy the requirements and is thus a valid technology to use – it may even, for example, be a faster option to choose.

### Ember.js or Angular.js – which should I choose?

On the whole, it seems to us that Ember.js may be more suitable for large-scale, more ambitious and long-lived projects, while Angular.js appears perfect for smaller applications or components added to the already existing applications.

**Ember.js provides programmers with a set of tools and a bunch of rules and conventions. The solution tends to make crucial decisions for you, saving time usually wasted on researching and combining libraries together. High performance, easy APIs, amazing routing and a convention over configuration philosophy is what makes Ember a great and reliable technology, the choice for your next Single-page application.**

If you need help with your Ember development, feel free to contact our [team of experts](https://selleo.com/ember-expert-developers-team).

We have also created a downloadable [Ember testing guide](https://selleo.com/ebook/ember) that will help you improve your work and provide best practices.

<a href="/ebook/ember">
<img src="/uploads/banner-ember.jpg">
</a> <br>

It sometimes happens that a project does not get launched on time, it exceeds the initially planned costs, or lacks some of the required functionalities. Why is that?

Read our articles on Selleo Blog

Business

Technology