This is a series of posts about comparison between components in Angular and React. The idea of these posts is not to judge which one is best, bur rather to show how these two cope with some typical problems and how we, developers, can use them. In the first three parts (Part 1, Part 2, Part 3) I talked about the starting points – how to create a component, how to attach a template to it, how to do data binding. In this fourth part I am going to deep a bit more into the lifecycle of these components. I will discuss what opportunities and points of extensibility one can find in Angular and React and how one can benefit from them. Continue Reading…
Tag Archives: angularjs
React vs. Angular components – Part 3
This is the next post from the series about comparison between Angular and React. In the first two posts (part 1 and part 2) we saw the differences between Angular and React components in terms of creation, rendering, and configuration. In this post I will discuss the differences in terms of templates. We have already seen some examples for Angular and React components, but in this post I aim to give you some more details about what we can do with these. Continue Reading…
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…
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.
ISTA 2014
I had the chance to speak at one of biggest IT conferences in Bulgaria – ISTA. It is an annual conference devoted to innovation in software development and test automation. It gathers people from different parts of the world, both speakers and attendees, and gives them inspiration about the best development and test techniques. I am very glad I had the opportunity to participate as a speaker for the first time this year, because I had amazing experience. Continue Reading…