Building Practical Web Applications with React & Django
ReactJS and Python-Django are one of the most popular web frameworks used for developing scalable and maintainable web applications. This tutorial series comprises a variety of individual posts covering in great detail starting from framework choices, architecture & design, implementation & performance optimizations to final deployment over cloud services. Unlike other tutorial series, all the common bugs, caveats, design choices and their implications are discussed in great detail with the hope that the reader gathers complete knowledge of all the necessary parts and pitfalls that appear in developing large-scale web applications.
Chapter 01: Environment Setup
This chapter will give you detailed environment setup insight with proxy configuration for each technology that we will use in this tutorial series. We will be setting up Python and it’s different packages like Django, Rest-Framework for API Design, Swagger for API Documentation, Django-Extensions and Graphviz for Automated ER Diagram generation for Object Relational Models defined for the Application. We will be configuring the Postgres Database with Django Projects.
A seamless walkthrough of getting the client-side up and running will be provided. All the packages are installed from scratch eliminating any unnecessary boilerplate. The significance of all the important npm packages and directory structure will be explained. Webpack-configurations for development and production builds are also discussed.
Chapter 02: Decoding Backend Architecture using Django-Rest-Framework and Postgres
Backend engineering basically involves CRUD operations. For the applications that requires database for storing records and logs we need to first design the database. Django uses ORM (Object Relational Mapping) for generating database models. This eliminates the requirement of having knowledge of specific database and query languages (i.e. no need to learn Oracle, Postgres specifically) by using simple classes.
After that we be creating API Endpoints for HTTP Requests. For Each API call from the client side we will be writing the Class based Responses using Django Rest Framework.
Chapter 03: Presenting the application using React and Material-UI
Through this tutorial series, we’ll work our way through setting up of an environment for running React code (cause it would be just too mainstream to run them directly in the browser).We will build our own custom components to be used as building blocks of our app, and another one storing views of our app. We will also come across scenarios where inter-component communication becomes quite challenging, and then explore different solutions to it. Material-UI provides an extensive set of components adhering to the Google’s Material Design guidelines. It exposes an easy-to-use theming system, allowing you to customize each and every part of the provided components.
Chapter 04: Decoding Front-End Architecture & UI Performance
We use Redux for global state-management. It is based on a trending design pattern called Flux developed by Facebook. It provides a great way in managing application data at client side. Using Redux yields a lot of advantages, some of which are having single source of truth, data store persistence, on-demand data fetching, firing global events (notifications, snackbars etc.), easier debugging and logging (using redux-dev-tools). Code-Splitting (on-demand loading of components), and Data-Store Persistance is used to greatly boosts performance of the UI.
Chapter 05: Deploy your Web-App on Amazon Web Services
We will be deploying our Django Applications on Awazon Web Services EC2 instances , where we will be creating remote Linux instances on AWS and configuring the instance for Web Application.
We will be mapping the GoDaddy domain to AWS instance where our application is actually running using Route 53 Amazon Web Service.
We will configuring Nginx Server for directly handling the HTTP Requests and serving static files , however Nginx Server can not directly communicate with Django application , We will use Supervisorctl Service for interprocess communication between Nginx Server and Django Application.
We will be using Gunicorn Package for running Django server persistently in Daemon Mode even if you reboot or switch off you Linux instance on AWS.
Stay tuned for weekly posts covering the tutorial series.