Creating a Flask Single Page App

Powered by Real Python

Series

Part	Title	Media	Git Tag
1	Intro, Project Setup, Hello World	video	part1
2	Dynamic web app, Jinja2 templating, HTML/CSS, relationship between client and server	video	part2
3	Front end fun with JavaScript, jQuery, and AJAX	video	part3
4	Working with the Github API - consuming the API, parsing JSON	video	part4
5	Consuming RESTful APIs - parsing JSON, error handling	video	part5
6	Caching External API Requests from the Github API	blog post	part6

Flask!

Flask is a minimalistic web framework. What does this mean for you?

Unlike full featured frameworks, like Django, it takes a bit more time to get an App up since it does not come pre-packaged with features. For beginners, this is good - Since you actually have to do more coding, you learn more. If you just toss an app up quickly with Django, you don't learn nearly as much. Because of this, it's hard to customize and troubleshoot issues because you don't learn what's happening under the hood. With Flask, you can build an app from the ground up and add features as you go. You learn more. Plus you get the freedom to pick and choose the features you want.

Part 1 (09/06/2014):

1. Created a Project directory
2. Setup development environment - pip, virtualenv, and Git
3. Installed Flask with pip
4. Created our App
5. Commited our changes to the local repo

Part 2 (09/13/2014):

1. Added a template to our 'Hello, World' app
2. Looked briefly at Jinja templating
3. Touched on dynamic routes using query parameters
4. Styled the app using HTML and CSS

Part 3 (09/20/2014):

1. Updated our Flask view to return JSON on a POST request
2. Setup JavaScript and jQuery on the client-side
3. Grabbed the values from the form using jQuery
4. Sent the values to the server-side via AJAX
5. Summed the values on the server-side, then returned the sum back to the client-side
6. Added the returned value to the DOM

Part 4 (09/27/2014):

1. Looked briefly at the RESTful API structure
2. Consumed the Github API with the Requests library
3. Parsed the returned data
4. Added the parsed data to the DOM

Part 5 (09/28/2014):

1. Worked with DOM manipulation
2. Touched on error handling