Intro to web development|technology:
------------------------------------
browser[client] webserver
-------------------------> website[asp.net,php,jsp,..]
|
execution -->backend part
|
<--------------------------output
html+css+javascript
Here, with in the browser what execution is happening that is called as front end part. The execution which is happening at the web server is called as back end part.
Here web development can be classified into 2 parts
1.backend part
the execution which takes place with in webserver system is
called backend part
2.frontend part
the execution which takes place with in browser[client system]
is called frontend partBefore 2008, more execution was placed on the web server.
Note:
Now more number of users increased for web[websites] because of smart devices usage[mobile, tab,..],this will increase network traffic and more burden on webserver *From 2008 more execution burden was placed on browser to reduce burden on on webserver, this leads to importance for frontend web development *there are different libraries and frameworks provided for frontend web development.
library-->it will be specific to particular task [narrow] framework-->environment with end to end tools for entire web development, it is a collection of libraries [wider] 2006---jquery---->jquery team[john resig]-->it provides shortcut way to work with javascript | ->javascript library ->it is collection of javascript functions ->it will focus on DOM manips and traversal 2010----angularjs-->google | ->javascript framework ->no object oriented support ->handling complex ui will not be easy2015-----angular2--->google | ->typescript framework ->component based arch with object oriented support ->handling complex ui will be easy ->it provides more options as framework compare to reactjs[library] *more databinding options *built-in validations support *dependency injection is supported
They are three reasons, why we need to learn Angular
1 Unified User Experience/Unified UX
2 Fluid User Experience
3 Search Engine Friendly URLS
Unified User Experience /Unified UX
The web application, must have an unified experience across devices.
An application must reach broad range of devices i.e. from pc to mobiles.
now what client wants is develop an application so that it should work in both web and mobile
It must have similar experience even on low bandwidth device.
Unified UX: Mobile users must get access to everything features of your application should not be restricted according to the device.
Application must run on any device. it must have the same feel n look.
Fluid User Experience:
User must stay on only one page and get access to everything from that page
Page must get updated with new details without reloading the page.
it must avoid navigation using pagination.
User and SEO Friendly URLS
User must be able to browser the content of the application based on the previous search criteria.
Application must support routing technique to handle this.
Now, the question is how to build this kind of application.
Single Page Application
Can I use
JavaScript-Yes
jQuery-Yes
knockout.js-Yes
backbone.js-Yes
Angular-Yes
What are the issues with jQuery ?
DOM Manipulation:
How to manipulate the view effectively.
Back Button:
What happens when we press back button,back button cannot be handled.
Routing
Readable URL( Query String )
Is URL User friendly and SEO Friendly.
Data Binding
How to bind the data from the model to view.
View Loading
How to load the view.
So solution for this is better use the framework.
jQuery Flow
Jquery Libraray----> Page is requested from Browser---> Page loads the static Dom---> library Loads--->library is passive--->browser uses event to make library active--->static dom converts into dynamic dom
Angular Flow
framework--->page is requested from browser--> page loads the static dom-->framework loads into browser---> framework is active--> static dom converts into dynamic dom
Framework:
A software framework is an architectural pattern responsible for not just building the application , but also control the application flow.
A service is a collection of factories and every factory is defined with a set of functions.
Service represents business logic with predefined functionalities.
A component comprises of template with html, css and typescript.
*the above development is called as stack based development
1.MEAN stack
M----Mongodb [database]
E----Expressjs[middleware]
A----Angular [frontend app]
N----Nodejs[backend]
Introduction to Angular
Angular is a typescript framework provided by google to develop web application and mobile application.
Angular as a framework is providing end to end tools required for entire front end
web development
building---->debugging--->unit testing-->production build
|
entire frontend web development
|
end to end tools
|
typescript language
debugging files[map files]
jasmine and karma tool for unit testing
Ivy and AoT compilers for provided for production build
angular is developed using typescript language and programming with in angular
will be using typescript language, so angular is called as typescript framework
->typescript language is developed by Microsoft in the year 2012
->google used typescript language of Microsoft to develop angular framework
in the year 2015[Angular2]
->angular is having the power of 2 big companies Microsoft[typescript]
and google[angular]
*angular is not an extension of angular.js,it is completely rebuilt from ground level using typescript language
angular vs react:
-----------------
1.angular is a typescript framework
reactjs is a javascript library
2.angular is less dependent on thirdparty packages,it comes with
so many builtin services
[like httpclient service is available for ajax]
react is more dependent on thirdparty packages
[like axois third party package is required for ajax]
3.angular as a framework comes with so many features
[like more databinding options,builtin validations,pipes,dependency injection,..]
react.js as a library will focus more on UI part, less features compare to angular
No comments:
Post a Comment
Thank you for visiting my blog