React’s JSX And Angular’s Template Syntax: A Comparison on Usability
A lot of blog posts and articles have been written which strongly discourages people from comparing ReactJS and Angular. Such articles rightly stipulate that since both technologies are meant to solve very different problems, any attempt at comparing them is like the proverbial comparison of apples to oranges.
Having said that, in real life, every web developer at the beginning of his career, or even before he starts a new project would likely be caught asking himself whether he should use ReactJS OR Angular OR ‘blah blah framework’. This article was written to make that decision a better informed and easier one.
Who should read this article:
- Web developers who already know either Reactjs or Angular and who want to easily learn the other framework through knowledge transfer.
- Inquisitive people who want to understand what common features exist between Reactjs and Angular, their similarities, and differences of implementation.
Structure of this article
I listed out ten (10) distinct things you can do in both Reactjs and Angular templates. For each feature, I first highlight how you can utilize it in both frameworks. Then I give a verdict as to which framework implements the feature in a more familiar way without inventing new syntax for the developer to learn. The verdicts are my personal opinion based on my current knowledge and biases about what easier-to-learn means. If you have contrary views/verdicts, kindly comment.
Alright. Leggo!
1. Control Flow:
for loops, if-else, switch statements.
React: Does not allow for javascript statements within JSX. You can only write them outside the components/elements.
Angular: uses attributes on the element you want to perform the action on. In the case of ‘for loops’ and ‘if-else’ statements, you are to use special attributes called ‘structural directives’, which are attributes preceded with an asterisk (like *ngFor, *ngIf). The Switch statement, however, does not use structural directive. It uses an attribute directive ( like [ngSwitch] ).
Comments: If you already know javascript, you can use control structures in Reactjs templates right away. For Angular, you will have to learn a new syntax.
Verdict: Reactjs is easier.
2. List Items
React: Lists are mostly rendered using javascript array methods — like map, filter, reduce — to loop through a data collection.
Individual elements of the list can be tracked for easy re-rendering by adding a special attribute called key.
Angular: uses the *ngFor structural directive to loop through your list model.
Element tracking is implemented with the trackBy property.
Comment: I think both are pretty easy implementations to render a list and to keep track of individual list items.
Verdict: No winner.
3. Container Elements (fragment and ng-container)
If you want to write a component that will be a collection of other components/ elements but you don’t want to use another div element to wrap your component contents, you can use a container element that will house your component but will not render to the DOM.
Reactjs: uses a <Fragment></Fragment> (or <></>) component to wrap your child elements. You can also simply return an array of elements.
Angular: uses an <ng-container></ng-container> component.
Comments: Equal difficulty.
Verdict: No winner!
4. Interpolation / Outputting values
How to output a variable value from your component’s model to the template.
Reactjs: use single curly braces { name } whether for element content or attribute value
Angular: use double curly braces {{ name }} for element content. Use double braces or square brackets for attributes.
Comments: Angular has two complementary syntaxes for outputting data as attribute values.
Verdict: No winner!
5. Event Handlers
How to specify an event handler for a DOM (or custom component) event.
ReactJS: write the handler function name inside single curly braces without calling the function.
Angular: wrap the event name in parenthesis. Then the handler name with parenthesis inside your quotation marks.
Verdict: No winner!
6. Class and Style bindings
How to dynamically add and remove CSS classes and styles.
Reactjs: pass a model variable to className or style properties.
To define styles, pass an object defining the styles in camelCase with their values as strings.
Angular: pass template expression to class or class.<nameofclass>
for styles: pass template expression to style.background-color for example to change the background colour.
Comments: Notice that in the class example I did not use square brackets around the property name, while I used it in the style example. Also in the class example, classy-dude was not wrapped in single quotes inside the double-quotes. Whereas I did that in the style example. These differences in style (no pun intended) are what I explain in number 7 below.
Verdict: No winner
7. Scripting Syntaxes:
The whole point of frontend frameworks is to be able to dynamically alter our HTML during runtime. Template scripts are some little pieces of code written right within your HTML template, which are used to dynamically alter the DOM.
React: has just one (1) syntax for in-template scripts. Plain, valid javascript expressions.
Angular: has three 3 syntaxes. The one to use depends on where you are writing the script. Whether as an attribute binding (template expression syntax) or as an event handler (template statement syntax) or for structural directives ( microsyntax).
Verdict: Reactjs wins. By a large margin.
8. Element Reference:
How to easily reference any element within your component. The native DOM way of adding an ID to the element and then querying for that ID would not work perfectly for this scenario, because, it will create an app-wide reference. What we need is a component level reference.
Both Reactjs and Angular implemented ways to create a component-wide reference for any element or child component.
Reactjs:
- use the createRef() global function to create the reference ID, and assign it to a variable.
- Use the ref attribute to assign such ref to any element or child component.
- reference the element anywhere in your component model or template using the current property of the ref id variable.
Angular:
- use the # identifier to name any element. Eg <input #name value=”ewoo” />
- access the element by just naming the given ref. Eg name.value //ewoo
Comments: Angular has a simpler solution.
Verdict: Angular wins!
9. Component Selector
Reactjs: TitleCase. Named exactly as the name of the function or class that defines the component.
Angular: kebab-case. With a prefix. The prefix can be anything. The component’s element name is known through the selector attribute of the object passed in @Component decorator.
Comments: While template element names exactly match their class names in ReactJS; in Angular, the convention is that your class name ends with the word ‘Component’ while your selector begins with a prefix, say, ‘app’. The discrepancy can be confusing.
Verdict: ReactJS wins
10. Error Handling
When an embedded component throws an error should the whole app crash? Should the component's template still render? What should be rendered? Both Reactjs and Angular implement ways to manage errors via the template.
React: uses special components called error boundary components. Any such component must implement either of the componentDidCatch() and static getDerivedStateFromError() life cycle methods. Describing how that works is beyond the scope of this article. So check the official documentation for more details.
Angular: uses some special syntax to prevent Angular some errors at runtime. For example, you can null and undefined errors with the safe null operator ‘?’, and ‘!’ )
Verdict: No Winner!
11. Commenting
React: uses multiline javascript comments enclosed by curly braces ({/* */})
Angular: is actually an extension of HTML. So uses HTML style comments (<! — →)
CONCLUSION
Developers switching from one technology to another, often find themselves asking the question: ‘How do I accomplish feature X with technology Y ?’. Devs like that already know how to accomplish what they want in their former favourite technology. All they need is to be clearly shown the syntax differences between their former technology and the new one.
That is exactly the aim this article hoped to achieve. That is: to show the differences in syntax between writing a view template in ReactJS and Angular.
What features/ functionalities did I miss? Let me know in the comment section.
PS: I hope to make this a series. Expect more ReactJS/Angular comparison articles in the following topics: Models and data handling, Lifecycles Methods, App bootstrapping, etc.
