Subscribe to get the latest tutorials and updates on Angular on your email.
Single-Page Application Vs. Multi-Page Application:
Application development is shifting from the desktop to the browser since it provides a better UX and it’s shareable across many devices. There are two main paradigms or patterns to choose from when developing a web-based application.
These two patterns are Single-page applications or SPA for short, and Multi-page applications (MPA). Now, this doesn’t mean that you can’t have both on the same website, in fact, in most cases you’d want to mix your pages between both to achieve the best UX, depending on the situation.
An SPA is one that doesn’t require reloading which makes for a smoother and faster performance since all the components are shipped to the client side. Gmail is an excellent example of an SPA. The SPA requests the application shell or the Markup, and the data independently, which makes development easier.
It’s also easy to debug using Chrome. However, SEO is a little bit complex when it comes to SPA, as it might be required to perform server-side rendering or use some rendering service to avoid confusing the crawler. Also, if the user has his JS turned off, you’d also need to render the pages on the server side, which would be totally inefficient and mess up the whole SPA idea.
MPA is the traditional pages we’re used to seeing, where most actions requests either data through ajax, or even entire page reloads, it’s much more complex, the front-end and the back-end are usually tightly coupled, however, they are more SEO efficient.
Laying down the basics:
Now that we understand what SPA and MPA are, we can start to wrap our heads around what React and Angular are, and choose the one that best fits for our application.
Angular started out as an MV* framework, i.e. it could be used as MVC or an MVVM architecture. It’s quite flexible, and many people regard this flexibility as a degree of difficulty since there’s not one specific way of doing things. It was created by Google and is used by many companies such as Autodesk, Apple, Microsoft. Angular focuses on building rich SPA, and when it was first released back around 2010, it shocked the world with many new concepts that it introduced.
Although React feels like a framework for many developers for the way it does things, it’s not a framework. React is created and maintained by Facebook, and they use it a lot in their applications. React serves as the view in an MVC architecture, but beyond that, it has introduced a new way of doing things with its component-based architecture.
The different Angular releases:
The angular history is quite confusing, first of all, there are only 5 major releases with Angular 6 that was introduced recently on May 3rd, 2018.
It’s worth mentioning, in Angular 1.5+ components were introduced to the framework as well. Angular 3 was skipped due to certain compatibility issues. Angular 4 came afterward, followed by Angular 5 which introduced the angular service workers, and then came Angular 6. It’s also not recommended to make jumps from Angular 2 to Angular 6, though it’s possible. We’ll stick with Angular 6.
Angular at its core extends the browser’s functionality, by extending and intercepting the event loop and enhancing the HTML parsing done by the processor. First of all, let’s look at a simple Angular application, for this demonstration I’ll be using the Angular 6.
To get started with Angular, we’ll install the Angular command line through npm. For this, we’ll run
npm install -g @angular/cli
Next, we’ll create a new application using
ng new [application name]
Angular uses a component-based architecture, basically, each component is made of 4 files, a typescript file that defines and implements the component, an HTML file that presents the view, a CSS file for style and a spec file for testing. Before we make any changes to the application, run the command ng serve and you’ll see the default created application being run on port 4200.
Now, inside of src/app , clear the contents of app.component.html. And let’s create our own new component.
The Angular CLI provides a powerful generator, to create a component we’ll use
ng g component componentes/demo. Now our application structure will look like this:
Inside of demo.component.ts, we’ll start implementing our simple two-way binding application. We’ll define a simple message that should start with a default message and later on be changed and displayed on the view. The @component defines the metadata of the component. The selector is the custom HTML name we’ll use to include this component. We’ll add a message variable inside of the demo component class and define its type as a string. Inside of the ngOnInit method, we’ll give it a default value. ngOnInit is a life cycle method that executes before the component is mounted, we can also use the constructor for this purpose, they will both give the same result for this application.
Next, we’ll create the HTML, we’ll use an H1 tag to display the current value of the message variable. The double braces are used to interpolate the value of the message. We’ll also create a form without an action, which consists of a label and an input field of type text. To create two-way binding, we need to use ngModel which will allow us to change the value of the message variable and then the name property will display the value of the variable inside of the input field. So before we type anything, it should have the default value “Hello” written into it.
To finalize this mini app, we need to include the app-demo component inside of the app.component.html which is the main component of our application, and actually, include the FormsModule inside of app.module.ts to be able to use ngModel.
Now, when we save and head back to the browser, we’ll find our application running with a two-way binding.
Angular, in fact, offers 3 methods of binding, not just one. Each one is demonstrated in one line of this snippet.
The first is the one we talked about earlier, the two-way data binding that reflects any change in the data immediately, if the user changes the data then the application sees it right away and vice-versa.
The second method is the one-way data-binding, in which only the application is able to change the data, and it’s reflected immediately as well.
The last method is the one-time data binding, in which the data attribute is only watched changing one time throughout its life cycle and only that changed is seen, if it changes otherwise we won’t pick it up on the application.
Angular will introduce you to many other concepts and there’s actually a lot you can do with Angular, for instance, we’ve mentioned that Angular has been extended to be more component-driven like React is, you can create custom filters in Angular, use form-validations and perform unit testing, along with many other cool things that you can check here on the official documentation. Angular also introduced Dependency Injection which was groundbreaking at the time it was released and changed the way many things are done in development, as Dependency Injection is a useful pattern for increasing code-reusability and enhancing the development process.
React is a twistable, flexible interface-making library created and maintained by Facebook. It’s one of their open source projects that has been adopted by many other companies like Instagram, Yahoo, WordPress, Walmart, and the list goes on.
React brings a component-based architecture to the game, which revolutionized web development and influenced other frameworks like Angular to follow its lead. Component-based architecture is more maintainable and even easier to maintain than other architectures in web development. It also speeds up the development process by creating reusable components that let the developer focus on each and every detail on the page.
This is how React sees your application’s page and how you should think in React.
That being said, you can configure React as the V in your MV* architecture. Let’s look at a simple Hello World program to see the component-based architecture in Action.
I’ve created a simple component called Hello, with default function render that simply returns the header tag “Hello World”.
In the Index.js, we merely call that component with the ReactDOM.render() method and pass in the component and where it should insert it, in this case, it will be inserted in the root div in the index.html page.
When we hit npm start, the component is rendered and the magic takes place.
However, it’s not the component-based architecture that made React all this famous; React’s virtual DOM is one of the best features it has to offer. Simply said, the Document Object Model is the representation of the web page to the browser, React possess its own virtual DOM that manipulates the actual DOM of the browser, but since it’s much faster than the browser’s DOM, it boosts up the performance a lot. React’s Virtual DOM is able to create more than 200,000 nodes per second, which is more than a wide majority of websites would need. Not only that, but it recreates the DOM for every change, and with The Diffing algorithm it uses, it’s able to cut down the difference calculation from a complexity of O(n3) to O(n). The diffing algorithm is a standalone rich subject that unveils some of React’s magic, here’s the full documentation from React’s official website.
React is also a very rich library, we’ve yet to mention the props and events and forms and the whole bunch of amazing features that React brings along and that you can check in depth on their official documentation page.
Angular vs React: Head on Comparison
Well, certainly Angular and React are quite cool, and getting to know them makes you want to use them both ( although you can do that, we’re here about choosing one). Let’s put them face to face for more comparison points that might be of interest to some developers.
|Data binding||2-way data binding||1-way data binding|
|Size||Quite large and since it needs to be shipped to the client side, it increases the initial load time||Quite small in size, especially when compared with Angular|
|Learning Curve||Quite steep, given the number of features and options you have in Angular||It’s easy to pick up and learn|
|Performance||Comparable to React, Angular 2 and 4 are some||Faster than Angular thanks to the Virtual DOM|
|Simplicity||Quite complex||Fairly simple but takes some time to set up a project and configure everything|
|Scalability||Easy to scale thanks to the power CLI and generation tools, It’s also used by many large companies||Fairly easy to scale and is quite testable which facilitates the scaling procedure|
Here’s an important point to mention, in case you’re not considering migrating from your already set architecture, and you just want to spice up your website. If you’re running something like a full Ruby on Rails MVC server, you’d still have both options to consider, Angular and React.
There are gems for Rails Angular, but they are outdated and not quite well maintained, the reason, of course, is that Angular was not really made to be run and developed for the server side, although there are methods and techniques for using Angular on the server side, we won’t get into those here.
On the other hand, It’s fairly easy to integrate React with your backend technology, even a strict MVC one, React works well for both, server-side rendering and client-side rendering. For rails, the react-rails gem is well maintained and gets updated regularly, so if you want to keep the entire backend functionalities and just tweak the views, React is definitely your guy. Good news, however, is that most of the backend frameworks nowadays, including Rails, can be run and created in an API mode, and easier than before, with the aid of many packages, gems or libraries. This indeed facilitates building whichever architecture you want for your website, and you’re most probably familiar with the MEAN and MERN stacks since they’re quite popular today.
And The Winner is…
Web development would be much much easier if we had winners, but we sadly don’t. It really depends on what you want to do and how you want to do it. If simplicity and size are what matters most to you then you should go for React, however, if you don’t care about the learning curve and would like to choose the best scalable option with the highest number of features then Angular is your guy. Both are very well documented and the communities for both are quite mature and helpful and you’d most probably find help whenever you needed.
Just always remember to use these tools to help your development process and not make it more complicated, at the end of the day, these are not magical tools from the outside world, they are tools that you could reinvent (theoretically at least, it would take you forever to do it practically, and might not be as neat) so try to make the best use out of these tools and also try to be thorough learning and using a certain tool instead of jamming your application with tools that need not be there.
People Also Read