Búsqueda de sitios web

javascript - Flujo de trabajo típico de AngularJS y estructura de proyecto (con Python Flask)

Soy bastante nuevo en todo este frenesí de frameworks MV* del lado del cliente. No tiene que ser AngularJS, pero lo elegí porque me resulta más natural que Knockout, Ember o Backbone. De todos modos, ¿cómo es el flujo de trabajo? ¿La gente comienza desarrollando una aplicación del lado del cliente en AngularJS y luego conecta el back-end a ella?

¿O al revés, construyendo primero el back-end en Django, Flask, Rails y luego conectándole una aplicación AngularJS? ¿Hay una manera "correcta" de hacerlo, o al final es solo una cuestión de preferencia personal?

Tampoco estoy seguro de si debo estructurar mi proyecto según las prácticas de la comunidad de Flask o AngularJS.

Por ejemplo, la aplicación minitwit de Flask está estructurada así:

minitwit
|-- minitwit.py
|-- static
   |-- css, js, images, etc...
`-- templates
   |-- html files and base layout

La aplicación de tutorial de AngularJS está estructurada así:

angular-phonecat
|-- app
    `-- css
    `-- img
    `-- js
    `-- lib
    `-- partials
    `-- index.html
|-- scripts
 `-- node.js server and test server files

Puedo imaginar una aplicación Flask por sí sola, y es bastante fácil visualizar una aplicación AngularJS como la lista de tareas por sí sola, pero cuando se trata de usar ambas tecnologías no entiendo cómo funcionan juntas. Casi parece que no necesito un framework web del lado del servidor cuando ya tienes AngularJS, un servidor web simple en Python es suficiente. En la aplicación de tareas de AngularJS, por ejemplo, usan MongoLab para comunicarse con la base de datos usando API Restful. No era necesario tener un framework web en el back-end.

Tal vez simplemente estoy terriblemente confundido, y AngularJS no es más que una biblioteca jQuery sofisticada, así que debería usarla tal como usaría jQuery en mis proyectos de Flask (suponiendo que cambie la sintaxis de las plantillas de AngularJS a algo que no entre en conflicto con Jinja2). Espero que mis preguntas tengan algo de sentido. Principalmente trabajo en el back-end y este framework del lado del cliente es un territorio desconocido para mí.

Respuesta #1

Comenzaría organizando la aplicación Flask en la estructura estándar de la siguiente manera:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
|-- templates

Y como mencionó btford, si estás haciendo una aplicación Angular, querrás enfocarte en usar las plantillas del lado del cliente de Angular y alejarte de las plantillas del lado del servidor. Usar render_template('index.html') hará que Flask interprete tus plantillas de Angular como plantillas jinja, por lo que no se renderizarán correctamente. En su lugar, querrás hacer lo siguiente:

@app.route("/")
def index():
    return send_file('templates/index.html')

Tenga en cuenta que usar send_file() significa que los archivos serán almacenados en caché, por lo que podría querer usar make_response() en su lugar, al menos durante el desarrollo:

    return make_response(open('templates/index.html').read())

Después, desarrolla la parte de AngularJS de tu aplicación, modificando la estructura de la aplicación para que se vea así:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
        |-- app.js, controllers.js, etc.
    |-- lib
        |-- angular
            |-- angular.js, etc.
    |-- partials
|-- templates
    |-- index.html

Asegúrate de que tu index.html incluya AngularJS, así como cualquier otro archivo:

<script src="static/lib/angular/angular.js"></script>

En este punto, aún no has construido tu API RESTful, por lo que puedes hacer que tus controladores js devuelvan datos de muestra predefinidos (solo una configuración temporal). Cuando estés listo, implementa la API RESTful y conéctala a tu aplicación Angular con angular-resource.js.

EDITAR: He preparado una plantilla de aplicación que, aunque un poco más compleja que lo que he descrito arriba, ilustra cómo se podría construir una aplicación con AngularJS + Flask, completa con comunicación entre AngularJS y una API sencilla de Flask. Aquí está si quieres echarle un vistazo: https://github.com/rxl/angular-flask

Respuesta #2

Puedes empezar por cualquiera de los extremos.

Tienes razón en que probablemente no necesites un framework completo del lado del servidor con AngularJS. Normalmente es mejor servir archivos estáticos de HTML/CSS/JavaScript y proporcionar una API RESTful en el back-end para que el cliente la consuma. Una cosa que probablemente deberías evitar es mezclar plantillas del lado del servidor con plantillas del lado del cliente de AngularJS.

Si quieres usar Flask para servir tus archivos (podría ser excesivo, pero aun así puedes usarlo) deberías copiar el contenido de "app" de "angular-phonecat" en la carpeta "static" de "minitwit."

AngularJS está más enfocado en aplicaciones tipo AJAX, mientras que Flask te da la capacidad de hacer tanto aplicaciones web de estilo antiguo como crear APIs RESTful. Hay ventajas y desventajas en cada enfoque, así que realmente depende de lo que quieras hacer. Si me das algunos detalles, podría ser capaz de hacer más recomendaciones.

Respuesta #3

Este video oficial de Jetbrains PyCharm por John Lindquist (gurú de angular.js y Jetbrains) es un buen punto de partida ya que muestra la interacción entre el servicio web, la base de datos y angular.js dentro de flask.

Él construye un clon de Pinterest con Flask, SQLAlchemy, Flask-Restless y Angular.js en menos de 25 minutos.

Disfruta: http://www.youtube.com/watch?v=2geC50roans

Respuesta #4

editar: La nueva guía de estilo de Angular2 sugiere una estructura similar, si no idéntica, con mucho más detalle.

La respuesta a continuación apunta a proyectos a gran escala. He pasado bastante tiempo reflexionando y experimentando con varios enfoques para poder combinar algún framework del lado del servidor (Flask con App Engine en mi caso) para la funcionalidad del back-end junto con un framework del lado del cliente como Angular. Ambas respuestas son muy buenas, pero me gustaría sugerir un enfoque ligeramente diferente que (al menos en mi opinión) escala de una manera más humana.

Cuando estás implementando un ejemplo TODO, las cosas son bastante sencillas. Sin embargo, cuando comienzas a agregar funcionalidad y pequeños detalles agradables para mejorar la experiencia del usuario, no es difícil perderse en el caos de estilos, JavaScript, etc.

Mi aplicación comenzó a crecer bastante, así que tuve que dar un paso atrás y reconsiderar. Inicialmente, un enfoque como el sugerido arriba funcionaría, teniendo todos los estilos juntos y todo el JavaScript junto, pero no es modular y no es fácilmente mantenible.

¿Y si organizamos el código del cliente por funcionalidad y no por tipo de archivo:

app
|-- server
    |-- controllers
        |-- app.py
    |-- models
        |-- model.py
    |-- templates
        |-- index.html
|-- static
    |-- img
    |-- client
        |-- app.js
        |-- main_style.css
        |-- foo_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
        |-- bar_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
    |-- lib
        |-- jquery.js
        |-- angular.js
        |-- ...

y así sucesivamente.

Si lo construimos así, podemos envolver cada uno de nuestros directorios en un módulo angular. Y hemos dividido nuestros archivos de una manera agradable para que no tengamos que pasar por código irrelevante cuando estamos trabajando con una característica específica.

Un ejecutor de tareas como Grunt, correctamente configurado, podrá encontrar, concatenar y compilar tus archivos sin mucho problema.

Artículos relacionados