DEV Community: Sanjay Patel

AngularJS vs ReactJS: Comparison between AngularJS and ReactJS

Sanjay Patel — Fri, 27 Sep 2019 06:05:26 +0000

When you want to create a single page application the question arrives in your mind: What I will use? AngularJS or ReactJS? I've been using AngularJS and ReactJS for a while now. Both frameworks are super fast, advanced, widely adopted JavaScript (JS) technologies that we use to create interactive single-page applications (SPAs).

Angular, the Model–View–Controller framework has become extremely popular among web developers. React is even more widely used by JavaScript programmers, React is actually a library, not a framework. React only has a View, but lacks Model and Controller components. So how did React became so popular and how can we reasonably compare a framework (AngularJS) with a library (React)?

We can differentiate Angular and React using following aspects:
• Data Binding
• Dependency Resolution
• Templating & Directives
• Componentization
• Performance
• Language
• Concept

Data Biding

AngularJS

Two-way data binding.

ReactJS

One-way data binding.

Dependencies

AngularJS

Manages dependencies automatically.

ReactJS

Requires additional tools to manage dependencies.

Templating & Directives

AngularJS

We make our own directives in Angular to insert data into templates.

ReactJS

React doesn’t offer division into templates and directives or template logic.

Componentization

AngularJS

Based on the three layers — Model, View, and Controller.

ReactJS

Only has a View, but lacks Model and Controller components.

Performance

AngularJS

The performance will decrease a lot if your application has too many watchers.

ReactJS

React makes it simpler to control application performance but this doesn't mean we can't create a fast application in Angular.

Language

AngularJS

JavaScript + HTML

ReactJS

JavaScript + JSX

Concept

AngularJS

Brings JavaScript into HTML Works with the real DOM Client-side rendering.

ReactJS

Brings HTML into JavaScript Works with the virtual DOM Server-side rendering.

What is AngularJS Good For?

Sanjay Patel — Wed, 28 Aug 2019 10:53:34 +0000

What is AngularJS?

AngularJS is an Open-source Front-end JavaScript-based framework which is maintained by Google and by a community of individuals and corporations. AngularJS widely used to create Single-Page Applications, a web application or we can say a website that interacts with the user by dynamically rewriting the current page rather than loading the entire website from a server. This is possible by using the Model–View–Controller. It makes use of Model–View–Controller and reduce the amount of JavaScript needed to reduce the loading time and make web applications functional. The power of angular comes from its two-way data binding technique which allows complete separation of the data model and view for user interaction.

What is AngularJS Good for?

The nature of the website or application you want to build is the only factor that will play an important role in deciding whether you will use angular or not. Like if the website or application is data-rich and requires instant feedback on interaction, it's maybe a good idea to use angular.

Developers find AngularJS very effective especially in creating dynamic, single-page apps, and supporting MVC (Model View Controller) programming structure.

When you are thinking of creating a user-friendly and interactive web application with cross-browser capability AngularJS is a best-suited framework to build such apps.

Notable Features of AngularJS:

Two-way Data-binding:

Data binding is one of the most notable AngularJS features which help developers to save time because it doesn't require a lot of coding for an application. This helps to reduce overall work for the developer.

Ready to Use Templates:

The ready to use templates make it easy even for people with little computing skills come-up with great apps.

Dependency Injection:

This is an essential feature in AngularJS that helps the developer to develop the application easily and smoothly.

Testing:

The development team of AngularJS has a special focus on testability while creating framework that leads you to easily test your AngularJS apps.

Enhanced User Experience:

The use of MVC and REST has made it easy for users to use the application with ease by providing a user-friendly environment.

Dynamic imports for lazy routes from old towards new: Angular 8

Sanjay Patel — Fri, 19 Jul 2019 05:31:16 +0000

Lazy-loaded routes now use the standard dynamic import syntax instead of a custom string. This means that TypeScript and linters will be better able to complain when modules are missing or misspelled.

So a lazy-loaded import that looked like this:

{ path: '/cart', loadChildren: './cart/cart.module#CartModule' }

Will now look like this:

{ path:/cart, loadChildren: () => import(./cart/cart.module).then(m => m.CartModule) }

