One technique we have found to accelerate our project development lifecycle is balancing the use of Django forms/views and React. React is a great front-end tool, but React forms are not quick to create and often require lots of work, even to make simple data collection forms. Django, on the other hand, makes building highly-performant forms really straightforward.
Design
This approach does require some forethought before you begin development. Specifically, identifying those parts of your application that should be built using Django forms/views and those parts that should be written as a React app. The last thing you want to do is start building using one approach for a given piece of functionality, only to realize that you should have taken the other approach. Identifying the correct technology is a skill that takes time to develop but will allow you to quickly create robust user experiences that are easy to maintain.
There is a fine line to walk when mixing two front-end technologies (Django forms and React), but the reward is worth the inherent complexity. Writing parts of your application with lots of visual interactions — like panels loading out or one element restricting the way another element performs — can quickly become spaghetti JavaScript in Django templates, and a maintenance nightmare!
React provides a nice framework for isolating logic and breaking down how elements/components communicate with each other by providing a better framework for easier, long-term maintainability. The flip side is — writing a straightforward data collection form in React is unnecessarily complex. The engineer needs to build all the validation logic themselves. Django forms can do this very easily and can tie the validation directly to your Django models. Much of the validation comes for free or relatively inexpensively with Django model forms.
Implementation
To implement this, we embed react applications into Django templates where the high level of UI/UX complexity demands it. We build a directory structure of React applications, shared components and common business logic. Our build process leverages webpack to bundle each React application. We then have a template tag that understands these application names (based on the folder name) and goes and loads the webpacked files inside the Django template.
Since the React app is embedded in a Django template, data needed to initialize the application can be passed through the context, allowing for faster page loads and improved responsiveness. We also leverage Django REST framework to provide APIs where necessary for the React portions of the application to load data they need as the views require (filtering items in a dropdown, for instance).
Build for success
The goal here is to balance both time of development and long-term maintainability. To avoid unnecessary amounts of markup, JavaScript or Python, and to use the tool that is best-suited for the job for each particular piece of the application. The engineering team needs to be able to determine where using React is the best option and where Django forms/views is a better option.
There are certainly still use cases where highly complex, customized form UX/UI can be more maintainable using React rather than Django forms/views. When you start needing parts of the screen to communicate to other parts of the screen without reloads (for example a calendar or an event creation form for that calendar) it is better to rely on React's ability to create small, reusable chunks of front-end logic. By properly leveraging the correct balance of these two approaches, we can quickly create a robust user experience.
A side benefit of this process is that it will make cross-training easier for your front-end and backend engineers, enabling them to see both parts of the stack as they work in the same codebase, instead of isolated codebases. Another improvement is when you deploy the backend, you are also updating the frontend, as the frontend is served by backend templates with Sever Side Rendering (SSR). Thus, you do not have to worry about breaking changes being deployed in one place without the other being updated.
Results
We have found that we can build and deploy highly complex applications faster using this process while also keeping tech debt and long-term maintenance manageable. The performance of our experiences developed in this manner has been excellent. Our team at JBS is able to quickly and confidently determine which technology is appropriate. Paired with this architecture allowing for rapid development of high quality software.

