DEV Community: Shahid Mansuri

What Makes Angular the Most Preferable Web Development Framework?

Shahid Mansuri — Thu, 22 Nov 2018 09:39:13 +0000

Its first version, AngularJS, became in a very short time the de facto standard for the development of advanced web applications.

In September 2016 Google released the definitive version of what it called at the time Angular 2, and that is now simply Angular. This new framework has been built on years of work and feedback from users using AngularJS (version 1.x of the framework). Its development took more than 2 years.

It is not a new version or an evolution of AngularJS, but it is a new product, with its own concepts and techniques. In addition, Angular uses as its main programming language TypeScript, a superset of JavaScript/ECMAScript that greatly facilitates the AngularJS development.

Further we will explain the reasons how Angular makes an advance web development framework:

Does not make you think

Since Angular is a framework, it offers many more "opinions" and serial features than a simple library.

With other similar software, the most common is having to "pull" from several third-party libraries when developing an app.

The most likely is that you need some additional to do the routing, for the management of dependencies, to make calls to REST APIs, to do the testing, etc.

Angular offers more "opinions" as a series, helping you to start without being intimidated by decision making. That is to say, with Angular you already know from the start how to organize the code and how to perform the different tasks you need for the architecture of the application.

A very important issue is that this consistency that you impose also helps companies to hire new programmers or to bring new people to the teams. A new programmer who returns to an Angular project feels at home quickly, because if you know Angular knows the way things are done with this framework. This also facilitates the exchange of programmers between projects.

TypeScript

Although you can program in "pure" ECMAScript, Angular's team decided that it would do all the development with the TypeScript language and almost all the documentation and examples you find out there use this language.

To many people this will seem an error, but the criterion that has followed the team of Angular on the variety of JavaScript to use has many advantages.

For example, ES6 (that is, ECMAScript 2015) offers several different ways of declaring an object, which may confuse many. With TypeScript this does not happen, and all the syntax and the way of doing things in the code is the same, which adds coherence to the information and the way of reading the code.

Although Angular does not force you to use TypeScript, the Angular core team has adopted it and the documentation suggests using TypeScript by default.

This consistency should help to avoid confusion and overload in the decision making derived from starting with Angular. In the long term it is a better and easier way of maintaining applications.

Web components

A component in Angular is a piece of code that can be reused in other Angular projects with little effort that allows a much more agile application development moving from a "costly" MVC to a puzzle game with our components.

The design of Angular adopts the standard of web components. It is a set of APIs that allow you to create new custom, reusable and self-contained HTML tags which you can then use in other web pages and applications. These custom components will work in modern browsers and with any JavaScript library or framework that works with HTML.

The components that you create in Angular are easy to convert into native web components. Hence more reuse of work makes it the first choice of every web application development company.

A path to a stable future

One of the big problems of the current JavaScript world is that there are so many changes and so frequent that everyone ends up "burned" just trying to keep up with the latest news.

In fact, some JavaScript libraries hit so many changes from their appearance until they became stable that most of the information out there is outdated.Not to mention that the code developed years ago is no longer valid and you have to update it.

Here are some interesting patterns of growth and decline of Javascript open-source

Angular is the careful and methodical reinvention of a mature framework such as AngularJS. From the appearance of its first stable version in September of 2016, they assure that there is a team behind taking well-considered and deliberate decisions about the future which will avoid the rush and characterizes other libraries and frameworks.

Great tool support

When you program you will rarely do it in a plain text editor. You will use advanced editors, IDEs and other related tools such as "Linters" (style reviewers and good practices in the code).

The Angular templates store separately the code of the user interface and the business logic, so you can take advantage of the many existing tools to edit this type of files. Other frameworks such as React, for example, mix all the code in the same file. While this may have its advantages and it hinders the use of standard development tools.

In addition, the main editors and IDEs already offer extensions to work with this framework in the most comfortable way possible.

Why Angular is preferred over HTML for web application development?

Shahid Mansuri — Wed, 25 Apr 2018 11:44:03 +0000

As a solid move to revamp the web-based interactions with better responsiveness and improved user experience, the rich internet applications (RIA) are brought to the world. Basically, RIA is a web app that mimics desktop applications’ functions and features with no installation needed on the user’s mobile. It has enabled the businesses to make their reach to mobile user base at a fraction of the cost and time investment. Also, as opposed to the static websites, the RIA is better in terms of design, animation, interaction, and functionalities.

