Designing a Flask application with mobile in mind?

Question

I'm reading about Flask. Given its tight integration with Jinja2 and WTF-forms, what happens when I start writing a native mobile version of my website? I usually write a bunch of backend API that work independent of the frontend and then code up the frontend using JS. This way, if I have to implement a native mobile app, I can seemlessly use the backend APIs. With Flask's (or some other framework's) tight integration with template engines, how should I design my application?

For example, let us take an example from here, the author advocates that the login function be written like this:

from flask import render_template, flash, redirect
from app import app
from forms import LoginForm

# index view function suppressed for brevity

@app.route('/login', methods = ['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        flash('Login requested for OpenID="' + form.openid.data + '", remember_me=' + str(form.remember_me.data))
        return redirect('/index')
    return render_template('login.html', 
        title = 'Sign In',
        form = form)

However, when I am building a native Android/iOS app, I'm assuming that the backend should expose a bunch of API calls that validate the input and do the login for you. And given that mobile is agnostic to Jinga2 or some other templating (because everything is implemented native), all this code is useless in the context of native mobile apps. This means, I will have to refactor the "real-world" Flask code to be compatible with a mobile app. Is this the case or am I missing the higher-level point?

My specific question is: What is the design pattern I should follow in Flask to ensure that my site is web and mobile friendly?

Solution 1

I think there are 2 issues here:

1. Writing a web client that is web and mobile friendly
2. Designing an application with web and mobile components

Issue 1 would involve a responsive web design that formats the webpage in a manner friendly to both desktop web browsers and mobile web browsers. There are CSS techniques to use different style sheets and templates depending on the browser viewport size. This would be where different jinja2 templates could be used for mobile vs. web clients. Or there are "responsive designs" that adjust according to viewport size.

Issue 2 speaks to how you architect your services and clients. You could do like you said and have a backend API (could be a Flask application or not. Flask-Classy or Flask-Restful are Flask extensions that assist in developing REST API with Flask) independent of any frontend. Then you could code a native mobile app that uses the backend API. And you could code a Flask web application that also uses the backend. There wouldn't be any dependencies between the mobile app and the Flask app. They're just two distinct clients that both access the same backend API.

The example you linked to is creating a monolithic web application. It's an excellent tutorial if that's what you're looking to create. But it wouldn't apply in its entirety if you want a set of services that can be used by both mobile apps and web clients.

Solution 2

Well there is a crude way to go about this issue which I used successfully in my application. So every time a request is made from the web application or the android application I add a field in the request called "device" and set its value to "web" or "android" accordingly.

On the front-end:

    <form id="test" action="test" method="get">
        <input type="hidden" name="device" value="web"/>
        <input type="submit" value="Submit"/>
    </form>

Similarly I do the same from my Android Application.

Now at the Flask Server I read the value of this field and handle the request accordingly.

    @app.route('/test', methods=['GET'])
    def test():
        device = request.args.get('device')

        if device is "web":
            return render_template('test.html', data='Hello Word')
        else:
            # Return data to Android Application
            return json.dumps({'data':'Hello World'})

I am pretty sure there must be a much better way to deal with this, but this one works perfectly fine. Hope it helps :)