How To Build Future Web Apps With JavaScript and Django Programming Language?

By Kimberly Cook |Email | Mar 6, 2019 | 2634 Views

Building robust web apps quickly is very difficult, time consuming and resources consuming. Each web app development programming languages and frameworks has its own disadvantages. With some web app programming languages slow development, security issues, complex and hard to learn, you need an easy and effective way to build web apps easily, quickly and efficiently.

The chaotic nature of technological development sometimes throws the world into disruption; somethings that were never designed to be popular suddenly are and things that are started fading off. No programming language could have surprised me more if not JavaScript, with its recent rise to the top in a sea of modern programming languages. Becoming the first stable language which you can't do without on the web.
With the rise of NodeJS (a javascript engine), Javascript gains more power, awareness, functionality and the ability to reuse existing apps.

When it comes to Python, you should know that it is one of the progressing programming languages that is easy to learn and use, yet with more functionalities. As we all know, Django is built on Python and it is regarded as the web framework for a perfectionist with deadlines. A good thing about it is, its opensource and has a massive community behind it.

Talking about future web apps, Django has a lot to offer and has the ability to accommodate any modern web apps structures. Stacking Django and Javascript web frameworks to build modern web apps is one of the best ways to stack backend and frontend frameworks.

With the knowledge I gained playing around with Django and Vue, I have seen the future of web apps in Django-Javascript stack and it includes PWA, SPA, Isomorphic Javascript applications, Native applications and so on.

Power of Javascript
let's discuss a little about the ability javascript has gained...

From the beginning of the Web, the browsing experience has been a simple cycle which is like: a client web browser would request a page (for instance, "http://www.scholarsglobe.com/"), invoking a server somewhere on the Internet to create an HTML page and send it back over the internet. This method seems to work well then because browsers weren't very powerful and HTML pages contained contents that were mostly static. And back then, JavaScript allows web pages to be more dynamic, didn't have much features than image slideshows, date picker widgets, and some jQuery plugins.

After some years of improvement in computing and the internet, creative minded developers/programmers have taken the web to its limit (which is yet to be known) and web browsers have evolved to keep up with javascript technologies. The Web has now matured into a well-featured application platform. It enables developers to now create real and rich web apps on the web with HTML5, CSS3, Javascript runtimes standards.

As a newbie, Javascript can be very easy to learn, confusing as an intermediate and hard as an expert.
A friend of mine used to mention that:
Javascript is the most confusing programming language
Well to me, the reason is because of its distributed structures meaning that it has different ways you can write it.

So as a web developer you have to know how to code in Javascript if not as a professional or expert because right now every single thing on the web has some amount of Javascript, and now, even mobile and desktop applications run Javascript with NodeJS by compiling it to byte code.

Well, I think that's great. You don't need to write a complex structure application to start a Javascript program, all you need is to write a function and then call it. Adding new features on older browsers with polyfills are very easy. Converting ES6 to ES5 is possible with babel and for more functionality, you can use Typescript.

Notable features of JavaScript:
Serverside Rendering: The ability of Javascript to run on the server using Node.js is consolidating it into single code bases. It reduces complexity for large scale applications and it has the benefit of allowing more complex architectures to be handled more easily. This creates the idea of Isomorphic Javascript application. That is you render your frontend templates from the server.

Native Cross-Platform Support: Javascript has matured enough to have for native cross-platform across IOS, Android and even Windows/Mac Desktop. This reduces bottlenecks around skills and support for their applications.

Scalability: Javascript single-threaded nature enforces a standard on software design which ends up improving performance and scalability in many cases. Typically these scenarios are in a web context where high loads need to be serviced.

Reusability: Javascript is one of the top programming languages with reusability ability. Javascript codes are always reusable and that's one of the features that backed jQuery and its plugins. Then coming to npm which is on NodeJS, you can install and reuse any Javascript packages.

Power of Python/Django
With the release of Django 2.0, Django now has a lot of powerful features included.

Django is a high-level, MVC-style, open-source collection of libraries written in Python encouraging rapid development and pragmatic, clean design of web apps. Django, known as "the framework for perfectionists with deadlines," was originally designed for news sites since it lets developers write database-driven web applications without having to start coding from scratch.

However, with years of updates and improvements, Django has now matured to be a fully-featured web application framework.
A web application framework is a tool all web applications need to quickly get things done. The aim here is to let developers focus on the parts of their application that are new and unique to their project, instead of implementing the same solutions over and over again.

Truth be told, Django is much more fully featured than many other frameworks out there. It takes care of a lot of the hassle of Web development, letting you focus on writing your application without any need to reinvent the wheel. It's free, open source and fasts.

Besides faster completion of common web development tasks, Django helps keep the design clean and pragmatic. Django is the best place for new Python web developers as the official documentation and tutorials are some of the best in software development

Additionally, the Django framework enables you to model your domain and code classes, and before you know it, you already have an ORM.

Notable features of Django:
Django's ORM: ORM is one of the notable features of Django. This takes care of databases. So, there is nothing like issues with the Structured Query Language (SQL), which of course is used to query the database for the data needed. Django developers have a special way to manipulate the corresponding Python model object, unlike many other Python frameworks that directly deal with the database via SQL. Django by default works out-of-the-box with relational database management systems like PostgreSQL, MySQL, SQLite, and Oracle.

Built-in Template System: This is one of the great features about Django, it supports a template system and you can even extend it. With the help of the inheritance system, Django's templates let developers build entire, dynamic websites out of a very small amount of front-end code.

