Flutter , Angular and React

 

Flutter

1.       Google created.

2.       Open source Flutter software development framework

3.       create mobile applications for iOS and Android from a single Dart codebase.

4.       Flutter utilizes Dart, object-oriented programming language optimized specifically for developing mobile apps and web apps

a.       Dart code is compiled ahead of time into native machine code using the Flutter compiler, enabling apps to achieve exceptionally high performance.

5.       A standout feature of Flutter is its incredibly fast hot reload functionality, which allows developers to experiment rapidly and visualize changes in UI almost instantly without losing the application state.

6.       create mobile app interfaces reflecting Google's modern design principles using Material Design and Cupertino widgets.

7.       Flutter has a widget binding, namely InheritedWidget. It binds two or more widgets together (one provider and some consumers) so that whenever one updates, all of its dependencies are forced to update too.

8.       Popular apps built using Flutter include Hamilton Broadway Musical, Google Ads, eBay Motors, Groupon, Reflectly meditation app, etc.

 

Pros

 

• ·       Single Dart codebase to build iOS and Android apps
• ·       Stateful hot reload enables instant visual updates without recompilation
• ·       Excellent performance powered by Dart's compiled machine code
• ·       Extensive catalog of customizable Material and Cupertino widgets
• ·       Increased software development speed and iteration facilitated by features such as hot reloading
• ·       Expressive and easy-to-learn Dart programming language

Cons

• ·       As a relatively new SDK, it has a smaller ecosystem of libraries and tools than older alternatives.
• ·       Restricted access to some exclusive platform-specific APIs and features
• ·       Primarily focused only on mobile app development, it is less suitable for web
• ·       Very few developers know the Dart programming language, leading to a talent shortage
• ·       Architectural changes and breaking updates are likely as the framework matures 

Angular

1.       by Google

2.       web application development framework

3.       Angular apps are written in TypeScript, an enhanced version of JavaScript that brings optional typing and other improvements aimed at large-scale apps. 

4.       The framework uses an MVC architecture style to separate an app's concerns into distinct Models, Views, and Controller components.

5.       two-way data binding, which automatically syncs data between model and view

6.       dependency injection to manage relationships between various app modules.

7.       Popular Angular sites include PayPal, NBC, UPS, Lego, and Forbes.

 

Pros

• ·       The full-featured framework integrates a wide range of web functions
• ·       MVC architecture enables the separation of concerns
• ·       Powerful data binding(two-way) synchronizes model and view components
• ·       Extensive toolbox including testing suites, lint test
• ·       High focus on reusability and maintainability
• ·       Simplifies form building and form validation
• ·       The large community provides many reusable libraries
• Cons
• ·       Steep learning curve due to the vast API surface area
• ·       More complex compared to lighter-weight libraries like React
• ·       Bulkier apps due to a large framework codebase
• ·       Longer bootstrap and rendering times result from complexity
• ·       Demands strong TypeScript knowledge
• ·       Upgrades between versions may require significant rework

React

1.       by Facebook 

2.       open-source JavaScript front-end library 

3.       use to build interactive user interfaces and web application front-ends

4.       React aims to simplify the development of complex, changing data flows in web UIs

5.       React builds on basic HTML/CSS/JS to provide a declarative component model. 

a.       UIs are broken into encapsulated, reusable pieces called components. 

6.       Components use a templating language called JSX that resembles HTML to render content, can have a local state, and update dynamically in response to data changes.

7.       Events triggered from one component bubble up to notify parent components automatically through a unidirectional data flow paradigm. ( first the model state is updated, and then it renders the change in the UI element. )

8.       Virtual DOM tracking of changes combined with selectively re-rendering only components that change enables very high performance compared to raw JavaScript ops.

a.       This helps power data-intensive apps like Facebook and Instagram that show constantly updating content flows.

9.       Popular Apps

Facebook, Airbnb, Uber, Netflix, Instagram, WhatsApp, Dropbox etc.

 

 

Pros

• ·       Promotes reusability via encapsulated components
• ·       Components offer separation of concerns
• ·       Virtual DOM provides excellent performance gains
• ·       Unidirectional data flow simplifies data handling logic
• ·       The large open-source ecosystem of reusable React component libraries
• ·       Easy integration into existing codebases
• ·       The growing developer community provides abundant support resources