Different proprietary technologies like- adobe flash for animation and streaming of audio and video, Microsoft Silverlight for video streaming and cross-browser and cross-platform compatibility, XForms to enhance functionality, JavaFX for WebView, and 3D and CSS style, and others are used to engineer the best-in-class internet applications that meet customers’ expectations.

The optimal usage of all the technologies works great in building comprehensive applications, which is great. But, how about if a single framework provides every tool and resources to the developers under the hood. It will be stupendous! Isn’t it?

Angular.JS is one of the platforms that provides enormous flexibility to the developers to build user-friendly, feature-rich, platform independent, interactive and graphics-rich internet application without any glitches. Thereby developing and deploying the web apps in the minimum time and cost becomes feasible. The plethora of features makes Angular.JS development an excellent choice for rich internet application development.

Let’s dive in!

MVC architecture

To develop a dynamic and responsive application, the developers are required to separately build and connect different modules using different logics. For combining the modules in a single application, the extra code needs to be written, which is an overhead expense. This is not the event with Angular.JS.
The framework supports MVC architecture which makes it easier to build a client-side application as the developers are just needed to build separate modules and then MVC elements automatically combine and sets them together. It alleviates extra coding for combining the modules and enable responsive application get built in the reduced time.

Leverage HTML

JavaScript interface is complex and provides less freedom into the hands of developers to create attractive and engaging designs. On the other side, HTML that Angular.JS uses to build the user interface is simple to understand and uses short tags, which, in turn, enable the development of clean, clear and organized user interface.

In addition, the directives supercharge the HTML with extra functionalities and additional elements which allow the developers to tailor-made the internet application as the requirement by just assigning the right attribute to the element. The great degree of independence enables the developers to infuse their creativity in developing and designing the website.

POJO model

To create the interactive applications, the data models are used that act as a gatekeeper of the data which monitors the data flow and accountable for the data persistence. Also, having getter and setter function is necessary that adds up several lines of code.

But, POJO (Plain Old JavaScript Objects) data model in Angular.JS is the plain objects that work as a temporary storage space to keep and retrieve the data while working closely with a controller and view. In addition, the properties can be directly added or modified on the POJO, and the developers can set loop over objects and arrays with properties to get the needed result. This way the interactive application can be created with the clean and intuitive coding.

Less Coding

At first, Angular.JS is modular in nature that eliminates the need to write code for combining the different modules. Secondly, it uses HTML to build the interface that uses short tags and attributes. Third, it’s platform-independent, so separate coding is not required for the application to run on the different devices.

Fourth, the directives have their own code and data binding mitigates the work of moving the data manually in view. Fifth, it allows the developers to copy and paste the existing component that they built for another application.

Combining all the facts together, it’s vivid that Angular.JS is power-packed with everything that enables rapid web app development in the reduced lines of code.

Unit testing

The JavaScript framework is popular for handling dependencies that shine in simplifying the testing process. The dependency injection binds together the complete application that aids in managing and testing the application with ease. The dependency injection inserts the mock or testing data inside the controllers to check the data behavior and can analyze what’s the output.

DOM manipulation

Traditionally, the view modifies and manipulate the DOM for adding the data and changing behavior, which requires the designers to focus more on the view. In Angular.JS, with MVC support, the DOM manipulation is done by directives with no involvement of view. It gives the time to the designers to create the best interface that thrives the users.

How AngularJS extends HTML?

Shahid Mansuri — Wed, 25 Apr 2018 08:03:07 +0000

It is a known fact that AngularJS extends HTML vocabulary for your application. AngularJS lets you write write custom directives, letting you to extend HTML with new tags and attributes. Directives can be reused inside and across projects and verified, maintained, and re-used in various projects.

If properly implemented, they can be improved and re-deployed with slight or no change to the applications that use them.

To give you a better understanding what I mean here let me start with a bare HTML code:

AngularJS Extends HTML

AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view.

AngularJS starts when the web page has been loaded. The ng-app directive states AngularJS that the div element is the “owner” of an AngularJS app. The ng-model directive attaches the value of the input field to the application variable name. The ng-bind directive attaches the innerHTML of the p element to the application variable name.

AngularJS Directives

AngularJS lets you extend HTML with new attributes called Directives. AngularJS has a suite of in-built directives which adds features to your web app. AngularJS also lets you state your own directives.

