Full Stack Development

CIS1902 Python Programming

Agenda

  1. What is a Web App?
  2. Review of Web Server Paradigms
  3. Django Introduction
  4. Basic Django App Lab: Polls

What is a Web Application?

In general, a web application is a system that has a frontend (website itself) and a backend that listens for HTTP requests and manages an underlying database. Additional features such as offline data processing may also be added to augment the application (e.g. training models for recommendations).

Importantly, the key difference between a webapp and a plain website is the ability to store state/data.

Vanilla Website

This is how our course website is made! The backend is a simple filesystem that exposes a directory to the internet. Think of this as an online folder. There is no explicit frontend besides pure HTML files. The client simply GETs the HTML files and they are rendered on the browser.

This is great for serving static content, but can't really do much beyond that. However, it makes it very easy and intuitive to develop new content since one can change the HTML files directly.

Standalone Frontend

A more advanced paradigm is developing a standalone frontend. The backend acts simply as an API that provides CRUD access to a database. The frontend is an entire application typically written in some native language, e.g. Javascript for browsers, Swift for iOS, Kotlin for Android.

The very first request typically delivers the frontend application code to the browser. The frontend then makes API requests on a user's behalf to render content nicely or provide intuitive GUIs for actions. The sky is the limit but requires much more work.

Backend-Driven Frontend

An in-between paradigm can sometimes work well. Here, the backend renders HTML files in real time to deliver to the client. This way, the backend can dynamically change content based on parameters, e.g. user, location, etc. However, can get messy as you typically need to write generic-style HTML or use a templating language. Additionally, it takes extra effort to create a standalone API.

Example: Netflix could have a template for displaying a list of recommendations. They could use this template to render HTML for different webpages, e.g. horror movies, action movies, TV shows, etc.

How do we make Web Applications?

Typically, the easiest way to make webapps is to use a backend-driven frontend. Most popular frameworks provide this out of the box, e.g. nodejs, Django, or Ruby on Rails.

However, you can also separately develop a backend and frontend. This is usually done at larger scale for maintainability. Some examples of frontend libraries are React, Angular, and Vue.js. Some frameworks that can act as stand-alone backends are nodejs, Django, or Flask. Some programming languages such as Go provide first-class support for backend web servers as well.

Creating a Web Application

Let's say you have an idea to create a web application that allows users to submit votes for polls. What's the process for creating this? At a high level, we really only need to do a few things:

  1. Define Data Models
  2. Sketch Views
  3. Implement & Test
  4. Polish

Defining Data Models

A data model is essentially a table in our database. The first step in creating a webapp is to identify what pieces of data we need to store and manipulate. Some guidelines on creating models:

  • Try to determine the minimal "concepts" within your app. These will be your tables or models.
  • For each model/table, identify attributes that they need. It's typically easy to add attributes if you forget them at first.
  • Try to keep your models singular, e.g. User instead of Users.
  • Avoid "aggregate" models or attributes that can be calculated by queries, e.g. count, average, etc.

Sketching Views

Now that we've defined our models, let's draw out some views! This is a more creative exercise, specifically, how do you want users to interact with your webapp? What pages should exist? What buttons and types of inputs should you provide to your users?

Once you've determined what pages you want, the next step is to use the models you've defined to "power" these pages. That is, what models are relevant for each page? How should they be fetched, e.g. latest or should we have filters? If a page is an input, what model is it creating?

Django

Once you've determine a clear plan for the webapp you want to make, the next step is to actually begin coding. Django is a web framework in Python that allows you to easily translate these ideas into code.

  1. Provides an ORM (Object Relational Mapping) to easily manipulate data without having to write a database language, e.g. SQL.
  2. Provides a templating language to easily create views for your models.
  3. Built in User and Admin classes
  4. A ton of other stuff we won't cover

Django Lab: Votr

Adapted from the Django Tutorial