Cons

• ·       Only handles the view layer, not a complete framework
• ·       Many auxiliary libraries are needed for complex apps (routing, state management)
• ·       Code complexity from JSX and nested component trees
• ·       Steep learning curve mastering inner workings like state and lifecycle
• ·       Rapid evolution means breaking API changes, which is not uncommon
• ·       Less out-of-box project scaffolding sets up

Tech Stack

Flutter uses the Dart programming language and provides its robust widget set for building mobile interfaces. This allows it to compile code into native machine code for excellent performance.

Angular utilizes TypeScript, a typed superset of JavaScript and HTML and CSS, for building responsive web applications. It compiles down to plain JavaScript code to run in browsers.

React Native is based on the React JavaScript library and uses the same paradigm of components. It compiles code to native UI components while communicating with native code through a JavaScript bridge.

 

Learning Curve

Flutter offers a moderately easy learning curve for developers with prior experience in object-oriented code and mobile development. Its declarative widget-based approach is intuitive.

Given the complexity of its technology stack, Angular has a rather steep learning curve, including TypeScript, components, directives, services, dependency injection, and hierarchical injectors.

React Native is moderately easy to get started with for JavaScript developers who understand React concepts like components, states, and props. However, bridging to native code can have a learning curve

 

Flutter vs Angular vs React: The Ultimate Showdown [2024] (simplilearn.com)

https://www.javatpoint.com/angular-vs-react

https://stackoverflow.com/questions/52590759/does-flutter-have-data-binding

Angular Beginner Links

 HTML 5 

Basics

https://www.javatpoint.com/html-tutorial

https://www.studytonight.com/code/html/

https://www.w3schools.com/html/default.asp

CSS 3 

Basics

https://www.w3schools.com/css/default.asp

https://www.studytonight.com/cascading-style-sheet/

https://www.javatpoint.com/css-tutorial

Paid https://www.udemy.com/course/the-ultimate-css-3-bootcamp/

Java Script Basics

https://www.studytonight.com/javascript/

https://www.w3schools.com/js/default.asp

https://www.javatpoint.com/javascript-tutorial

https://www.udemy.com/course/testing-angular-apps/

Unit Testing Basics

Paid https://www.udemy.com/course/protractor-tutorial/

Bootstrap 3 

Basics

https://www.quanzhanketang.com/bootstrap/

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/

https://devdocs.io/bootstrap~3/

https://bootstrapdocs.com/v3.0.3/docs/getting-started/

https://www.javatpoint.com/bootstrap-tutorial

Paid https://www.udemy.com/course/bootstrap-4-bootcamp/

Angular

https://www.w3schools.com/angular/

https://www.javatpoint.com/angularjs-tutorial

https://angular-templates.io/tutorials/about/learn-angular-from-scratch-step-by-step

https://www.javatpoint.com/angular-7-tutorial

https://angular.io/tutorial

https://www.udemy.com/course/the-complete-guide-to-angular-2/

https://www.udemy.com/course/the-complete-angular-master-class/

https://www.udemy.com/course/starting-with-angular-7/

Angular - Day1

 Technologies

HTML5

CSS

ES6 - Javascript standard meant to insure the interoperability of the WEB pages across browsers.

jQuery

DOM - Document Object Model

When you load any HTML document to browser it will load as a DOM tree. This makes easy to traverse.

Can find easily. - can use XPath on top of DOM

Can DOM manipulation.

In Angular - you should have proper tag structure - if you open , should have a close tag - else will give an error.

AJAX - Asynchronous Javascript And XML

All operation happens without post page. part of the page refresh, without page getting submit.

1. when you post, you have to maintain session and other things properly

2. User experience - user does not like refresh every time

3. performance

4. simplify coding - not state maintain any other complex 

Even in Angular - we use AJAX technology.

eg: when you make like in FB, your details being shared-submitted without page refresh.

REST - Representation State Transfer

everything as a resource.

simplicity - mostly JSON, better performance

JSON- JavaScript Object Notation

Use Chrome dev tools 

TypeScript*.ts ---> TS Transpiler --> ES6*.js 

you can write Javascript code using TypeScript. It will be Transpiled into js

There is a difference between trampler and compiler

