Next Steps in Web Development

Learning Objectives

After this lesson, you will be able to:

  • Identify common web concepts to dive into next.
  • Identify common Python libraries used for front-end web development.
  • Identify common Python based back-end web development tech stacks.

Web Development's Pretty Cool - What's Next?

Web development is a huge field. Where should you go next?

There are a few options to explore:

  • Front-end web development.
    • Code in Python to just host the site.
  • Back-end with Python.
    • Code in Python

With one of those, you can also explore...

  • Extending Flask.
  • Other popular Python web framework libraries.

Path 1: Front-End Development?

Configuring the part of the website people see.

Why?

  • You're design inclined.
  • You want to make cool sites!
  • You're using Python to accomplish the goal of propping up your designs.

Path 1: Front-End Development - What Next?

GA has some classes! (Shameless self plug).

For your own study:

  • Get better at HTML and CSS (important)
  • The core of front-end web development.
  • Check out Bootstrap and Flexbox.
  • HTML/CSS frameworks.
  • Check out JavaScript and JavaScript frameworks.
  • Add interactivity to your webpages.
  • React, Angular, jQuery, and Ember are all popular in different locations.

Path 1: Front-End Development - Then what?

Start building up a portfolio of projects.

  • Make yourself a portfolio website to showcase them!

Once you're comfortable:

  • Try modifying premade Bootstrap themes.

Path 2: Back-End Development?

Handle the server side:

  • Make websites work.
  • Bringing in data.

Why?

  • You love programming!
  • You don't care how the website looks.
  • You just want to write Python.
  • The idea of using someone else's designs sounds great.

Path 2: Back-End Development - What Next?

GA has some classes! (Another shameless self plug).

 

For your own study:

  • Learn git version control  (important)
    • GitHub or another version control system
  • Check out connecting to databases.
  • Learn SQL.
  • Learn about SQLAlchemy and PyMongo.
  • Learn about servers like WSGI and NGINX

Path 2: Back-End Development - Then what?

Start a portfolio (preferably on GitHub or another version control system).

Once you're comfortable:

  • Try starting a MongoDB yourself, then having Flask retrieve data from there.

Knowledge Check: I want to...

Make a Beautiful Website

All this Python coding is a bit much for me, but I like websites.

Which should I look into?

  • Front-end web dev
  • HTML/CSS/Javascript
  • Flask extensions
  • Back-end web dev

Which do you think?

Solution: I want to...

Make a Beautiful Website

All this Python coding is a bit much for me, but I like websites.

Which should I look into?

  • Front-end web dev
  • HTML/CSS/Javascript

Path-ish 3: Expanding on Flask

 

Not really a path!

  • Do this in conjunction with one of the above.

Look into integrating these with Flask:

- Bootstrap

- SQLAlchemy/PyMongo

Bootstrap

Front-end or Flask? This slide's for you.

Like awesome looking websites?

Don't like typing out HTML and CSS?

Bootstrap is for you!

  • A free and open-source front-end framework.
  • Handles all of the "pretty" stuff.

Boostrap is great for:

  • Prospective front-end developers.
    • Extremely popular in many companies.
  • Integrating with Flask!
    • Bootstrap makes a site pretty, and Flask makes it work.

How to get started with Bootstrap and Flask

Get it:

  • pip install Flask-Bootstrap
  • git clone https://github.com/mbr/flask-bootstrap.git
  • cd into the flask-bootstrap directory.
  • Run pip install -r sample_app/requirements.txt to install the required packages

Run it:

  • Deploy Flask with Bootstrap by running flask --app=sample_app dev
  • Go through directories.
    • Comment out code to be certain you know exactly what every line is doing.

Read the docs: https://getbootstrap.com/docs/3.3/getting-started/

SQLAlchemy and PyMongo

Back-end or Flask? This slide's for you.

We can't always connect to a list!

  • Most info's stored in databases.

SQL is the language for working with databases. Knowing a database is also crucial! Popular databases include:

  • MySQL
  • MongoDB
  • PostgresSQL

Some Python libraries to look into:

- SQLAlchemy

- PyMongo

How to get started with PyMongo

This slide's long! It's for your later reference.

Flask and Databases?

  • Install Flask SQLAlchemy with pip install Flask-SqlAlchemy
  • Install Flask PyMongo with pip install Flask-PyMongo

Back-end database with no Flask?

  • Install just PyMongo with python -m pip install pymongo