AngularJS directives are HTML attributes with an ng prefix. The ng-app directive prepares an AngularJS application. The ng-init directive prepares application data. The ng-model directive attached the value of HTML controls to app data.

The ng-app directive also tells AngularJS that the div element is the “owner” of the AngularJS application.

The {{ firstName }} expression is a data binding expression. Data binding in AngularJS attaches AngularJS expressions with AngularJS data. Here {{ firstName }} is bound with ng-model=”firstName”. In the following example, two text fields are together with two ng-model directives:

Repeating HTML Elements

The ng-repeat directive, as the name sounds, repeats elements of HTML:

The ng-repeat directive essentially duplicates HTML elements once for each item in a group.

The ng-app Directive

The ng-app directive outlines the root element of an AngularJS app. The ng-app directive shall routinely prepare the application when a web page is loaded.

The ng-init Directive

The ng-init directive outlines initial values for an AngularJS application. Usually, you will not use ng-init. You will use a controller or module in its place.

The ng-model Directive

The ng-model directive attaches the value of HTML controls (input, select, textarea) to app data.

Creating New Directives

In addition to all the built-in AngularJS directives, you can generate your own directives. New directives are fashioned around .directive function. To raise the new directive, name an HTML element with the same tag as the new directive.

A directive must use a camel case name, w3TestDirective, but when raising it, you must use—detached name, w3-test-directive:>

You can invoke a directive by using:

Restrictions

You can restrict a directive to be invoked by only and only some methods. By adding a restrict property with the value “A”, the directive can only be raised by attributes:

The ng-model Directive

With the ng-model directive you can attach a value of an input field to a JavaScript variable.

Two-Way Binding

A change in model reflects in the view, and a change in view, updates the model to it. This happens instantaneously and automatically, which assures that the model and the view are in sync all the time for robust web apps.

Validate User Input

The ng-model directive can offer type authentication for application data (number, e-mail, required):

In the instance above, the span will be showed only if the expression in the ng-show attribute creates true.

Application Status

The ng-model directive can provide status for application data (invalid, dirty, touched, error):

AngularJS Controller

Controllers control applications in AngularJS. Because of the immediate synchronization of the model and the view, the controller can be completely separated from the view, and simply concentrate on the model data. Thanks to the data binding in AngularJS, the view will reflect any changes made in the controller.

The post How AngularJS extends HTML? appeared first on Peerbits.

The Future Predictions about IoT Only a Handful of People Know

Shahid Mansuri — Tue, 10 Apr 2018 11:47:57 +0000

The landscape of internet is growing rapidly. Now computer, laptops, smartphones, and tablets are not the only things of interest. A multitude of devices is being introduced that is internet connected. All devices are now being smart.

The crazy future that science fiction stories promised us is quite near.

The Internet of things is the umbrella term for many internet connected object. Many online and offline mobile apps are making our work easier.

Following are some of the predictions about IoT that you will see come true in the upcoming years.

This article focuses on some of the predictions about IoT that will soon come true. Some main points explained in this article are

Connected devices
IoT for hackers
Smart cities
Secured routers
Usage of smart products
App-specific device ecosystems
IoT for businesses
Some awesome inventions:
Decrease in air pollution by technology
Intelligent parking system

The infographic below also gives some useful information in this regard

1. Connected Devices

It is estimated that by 2020, the number of connected devices will increase at a much rapid rate.

2. IoT For Hackers

In October 2016, the very first IoT malware was introduced.

- It is a strain of malware that as the ability to infect the connected devices.

This malware can easily access the devices using their default login(username and password)
Then it turns those devices into a botnet which is then used for DDoS(Distributed denial of service) attack.
This attack brought screeching halt for hours to many internet service website. Many big hosting companies were also flooded in this attack.
The code of this malware is available as open source for modification.
As a result of which after some time of this attack, a modified version of this code was introduced that infected the windows, computer, and many other connected devices.

Sadly, it is predicted that hacker will keep using IoT for DDoS in the future too.

3. Smart Cities

Right now consumers are using IoT but in future IoT will not be limited to only consumers.

Different companies and also cities will try to become efficient by adopting the sort technologies.
This will prove to be much cost and time effective too.
By using such technologies in cities, it would become easier for cities to manage and collect data remotely.
It will also be easier to automate different processes.

4. Secured Routers

