An Incomplete Introduction to Web Development
Some forms of web development can be intimidating or at least appear cumbersome at first. The following entry looks to guide absolute laymen to the appropriate tools to fulfill their needs without hours of choice paralysis and Google searches. Caveat: this entry is heavily coloured by my personal experiences with learning some web development and will ignore commercial services like Squarespace, Wix, etc.
Goal: Static versus Dynamic
The end goal of a project (website, web app, etc.) will allow a potential developer to prune away some of the many libraries and web frameworks that are available for web development. The most fundamental question is whether the page is Static or Dynamic. A static page will display information, provide hyperlinks and allow temporary and limited user interaction through Javascript. If there is no communication to a server or user manipulation of the page, it’s likely a static page. If there is interactivity with the end user that is more sophisticated than the aforementioned use cases, the page is “dynamic” and will need internal logic written in Javascript or Python and methods to communicate with a server. Dynamic web pages often use libraries or web frameworks to ease development.
Frameworks
Ostensibly web frameworks provide a set of libraries, templates and code conventions that help with code development and re-usability. However, to a layman the number of frameworks and their descriptions heavy use of Javascript jargon can make choosing, let alone learning, a framework difficult. I’ve listed some frameworks and useful libraries in the following sections. One thing to note about frameworks, is that they are by no means necessary. It depends on preference and the scale of a project. This is a bit of a cop-out but it really does come down to looking at what a framework has to offer and making a personal choice.
Client Side
The client side will be what the end user sees. This is generally handled with HTML, CSS and Javascript. There are independent frameworks for client side code. Client side code is considered a static page if it does not require the updating to/from a back-end/server. The page may be updated via Javascript, but the change is transient and will not be stored on the server. Dynamic pages communicate with the back-end (server) to update a page, database or internal files based on user input and can store that information to be served at a later time. Developing a dynamic page requires creating server-side and client-side code.
Static Page Tools
There are many static site generators that can make a webpage look sleek and competent. These are very quick to get deployed without having to fiddle with details. Some exaples include: Jekyll which is what this blog uses, MkDocs which powers familiar sites such as keras.io (uses Python). Other popular tools provides an extensive list of static page generation tools where you can find the style that suits a particular case.
Dynamic Page Tools
For the client side of a dynamic web application, there are numerous libraries and frameworks that offer different syntax and ways of handling data within an application. It is important to note that you may not need to use a full framework but instead a set of libraries. The tools listed below can also be used to generate static pages.
Polymer
Polymer is a project by Google which provides pre-made elements that give that “Google look” to your application. The application resides in a HTML file(s) which contains the page’s variables and functions. These variables and functions control the elements of the page. Data is passed from the elements to Javascript functions through two-way or one-way variables (variable binding). When an element’s internal variable value is altered (e.g. a radio button status or a menu-selection) a bound variable will be updated on this change and activate a existing or developer defined function. The library is straight forward and good for single page applications.
Reactjs
Reactjs comes from Facebook and is a Javascript library that handles the “view” aspect of a web application, using the Model-View-Controller model. React refers to “elements” as “components”, these are the compartmentalised parts of a user-interface (menu, buttons, etc.) and are treated as classes. React is supposed to scale well, as it has a modular way of handling components. Data is passed from parent to child components (and vice versa) with specific structures and methods which can be read about here. Two more formal conventions emerging for handling data flow in React applications are Flux and Redux. An existing library for components to use in React is Material UI which again provides the “Google look”. React has more of a learning curve (in my experience) than say, Polymer, but it appears to be a better option if you want modular and well organised design. React has a number of fancier features to increase its speed including server side rendering and single component re-rendering. The format of the HTML generated by React is handled by its own language similar to HTML called JSX.
Angularjs
Angularjs is a full framework for client side code provided from Google. Angular uses the Model-View-Controller (MVC) software design pattern for client side code. It is a popular framework (though is loosing ground) and forms the A in the MEAN (see below) development stack.
Django
Django operates as a MVC platform. As the whole development process is done in Python, the ‘model’ can essentially serve directly as the machine learning algorithms provider and the ‘controller’ can be used to train the models. Due to the high complexity of the full stack frameworks, Django has a steeper learning curve. However once a developer has adapted, it provides much more flexibility and is easily expandable to production scale software. It supports variety of popular databases out of the box - SQLite (simplest to use, applicable to very small project), MySQL (developed with web design in mind, good for blogs and home pages), PostgreSQL (more optimised for storing large amount of data, used to be very popular in ML community before MongoDB). Switching between them can be done transparently as the project grows. MongoDB (a non-relational counterpart to other DBs, slower, but allowing for storage of objects of arbitrary structure) can be deployed through an extended version of Django.
DB setup is essential to Django, and while it may cause some trouble to the layman initially, once it’s set up, Django provides a very easy to use object oriented programming interface to access databases. The queries are run transparently. The framework was originally designed to support storing information from submitted forms. However, it also allows for the saving of any kind of data the same way, which might appear very useful for storing the current state of the user’s work, independently of views, and passing the information between them completely on the server side.
Django has its own template language, which enables it to be used with any static page tools mentioned before, and provides full flexibility on HTML / JS/ CSS side.
Server Side
Tools
Node.js is server side (native) Javascript (compiled with Chrome’s V8 engine). It’s paired with NPM (node package manager) and the Express framework. NPM allows the use of a myriad of existing packages for use in new code and Express provides a framework that can have a server running in a few lines of code. Express’s API handles GET and POST requests from clients easily. One of the stated benefits of using Nodejs is that it allows a full stack to be potentially handled with one language, Javascript.
PHP is an older but very popular solution for server side code.
Django also has its own simple development server, so that it is possible (and encouraged) to start one’s development without installing any external software nor frameworks.
Client - Server Communication
To achieve communication between the client and the server, messages must be handed between the two through some web protocol. A popular method is through the Asynchronous Javascript and XML (AJAX) technique. A message is sent from a client and then the client is able to continue execution without being blocked by the returning message from the server. AJAX has a few notable APIs including Fetch API, which is a medium-low level API, XMLHttpRequest, which is a low level API and jQuery which is an extensive library which contains much more than just AJAX methods.
Full Stack Solutions
A full development stack aims to provide tools and frameworks for the entire web development pipeline, i.e. the “stack”. Full stack solutions will provide databases, libraries, frameworks and other tools that cover client and server side code. Some notable examples include the MEAN stack, which is made up of MongoDB, Express, Angularjs and Nodejs. The Django stack is another option that allows full stack development in python, (see above section).
Tutorials and Misc. Sites
Scotch IO has loads of tutorials that’ll get you started on lots of projects. It is geared towards Javascript and newer web technologies. Tutorial sections include HTML/CSS, Javascript, Reactjs, Nodejs, Angularjs, PHP and Laravel.
W3Schools is a web developers site, with tutorials and references on web development languages such as HTML, CSS, JavaScript, PHP, SQL, W3.CSS, and Bootstrap, covering most aspects of web programming.
Hot Frameworks lists frameworks and their popularity.