Compiler convert High Level language code into machine level code/ byte code only my machine or Os can understand

Transpiler convert code into one language to another language.

why ? my browser understand only JavaScipt, CSS and 

That's why we need transpiler. --> ts transpiler

angular is more towards reactive programming. 

Nodejs - your development platform. use as tool.

npm - node package manager

lite-server - just a web server

Bootstrap - why we need

does not create additional CSS. brings responsiveness.

Media query - CSS 3

ECMA - European Computer Manufacturers Association

Karma - unit testing

Jasmine - Framework

Visual Studio Code

Error in npm install

I get below when i tried to run "npm install" for a module i checke out from git.

----------------------------------------------------------------------------------------------------------------
npm ERR! code E404
npm ERR! 404 Not Found: har-validator@5.1.2

npm ERR! A complete log of this run can be found in:

------------------------------------------------------------------------------------------------------------------


Issue : 
with " har-validator"  in "package-lock.json" file

Solution
Delete the "package-lock.json"  and re run "npm install"

Simple Angular Application to Call A Rest Webservice

Here I make an simple angular application to call a rest web service call

1. create sample rest web service. get an employee with id

http://cgenit.blogspot.com/2015/06/creating-webservice.html

2. let's create a simple web application calling this rest service

we call this rest service with

http://localhost:8080/Rest/rest/employeeservices/getemployeedetail?employeeId=1

3. We use the same "index.jsp" for this application
4. we create "hello.js" to put the angular based scripts
5. These script is called inside the "index.jsp"


the two files should be inside "webapp" folder . For this application path would be "Rest\src\main\webapp"

 6. build the project with maven and deploy the Rest.war file inside the tomcat and access the application using the url http://localhost:8080/Rest/

you will simply get an output as below.

Rest Application code structure

Below are the code snipets

hello.js

===========================================================

angular.module('demo', []).controller(

'Hello',

function($scope, $http) {

$http.get('http://localhost:8080/Rest/rest/employeeservices/getemployeedetail?employeeId=1').then(

function(response) {

$scope.employee = response.data;

});

});

=========================================================

index.jsp

============================================================

<!doctype html>

<html ng-app="demo">

<head>

<title>Hello AngularJS</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

    <script src="hello.js"></script>

</head>

<body>

<div ng-controller="Hello">

<p>The ID is  = {{employee.employeeId}}</p>

<p>First name = {{employee.firstName}}</p>

<p>Last name  = {{employee.lastName}}</p>

<p>Date of join = {{employee.dateOfJoining}}</p>

<p>Department = {{employee.department}}</p>

<p>Email{{employee.email}}</p>

</div>

</body>

</html

============================================================

Modules and Routes

This summary is not available. Please click here to view the post.

Creating View and Controller

this is the second article continue with angular basics and followed with the http://cgenit.blogspot.com/2015/04/angular.html

Here we are going to discuss the first major concept, View and controller.
Angular provides a nice mechanism called view and controller which enhances the readability and re-usability of the code.

controller has the data and the function. controller bind to view with something called $scope.
This is the glue between controller and the view.
Controller need not to know anything about the View and View does not want to know anything about the Controller. This achieved simply by using the concept of $scope.

angular has lots of objects defined with the $ sign and you will see them as you dig up more with the angular.

Let's go to example, let's try to do the same example we did to customer data set using Controller.


---------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div>
<p>
Name: <input type="text" data-ng-model="name">
</p>
{{name}}
</div>

<div data-ng-controller="SimpleController">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li
data-ng-repeat="customer in customers | filter:name | orderBy:'city'">{{customer.name
| uppercase}}- {{customer.city | lowercase}}</li>
</ul>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('SimpleController', function($scope) {

$scope.customers = [ {
name : 'Shaun',
city : 'Phoenix'
}, {
name : 'Dilan',
city : 'Chicago'
}, {
name : 'Mike',
city : 'NewYork'
} ];
});
</script>
</body>
</html>

-------------------------------------------------------------------------------------------------------------------

We haven't change the logic used in previous example in http://cgenit.blogspot.com/2015/04/angular.html

Here we have introduced a Controller.
Before that we have given a name to the application "myApp". If you see the opening HTML tag you will that.
Then we move to definition of the Controller.

