Instawork article on django + intercooler
Carson Gross
ad...@instawork.co
Author of the article here. Thank you for Intercooler! It's been surprisingly easy to integrate with other Django features, such as forms (automatically displaying server-side validations) and message toasts (triggered with Intercooler dependencies).
Anyone else using Intercooler with Django? Would love to hear how others are integrating the two frameworks.
J
Around 7 weeks ago I began a big project in Django.
Rather than bloat my application and learn a new JS framework (to be obsolete in another 8 months or so...), I chose Intercooler.
I came across it a few months ago and always thought it was a great idea. But I did wonder whether it would be as good for big projects as for the little examples on the website. I've found that many JS packages demonstrate "killer features" using tiny examples which scale terribly in terms of code structure and management.
Thankfully, I made the right choice. Intercooler is ridiculously good - especially with Django. I constantly wonder if I'm missing something or breaking a major rule because my speed of development is so quick.
But really it's because modern JS frameworks have made complex something that was simple all along.
Once you "get it", the power of managing requests and responses through HTML becomes very clear. So many extra steps eliminated. So many potential bugs eliminated. So much code... eliminated.
There have been a couple of situations where I've had to write some additional vanilla JS, but that's more than worth keeping Intercooler focused on its main aims. Nothing is worse than a library picking up vague bloat over its lifespan.
Even still, I've managed to restrict all async interaction with the backend to Intercooler requests.
Once the project has developed further, I may document some of the patterns I've been using with Intercooler. Notably, I managed to find a reasonably elegant solution to managing modal windows using Intercooler, Django, and a small amount of JS.
Thank you Carson. I really hope Intercooler lasts a long time.
Carson Gross
--
You received this message because you are subscribed to the Google Groups "intercooler-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to intercooler-j...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
ad...@instawork.co
Jason McBrayer
ad...@instawork.co writes:
> I'd love to see what you came up with for managing modals. We haven't
> found a good pattern in Django yet, so we're handling this on an
> ad-hoc basis. The best we found so far is to include an empty modal
> container on the page, and trigger an IC request when showing the
> modal.
Mastodon, that's what I'm doing for the new post link. I added the modal
very late in the game, and it took very few changes to the (Django)
view. Like I think someone else mentioned before, if you factor your
templates well, so that you don't repeat yourself in the template layer,
then the templates for IC responses tend to just be minimal wrappers
around your existing partials.
--
Jason McBrayer
jmc...@carcosa.net
“Strange is the night where black stars rise,
and strange moons circle through the skies,
but stranger still is lost Carcosa.”
― Robert W. Chambers,The King in Yellow
Matt Burton
<div class="modal in" id="icModal" role="dialog"></div>
$("body").on("application_success", function(elt, res) { //sweetalert success}).on("application_modal", function(elt, res) { $("#icModal").modal(res.action); //bootstrap modal - actions are show / hide}).on("application_warning", function(elt, res) { //sweetalert warning}).on("application_error", function(elt, res) { //sweetalert error});<a class="btn btn-info" src="javascript:;" ic-get-from="/some/help/partial" ic-target="#icModal"> <i class="fa fa-info-circle" aria-hidden="true"></i> Help</a>The controller action responding to that call then looks like this (ASP.NET MVC):
[HttpGet][Route("help")]public ActionResult Help(){ var model = SomethingThatBuildsTheViewModel();
return ModalFor(model);}{"application_modal": {"action": "show"}}The page then handles to the application_modal event and triggers the Bootstrap modal. The beautiful thing about the JSON response object is you can expand it any which way - I've got a fairly comprehensive set of client-side actions that can be triggered easily from the server - redirects, reload the page, trigger an Intercooler refresh of a specific element, trigger a client event with args, etc... There's already X-IC-Refresh and X-IC-Redirect of course, but by doing it this way I'm sending a single payload to the page that orchestrates what happens next - show a SweetAlert success message, then when that closes trigger a client side redirect, or whatever the use case calls for.
Matt