React vs. Angular components – Part 2

In the previous post I started a short series of posts about how React and Angular handle components. In this series I do not want to draw any conclusions which of these two is better, bur rather to show you the pros and cons of each (in terms of code, flexibility, features, etc.) in different scenarios. I already covered how one can define components in both React and Angular, how these are rendered and how to configure them by means of properties. In this post I will show how these two handle changes in the model and how they react on these changes. Continue Reading…

React vs. Angular components

As an IT consultant I have the opportunity to experiment with different libraries and frameworks. Every time I should solve a particular (architectural) problem, I start thinking what kind of tools I know and how they could help me in that particular situation. I have had great experience both with Angular and React for building dynamic front-end application. In this series of posts I want to do a simple comparison between them in terms of how they help developers define and use components. Please note that I am not going to draw a conclusion about which of them is better. I really do think that both have their strong sides, so it is a matter of approach (and preference sometimes) which one you would use. Continue Reading…

Angular 2 gets rid of controllers

In my previous post I talked about the problems of controllers (both at the back-end and the front-end). The issue is that controllers are too general and tend to become full with mixed logic, especially if the page they control has many UI pieces. So instead of having one controller per page, we can have one controller per component and hence decrease the coupling in one’s code.

Some JavaScript libraries, f.x. React, are designed with the component in the center. In Angular 1.x we have the concepts of a controller and a directive. One can attach a controller to any part of the page or when using a router, a controller is automatically assigned to the view. You can easily remove all usages of controllers on your page simply by moving the code into an appropriate directive. Do not forget that you can also rely on the different types of services in Angular for custom logic.

In Angular 2 the notion of controller is completely removed. You should work with directives only and you can actually choose what kind of a directive you want to use for the specific case:

  • Component directives provide a “static” template with some logic behind. It is the same as a directive with a template and an isolated scope in Angular 1.x
  • Template directives work with a user-defined template. It is similar to a directive with transclude in Angular 1.x
  • Decorator directives add extra functionality to an existing DOM element (see Decorator pattern). It is the same as a directive with no translude, no own scope and no template in Angular 1.x

If you think you will miss the mapping to a controller from the router in Angular 2, you can actually do a mapping to a ComponentDirective instead, but I would still opt for slicing your views into smaller components.

ES6 generators to the rescue

Arrays are one of the simplest data structures which allow access to a list of elements. JavaScript (and most programming languages) has the notion of array. However one of the problems related to arrays is they are constrained by their size, i.e. an array has a limited number of elements. Furthermore, when applying functions to arrays, one passes the whole data structure at once. Let’s take a look at the following example. The map function is applied to the whole array and the result is calculated right away.

Note, the lambda expression is part of ES6

Continue Reading…

Getting declarative with Polymer

Polymer is Google’s implementation of WebComponents for today’s browser. If you are not familiar with it, check out this nice tutorial by Pankaj Parashar. The main idea behind WebComponents is that we should be able to create our own web components (hence the name). A web component is just a custom HTML element with some styles and behavior attached to it. An example can be the following:

Polymer provides two sets of components one can use directly or build on:

  • Core – basic elements, both visual and non-visual, that can help one built layouts, scaffolding, and user interaction
  • Paper – these elements implement the material design philosophy of Google

Continue Reading…