Introducing the JBS Quick Launch Lab!
FREE 1/2 Day Assessment
Other Recent Articles
-
The Evolution of Maintainable Lambda Development Pt 1
Joshua M.
Jan. 12, 2021AWS Lambda is a very popular tool for deployments at JBS. As an AWS Partner, we have repeatedly espoused the benefits of serverless architectures as... -
What's New From AWS reInvent 2020
Philip H.
Jan. 19, 2021As an AWS partner, we rely constantly on AWS services to help us build solutions for our clients that are manageable, scalable, and fault-tolerant.... -
JBS Custom Software Solutions Joins BigCommerce Partne…
Jenny L.
Jan. 14, 2021JBS Custom Software Solutions offers headless commerce integrations and full BigCommerce sites to help fast-growing businesses modernize and scale... -
Three Tips for Effective Project Meetings
Muhammed U.
Jan. 12, 2021Unnecessary meetings are a common stereotype. Sometimes we don’t do a good enough job of putting in the thought required to make them useful. -
Part 2: Portable Function Pattern for the Scaling Busi…
Shon D.
Dec. 31, 2020The feedback loop for business logic development should be totally contained on the engineers' machine with a few commands. -
How One Non-Profit EdTech Partnered with JBS to Fill a…
Joe R.
Dec. 24, 2020We started this series on digital education with some of the core capabilities today’s educators, students, and school administrators really need in... -
Event-Driven Application Logging
Nick W.
Dec. 22, 2020Proper logging and exception handling will greatly improve a team’s capability to support any application, but such visibility becomes crucial... -
Using Azure Functions with .NET
Chris E.
Dec. 17, 2020Using .Net within Azure Functions is Simple and Straightforward -
Part 1: Portable Function Pattern for the Scaling Busi…
Shon D.
Dec. 29, 2020The landscape of platforms and runtimes is ever increasing. There are more ways of packaging and running code than are possible to keep up with. -
Universal Native Apps with Flutter
Greg R.
Dec. 15, 2020Flutter Provides A Compelling Alternative To True Native Development -
Moving to AWS Managed Databases
Joe B.
Dec. 10, 2020Amazon Web Services (AWS) managed database services enables dynamic scalability, faster processing of database operations, convenient visualization... -
The Table Stakes for Today’s Digital Education
Joe R.
Dec. 8, 2020It’s not like digital education suddenly happened when 2020 rolled around. The steady rise of digital education over the past decade was changing the... -
Generating PDFs with AWS Lambda
Bob S.
Dec. 4, 2020There are services that offer to turn your HTML into PDFs, but if you don't want another bill, and the risk of outsourcing vital functionality, you... -
Top 5 Ways to Deliver Total Quality Focus to your Team
Scott S.
Dec. 1, 2020You've secured agreement and buy in from all stakeholders. You've got people excited about giving their best and receiving your best. You're scared... -
Improve Django’s Admin Interface Using Inlines
Benjamin R.
Nov. 24, 2020Improve Django’s Admin Interface using Inlines -
JBS Custom Software Solutions Becomes a Member of the …
Jenny L.
Nov. 17, 2020JBS is pleased to announce today it achieved member status in the Amazon Web Services (AWS) Public Sector Partner Program -
Application Logging with Watchtower and CloudWatch Logs
Nick W.
Nov. 11, 2020Centralized logging systems are vital in cloud-based architectures due to their inherent ephemeral nature. Whether using auto-scaling instances or... -
Deep Linking in iOS 14
Matt C.
Nov. 6, 2020With the release of iOS 14, companies like Branch and Facebook sounded the alarm with respect to IDFA changes. These changes gave users much more... -
Writing Self-Documenting Code & Good Code Commenting P…
Greg R.
Nov. 3, 2020We all know that writing good code that is efficient, stable and secure can be a challenging task. Because of this, as developers, we are tempted to... -
To Code Review or Not to Code Review…
Rachel G.
Oct. 29, 2020During their careers, developers are likely to encounter numerous approaches to code reviews. Some organizations will demand multiple approving peer... -
Four Ways to Increase Your Team’s Efficiency as a PM
Muhammed U.
Oct. 27, 2020As the Project Manager, you have a unique perspective on the project and can steer the project in the right direction by helping your team make the... -
Django Autocomplete
Joshua M.
Oct. 20, 2020Django is a Python-based web application framework that makes it easy to start developing a new dynamic website and simplifies much of the solved... -
Autoscaling GitLab Runners In Your CI/CD Pipeline
Nick W.
Oct. 18, 2020A typical CI/CD pipeline workflow usually includes some form of automation server - this article focuses on GitLab Runner. -
Get Your Digital Transformation Off the Ground and Int…
Joe R.
Oct. 15, 2020How do you actually get your critical initiative off the ground and into production? Here’s an overview to create a roadmap and basic steps to help... -
NuxtJS: Have your modern JS cake and SEO too
Sam B.
Oct. 13, 2020The web has grown immensely in its demands for user interface responsiveness. As countless consumers and businesses move from desktop programs to... -
Newfound Agility: Two Retailers that Adapted to Rapid …
Joe R.
Last edited: Oct. 7, 2020Today we examine two retailers with very different needs and goals. Both needed to quickly adapt, to make the leap from commodity sales to selling... -
Adapting to Change: Agility in Retail
Joe R.
Oct. 1, 2020We often talk and read about the changing expectations of today’s customers and the importance of not just meeting but exceeding those expectations.... -
When Online is Not Enough: Building Omni-Channel Exper…
Joe R.
Sept. 22, 2020We recently explored some interesting ways e-commerce retailers can build customer loyalty and a competitive advantage by making themselves stand out... -
4 Ways to Build Competitive Advantage Through Customer…
Joe R.
Sept. 15, 2020When it comes to digital enablement, today’s retailers have to work hard to distinguish themselves. In an ocean of online retailers, most of which... -
Redis Cache Deletion Performance
Matt C.
Sept. 9, 2020When developers of high traffic applications are confronted with performance degradation, often the first course of action is to implement some... -
Innovate or Fail: The Importance of Exceeding Customer…
Joe R.
Sept. 1, 2020While many companies believe that online shopping has forced brick-and-mortar retailers to adapt or close their doors, there’s far more to it than... -
Looking forward to Python 3.9
Bob S.
Aug. 26, 2020Python is often thought of as a hobbyist language, and its popularity among software developers for its flexibility and simplicity tend to make it an... -
Makefile is Still Cool in 2020
Shon D.
Aug. 19, 2020What we will discuss today is a simple pattern for makefile that does not require one to fully indoctrinate c/c++ into your shop to take advantage of... -
Blockchain Might Not Save The World But It’s Still Pre…
Benjamin R.
Aug. 5, 2020A blockchain is a decentralized “digital ledger” system intended to provide transparency and trust between parties engaging in some kind of... -
Transitioning to Contactless Retail
Chris E.
July 27, 2020The current situation with the worldwide pandemic has forced retailers to rethink how they operate and embrace contact-less methods of interacting... -
Real World Estimates
Kurt S.
July 22, 2020Estimates are created in software development for two very simple reasons – to determine how much a project will cost and how long it will take to... -
A Gentle Intro to CloudFormation and SAM
Ramin R.
July 14, 2020AWS is pretty amazing; we no longer need to self manage and provision our own servers. For pretty much any web service you can think of, AWS has a... -
Pros and Cons of Selenium IDE for Automated Testing
Benjamin R.
June 30, 2020Selenium is an open source suite of testing software that can automate web browsers to mimic real user behavior. The Selenium suite has three main... -
Affinity Analysis and Product Recommendations
Andrea R.
June 25, 2020How JBS implemented a wine recommendation system for one of our clients and as a result greatly increase the sales revenue -
Managing Technical Debt
Joshua M.
June 17, 2020Good engineering is the result of strong requirements grooming and prioritization, within the budgetary constraints available to complete a project.... -
Application Configuration Management
Aaron M.
June 24, 2020At JBS, High Velocity Software Development means hitting the ground running with solid architecture and finding reusable solutions. -
The Case for Linux as Your Main Driver
Ramin R.
June 10, 2020Whether you need to convert 1,000 images to a different format, sync up code between servers, or manipulate text or files in any way imaginable - the... -
What is Snowflake and why should I care?
Chris E.
June 1, 2020Many organizations are considering cloud-based data solutions, instead of planning out on-premise solutions. Organizations are also evaluating moving... -
UI/UX: Establishing a Regression Testing Firewall
Joshua L.
May 26, 2020Finding a balance between the benefit the tests give you and the cost of spending time and effort writing tests can be challenging. -
Protecting Data in SQL Server Blog Post
Chris E.
April 29, 2020Keeping your and your client’s data secure is more important than ever. Security threats today cannot be ignored, with data breaches being a nearly... -
Strategies for a Successful Agile Implementation
Muhammed U.
March 2, 2020Agile is a widely adopted framework that brings many benefits to improve your software delivery as a whole. The framework itself is relatively... -
Domain Driven Project Organization
Brandon D.
April 28, 2020It seems every time I read a new software tutorial or library, the code is organized per a recognizable design pattern. For example. a Model, View,... -
Faster Mobile Development - Architect once, build twice
Joshua L.
April 14, 2020For many modern businesses, deploying a single mobile platform is no longer sufficient; in order to adequately cover your entire market, user base,... -
Working from Home - Agile Everywhere
Greg R.
April 2, 2020Whether you are a CEO, a manager, or a team lead, if you are following the Agile principles even reasonably well, it does not matter where your... -
The 5W's of Implementing CI/CD Pipelines
Patrick K.
March 20, 2020Continuous Integration / Continuous Delivery (CI/CD) has been widely accepted as an integral part of software development for some time now. -
Unit Testing Strategies
Brandon D.
March 6, 2020I don't think I've met a developer that enjoys writing unit tests. I don't enjoy writing unit tests either, but I do enjoy the confidence that they... -
Sanity When ALTERing Database Tables in Django
Joshua M.
March 1, 2020Databases are an integral part of many web applications - if you have used a website that has any user-specific functionality, that information has... -
Optimization Made Easy in the Django Admin
Joshua M.
Feb. 21, 2020Django is a Python-based web application framework that makes it easy to start developing a new dynamic website and simplifies much of the solved... -
Soylent Green - Your Application is Made of People
Miguel L.
Feb. 11, 2020Who you hire matters beyond their tech talent and whether they have the maturity to perform in your organization. Like choosing a business partner,... -
AWS Lambda Layers - What Are They Good For?
Patrick K.
Feb. 11, 2020There’s no doubt that AWS Lambda and Function as a Service (FAAS) have been game changers in the microservice architecture landscape. AWS Lambda... -
Vue.js - A Cleaner and More Effective Approach to Fron…
Ramin R.
Jan. 31, 2020The days of jQuery are long gone. Folks are no longer littering their code bases with JavaScript snippets to introduce interactivity. -
PostgreSQL Indexing: GIN, Django, and Trigram Similari…
Joe B.
Jan. 31, 2020PostgreSQL supports a special type of index called GIN – Generalized Inverted Index. This type of index is especially helpful for improving the... -
Universal Native Apps with React Native
Stuart L.
Jan. 23, 2020Heading into the year 2020, the prime candidates for application developers are iOS, Android, and the web browser. Modern users typically interact... -
The Wonderful World of Serverless Development
Mark R.
Jan. 23, 2020Serverless is one of those terms that gets thrown around and can mean different things to different people. The thing people generally think of is... -
Containerization and How It Can Be Useful for IT Autom…
Joe B.
Nov. 13, 2019Containerization accelerates the software delivery process. It is one of the key tools in the toolbox of high velocity software development and... -
High-Velocity Software Development
James P.
Sept. 15, 2019High velocity software development is a framework to maximize returns when developing custom software. The approach focuses on integrating technology... -
GeoDjango on Zappa / Lambda
Adam F.
Oct. 22, 2019Zappa and AWS Lambda are great prototyping tools (and production tools too) but one tool that’s important to me has been missing from the drawer when... -
Reduce Abandon Rates with the SPA Treatment
Joshua M.
Aug. 15, 2019Single-page applications (SPAs) have become the name of the game in modern web pages. Users expect to receive a web page instantly and are no longer... -
Outsourcing 101
Mark R.
July 19, 2019Most of these concepts are probably familiar, but it’s good to clarify some of what we will be discussing. When we talk about outsourcing, we mean... -
Hybrid Outsourcing Increases Success Rates
James P.
July 20, 2019Outsourcing or in-sourcing, those are the two choices right? Actually, they are not. You can combine the best of both worlds and really drive home... -
What is serverless, is it the future?
Joe C.
July 20, 2019In the five years since their large cloud provider launch, serverless hosting and Function as a Service (FaaS) platforms have become increasingly... -
In Defense of Unit Testing
Chris E.
June 20, 2019An argument can be made that unit tests are not worth the time and energy that they cost to produce. Furthermore, after investing that time and cost... -
Microservices for Innovation
Joe B.
June 21, 2019Companies today have more decisions to make when it comes to their application infrastructure than ever before. There are lots of choices that need... -
Succeeding with Agile in a Waterfall Culture
Doug P.
Feb. 27, 2019While working as both a developer and a project manager at JBS, I have seen many projects where the customer is looking to move away from a... -
Use Voice Activated BI to Reduce IT Expenses & Fast Tr…
Chad E.
Jan. 10, 2019Conversational BI is here, and it is a competitive advantage your firm needs today. Conversational BI gives you the ability to ask plain language... -
Practical Tips for Getting Started with Xamarin Cross-…
Shawn H.
Sept. 22, 2017In the years since it was first released, Xamarin has certainly come a long way towards fulfilling the promise of true cross-platform development. ... -
Migrating to Azure
Chris E.
Aug. 17, 2017So, you’ve decided that you want to migrate to the Cloud. Moving to a cloud service provider such as Azure is not something that should be taken... -
5 Things Your Project Team Can Do Right Now to Become …
Nick F.
May 30, 2017Agile is a word that gets thrown around a lot these days. While continuing to be the “methodology du jour”, especially in the complex world of... -
Zero to DevOps in Two Weeks
Aaron M.
Jan. 12, 2017I’ve have the good fortune in the recent past to work in an environment with some really strong DevOps slash automated infrastructure folks. As a... -
A Brief Overview of Apache Spark
Philip H.
Oct. 18, 2016In the Apache Foundation’s own words, Spark is called “A fast and general engine for large scale data processing.” Parsing this we get: Fast – Spark... -
Hybrid Mobile Apps Part 1: Ionic Framework Basics
Frank G.
Sept. 26, 2016According to an April 2016 report by comScore, a global media analytics company, mobile users now represent 65 percent of digital utilization with... -
Big Data with Hadoop Cluster
Joe R.
April 5, 2015It’s rare that you can go to a medium to large-enterprise IT environment and not have some kind of “Big Data” setup. Information and analytics are... -
Garbage Collection (.NET) vs. ARC (Swift) - Part 2
Greg R.
April 6, 2016In Part 1 of this series, we dug deep into many languages differences, both good and bad, between C# and Swift. As you begin to use the language on a... -
Escape from C# / Into the Swift Trenches - Part 1
Greg R.
March 1, 2016In my previous post I introduced the Swift language from the perspective of a C# developer, demonstrating some of the more obvious differences... -
Dealing with SQL Performance
Chris E.
March 24, 2016It seems all too often that the answer to dealing with SQL is now to use an Object-Relational Mapping (ORM) tool to avoid SQL like the plague when... -
An introduction to Celery
Joe R.
Jan. 6, 2016Often times in a web application, there are a subset of tasks that are long-running, resource intensive and don’t have to be completed in real time. ... -
Introduction to Aurelia – Part 2
Dave M.
Jan. 5, 2016Just recently, the Aurelia framework Beta-1 release was rolled out. While we’re excited to play with it, since we started this introductory series on... -
Introduction to Swift (for C#.NET developers)
Greg R.
Jan. 20, 2016The Swift language is gaining wide adoption at an accelerated rate. According to the TIOBE Index for 2015, Swift increased quite a bit in popularity... -
Django Caching Strategies
Joe R.
Nov. 4, 2015One of the often overlooked but critical components of a functioning web application is it’s performance. Not only does it have a dramatic impact on... -
An Introduction to Aurelia - Part 1
Dave M.
Nov. 12, 2015For a recent project, my JBS project team was tasked with updating a web front-end implementation. We looked into various front-end libraries in...