We have defined inside separate area , as a separate script. If you familiar with packaging and modularising , now you should see that.

We are defining the Controller in a separate script, inside "script" tags.

First, we define a variable or a holder for application.
     var app = angular.module('myApp', []);
we have defined a variable "app" or module  with module giving our application name "myApp"
don't worry about empty braces.. well that's for dependency injection.. or we can say module myApp depend on applications, can be given inside those.

Second , then we define the Controller
    we define the controller as function. this is more like simple java-script function. we have included $scope in the Controller definition. This is scope which acts as a glue between Controller and the View.

As we have included Controller inside a separate script , you can simply include that into separate file and include in the main file.

So when we are using Controller , with use of  data-ng-controller  , we give the name of the Controller we are using. the functions and the data defined within the scope of the specified Controller will be available. In this case , we have given inside a div tag, and "SimpleController" Controller data and functions will be available within the div tag.

So when you run the above code , you will see the same output as the previous example.

Angular

AngularJs, commonly called as "Angular" is an open source web application framework mainly maintained by Google and community of developers, which helps a lot in development of SPA, Single Page Application.

You  can download Angular from
https://angularjs.org/

and for more information
http://en.wikipedia.org/wiki/AngularJS
http://www.w3schools.com/angular/

Here i am going to discuss few key words associated with Angular. Those include

• Directives, Filters, and Data Binding , Expressions
• Views, Controllers and Scope
• Modules, Routers and Factories

Why Angular ??? It's framework... Good SPA framework
SPA ????   Single Page Application

As a framework it gives
Data Binding, MVC, Routing , Testing,  jqLite, Templates, History, Factories  etc.
jqLite - for DOM manipulation.

So it has
ViewModel , Controllers , Views , Directives , Services , Dependency Injection , Validation much more..


First we create simple html page and add the angular to it.

----------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>

</body>
</html>

----------------------------------------------------------------------------------------------------


I have added the reference to the web, you can download the angular from site https://angularjs.org/ and give the reference straight.

----------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="angular.min.js"></script>
</head>
<body>

</body>
</html>

----------------------------------------------------------------------------------------------------


Now we are ready to go with the Angular, So once we add the Angular to page.. Next we will look at key concepts... Directive , Data Binding ...

Directive
Angular extend HTML with ng-directive. So directive start with ng-
angular has various directives and some are
ng-app  = directive defines AngularJs application
ng-model = directive binds the value of the HTML control (input, slect, textarea..) to application data
ng-bind = directive binds application data to the HTML view


Now let's write a simple angular application with directives

----------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>


<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>
----------------------------------------------------------------------------------------------------


You can see above, highlighted, i have used few directives.
ng-app - declares this as an angular application
then we have we have input text box and we have bind the value of the text box to application using ng-model directive , we have use "name" as the reference.
Now we need to show the application data back into HTML view.
ng-bind directive binds that application data to the HTML view.

That's how angular application is defined and it's data been bind into application and show application bound data back into HTML view.

Behind the scene : What ng-model does behind the scene is, it's going to add a property up in the memory called 'name' into what's called the "scope". you will understand this concept, as you will read through.


Now we have learnt three basic angular directives.

Note : without using ng-bind , we can use {{}} to bind application data to HTML view.

----------------------------------------------------------------------------------------------------

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  {{name}}
</div>

----------------------------------------------------------------------------------------------------

This will have the same results

{{name}}  , this is known as data binding expression.
So we now know expressions also, this is much similar to JavaScript expressions..

Now we have learnt four key words, Next ..
let's do the iteration.. key feature in any language..


----------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html data-ng-app="">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>


<div >
  <p>Name: <input type="text" data-ng-model="name"></p>
  {{name}}
</div>

<div data-ng-init="names=['Shaun','Dilan', 'Mike', 'Paul']">
  <h3>Looping with the ng-repeat Directive</h3>
  <ul>
  <li data-ng-repeat="personName in names">{{personName}}</li>
  </ul>
 
</div>

</body>
</html>

----------------------------------------------------------------------------------------------------


As you can see we have defines a new angular application.
Previously we have defined ng-app directive inside the div tag
so if we need to define a new application then we need to define ng-app in the next div tag also.
to avoid that we have added the ng-app directive to the html root element.
by doing, we have defined the whole app as a angular application.