The change in syntax will be taken care of for you if you’re using the ng upgrade command to upgrade your app.

Know more about updates on Angular 8 here

ToDo Mobile App using NativeScript and Angular

Sanjay Patel — Sat, 13 Jul 2019 09:05:11 +0000

NativeScript is an open source cross-platform and hybrid mobile framework for building native iOS and Android mobile apps with Angular, Vue.js, TypeScript, or JavaScript.

The goal of this post is to build and run a simple NativeScript Angular application in TypeScript, using the Angular CLI.

You can download the source code for the NativeScript Angular Todo mobile app from GitHub repository nativescript-todo-app

1. GETTING STARTED WITH NATIVESCRIPT

You need to set up your development environment before you can do anything.

Install Node.js® and npm if they are not already on your machine.

If you don’t have NativeScript installed you can install it by installing Node.js.

To install NativeScript, run:

$ npm install -g nativescript

The final step is to install the development tool for each platform that you want to deploy to. For Android, this is the Android SDK. For iOS, it’s XCode. You can follow the installation guide on the NativeScript website for more detailed instructions on how to set up the necessary software for your development environment.

Once you’ve set up your environment, execute:

$ tns doctor

2. CREATE A NEW APP FOR ANDROID AND IOS

Before we can start coding we need to create a new project. This can be done by executing the following from the Command Prompt (Windows) or Terminal (Linux and Mac):

