Web Application Development

From an angle, website and web application development is the most easy way and simple way of learning how to develop an application software — despite the fact that it requires us to understand how a network application works. But a lot of beginners in computer science, software development or similar fields tend to learn the basic concepts of web application development to start their career in development. Web developers are the most commonly found type of software developers, and they are categorized under many different sections and categories,

  1. Server-side or backend developer
  2. Client-side or frontend developer
  3. Full stack developers

Web technologies are broad and require a heavy amount of programming, testing and maintenance. That is why, these categories allow developers to focus on what they want to build, and what are prolific at.

Websites development

At the basic level of web development, comes the website development. Website development does not take much complex functionality into considerations and tries to bring the working "application" online. In a website development process, mostly static pages are introduced for the sake of personal portfolio, weblogs, company profiles and for the tasks where the developers does not require to take into considerations the dynamic generation of content. There are several ways in which a website can generate dynamic content, and there are frameworks that support dynamic generation of content as well. The only primary tools/languages that you need to know are,

  1. HTML
  2. CSS
  3. JavaScript

For any of the dynamic websites, you need to introduce another framework/language that runs on the server and builds up dynamic responses for your users. There are a number of web development frameworks and platforms out there, ranging from ASP.NET, ASP.NET Core, PHP, Node.js and all the way to libraries written in Python. You can chose the one you like and starting writing your own websites in no time at all!

Static vs dynamic websites

The concept of static and dynamic websites is the most important, as in that it takes into consideration, how complex a website can get and how the security has to be implemented on the website. Like mentioned, the static website does not generate different data, but instead it generates same data each time a resource is requested. It does not take any input from the users, and even if it does — as in the case of a contact form — it does not allow them to access the server-side resources.

Feature Static website Dynamic website
Page content A static website always contains static pages, they load HTML, CSS, JavaScript and other resources such as images, audio and video, statically and they do not change as the user starts to interact. In a dynamic website, although procedures followed are similar, but the web pages are developed to generate dynamic content based on different parameters or state variables.
Complexity A static website only requires HTML web page, designed with CSS and controlled with JavaScript for basic interactions. A dynamic website however requires a lot of complex configuration and needs some proper planning before starting to develop — I did a lot of planning before writing the code for this web application too!
Usage As already mentioned, a simple personal portfolio, or weblog type website can be developed as a static website with little or no interaction/input from the users A dynamic website, which accepts and processes user inputs requires somewhat more configuration, security layers, and much more management at the server-side in order to provide the best experience to the users.

Since we have talked about them, this service is also a web application, and I have done some configurations at the server-side to support dynamic generation of content based on the URL, whereas in the static website I would have to write a separate HTML page for each of the item here. I know, awkward!

The good part of a website is that they can be build with a website builder tool as well, website builder is a tool provided by the hosting providers where you drag-and-drop the controls on a canvas, to develop a webpage which is then rendered back as HTML, CSS and JavaScript resource to be served as a response to requests made by your users.

Web application development

Starting from the last paragraph of the last section here, this service is a web application and it takes into account everything from basic content, all the way to security and dynamic content generation to user management (P.S, yes, there are accounts here.). The web application development has much more components, than an average website, in that it provides more services and can be an enterprise-ready service providing application.

Web developers start developing an application in a framework that supports web application development, ASP.NET, PHP, Java EE, Node.js etc. are some of the important and most widely used web app development frameworks. Each of these frameworks support a wide range of services, components and features that developers utilize and build their web applications upon. I will not say, which one of these is a better framework because (again,) that will become a personal chatter and which I want to ignore here. Most notable services required by a web application are,

  1. Content management — in my own experience, this must be the top feature provided by a web application.
    • A web development framework is not needed to come shipped with a CMS, but it can be a good feature — WordPress (PHP), Umbraco (ASP.NET) do have them.
    • Building the CMS is a must part, you should avoid executing commands on raw data once your application gets into production.
  2. Resource management
    • This part comes from an HTTP perspective, the ability to provide the routing services for the URLs to be mapped to a resource.
    • A resource is anything, that your users need to request for.
    • Image, audio, HTML or scripts are resources.
  3. User management
    • Almost every enterprise application has a user base, and that is why a web application framework must hold identity services, roles or claim based authentication, and security preventing unauthorized access at the framework level.
    • For example, ASP.NET has Identity framework that lets you manage the control of resources and prevent any unauthorized access.
  4. Error management
    • Some frameworks come with a logging and exception handling, some require you to do that.
  5. Data sources and data management
    • This can be a packaged version, built in version or a library, such as the database drivers or resource endpoints for REST APIs or so.
    • Typically they are a part of the framework, and programming them requires you to understand the data source itself.
  6. Mobile versions
    • Users do not require to sit in front of their desktops, they want your web applications on the mobile device as well, so think of the design with mobile interfaces in mind too, CSS3 media query for instance.

