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):
- Created a Project directory
- Setup development environment - pip, virtualenv, and Git
- Installed Flask with pip
- Created our App
- Commited our changes to the local repo
Part 2 (09/13/2014):
- Added a template to our 'Hello, World' app
- Looked briefly at Jinja templating
- Touched on dynamic routes using query parameters
- Styled the app using HTML and CSS
Part 3 (09/20/2014):
- Updated our Flask view to return JSON on a POST request
- Setup JavaScript and jQuery on the client-side
- Grabbed the values from the form using jQuery
- Sent the values to the server-side via AJAX
- Summed the values on the server-side, then returned the sum back to the client-side
- Added the returned value to the DOM
Part 4 (09/27/2014):
- Looked briefly at the RESTful API structure
- Consumed the Github API with the Requests library
- Parsed the returned data
- Added the parsed data to the DOM
Part 5 (09/28/2014):
- Worked with DOM manipulation
- Touched on error handling