second div tag contains the repeated elements.

here we have defined an array of elements. to do that we have used another angular directive,
data-ng-init  , this directive initializes the names array in to the application.
Now we have initialized the elements of array.
let's repeat the elements and show that inside the HTML view.
to that we have used data-ng-repeat  directive, this helps us to define and loop or iterate over the elements. we are now iterating over the elements in the names array.
we have defined the repeat element with "personName in names"
Here "personName" is the temp[orary holder while "names" is the array of elements we are using to repeat. This is much similar to foreach loop we are using in javascipt or Java.
Then we bind the application data inside the iteration, or the repeat element with data binding expression {{personName}}
Note : we have used the temporary value holder to bind data to the HTML view from the angular application.

This will have output as below, above the "Looping with the ng-repeat Directive" will have the text box of previous application. you can see the output by saving the code into notepad and save as html file and running ina browser.

output
===========================================================

Looping with the ng-repeat Directive

• Shaun
• Dilan
• Mike
• Paul

===========================================================


So we have learnt few directives.
go to  https://docs.angularjs.org/api
you will have all the directive list with their documentation.

Now let's look at filters
To discuss filters we define new set of data elements as Customers and do the filtering for properties of customer.
we can use the ng-init to initialize the customers data.
First we initialize data and print that.

----------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html data-ng-app="">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>


<div>
<p>
Name: <input type="text" data-ng-model="name">
</p>
{{name}}
</div>

<div data-ng-init="names=['Shaun','Dilan', 'Mike', 'Paul']">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="personName in names">{{personName}}</li>
</ul>

</div>

<div
data-ng-init="customers=[{name:'Shaun',city:'Phoenix'},{name:'Dilan',city:'Chicago'},{name:'Mike',city:'NewYork'}]">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="customer in customers">{{customer.name}}- {{customer.city}}</li>
</ul>

</div>

</body>
</html>
----------------------------------------------------------------------------------------------------


This will print the name and city pairs of customers.
Now let's add the filter.
We have the name text filed , which we had added in the first application. this is third application.
let's use name as a filter.

----------------------------------------------------------------------------------------------------

data-ng-init="customers=[{name:'Shaun',city:'Phoenix'},{name:'Dilan',city:'Chicago'},{name:'Mike',city:'NewYork'}]">

Looping with the ng-repeat Directive

{{customer.name}}- {{customer.city}}

----------------------------------------------------------------------------------------------------

it's very simple.
Just add the pipe character and filter word as shown in highlighted text above.
After the filter, give the property you are using to filter. Here we have used "name", that is data reference used to bind html text box data to application.
you can see the dynamically list will change in the HTML view.
very smooth and simple.

we can give order by filter also.
let's put order by to city

----------------------------------------------------------------------------------------------------

<div
data-ng-init="customers=[{name:'Shaun',city:'Phoenix'},{name:'Dilan',city:'Chicago'},{name:'Mike',city:'NewYork'}]">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="customer in customers | filter:name | orderBy : 'city'">{{customer.name}}- {{customer.city}}</li>
</ul>

</div>
----------------------------------------------------------------------------------------------------

Note : we have given order by field property value inside single quotes.
This will arrange data order by city name.

we can use more filters.
let's add uppercase to names and lowercase to city values.

the whole code will be as follows

----------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html data-ng-app="">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>


<div>
<p>
Name: <input type="text" data-ng-model="name">
</p>
{{name}}
</div>

<div data-ng-init="names=['Shaun','Dilan', 'Mike', 'Paul']">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="personName in names">{{personName}}</li>
</ul>

</div>

<div
data-ng-init="customers=[{name:'Shaun',city:'Phoenix'},{name:'Dilan',city:'Chicago'},{name:'Mike',city:'NewYork'}]">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li
data-ng-repeat="customer in customers | filter:name | orderBy:'city'">{{customer.name
| uppercase}}- {{customer.city | lowercase}}</li>
</ul>

</div>

</body>
</html>
----------------------------------------------------------------------------------------------------

you can define your own custom filters. to look at all the filters provided by the angular go to
https://docs.angularjs.org/api and goto filters section.
https://docs.angularjs.org/api/ng/filter
you will see the list of filters provided by the angular.