These were just the primary things that a web application developer must understand. There are many other security considerations, data validation, response caching/compressing techniques that a web application must provide to the users. Scalability of the web application also plays a vital role where you must take the asynchrony into consideration, adding multiple threads, parallel execution and then maintaining the race conditions as well.

Long story short, it is a very long process of building a web application.

Progressive web application development

As the last point suggests, mobile versions, the thing is that a web application can be served to a desktop and to a mobile device too. But it does not make any sense if your layout is similar on both the places. A desktop environment can cope up with a small screen layout, but a small screen layout would require to be scrolled a lot in order to find the next elements, such as a Checkout button. Imagine the scenarios, where your user ends up the transaction just because he had to scroll a lot to place an order — yes, it does happen.

There are many ways, to serve a mobile user, you can develop a native mobile application and provide a separate application where users can perform the actions right on their mobile devices. But this requires a separate team to build the entire application, maintain it and manage the API (Web API, see below) for the mobile device that it can consume and progress with the procedures. Which means, more HR things and more money to be spent to build/manage the applications. If you can manage this, good to go.

But if you cannot, or if you are looking for an easy and alternate way, then a progressive web application is the thing you are searching for. A progressive web application is a type of web application that also accommodates for a mobile client, such as a mobile web browser. This approach uses CSS3 media queries heavily and uses the Web technologies to provide information about the web page itself, such as,

  1. Author of the web page
  2. Name of the app to be displayed in mobile device
  3. Theme/style of the page in browser
  4. Icons for the app
  5. Startpage for your app — e.g. your homepage

Progressive web applications are fast, and reliable because all they need from a user is a web browser. Mostly users do not download the app from a marketplace.

Web APIs

Web APIs are the toughest aspect, yet so much easy to learn/implement part of web development that I primarily work with Web APIs only and entirely try my best to avoid web application development with HTML/CSS content. Now that you know that a user can access your web content from a mobile device too, it can be a good approach to consider using Web APIs, to request and provide the data.

There are many benefits of using the Web API,

  • Simple to write
  • Lightweight and straightforward
  • Can be used anywhere an HTTP client is supported; such as .NET framework's HttpClient object.
  • Can handle loads efficiently, as compared to heavy and bloated HTML/CSS content.
  • Can expose functions/operations better

A Web API typically performs the certain operations through simple HTTP requests and instead of responding with HTML/CSS content, it generates response in a data interchangeable format, such as XML or JSON — other formats can also be sent, it is upto you! I enjoy building applications with Web API because it allows me to write good programs, manage everything separately and not use any of the garbage that HTML, CSS and JavaScript might expose out. A simpler, of a Web API type program would more likely only require the following class,

// Namespaces import and definition ignored
// ASP.NET Core 2.0 Web API

[Route("api/students")]
public class CustomApi : Controller {
    // Our data layer
    private CustomDbContext dbContext { get; set; }

    public CustomApi (CustomDbContext dbContext) {
       // Set the dbContext
       this.dbContext = dbContext;
    }

    /* Get the custom objects, let's say, Students
     * As the name of the function suggests, this can be mapped to a GET request
     * Or you can use [HttpGet] attribute
     **/
    public async Task<List<DataObject>> Get() { 
       return await dbContext.Students.ToListAsync();
    }

    // Other HTTP verbs
}

This was a sample of ASP.NET Core 2.0 simple Web API, that can listen to the requests made at http://www.example.com/api/students and return the Student objects to you. Note that, it would be in plain JSON format, without any HTML content there. Benefits would be that you can now parse that JSON content on any mobile platform and present it to the users. The same code can be used for other platforms too.

Since Web APIs run on HTTP protocol, they make a good use of the HTTP verbs to perform certain operations in a much lighter and efficient way, as compared to the static/dynamic web applications.

Much more to this...

Web development is much more than this, provided the amount of work being done in the local client-side scripting, and server-side technology. You can always check back in the chapters of this category to learn more about what is being added.

HCA

HTML, CSS and JavaScript

HTML, CSS and JavaScript are the primary languages of the web applications.