"Shortest path" to "Django-based" mobile / multi-platform app?

Using Django Getting Started
1

Hello, What’s the best (quickest, easiest, least “unnatural”) way in 2023 to produce a multi-platform app (high-quality and maintainable) based as much as possible on Django?

A lot of what you see by googling is: a front-end mobile app done with React hitting a back-end REST API done with Django / DRF.

If I was willing to go that route – partitioning the project code into two separate “paradigms” – I think that in 2023 I’d choose Flutter for the front end. Flutter gets you a multi-platform app (iOS, Android, web, Linux, macOS, Windows) from a single codebase. Also, Flutter has a big backer, and hence has good long-term prospects. As well, Flutter has a burgeoning community, so “google is your friend” – lots of articles, tutorials, posts, etc. about anything you encounter.

BUT, … a) you do have to subdivide your project into two sides, and incur the overhead of constructing the API between them, being careful about things like transactionality, and b) you leave behind a lot of what Django has to offer you – views / forms, and in a way you’re using Django in a way that is not fully natural / intended. So…

What about doing your entire project with Django the more natural way, making sure as much as possible that the views are sparse enough to look ok in a mobile browser?

Before heading down that path, I’d be grateful to the community for any insights / pointers / warnings.

Thank you very much.

  • Doug

P.S. I did look at Ionic Capacitor as a way to turn the web app into a native iOS or Android app, but it appears that they require static HTML, along with JavaScript, to be bundled into the app; HTML generated dynamically based on templates seems to be a “no go” for Capacitor.

P.P.S. I did look into Kivy, as a way to at least stay in Python on the front end, but it’s not very mature, doesn’t have much of a community, and does not appear to be a very vital alternative for the long run.

1 Like
2

These are not absolute binary attributes. Something isn’t “quickest” or not. Something isn’t “maintainable” or not. Something isn’t “high-quality” or not. They’re all relative to something else, and they all exist on a continuous scale.

It’s also highly dependent upon what your requirements are. It’s contrary to the fundamental principles of systems architecture to try and define an architecture outside the context of the requirements.

We (relatively) recently made one of our projects “mobile friendly”. It’s a pure Django app using Bootstrap. It works great for the people using it for the purposes for which it is intended.

I’ve got another project that I’m working on that uses Django, Channels, Bootstrap and HTMX. It also works extremely well on a sufficiently large mobile device display.

In neither case do I think that there’s anything to be gained by trying to make them “apps” in the pure sense of the word. We might look at bundling one of them as a browser-based app, but no decision has been made yet.

But in both cases, they satisfy our requirements for the application to be accessible on mobile devices without doing any work specific to the mobile environment, outside of using the proper bootstrap classes in structuring the pages.

1 Like
3

Thank you for the quick response.

Any chance you could provide links to a couple of articles / guides / tutorials on Django + Bootstrap that you feel are particularly well done?

Also, if the pure Django app using Bootstrap, that you recently made “mobile friendly”, is publicly viewable, could you provide a github link?

re: absoluteness – Yes, of course. That was just a quick / easy way to convey the direction in which we’d like to move. The context: “run of the mill” / sweet-spot Django applications – relatively straightforward models / database, CRUD-ish operations, a bit of custom business logic. Think: What you see in Django tutorials, and the kinds of things you might produce starting from Cookiecutter Django or DjangoX. Except: we’d like it to be usable from browsers on phones and tablets (not watches, which would be overreaching :)).

Thank you very much!

  • Doug
4

How much do you already know about Django?

About Bootstrap?

About HTML and CSS (and what it means to be “mobile friendly”)?

(And no, our app is not publicly available - it’s a corporate internal “line of business” application for project management / financial reporting.)

5

HTML, CSS, JavaScript: I’ve done lots in a number of different contexts.

Django: After doing tutorials, I’ve done a couple of straightforward app prototypes – nothing fancy or deep yet. Some were web apps employing views and forms. Some were services behind REST APIs done with DRF (and drf-spectacular for Swagger/OpenAPI).

Bootstrap: Yet to dive in.

“Mobile friendly”: I just would like the web app to be usable inside a phone or tablet browser – users shouldn’t have to zoom way in and pan all over the place just to make out the content, and users should be able to do things by tapping instead of mousing. In the vernacular: “adaptive” and “responsive”?

I have seen Bootstrap (front-end framework) - Wikipedia
“Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.”

I also have seen various articles on Django + Bootstrap, but I was hoping that rather than having to wade through all that myself to identify the ones I can trust / follow, I could instead get a leg up on the process by asking the community which are the best sources, getting it from the horse’s mouth / standing on the shoulders of giants. Know what I mean?

BTW, I see that both DjangoX and Cookiecutter Django incorporate Bootstrap. So maybe I should just quickly fire up a Hello World of each of those, and find that they adapt beautifully to whatever device I’m on at the moment, and … “Bob’s yer uncle!” :slight_smile: ?

Thank you very much again.

  • Doug

P.S. I believe that there’s value in leaving this thread in the forum, to save others who are embarking on this path from having to put a bunch of time into digging through all this background themselves.

7

Agree Bootstrap is a great way to quickly build something that will be reasonably responsive in a mobile browser.

If you’re interested in going deep on your front end interactivity options, I’ve written an entire series based on my own journey into this topic called “modern JavaScript for Django developers” that might be helpful. My early conclusion as a Django dev was to use a “hybrid” option with React - avoiding the complete separation of front and back end so you can leverage Django auth and other batteries out of the box, and still use Django templates for all the simple pages. In the last 2-3 years I’ve become more bullish on the “low-JS” world, and specifically HTMX and Alpine.js as a way to remove React entirely (part 5 of the guide). If you’re comfortable with the idea of a mobile-website-based UX then this is definitely the route I’d pursue before getting into the React / SPA world.

Finally, if you don’t want to wrestle with a bunch of UX scaffolding, auth, and so forth you could consider paid boilerplates. There are a few on the market, including my own, SaaS Pegasus.

1 Like
8

Thanks Cory!

I took a quick look at Part 5. Yes, if straight Django + Bootstrap doesn’t do it for me, I’ll give HTMX + Alpine.js a try.

But first, I’ll still look for some good Django + Bootstrap guides to work from, and give that a try.

Thanks very much.

1 Like
9

Note, it’s not an “either or”. HTMX / Alpine address different issues. All of those components work well together.

It’s all Bootstrap, and using the appropriate CSS in your templates. Django has no specific part in this. You find what classes to use from Bootstrap, and use them in the templates being rendered.

10

Yeah, it may be obvious, but Bootstrap is a CSS framework with solves the “presentation” layer - e.g. what the users see. There is also TailwindCSS, Materialize, Bulma, etc. All of these have some pattern you follow to make your web pages look nice on mobile.

Then there’s interactivity, which controls what happens when your users click around and such. In a “pure” Django app with no JavaScript, your only option for interactivity is to do a full page reload each time the user clicks a link/button. React and HTMX/Alpine are two competing ways to add interactivity to Django, with React being about going “all in” on JavaScript, and HTMX/Alpine taking the opposite approach and hiding ~all the JavaScript from you. They all have pros and cons, but are typically far easier to work with than e.g. jQuery which was what everyone did when Django was first released.

1 Like
11

very good article, I just spent my day on it.

1 Like