Many such devices remain inside our home and thus it is quite difficult to install any security software on them.
As IoT craze is on the top these days, so the marketers are neglecting the security of the products a bit. Here home router can play a significant role.
They are considered as the entry point of the internet in your home. Thus being the entry point, it can protect the entrance of the internet.
But today routers do not have any security software installed on them. This means that the hackers can easily sneak malware through them.
In future, it is predicted that many secure routers would be made available for people to protect the internet from the entry point too.

Some of the features that such router will have are:

Data encryption
Secure DNS
Automatic security updates

5. Usage of Smart Products

The IoT has now expanded its reach into the home, business and the environment. More and more devices are now being connected to share the data and for real-time communication.

From the consumer’s point of view following are some of the using smart products

Increased energy efficiency
Improved safety
Improved security
Higher quality product

6. App-Specific device Ecosystems

A model is put forward to create a semi-closed device vendor ecosystem for applications.
The benefit of such system is that with such services, it would be made possible for a multi-vendor ecosystem to certify for different brands by their IoT gateways.
The real issue is that most of the comprehensive device management is provided by the IoT application vendors these days.
Which means that all the components are bind together by a single vendor to work?
For example, smart briefcase tag device with work only with the vendor’s briefcase tracking application but it is impossible to make it work with any other vendor’s briefcase tracking application.
Thus if your desire to switch to some other vendor, then you will have to buy a new tag to work with that vendor application.
But with this solution consumer can buy devices from different vendors and can quickly make them work with an application.
Thus IoT industry needs open device management standardization. Such efforts are already being made and will show their effect shortly.
In this way, IoT consumer will surely achieve a new maturity level, and they will then not fear of losing their hardware investments.

7. IoT for Businesses

The business intelligence sector has been analyzing the IoT growth for some years.

It is predicted that almost $t6 trillion would be spent on IoT solutions in the coming five years.

Business will adopt IoT solutions at a bit faster rate than other sectors. The benefits they will get by following such strategies are:

Increase in productivity
lowering the costs of operations

The government will also take a keen interest in such solution to improve the quality of life of their people. They are believed to be the second largest adopter of such solutions.

Consumers will also invest their money in the IoT ecosystems.

8. Some Awesome Inventions

Multi-application gas sensors are being developed that will now detect biochemical threats and will also be able to recognize different diseases just by analyzing your breath.

Such sensors are driving new trends in technology.

Decrease in Air Pollution by Technology

Tired of the smog and air pollution these days?

Well, it is only a thing of the present. Shortly, the situation will be a bit different.

There will be spotlight with embedded video sensors that will be able to adjust the green and the red lights according to the traffic and the time.
This solution will reduce congestion and smog too.

Intelligent Parking System

The vehicles which we see idle at the red light on traffic burn up almost 17% fuel consumption.

The parking system will also be a bit different from what it is right now.
Sensors embedded parking systems will give real-time information about the empty spots through an app.
And in this way, the drivers would be informed about those empty spots by the app.

Do you know almost 30% of the congestion is due to the drivers who keep carving the streets for hours in search an empty spot to park their vehicles?

To know more about the congestion and the selfish driving read here.

Final Words

Thus technology will change the way we live completely. All the work will be machine based. Sensors would be controlling complex tasks and providing real time data for analysis.

The use of sensors for data analytics can be quite beneficial in decision making too.

The post The Future Predictions about IoT Only a Handful of People Know appeared first on Peerbits.

How to build on-demand grocery delivery app for today’s tech-savvy shoppers?

Shahid Mansuri — Wed, 21 Mar 2018 12:13:07 +0000

What e-commerce was to the product industry, Uberisation is to service industry. While the concept of marketplaces has been around for a while now, it never really took off. That was before smartphones came. In case you’re unaware, marketplace is a platform that connects buyers with sellers, customers with service providers, job seekers meet employers etc.

So the question arises what benefits do marketplaces get in facilitating the trade between the two ends of a supply chain? Well, there are many: they receive good traffic on their website, they can make a lot money with website ads and they can always take a cut whenever a trade happens on their platform. Consider on-demand delivery apps as fast-paced marketplaces.

Grocery App US Market Growth

The grocery mobile apps such as Instacart, Grofers and Bigbasket have already left all the business verticals spell bound, hence there is no confusion in saying that future of the grocery delivery mobile apps will continue to bloom in the coming years.

Uber for X concept: demand and supply

Uber for X model is the biggest driver of sharing economy and is, itself, a superset of the on-demand economy. A minimum of two players are part of the model, which is similar to marketplace, except users expect instant provisioning of their demand. At the end of the what matters is delivery, instant delivery in this model.

