When to use React combined with Django? - django

I've been working with the django framework and mostly have been using html templates for its front end but im wondering whether i should switch to React if it's a big project? Alternativelyl, can i create a user interface application without using React as front end or is React / ReactRedux advisable when using Django?
Can you achieve greater functionality with React when manipulating the front-end as opposed to using views in Django?

Advice for when to use React does not have to do something with Django. It mainly depends on the complexity of the application that is to be developed. If you have, or will have a Web application with a complex frontend, containing many functionalities and quirks, which can grow to a large codebase, it is a good idea to use one of today's popular frameworks such as React, Vue or Angular. They allow you to divide the large codebase into components and manage them more easily.
So, the short answer is - if it is going to become a large and complex application, it is a good idea to use React. Otherwise, Django templates will be just fine.

If your application's frontend getting larger and larger and you feel that your are repeating too much html page for example , you might want to use a SPA and component based framework to reuse the components across the application.
If you want to separate backend and frontend code to acquire more maintainability and separation of concerns that might be the reason
If There will be more than one clients(Web, IOS, Android etc.) it is a good idea to separate backend code from frontend(client)
Frontend framework will bring more structure to your application therefore it will be more easier to maintain the project
Otherwise Django templates are good to build a fast project like a few form entries and an introduction page etc.

Related

Looking for the right Tools for developing a website with SPA components in Django

i am a new Webdeveloper and im struggeling to find the right tools and frameworks to use for the specific site i am building.
Its a site for managing all kind of information and documents about clients my firm cares for.
It consists of general information (like statistics etc.) that should be served synchronously and a client specific part that should be a SPA (mainly because i want to have a list of all clients on the side, so that the main part of the page updates when you click one).
My problem is , that there is so much information about that kind of stuff (but not specificly a project comparable to mine), so that i can't decide what the best approach would be.
I found those options so far:
Just serve everything with django and update reactive parts of the page with Ajax
building a dedicated Frontend and with Frameworks like Svelte or React and using Django as API.
Using these Frameworks just for the critical components that have to be reactive and serving everything with django
If i understand correctly, the cleanest way would be Nr. 2, but i would lose access to djangos form rendering with crispy_forms (which, for a website consisting mainly of forms, would kinda suck).
The same is kinda true for Option 3 i think, since the critical Elements are mostly forms. And as far is i know you cant render django forms as react components.
I was discouraged from using Option 1, cause it seems to very error-prone to build a SPA without a framework.
I would really appreciate some input from more experienced People like me to help me with the decicion which path to go down.
Greetings!
There are many options, but it all depends on your knowledge and deadline.
Don't try to make everything perfect at once. Make an MVP using the technologies that you are familiar with and show the working version to the management. I'm sure there will be many edits and improvements that they will want to implement.
If you need an advise about stack, then you can look at Django + DRF + Vue.js

Django rest API vs Django views

I am building a project where I have 2 approaches to follow -
Either I can create APIs for all operations and call them from my frontend which can be in Angular.
Or I can use normal Django views and template.
Question: what is the best approach to follow and what is the performance impact of them?
Go for Rest API, that will make your life easy if you have plans to integrate that with other Applications (e.g. May be you would like to create Mobile App in future)
There are many factors, that play into this, however if you already have a front-end built with Angular, there is a strong case to be made for the approach of using a Django Rest Framework-based API. Some advantages are:
Encapsulation facilitates testing.
API resources are reusable, should you need similiar functionality in some other appliication or front-end
If you seperate these components you can more easily change either one or the other, if your requirements change in the future.
I would go with the APIā€¦

Why are people using Django templates with webpack to connect DRF with ReactJS?

Am I missing something?
But I am really not getting the rationale behind most online blogs and tutorials suggesting to use a base Django template to render a ReactJS bundle (bundled from webpack).
In my mind, the point of using Django Rest Framework in the first place is to completely isolate the frontend from the backend and have something like Nginx serving an html file that would import the ReactJS library (like any other stndard html/js project). The ReactJS layer would then get or manipulate data solely through the DRF REST API.
It is like most developers treat ReactJS as a completely novel beast, when it can be simply treated as standard JS (with added steroids) that runs on the browser.
Can someone therefore explain to me what are the advantages of using the methods depicted by blogs such as Jonathan Cox and Owaislone ?
On one part, you're right. One of React's principles is to make it function like a Mobile app(that consumes REST API) which also compliments React-Native, so there's not much for the programmer to learn and pick up and can quickly develop an app if they are familiar with React. This way, you'd build the back-end to serve both the web app and the native mobile app without much rewriting or customizing.
Usually, people like keeping their code together, front-end and the back-end if they're just developing for the web. It's a common practice. Since Django is widely used and is also an open source framework amongst a lot of web-developers, there's a big community to develop tools or plugins for it. This way, they'd just have one server instance running and configure the backend to serve just the index.html page, and the routing is handled by the browser.
I, on the other hand, prefer the latter part, work on a team with backend engineers and mobile developers. We heavily rely on RESTful calls for our apps. So we keep our code base neat and isolate our backend from our front-end so each of us can work independently.
It's just a matter of preference really, Jonathan Cox and Owaislone both don't preach about the right way to develop React apps, they just demonstrated one of the ways React can be used.
Also, some backends have a lot of security and need to be configured to allow certain headers for making requests. It could make you look at your computer screen for days while you sit there wondering how to work around the problem and you're diving deep into the documentation for web requests. CORS is one of the problems when you isolate your front end and back end code. It's something that can totally be avoided if Django is serving the files.
I'd say you can go ahead and pick one that suits your need, isolate your React code from the backend if you'd want the back end to work on mobile apps too, saves a lot of time.