Either way, you need a database. Install MongoDB:

  • brew update
  • brew install mongodb
  • brew install mongodb --devel

Start your MongoDB instance:

  • mkdir -p /data/db
    • Note: if that results in an error, you need different privileges.
    • Run: sudo mkdir -p /data/db
  • Start your database with the Mongo daemon with the command mongod

Then, add some data to your database. Save the below to a python file and then try making GET and POST requests!

from flask import Flask, jsonify, request
from flask_pymongo import PyMongo

app = Flask(__name__)

app.config['MONGO_DBNAME'] = 'burritodb'
app.config['MONGO_URI'] = 'mongodb://localhost:27017/burritodb'

mongo = PyMongo(app)

@app.route('/burrito', methods=['GET'])
def get_all_burritos():
  burrito = mongo.db.burritos
  output = []
  for s in burrito.find():
    output.append({'ingredient' : s['ingredient'], 'burrito_necessity' : s['burrito_necessity']})
  return jsonify({'result' : output})

@app.route('/burrito/', methods=['GET'])
def get_one_burrito(ingredient):
  burrito = mongo.db.burritos
  s = burrito.find_one({'ingredient' : ingredient})
  if s:
    output = {'ingredient' : s['ingredient'], 'burrito_necessity' : s['burrito_necessity']}
  else:
    output = "No such ingredient"
  return jsonify({'result' : output})

@app.route('/burrito', methods=['POST'])
def add_burrito():
  burrito = mongo.db.burritos
  ingredient = request.json['ingredient']
  burrito_necessity = request.json['burrito_necessity']
  burrito_id = burrito.insert({'ingredient': ingredient, 'burrito_necessity': burrito_necessity})
  new_burrito = burrito.find_one({'_id': burrito_id })
  output = {'ingredient' : new_burrito['ingredient'], 'burrito_necessity' : new_burrito['burrito_necessity']}
  return jsonify({'result' : output})

if __name__ == '__main__':
    app.run(debug=True)

Knowledge Check: I want to...

Make a Beautiful Database

All this Python coding is #goals.

Which should I look into?

  • Bootstrap
  • Back-end web dev
  • SQLAlchemy
  • MySQL
  • PostgreSQL
  • MongoDB
  • HTML / CSS
  • Pelican

Which do you think?

Solution: I want to...

Make a Beautiful Database

All this Python coding is #goals.

Which should I look into?

  • Back-end web dev
  • SQLAlchemy
  • MySQL
  • PostgreSQL
  • MongoDB

Knowledge Check: I want to...

Make an awesome Flask based website

I really liked all the above and am right at home between front end and back end with Flask.

Which should I look into?

Which do you think?

Solution: I want to...

Make an awesome Flask based website

I really liked all the above and am right at home between front end and back end with Flask.

Which should I look into?

Path-ish 4: Web Frameworks that Aren't Flask

Flask isn't the only Python web framework.

There's also:

  • Pyramid
  • Zope
  • Bottle
  • CherryPy
  • Django
  • Pelican

What's Django?

  • A complete, "batteries included" approach philosophy.
    • Conversely, Flask is lightweight; you add pieces on as you need them.

  • A more secure framework.

  • Highly scalable - think Disqus and Instagram.

Get started at djangoproject.com

What's Pelican?

 

  • A Python library for static sites.

  • Blogs don't need to change beyond the text!

  • Generates the HTML for you.

  • You just need Python code and text!

This is a really quick way to get a site up and running.

pip install pelican

Knowledge Check: I want to...

Make a Blog

I want to build simple, static websites in less than 10 minutes and then work on content.

Which should I look into?

  • Pelican
  • Databases
  • Bootstrap
  • Django

Which do you think?

Solution: I want to...

Make a Blog

I want to build simple, static websites in less than 10 minutes and then work on content.

Which should I look into?

  • Pelican!

Knowledge Check: I want to...

Make a website, but without all these libraries and extensions

I really the idea of this whole framework thing, but I wish there were only one, obvious way to do things.

Which should I look into?

​

Solution: I want to...

Make a website, but without all these libraries and extensions

I really the idea of this whole framework thing, but I wish there were only one, obvious way to do things.

Which should I look into?

  • Django

Web Development in General

There's so much more!

Mozilla (they make Firefox) is an amazing resource.

Summary

There are a lot of ways to go!

  • Extending Flask.
  • Python front-end libraries.
  • Python back-end libraries for databases.
  • A few other Python based web frameworks.
  • General front-end or back-end web development.

Additional Reading