$ tns create TodoApp $ cd TodoApp
$ tns platform add android $ tns platform add ios (If you're not using a Mac, you cannot add and build for the iOS platform.)

3. INSTALL THE NECESSARY NATIVE PLUGINS

RadSideDrawer is a component can show a hidden view that contains navigation UI or common settings. A popular application that uses the drawer UI is the Android Play store app.

RadListView for NativeScript is a virtualizing list component that provides the most popular features associated with scenarios where a list of items is used. All these features are embedded in one control with the idea to save developer time and provide a better experience. The control’s main features include:

*item animations
*different layouts and orientations
*swipe, reorder, drag, refreshing the list on swipe or loading more items only when needed.

RadDataForm plugin provides an easy and versatile approach for building mobile forms based on a provided data object’s public members. Use DataForm to:

*Bind a form to a data object with a single line of code
*Take advantage of more than 15 built-in editors (or provide your own custom editor)
*Create groups of editors, allow them to be collapsed and style them
*Display a form in ReadOnly mode
*Take control over collected data with built-in data validation – use a provided validator or create a custom one

The application we are creating will be making use of persisted storage, that will save our data even after our application has been closed. After all, we don’t want to lose our todo list data after we restart our application.

In this application, we are use the NativeScript SQLite. This can be done by executing the following from the Command Prompt (Windows) or Terminal (Linux and Mac):

$ tns plugin add nativescript-ui-sidedrawer $ tns plugin add nativescript-ui-listview $ tns plugin add nativescript-ui-dataform $ tns plugin add nativescript-sqlite

4. CONFIGURING THE ANGULAR ROUTER

src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { NativeScriptRouterModule } from 'nativescript-angular/router';

const routes: Routes = [
{
path: '',
redirectTo: 'todo-list',
pathMatch: 'full'
},

{
path: 'todo-list',
loadChildren: './todo-list/todo-list.module#TodoListModule'
},

{
path: 'todo-detail',
loadChildren: './todo-detail/todo-detail.module#TodoDetailModule'
}
];

@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule],
})
export class AppRoutingModule { }`

5. CREATE TODOLISTMODULE FEATURE MODULE

src/app/todo-list/todo-list.module.ts

import { NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
import { NativeScriptCommonModule } from 'nativescript-angular/common';
import { NativeScriptUIListViewModule } from 'nativescript-ui-listview/angular';
import { TodoListRoutingModule } from './todo-list-routing.module';
import { TodoListComponent } from './todo-list.component';
import { TodoService } from '../services/todo.service';

@NgModule({
imports: [
NativeScriptCommonModule,
TodoListRoutingModule],
NativeScriptUIListViewModule
],
declarations: [TodoListComponent],
schemas: [NO_ERRORS_SCHEMA],
providers: [TodoService]
})
export class TodoListModule { }

6. CONFIGURE THE FEATURE MODULE’S ROUTES

src/app/todo-list/todo-list-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { NativeScriptRouterModule } from 'nativescript-angular/router';
import { TodoListComponent } from './todo-list.component';

const routes: Routes = [
{
path: '',
component: 'TodoListComponent'
}
];

@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]

})
export class TodoListRoutingModule { }

7. CREATING THE TODOLIST COMPONENT

src/app/todo-list/todo-list.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { RouterExtensions } from 'nativescript-angular/router';
import { ObservableArray } from 'tns-core-modules/data/observable-array';
import { DataItem } from './dataItem';
import * as app from 'application';
import { RadSideDrawer } from 'nativescript-ui-sidedrawer';
import { TodoService } from '../services/todo.service';
import { ListViewEventData, RadListView } from 'nativescript-ui-listview';
import { RadListViewComponent } from 'nativescript-ui-listview/angular';
import { View } from 'tns-core-modules/ui/core/view';
import * as dialogs from 'ui/dialogs';

@Component({
selector: 'todo-list',
moduleId: module.id,
templateUrl: './todo-list.component.html',
styleUrls: ['todo-list.component.css']
})

export class TodoListComponent implements OnInit {
private _dataItems: ObservableArray;
public data: DataItem[] = [];
@ViewChild('myListView') listViewComponent: RadListViewComponent;

constructor( private _routerExtensions: RouterExtensions , private todoService: TodoService ) { }

get dataItems(): ObservableArray {
return this._dataItems;
}

ngOnInit(): void {
this.loadTodoList();
}

loadTodoList() {
this.todoService.fetch().then((res) => {
this._dataItems = new ObservableArray(res);
});
}

onDrawerButtonTap(): void {
const sideDrawer = app.getRootView();
sideDrawer.showDrawer();
}

create(): void {
this._routerExtensions.navigate(['/todo-detail'],
{
animated: true,
transition: {
name:'slide',
duration: 200,
curve:'ease'
}
});
}

public onCellSwiping(args :ListViewEventData) {
var swipeLimits = args.data.swipeLimits;
var currentItemView = args.object;
var currentView;

if (args.data.x > 200) {
  console.log('Notify perform left action');
} else if (args.data.x < -200) {
  console.log('Notify perform right action');
}

}

public onSwipeCellStarted(args :ListViewEventData) {
var swipeLimits = args.data.swipeLimits;
var swipeView = args['object'];
var leftItem = swipeView.getViewById('edit-view');
var rightItem = swipeView.getViewById('delete-view');
swipeLimits.left = leftItem.getMeasuredWidth();
swipeLimits.right = rightItem.getMeasuredWidth();
swipeLimits.threshold = leftItem.getMeasuredWidth() / 2;
}

public onLeftSwipeClick(args :ListViewEventData) {

var id = args.object.bindingContext.id;
this.listViewComponent.listView.notifySwipeToExecuteFinished();

this._routerExtensions.navigate(['/todo-detail'],
{
queryParams:{id: id },
animated: true,
transition: {
name:'slide',
duration: 200,
curve:'ease'
}
});
}

public onRightSwipeClick(args) {
var id = args.object.bindingContext.id;
dialogs.confirm({
title: 'Confirm Delete',
message: 'Are you sure you want to delete this item?',
okButtonText: 'Ok',
cancelButtonText: 'Cancel'
}).then(result => {
if (result) {
this.todoService.deleteRecord(id).then((res) => {
if (res.success) {
this._dataItems.splice(this._dataItems.indexOf(args.object.bindingContext), 1);
}
});
}
});

}
}

8. RUNNING AND DEBUGGING THE APP

You can run the app on your device by executing:

$ tns run

and then the platform where you want to deploy. Here’s an example for android:

$ tns run android

This automatically installs the Android platform for you if it hasn’t already been installed and then runs the app on your android device once it’s installed.

Once the app is running, you can execute tns livesync android –watch to automatically refresh the app every time you make changes to the source files.

NativeScript allows developers to debug their app. This is done with the Chrome dev tools. There are two ways of doing this:

If have an app already running, you can open a new terminal window and execute
$ tns debug android --start
If you don’t have an app running yet, use
$ tns debug android --debug-brk