Using AngularJs (WebService) instead of Django View-Template

We have developed a django app and finished all view and templates. There are many controls in template and views. Our new frontend partner says us :
I want to use angularjs, so develop a webservice for me.
So, what is advantages and disadvantages ? Why we might omit the written view and templates?
Any help with this issue will be appreciated.
AngularJS is modern javascript framework for creating complex web
applications within the browser. It focuses on strong separation of
concerns (MVC) and dependency injection to encourage creating
maintainable (and testable) modules that can be integrated to develop
rich client side functionality.
With the advent of more interactive web applications, a ReSTful API
can be leveraged by rich client interfaces to expose and interact with
your application's data model. AngularJS is a great companion because
of its clean separation of controls. AngularJS's modular architecture
involves a little bit of setup. Your app is composed of modules
which define services, directives and controllers that
compartmentalize the functionality for cleaner separation.
Part of the power of AngularJS, is that it provides reactive
programming leveraging their javascript-like expression language.
We can simply define a template that references variables, and our page will automatically refresh when changes are made to those
variables.
Django Rest Framework is best choice to expose your web services/apis as it uses less code.
i might think you have to omit/keep aside the existing views/urls as it uses django forms to store the data etc. Whereas you have to handle the json data (applicable if you not use django rest framework)
reference link

Best practices for layout out Angular/Django apps

I'm fairly new to both Django and Angular. I recognize this is subjective and there are likely many ways to do it, but I'm wondering what best practices people can recommend for laying out such an application. I'm specifically thinking of the case of rich, SPA with the backend being mostly or entirely a RESTful API server, but then I'd like to have a common approach for any apps that serve significant views from Django. (I haven't done enough to decide if the latter warrants using Angular or may be more trouble than its worth).
Specifically:
What are pros/cons of maintaining the front-end code in a separate directory/repository from the backend versus, say, inside a "static" subdirectory of the Django app? In my case I'm the sole developer for now, which has some impact on this decision, but I can still consider myself separate "teams" of back-end, front-end, designer, etc. in the sense that my workflow will put me in one of these roles at a time.
My setup is basically a development machine, SCM in GitHub, and hosted publicly on WebFaction (shared web hosting). I will down the line want to easily grab projects on different development machines, but the primary workflow is just one dev, one prod installation. That said, I'm interested in best practices in real-world projects as I hope a future job may be working with Django.
ADDED: Another point I'm very unsure about is whether the Angular app should/must be bootstrapped by Django. That is, should the front page be served by Django and injected with any data?
PROS:
Can configure URL paths and even API endpoints that change from dev to production, without any alternate config and without these being hard-coded in front-end.
This is maybe necessary for authentication? Unclear to me having not done this yet...
Allows use of tools like the Django debug toolbar app.
CONS:
Couples the front-end to the back-end. What If I want to swap out the latter? What if I want the front-end to work in a sandbox with mock data?
Seems to strongly favor moving all Angular stuff into the Django app layout. At the same time, I don't like having a mix of Angular partials in one place and Django template(s) in another. I am already resolved not to mix NG and DJ templates, as I don't believe much good will come of this.
I also started as solo developer on Django as BE with AngularJS FE. I've put AngularJS files in static folder and everything is fine.
Cons are definitely that you have FE and BE mixed up in one project, but I think that shouldn't matter since you are solo developer. Even if you decide once to hire additional developer (to split FE and BE work) your work wouldn't have any conflicts since one of you would work totally independent.
One of the pros for me is definitely I did entire login process via Django (templating as well) and once login went fine I served rest of the FE (entire AngularJS part).
For Django REST I've used TastyPie. It's great REST enhancement for Django and easy to set up.