Part1: Introduction to N-Tier Modern Web Application

  • Article

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

  1. It supports convention-based CRUD Actions since it works with HTTP verbs GET,POST,PUT and DELETE.
  2. Responses have an Accept header and HTTP status code.
  3. Responses are formatted by Web API’s MediaTypeFormatter into JSON, XML or whatever format you want to add as a MediaTypeFormatter.
  4. It may accepts and generates the content which may not be object oriented like images, PDF files etc.
  5. 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.
  6. 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 ?

  1. If we need a Web Service and don’t need SOAP, then ASP.Net Web API is best choice.

  2. It is Used to build simple, non-SOAP-based HTTP Services on top of existing WCF message pipeline.

  3. 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

  4. It doesn't have tedious and extensive configuration like WCF REST service.

  5. Simple service creation with Web API. With WCF REST Services, service creation is difficult.

  6. It is only based on HTTP and easy to define, expose and consume in a REST-ful way.

  7. It is light weight architecture and good for devices which have limited bandwidth like smart phones.

  8. 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 are interactive. Modern web applications keep the user engaged by providing constant feedback on their actions. This feedback can come in the form of messages, animations to hide or show elements, mouse-over effects, drag and drop feedback, the automatic refreshing of screen data, animation of various elements, or the implementation of fade-in or fade-out effects. Interactive applications leverage the fast JavaScript engines in modern browsers to perform their client-side tasks.
  • 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.

Technologies

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.

Ajax

For over 10 years, the web has benefited from the ability to replace full-page reloads with Ajax calls. But given the advances in standards such as CSS3 and HTML5, browsers adherence to those standards, and the arrival of powerful, cross-browser JavaScript frameworks, we have all the tools necessary to build highly engaging client-side experiences.

Ajax facilitates a paradigm change in web development from the traditional full-page reload model of server-centric applications to rich, responsive client-centric applications. The client receives data and updates the UI using JavaScript. Bandwidth requirements are minimized because the server responds to requests by returning just the requested data instead of HTML pages (and all their elements) along with the data. The application runs faster because the data requests take less time to complete, and the UI is quickly updated without a full-page reload. Asynchronous calls are essential to keeping interactive and immersive applications responsive from the user's perspective.

JavaScript

JavaScript is a dynamic, functional, prototypal language that has a very close relationship with the document object model (DOM). For both JavaScript and the DOM, there are features you can use with confidence and others you should avoid. Over the past ten years, the web development community has learned a great deal about how to use these together to maximize success. See the "Further Reading" section for resources that explain the recommended ways of using JavaScript. Project Silk adheres to these practices, but we do not present a primer here.

As is true with all environments, you will be most successful using it as intended. If you aren't presently writing JavaScript code according to the patterns currently accepted in the JavaScript community, be sure your team has time to become familiar with them, because you may be surprised. For example, the Project Silk team members who had recently worked in the Microsoft .NET environment needed to ramp up on the following aspects of JavaScript:

  • JavaScript uses object-oriented concepts, but classes and inheritance hierarchies are not the same as in other .NET languages such as Visual C# and Visual Basic.NET.
  • 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.

jQuery

jQuery is an open-source JavaScript library that addresses the challenges of working with the DOM across browsers. It has a straightforward API that can be divided into two calling conventions:

  • 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.

Modernizr

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.

Modernizr is an open-source JavaScript library that detects the support for browser features (geolocation, canvas, SVG, border-radius, etc.) and exposes its findings in CSS and JavaScript. Once a script reference to Modernizr is included, Modernizr will add a CSS class to the html element for each feature it can detect. If the feature isn't supported, the CSS class will start with no- . For example, if a browser supports canvas and not webgl, its html element will look like this: <html class="canvas no-webgl ..."> . Modernizr also exposes a Modernizr JavaScript object that has Boolean properties for each feature it can detect.

 

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.