[HN Gopher] Using VueJS Alongside Django
___________________________________________________________________
Using VueJS Alongside Django
Author : tkainrad
Score : 73 points
Date : 2020-04-14 19:19 UTC (3 hours ago)
(HTM) web link (tkainrad.dev)
(TXT) w3m dump (tkainrad.dev)
| sireat wrote:
| Would be nice to see a semi complete project using VueJS with
| Django integrated as closely as in the article.
|
| Something along the lines of:
| https://github.com/gothinkster/realworld which covers front-end
| and back-end separately
| Stephen0xFF wrote:
| I feel the only way these two will play nicely is swapping Django
| for a DRF approach. Vanilla JS could be, and perhaps should be,
| used in place of Vue for small use cases. There's no need for the
| extra abstraction when AJAX could work.
| mythrwy wrote:
| Well you "could" spit out data from the views as JSON into
| <script> blocks in the Django templates and they would play
| nicely together.
|
| But then you would be limited to various manipulations of the
| initial data so "could" is certainly not "should".
| rurp wrote:
| This is a great read. I had considered using React with a Django
| side project a while back, but it just seemed like too much added
| complexity for the gain I would get in a small app. The approach
| in this article though looks great.
| pier25 wrote:
| TL;DR: the idea is basically to write the Django data from the DB
| into a JS object and then use that to feed Vue components. I
| imagine they do this only for the stuff that uses Vue and not the
| whole page markup.
|
| Vue is a great option to combine with server rendered markup
| (PHP, Python, etc) because it can read the templates directly
| from the DOM and doesn't need a build step like JSX does.
|
| It's not the only option though. You could also use Preact + Htm
| (JSX in string templates) which doesn't need a build step either
| and is much smaller than Vue.
|
| https://github.com/developit/htm
| willio58 wrote:
| This is great, thanks for writing it!
|
| I have recently stepped out of the seemingly never-ending spiral
| of using React/Vue for everything frontend, and also discovered
| Django along the way.
|
| For building prototypes, Django is the fastest framework I've
| ever used. After building out prototypes in Django I've come to a
| realization that at most 10% of my websites need to be truly
| reactive to user interaction without page reload. Turns out when
| I dropped this requirement when building something, I can
| actually finish the projects I start. And also turns out for the
| end-user, they don't even notice page reloads for most sites.
| wiremine wrote:
| > For building prototypes, Django is the fastest framework I've
| ever used.
|
| I worked with Django full time for about 6 years. It scales up
| and out pretty well, too.
|
| There was a peer comment about Rails. I'm a big fan of Rails,
| and Ruby is one of my favorite languages. But one thing I've
| noticed is the lack of magic inside the Django codebase vs.
| Rails' codebase. Spelunking in the codebases feels night and
| day different: I found Django very intuitive and Rails... less
| so. I think that was a combination of my lack of skill with
| Rails' internals, and the different in languages and
| communities. Python (and Django) try to follow the Zen of
| Python. Rails felt like every other method was monkey-patched
| and reduced to a single line or two. It was odd: I think the
| expressiveness of Ruby was actually a negative at large scale
| (sort of like Lisp vs. Go)
|
| For 99% of use cases, you never need to get to this level of
| the frameworks, but it was an interesting experience.
| airstrike wrote:
| I echo this sentiment. I've learned a ton of Python from
| reading the Django source code. There's definitely something
| to be said about the DSF and the many contributors over the
| years who've worked tirelessly to push the envelope with the
| framework (and the ORM, in particular) while also keeping the
| codebase sane. It's not all perfect, but it's about as good
| as it gets for FOSS with so many people chiming in over more
| than a decade
| jkcxn wrote:
| I totally agree. Full page rendered app are way easier to code.
| It's like an immutable function - request in, transform, html
| out. I think as soon as you want to add some niceties with
| React you end up setting up a load of front end stuff. You
| suddenly need APIs, create-react-app, webpack, babel, build
| scripts, redux, routing etc. And you also end up losing out on
| some of the Django side, forms+validation, templating, views,
| urls. And often you end up having business spilling over to
| your front end.
|
| I'm working on a project that lets you build your Django app
| like you normally would with templates and views but you get a
| React app and all the benefits of a single page app. You don't
| need to write any APIs or use redux etc. It will have a bunch
| of components built in and if you don't need any more then you
| don't even need to build the javascript yourself, you just
| include the already built file. At the moment I have a sort of
| Django Admin equivalent example working and I'm looking for
| some feedback. If you or anyone else has any ideas about it I
| would love to hear, feel free to PM me (email in profile).
| [deleted]
| davish wrote:
| Looks like your profile just has an hnchat verification code,
| but would love to check out the project and help out if I
| can. It sounds really interesting!
| cugs wrote:
| Interested in giving this a try; If you need testers, I'd be
| happy to try it out.
| jedieaston wrote:
| Is it in a state that you could do a Show HN? I want to see
| this, could be very useful for me trying to avoid writing JS
| ;)
| andybak wrote:
| Are you aware of pjax, turbolinks and (stepping up a bit from
| this really minimal baseline) intercooler.js?
|
| Curious how you feel your project fits in at this end of the
| ecosystem.
| Lunrtick wrote:
| I totally agree about not needing to make the whole page
| reactive, it definitely drops the amount of work required.
|
| Regarding the page loads, have you looked at Turbolinks?
| https://github.com/turbolinks/turbolinks/blob/master/README....
|
| It's basically a drop in upgrade, makes the whole site feel
| like an SPA with none of the work. Lovely.
| chocolatkey wrote:
| Django + Turbolinks + Stimulus.js (also by basecamp,
| intentionally works great with turbolinks) is my goto
| nowadays.
| Scarbutt wrote:
| Now try Rails and get enlighten.
| dpau wrote:
| There seems to be a similar migration path for projects in
| Laravel: Replace existing jQuery with Vue (or other js framework)
| components but still use the backend templating engine, then
| start consuming data from backend via API rather than as
| variables passed through templates, maybe add some Vue routing so
| the page doesn't have to refresh all the time, add data
| validation to components, end up writing entire forms in
| components, realize you now need authentication and authorization
| data within components, and suddenly you have a Frankenstein
| application that would be much cleaner if it the frontend were
| completely written in js and the backend simply a json api...
| jilles wrote:
| I am currently working on a personal project using Django and
| Django Rest Framework purely as the back-end. My front-end is a
| React app.
|
| Because I just use django+drf for the api, I thought about using
| Flask + Flask REST.. However, after having worked with Django
| over 3 years, I found the learning curve quite steep.
|
| Do you intend to use Vuex and/or Vue router at some point?
| wilsonfiifi wrote:
| I really love Django and Wagtail but I just can't stop writing
| Go(lang) code, it's just so addictive. It's a pity there aren't
| any WSGI servers written in Go that Would allow you to intermix
| Go and Python code seamlessly. Kind of like what Roadrunner does
| for php [0] [0]
| https://github.com/spiral/roadrunner
| [deleted]
| [deleted]
| mythrwy wrote:
| Vue and Django (with Rest Framework) are a great combo and I've
| used them together to build two reasonably sized apps recently.
|
| I don't know if I'm doing it wrong but I still use Gulp to
| compile everything. I use Django for the routing and intermix a
| tiny bit of dynamic server-side data (like login user or
| breadcrumbs) in the Django templates before they go to Vue.
|
| Doing it like this I skip all the component complexity (I do use
| mixins) and can build front end with simple tools I understand.
| Possibly I could avoid a little repetition by using components,
| but the increase in abstraction I don't think would be worth it.
|
| This is fast to develop. I've seen less complex single page apps
| using React or whatever take what seems like a lot more effort.
| But like I say, maybe I'm not doing it right. It works really
| well though.
| dtjones wrote:
| Vue and Django work very well together. However I'd recommend
| completely decoupling the frontend and backend source code - and
| avoid using django templates entirely. Instead expose REST
| endpoints using django rest framework
| CameronNemo wrote:
| Why? Server side rendering is often fast and well suited for
| pages with mostly read-only content.
| rahimnathwani wrote:
| The article mentioned this approach:
|
| "When you google for Django + Vue, most results will be focused
| on using Django for your backend and Vue for a separate
| frontend project."
|
| There are times when this makes sense, but there are times when
| you just need to sprinkle a but of Vue magic onto part of your
| site, without turning the whole thing into an SPA.
| sgt wrote:
| Been using Django alongside VueJS as well. It's a very efficient
| way of building your web app.
|
| That being said, mostly it's just a couple of pages that need
| VueJS such as e.g. a dashboard and such (depending on your app of
| course!).
|
| If you use standard Django with Turbolinks it will give you the
| SPA "feel" that you require.
___________________________________________________________________
(page generated 2020-04-14 23:00 UTC)