Security: Django is highly secured if you don't know that. The web framework comes with default protection against XSS attacks, CSRF attacks, SQL injections, clickjacking, user management, cookies, email header injection, cryptography, directory traversal etc.

Easy Database Migrations: With Django's migrations, you can easily change a database schema in quick time. It's also very easy to track your database schema and its associated changes. Migration names help in managing version control, and tons of options are available to merge versions and make modifications.

Flexibility and Reusability: Django apps are flexible and self-contained, thus they are reusable. You can add them to your project in the settings.py file under INSTALLED_APPS. And of Python modules can also be used in Django projects.

Power of Restful API
now let's talk about rest API, what's it all about?

By definition, Restful API is an application program interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is based on representational state transfer (REST) technology, an architectural style and method to communications which is often used in web services development.

Rest is the underlying architectural principle of the web. Rest decides how the API looks like and it stands for "Representational State Transfer". It is just a set of rules that developers follow when they create their API. One of these rules states that you should be able to get a piece of returned data (called a resource) when you link to a specific URL.

API is an application programming interface. It is simply a set of rules that let programs to talk to each other. The developer creates the API on the server and allows the client to talk to it.

The good thing about the web is the fact that clients (browsers) and servers can communicate in hard ways without the client knowing anything beforehand about the server and the resources it hosts. The main thing is that the server and client must both agree on the media used, which in the case of the web is HTML.

Each URL is called a request while the data sent back to you is called a response.
One of the main advantages of REST APIs is that they are flexible. Data is not tied to resources or methods, so REST can easily handle multiple types of calls, return different data formats and even change structurally with the correct implementation of hypermedia. The flexibility gives developers the ability to build powerful Rest API.

Under Rest, the request is made up of:
  1. The endpoint
  2. The method
  3. The headers
  4. The data (or body)
One of the great thing about Rest API is that it can be used on any platform and with any programming language. With Django Rest Framework, you can build a powerful Rest API that can be used to power a fully-featured web app.

Future of Web Apps
This is my personal thought on how future web apps will be using Django and Javascript.

Progressive Web Apps (PWA)
Progressive Web Apps as its name implies, is a progressive web application. It is an app that works for every user no matter what browser or mobile device they are using. They are responsive and they feel like an app when used on a mobile or tablet device.

From another look, Progressive Web Apps are web applications that look great on a computer, but also feel like a native app when used on a mobile device. For example, they may use the phone camera, provide push notifications, and so on.

According To Wikipedia
"Progressive Web App (PWA) is a term used to denote a new software development methodology. Unlike traditional applications, progressive web apps are a hybrid of regular web pages (or websites) and a mobile application. This new application model attempts to combine features offered by most modern browsers with the benefits of mobile experience."

There are so many definitions of PWA on the internet, but just know that it is:

A new way to deliver amazing user experiences on the web.

Key features of PWA:
Reliable - Load instantly and never show the down sour, even in uncertain network conditions. That means it can even work offline with a ditch.
Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. Very fast due to the caching technology implemented.
Engaging - Feel like a natural app on the device, with the immersive user experience. This gives the experience of normal mobile apps.
This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

Single-Page Applications (SPA)
To me, Single-Page Applications as it name implies is an application that does not requires reloading of the page but uses Ajax or Web Socket methods to push state and fetch data.

To put it simple, Single-page application is an app that works inside a browser and does not require page reloading during use.

According to Microsoft:
Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.
SPAs use AJAX and HTML5 to create a fluid and responsive Web apps, without constant page reloads.
SPA requests the markup and data independently and renders pages straight in the browser. This is possible thanks to the advanced JavaScript frameworks like ReactJS, VueJS, AngularJS, Meteor.js, Knockout.js.

Single-page app help to keep the user in one, comfortable web space where content is presented to the user in a simple, easy and workable fashion.

Although the SPA has a lot of disadvantages you have to deal with, it still a future web app.

Isomorphic JavaScript Applications:
Isomorphic application is simply an application whose code can run both in the server and the client. Isomorphic application can also be defined as an intersection of client-side and server-side applications.

Isomorphism as in web development means rendering pages on both the server and client side. It all about running browser Javascript code on NodeJS environment with little modification from the server.

In an isomorphic application, the first request made by the web browser is processed by the server while subsequent requests are processed by the client.

With Isomorphic applications, MVC or MVVM structures are always contained both in client-side and server-side. Pages can be rendered in server-side with again JavaScript MVC or MVVM structures.

Thus, similar rendering engines and similar JavaScript logic can be used in server-side, the page can be rendered in server-side and client-side will deal with the rest of logic.

The three main reasons developers should care about isomorphism are:
  • Better Search Engine Optimization (SEO)
  • Better performance
  • Better maintainability

About the Series
I'll be writing a tutorial series on how you can build future web apps with Django and JavaScript.

We'll be building an app, that has all the features of a future web app. That is, we'll build a Rest API backend with Django, then we'll learn how to implement the Rest API with the popular JavaScript web frameworks and they'll be PWA, SPA and Isomorphic app enabled.

This might look complex because each of them are originally complex. We are only going to take one or two features from each.

For the series, we'll build a ticket-app (a laravel app stolen from one of my friends) and we only need its templates. The app will be available offline, single-paged and isomorphic.

We'll also be using build systems to manage our frontend assets.

Below are the JavaScript web frameworks, the series will cover:
  • Vue and Gulp
  • React and Webpack
  • Angular and Webpack
  • Ionic and Gulp
  • Electron and Gulp/Grunt/Webpack

Source: HOB