Part1: Introduction to N-Tier Modern Web Application
We are living in the era of modern applications development where customer needs are changing all the time, I’ll be writing this blog Set to give the Developers who are struggling to build a modern, enterprise ready, that can scale based on customer needs. The Number of Technologies around us are too many and changing rapidly. So I’ll try to give everyone a startup architecture and design that they can use it to design and implement their solution as quickly as possible
Let’s Start this thread a start and think about what are the tools and Ideas We will be using to get this up and running.
We will be running our Solution on 2 Major Points, The Backend Planning and the Technology of Choice will be webAPIs on top of DBaaS and ASP.NET. The Front end will be JQuery Application and Will dicuss this in details after understanding what are we these 2 technologies provide us.
Back end Planning and What is Web APIs
Web API Features
- It supports convention-based CRUD Actions since it works with HTTP verbs GET,POST,PUT and DELETE.
- Responses have an Accept header and HTTP status code.
- Responses are formatted by Web API’s MediaTypeFormatter into JSON, XML or whatever format you want to add as a MediaTypeFormatter.
- It may accepts and generates the content which may not be object oriented like images, PDF files etc.
- It has automatic support for OData. Hence by placing the new [Queryable] attribute on a controller method that returns IQueryable, clients can use the method for OData query composition.
- It also supports the MVC features such as routing, controllers, action results, filter, model binders, IOC container or dependency injection that makes it more simple and robust.
Why to choose Web API ?
If we need a Web Service and don’t need SOAP, then ASP.Net Web API is best choice.
It is Used to build simple, non-SOAP-based HTTP Services on top of existing WCF message pipeline.
Its Readable and Browser friendly it returns a string at the end of the day and how you want to format this string it’s all about your design needs
It doesn't have tedious and extensive configuration like WCF REST service.
Simple service creation with Web API. With WCF REST Services, service creation is difficult.
It is only based on HTTP and easy to define, expose and consume in a REST-ful way.
It is light weight architecture and good for devices which have limited bandwidth like smart phones.
It is open source.
With that said our Backend will be designed on top of SQL and Web APIs N-Tier Architecture we will discuss this in details later on this blog.
Modern Web Apps
What is the Definition of a Modern web app this is a good question that comes to every developer mind when we think about their application is it a modern web app or no? The Answer is in the next few lines
Characteristics of Modern Web Applications
While there are many types of modern web applications, addressing many different needs, they all have some characteristics in common.
- They are standards-focused. To have the broadest reach across multiple platforms and devices, applications attempt to implement the current and evolving standards and adopt future standards once ratified.
- They limit full-page reloads. Modern web applications seek to limit the number of full-page reloads. Reloads are much slower than a localized Ajax call to update a portion of the UI. Full-page reloads also limit the ability to animate state or page changes. By not performing a full-page reload, users can be kept in context, providing a fluid experience as they navigate from one task to another.
- They are asynchronous. Modern web applications use Ajax to dynamically load data, page fragments, or other assets instead of performing a full-page reload to acquire data or HTML content. Because the loading of data is asynchronous, the UI is able to stay responsive and keep the user informed while the data request is being fulfilled. This asynchronous on-demand loading also reduces application response time because requests can be tuned to return only the data and other content that needs to change.
- They manage data. When applicable, modern web applications provide client-side data caching and prefetching to boost client-side performance. This enables the UI to immediately respond to user input gestures because it does not have to make a call to the server for data. Data caching also serves to minimize the impact on server resources, increasing application scalability because fewer calls to the server are required.
We will be using Lots of Technologies on this Project and since I am Just Getting Started to let’s List the Basic Technologies we will be using and More will be added based on the needs of each section.
- Understanding closures and variable scoping is important. They are used intentionally and often by allowing variables defined within one scope to be used in another function.
- The object that the this keyword refers to changes based on where it is used. For example in a single method, this may refer to the object the method is defined on, and in a loop within that same method this may refer to the current item of the collection being iterated over. You should understand its rules.
- Objects without type definitions are very common and use an object literal syntax. The commas between properties and functions used in these object literals may cause syntax errors until you are familiar with them.
- Functions are called on the jQuery object itself. For example, the extend function merges the properties and methods of two different objects together. It looks like this: $.extend(targetObject, objectToMerge) .
- Methods are called on the wrapped set. A wrapped set is the result of a query that uses a selector to find elements in the DOM. To call a method on a wrapped set of elements, a selector is used to select elements in the DOM. For example, to add the listing CSS class to all ul elements directly inside a div element, $('div ul').addClass('listing') can be used.
jQuery also provides features to raise and handle events, make Ajax requests, and process the data returned from Ajax requests. To be successful developing with jQuery, you should:
- Know that the selector syntax uses and extends the CSS selector syntax. The better you're able to leverage this syntax, the cleaner your HTML can be.
- Understand what the wrapped set is, how it's different from an array of DOM elements, and which you're working with at any given time. For example, when using $.each, inside the callback, this is not wrapped.
- Understand that animations are asynchronous and are queued. Use a named queue or the stop method to gain more control over how the animations behave.
In the past, the client-side application would use navigator.userAgent to determine which browser was in use and choose its code paths accordingly. Today, the accepted practice is to explicitly detect each feature the application intends to use.
Lets Have a Break for now and The next Post will be about the Back end Basic Architecture so we can have something to kick of our Web Project with.