An Uber user demands a car at his location. An UberEATS user demands food at his home. An Urbansitter user demands baby sitter and TaskRabbit user demands a plumber or electrician.

So two things are important in this model–what and where.

Contemplating delivery apps in on-demand economy

If you look closely, Uber for X model isn’t just about what and where. There are many crucial aspects to it. The most important is when. If I the plumber comes a week later or the baby sitter comes tomorrow, there is no point of calling them at all. That is, I want a plumber within 30 minutes at my office or I don’t. This is the whole point why instant delivery of people and things is so important in on-demand economy.

Another aspect is how. How happy are your users with the service? Doesn’t Uber ask you to rate its service on a scale of 1-5 every time you take a ride?

What does it take—on-demand grocery delivery?

For instant provisioning of demanded person or thing, you must rely on local suppliers and service providers. In case of grocery delivery, you have to strike a deal with a number of grocery store owners in each locality in your service area. You can ask them for discount over marked price or commission over customer’s billed amount.

In addition, you have to find a local delivery agency that would deliver the demand thing to the customer’s place. They charge a fixed rate for each delivery or a percentage of the bill amount. To subdue the charges of delivery agency, you can add delivery charges to a customer’s bill.

Typical features of an on-demand grocery delivery app

While most of them the same features as on any other on-demand apps there are few that are composite to on-demand grocery apps. And like any on-demand app the user has to specify What, followed by where. However, the app needs to know Who, who are you?

Read more: Set up an on-demand grocery market?

Who— for the app to identify person ordering grocery and contact him in case of an issue

Sign up
Sign in
User Profile
Forget Password
Facebook Login
Edit Profile
Verify email and phone number

Who— to learn the customer’s demand and how he would like to pay for it.

Order Menu
Product Search
Search Filters
Search Suggestions
Quantity counter
Shopping Cart
Checkout
Discount Coupon
Payment Gateway

Who— what is the location where customer wants the demanded person or thing

Customer’s Location
Address Search
Switch delivery location
Set Favorites
Pin Address on map

Who— in how much time does the customer expects the delivery

Pick Time Slot
Express Delivery
Track delivery person
Contact delivery person
Cancel Order

Who— are people happy with the services, supplier or quality? If so, how much?

Rate Services
Rate Delivery Boy
Rate Product Quality
Write a review
Support and Help
What are technologies involved?

Types of grocery apps in the market

If you’re coming up with an on-demand grocery delivery app for today’s tech-savvy shoppers, you have many options. Some of the most common type of grocery delivery app belongs to one of the following categories.

Aggregators

Aggregators simply list nearby grocery stores to a user. The user can select one of the nearby grocery store listed on the app. From the online menu, he can add whatever he wants in any quantity to the cart. He checks out of the cart, make payment with various available payment option, and wait for the store to confirm the order. Once the order is confirmed, he can track his order in real-time until he reaches his place. The liability to deliver the order lies solely with the store owner, aggregator merely lists the store and its menu on its platform.

Marketplaces

A marketplace grocery store is quite similar to a grocery store aggregation platform, except the marketplace has its own team of delivery boys to deliver ordered grocery to the customers’ home by means of a retail mobility solution.

Single Stores

In a single store app, the grocery owner commission his own branded app and takes care of everything from maintaining app and keeping an updated online menu to delivering the order to a customer and collecting money.

Grocery Chains

Grocery chain, for example, Walmart tends to have their own on-demand mobility solution, which is similar to a single store at micro level operations.

Which is the best for you?

Well, that depends, while aggregator platforms are almost risk-free endeavors. You risk losing brand integrity if a listed grocery owner refuses to deliver or is being rude to a customer on your platform.

So every type has its own set of advantages and limitations. While marketplaces are good to retain brand reputation, the underlying risks are too many. Of course, the advantage is this that you have full control from taking order to delivering order and collecting money and customers won’t interact with actual sellers.

Single stores are a costly affair if you don’t get many orders.

A comprehensive study of smart retail solutions

The retail industry is evolving over growing pressure from e-retail. Smart Retail Solutions are an integral instrument of the retail evolution.

Smart Retail in real life
Intelligent Retail Solutions
Beacon devices and mobile apps
Engaging In-store experience

Download Whitepaper

The post How to build on-demand grocery delivery app for today’s tech-savvy shoppers? appeared first on Peerbits.