I have a Django project already running with its UI created using Bootstrap and some custom CSS, JS.
Currently going through the Polymer Starter project, I want to do a UI makeover for my Django project using Polymer. Being a beginner with Polymer, my first question is, Is it feasible?
If yes, I would like to know from where should I start? I am not getting should I just remove all bootstrap and CSS already used and start replacing my old elements with newer Polymer elements? I have tried including Polymer elements in Django templates, but it doesn't seem to work this way.
I am just not getting the steps to follow for such a UI makeover.
Any piece of help will be greatly appreciated.
Refer to this https://groups.google.com/forum/?fromgroups=#!searchin/polymer-dev/django/polymer-dev/N2R8qknalOI/58ZhC1gWFh4J.
You should be able to wrap Polymer elements in Django templates. They are just static files. Just make sure you are using {% verbatim %} tags to wrap around your polymer elements.
However, if you are going for a complete UI makeover, use AJAX calls to the REST services running in the background on Django. Or if you do not want to use django-rest-framework or tastypie or something new, you can slightly modify your existing view functions to serve JSON that packs all the data you need for a dynamic page.
Related
I am a Laravel developer and used Vue as my frontend framework in the past.
However, I got interested in learning Python, specially its web framework equivalent - Django. Compared to Laravel, Django is pretty much way better in all aspects - it's fast, it's one of those 'all-in-one' type of framework, plus it's PYTHON. A 15-minute task in Laravel can be accomplished in Django for 5 minutes.
One thing that's just bugging me is how to integrate Vue on its templates. I tried the normal CDN method but it doesn't actually work. I figured maybe because django's syntax -{{ sample variable here }} and Vue's are the same. I tried writing delimiters like delimiters: ['[[', ']]'], but it just made it more complex and still will not work.
I tried doing the webpack method which install a separate vue project within the django project, then used several (like a lot of third-party plugins) to somewhat connect the vue project, to the django project. It is so tedious on its process and it seems like it's not the why it should be. I kinda miss it on Laravel where you could just create an app.blade.php main template, import app.js on it, then just take it from there.
Is there a way to just integrate Vue on django's templates quickly like you can on Laravel?
We use Vue with Django via cdn, and it is pretty easy to set up as you can do everything in the template file.
You have to be sure to import Vue via script tag somewhere on the page and then either define your own delimiters (as you've done) or use the {% verbatim %} {% endverbatim %} tags around any variables you do not want django to try and evaluate. You can either write your Vue function in a script tag on the page or import an external file via script tag the way you would import any other js file into a django template. If you posted your template code, I might be able to provide more guidance.
My co programmer developed a django plugin for use in a django project and on his setup, the plugin works. he can write a placeholder in the django template being used and load that with the custom plugin via the django-cms structure view. I tried doing the same thing but i noticed that the placeholder i put in the html in the same place he put it in isn't appearing in the structure view. the only placeholders appearing in the structure view and can be edited are static placeholders. placeholders entered like the ones in the django tutorial
http://docs.django-cms.org/en/release-3.3.x/introduction/templates_placeholders.html
and are placed with this code
{% placeholder "custom_name" %}
aren't appearing in the structure view. i couldn't find a similar scenario here in stackoverflow. I have a fairly similar setup to my co programmer too. i copied the same repo he's working on and i even used a dump from his postgres database in case there's something wrong with my own setup but still no luck. there are no DEBUG errors appearing in the console or the webpage so I am out of ideas. Has anyone encountered a similar situation? The django-cms we are using is version 3.1.0.
Thanks
I just found out earlier today what was wrong. I didn't notice immediately, that the page i was trying to edit was not a django-cms managed page which is why the placeholder wasn't working in it. In django-cms managed pages, the placeholder is working properly.
Thanks
I am a Django developer just getting started with adding React to one page of my app, and really enjoying it so far. (It's a normal Django app with a home page, an about page, etc, but also a "chart" page with an interactive chart, and I want to build the interactive part in React.)
The problem is that I've started with the downloadable React starter kit and I'm not sure how to do things the 'right' way, and it's complicated by using Django to serve my project (all the tutorials seem to assume you're using node, which I'm not).
Right now I just have this in my Django template:
<div id="myapp"></div>
<script src="/static/js/vendor/react.js"></script>
<script src="/static/js/vendor/JSXTransform.js"></script>
<script src="/static/js/myapp.js"></script>
And myapp.js has all the React code. I'm aware this isn't really the grown-up modern JS way of doing things.
Now I want to use React Bootstrap, but it seems that the only sensible way to do that is with npm. So it's time to make the switch, but I'm not completely sure how.
I have run npm install react and npm install react-bootstrap from inside my static/js directory in Django. This has created a node_modules folder with various files inside.
So three questions from a confused newbie:
Where should I put my React code to work with these npm modules (should I use var React = require('react')?
Do I need to compile this code somehow (using webpack?)
How do I then integrate this with Django? Should I compile it all to myapp.js and just include that in my HTML template?
I'm also doing the same thing right now - moving away from embedded HTML script tags into require land. Here is the tutorial I am following, and here is my file system so far. I am doing it in Node but it shouldn't be that different for a Django project as the React frontend code is decoupled from any backend other than API URL's.
Your node_modules folder contains react-bootstrap. In your myapp.js, use the require('react-bootstrap') to load up the library which is contained in your node_modules folder.
Where should I put my React code to work with these npm modules (should I use var React = require('react')?
You can put the code anywhere. If your file system looks like this:
project/
react/
myapp.js
node_modules/
react source code
react bootstrap stuff
Then you can just do var React = require('react'); in myapp.js.
Do I need to compile this code somehow (using webpack?)
Yes, I would consult the webpack tutorial I linked earlier, it should explain how to compile all your React code into a single bundle.js. Here is also another good tutorial. This bundle.js file contains all the source code of your requires. So if your myapp.js looks something like
var React = require('react');
var ReactBootstrap = require('react-bootstrap');
then the bundle.js now contains all of the React and react-bootstrap javascript code, along with the myapp.js source code.
How do I then integrate this with Django? Should I compile it all to myapp.js and just include that in my HTML template?
I've only done work on Nodejs, but my React code so far hasn't touched any Node code, and I don't think it will touch any Django code (again I've never done Django so I might be wrong). All you need to do is compile with webpack, which spits out a bundle.js. You put that bundle.js in your HTML and it'll load up myapp.js.
ReactJS code is still JS code. Even though you do require/import/other module based syntax when coding, in browser you will still load the JS code by a script tag.
The problem is how to let the script generated by webpack(bundle.js) to work with other 'VanillaJS' script. For example, if you only write an individual component using React, like a small table. And its data(props/state) will depend on another element/event written in VanillaJS, e.g, a click listener on a button render by django template. Then the question is, how they communicate with each other.
So far, the solution I know is:
when you write React Code, instead of calling ReactDOM.render explicitly with preset props/state, you can store that in a global function, the arguments could be the props. You load this script first, then the other script can use this global function to trigger the React render Component.
I'm using Django Rest Framework to build an API and then connect to that API from React (using simple Create react app), this way the front end and back end are separated and the application is very scalable. The second way to do this, is call create react app then run build and point your django settings to that react build, this way the front end is not separated from the backend. I hope this helped, good luck.
I have a pretty basic question.
Consider a CRUD web application built on Django. You have templates that render data. Those templates might have forms where you submit data to the backend, and that might reload the page to display changes. Sometime, you can make those requests over AJAX, for example when you need to update data on the UI. You can also submit forms with AJAX and update the HTML with it.
On the other hand you have single page applications. You serve a static file, and there is no reload of pages. You have data that comes from an API and populates some front-end template.
What are some guidelines for when to use what? Not in a mutually exclusive way, but within one Django project, what are some reasons/considerations to use a Django template/forms/AJAX approach and when to use Angular?
Thank you.
Something to consider is how "interactive" you want the client-side to be.
I am in the process of converting an existing Django app to use Angular (and django-rest-framework). The app was highly interactive and relied on a lot of custom JQuery to get various widgets working just right. JQuery's constant looping through the DOM made it pretty slow. I am finding that using Angular instead of JQuery is much faster.
So if you have a lot of complexity in the front-end, I would recommend Angular.
I developed an application in JSPs and Servlets involving drop down menus that kept growing with how many authors per publication their were.
This was done in JavaScript and then in my application iterated through them using a loop. Is this possible using Django? This would be useful in my application.
This link might help you out if you don't want to dive into javascript (too much)
http://www.dajaxproject.com/
Or have a look at this stackoverflow question/awnser:
What is the best AJAX library for Django?
In any case, you need to serialize your array to a JSON string.
Then pass the JSON with an XMLHTTPRequest (ajax) to the server.
Add the javascript tag to your question if you don't mind more JS solutions.
Otherwise look for a Django Ajax framework to do the heavy lifting for you.