Introduction to Web Programming

General Concepts

When first facing this new development environment, it's easy to become confused due to the enormous variety of "technologies": HTML, CSS, Javascript, JQuery, PHP, MySQL, ASP.NET, Bootstrap, SQL Server, Ruby on Rails and many more.

The answer to this problem is that every web-related technology can be classified in a certain category. All technologies in that category are essentially equivalent, and deciding which one to use is no more than an administrative decision (though, as usual, some technologies are better suited than others for specific problems or scenarios).

Once we know which category a technology belongs to, we already understand 60% of all there is to know about it. The remainder can be completed with a good reference for the API and syntax.

General structure of a web application

Every web app does essentially the same, no matter which technologies it uses:

  1. Provide a query/data input interface (frontend): This allows the user to enter data. Said data is usually called a "query" because they are used to dynamically consume a service provided by the computer (or computers) where the web server is hosted.
  2. Transmit the query to the web server, typically using the HTTP protocol.
  3. Process the query inside the server (backend): The web server processes the query data. This is where server-side scripting kicks in (more about this later).
  4. Create the response for the query: The format is defined by the query. Usually, it's XML, SOAP or JSON (with JSON being the current defacto standard).
  5. Send the response to the client, typically over the HTTP protocol.
  6. Process the response in the client side: This might be as simple as rendering HTML, but it involve calculations and extra logic which can be defined using client-side scripting (more on this later).

Let's see some examples of how web applications fit into this structure. The possible ways to combine technologies are virtually endless. Among them:

  • The client 1)requests the web browser to 2) contact a web server using the HTTP protocol and 3) asks for a 4) specific HTML document which the server 5)returns as is so that 6) the browser can render it.
  • There is a 1) Java client (a JVM running on the client computer) that 2) sends an ecrypted request, using HTTPS, to a Java Web Server that 3) processes the request using a Java Servlet which in turns uses a CORBA object to programatically generate 4) business data in XML format with an associated XSL style sheet which is in turn 5) sent to the client to 6) be rendered by the web browser as a tabe.

Types of web technologies

A while ago, we said that every web tech belongs to a category. There are various such classifications, but one of the simplest is the following:

  • Presentation: Defines how to display data on the client side. Examples: HTML, CSS. Some people set apart those technologies used to send the data: JSON, SOAP, RESTful services.
  • Server-side scripting (backend): When static HTML pages are not enough, they can be dynamically generated by the server before being sent to the client. This is possible using server-side scripting languages. Examples: PHP, ASP.NET, Perl, Python, Ruby.
  • Client-side scripting (frontend): Nowadays, all web browsers have scripting engines. This allows for the execution of code in the client computer, which saves server resources and lets pages be more "interactive". Examples: Javascript (defacto standard).
  • Data Access: Database engines. These are the same as in Desktop programming. Examples: MySQL, SQL Server, Oracle.

Client-side scripting Libraries

Programming with "bare bones" Javascript is quite gruesome and error prone. That is why many libraries have surfaced to make developmente more productive: JQuery, Bootstrap, MochiKit, prototype, mootools. Aside from these "lightweight" libraries, there are big frameworks which offer a wider array of premade functionality, such as : AngularJS, YUI, Dojo, Backbone. Among all these, JQuery has emerged as the current defacto standard.

Comments

Post a Comment

Popular posts from this blog

VB.NET: Raise base class events from a derived class

Spanish version / Versión en Español Say we: Have a class we want to divide into subclasses The future base class has events The refactoring leads us to the need of raising an event declared in the base class, from a derived class. When we try to do point 3, we will get a compile error saying that a derived class cannot raise events from a base class. To get around this, we add a protected method in the base class which encapsulates the RaiseEvent call, and call that method from the derived class using MyBase. This way: In the base class (parameters as needed): Protected Overridable Sub OnMessageGenerated(ByVal NewSender As Object, ByVal NewMessage As String) RaiseEvent MessageGenerated(NewSender, New MessageEventArgs(NewMessage)) End Sub And in the derived class: 'Do stuff 'Raise base class event MyBase.OnMessageGenerated( Me, "Message" ) 'Do more stuff... References: Mark Gilbert post
Keep reading

Apache Kafka - I - High level architecture and concepts

Image
Spanish version / Versión en Español First of all, what is Apache Kafka ? An initial definition for it is "a high-throughput distributed messaging system". Breaking this down a bit: High throughput: One of the main goals of Kafka is to process as much messages per unit of time as possible, in a scalable and fault-tolerant way. For example, LinkedIn , which is where Kafka originated, needs to achieve throughputs in the order of 20 million messages per second and 3 GB of data per second. Distributed messaging system: In a generic distributed system , networked computers work together for a common goal. In Kafka's case, that goal is to send data from points A 1 , A 2 , ... A N , to B 1 , B 2 , ... B M . A common benefit of this kind of system, which is crucial to Kafka's success, is horizontal scalability : the ability to handle higher and higher volumes of data by adding nodes to the system (not to be confused with  vertical scalability , whic
Keep reading

Upgrading Lodash from 3.x to 4.x

Spanish version / Versión en Español There are many breaking changes from version 3.x to 4.x; all changes are detailed in the Lodash changelog . There is also a list of deprecated functions , with a regex you can use to detect usages in your code. However, since it is not an exhaustive list, I will list the changes I encountered when performing my own migration, to help anyone undergoing the same process. Direct renames This section includes functions in which only the name changed, i.e. the arguments and return value are the same. 3.x 4.x contains includes first head rest tail invoke invokeMap padLeft padStart padRight padEnd Direct renames if not using thisArg This section includes functions in which the only change is dropping "thisArg". If you are not using it, you can just rename. If you are using thisArg in 3.x, it can be dropped if you are using iteratee to acce
Keep reading