You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@airavata.apache.org by "Mowery, Nicholas Benjamin" <nb...@iu.edu> on 2020/06/05 22:04:25 UTC

Re: Project Update and Questions

Hi all,

another update on the GeoGateway Django App. This week I've focused on state management with Vuex and developing a modular and lightweight method for adding KML map layers to the Leaflet map. I've opted to use Vuex to make communication between child components easier. I've also removed Vue as a CDN (in favor of Vue CLI + Webpack) and and fully separated the Vue frontend and Django backend. The boilerplate code is significant but I now have a stable development environment that can be deployed quickly.

A question I'm considering:

  *   What is the best way to implement file upload in an Airavata Django app.  Django has a relatively straight-forward method but it might not be the best in our case
     *   https://simpleisbetterthancomplex.com/tutorial/2016/08/01/how-to-upload-files-with-django.html

Generally, I'm wondering if this problem should be handled locally by the application rather than communicating with Airavata.
Some things I've learned:

  *   If the application is going to have more than 10 Vue components, implement a Vuex store from the start
  *   vue2-leaflet is not extensible enough for large GIS applications that require customized map layers
  *   Webpack configuration can be painful and a boilerplate for future Django + Vue + Webpack applications will be helpful

Please reply with any comments or questions. Any recommendation regarding file uploads would be appreciated. Thank you!
-Nick

Nicholas Mowery
Student of Computer Science and Philosophy
Student Developer | CIRC | GSoC Apache
Indiana University Bloomington

________________________________
From: Mowery, Nicholas Benjamin
Sent: Thursday, May 21, 2020 5:51 PM
To: dev@airavata.apache.org
Subject: Project Update and Questions



Hi all,

This summer I am working on developing a GeoGateway Django app for the Airavata Django Portal. So far I have developed a skeleton of the app and integrated Vue.js for the frontend UI components. At this stage I'm looking for input on some of the choices I've made and if any of them should be adjusted.


  *   Leaflet and Vue.js (over Google Maps and React.js)
  *   It seems at this scale that a modular app rather than Vue.js style SPA makes more sense (although some of the other Airavata GIS applications are mostly SPA)

There are a lot of style choices to be made and many I'm likely still unaware of, so any tips on structuring and organizing a project like this will be helpful.
I also have a couple questions I've accumulated about Django for anyone willing to help:

  *   When working with a custom Django app in the Airavata Portal, should I redefine the MEDIA_ROOT directory in the apps.py file? Is there a precedent for changing variables like this defined in the project-wide settings.py file on a per-app basis?
  *   I'm finding that {% include .....html %} works perfectly but {% extends ....html %} does not. I use the block/endblock syntax with unique names but the content doesn't show up. Is there a reason I should use extends over include?

Thanks for reading.
-Nick


Nicholas Mowery
Student of Computer Science and Philosophy
Student Developer | CIRC | GSoC Apache
Indiana University Bloomington

Re: GeoGateway Project Update

Posted by "Christie, Marcus Aaron" <ma...@iu.edu>.
Hi Nick, this is good summary. I had a couple of other thoughts:

- I really like the "Thinking in React" article [0]. Even though it is specific to React, the principles are pretty general. You only need to do a little mental translating to make it work for Vue (for example, parent-child communication in React involves passing callbacks to children, but, while you can do that in Vue too, typically in Vue children will dispatch events to the parent).
- I'm sorry you wrestled with the boilerplate so much. We do have documentation on how to setup the boilerplate for core Django apps [1], but it would probably be good to have the same for custom Django apps as well. Perhaps better than a boilerplate template would be a working minimal example that could be copied and modified, just my two cents.


[0] https://reactjs.org/docs/thinking-in-react.html <https://reactjs.org/docs/thinking-in-react.html>
[1] https://apache-airavata-django-portal.readthedocs.io/en/latest/dev/new_django_app/ <https://apache-airavata-django-portal.readthedocs.io/en/latest/dev/new_django_app/>


> On Jun 19, 2020, at 1:50 PM, Mowery, Nicholas Benjamin <nb...@iu.edu> wrote:
> 
> Greetings from sunny Bloomington,
> An update on the GeoGateway Django App:
> This week I've worked on setting up a reverse-proxy to bypass CORS when sending requests to external sources. To do this I've mapped GeoGateway URLs to request functions in the Django backend which are used by axios in the Vue frontend. This method is flexible but not as efficient as it could be. For the resources that take longer to resolve, I will cache the results periodically to improve performance (as per Marlon's suggestion).
> In a previous email referenced Vuex and how it should be implemented in an application of 10 components or more; I'm learning that this is not necessarily true. Vuex is a very powerful tool for large applications but because of its complexity, can be more work to implement than an event bus. I've removed Vuex in favor of a global event bus and it has simplified things immensely. If anyone has developed with Vue before and has had to make a decision regarding state management and event listeners, I'd love to hear what decision was made and why as I'm sure there is room for improvement in my implementation.
> After wrestling with the Vue+Django+Webpack boilerplate and eventually landing on a solid configuration, I've found development proceeds smoothly and working with Vue and Django separately is a pleasure. There are plenty of articles and repos that help to lay down the boilerplate for a Vue+Django+Webpack project but because this is a part of the Airavata Django Portal, the setup is a bit different. I think this setup could be useful to future Airavata developers and I hope to push a versatile boilerplate for future projects using the same technologies.
> 
> In summary:
> Django CORS reverse-proxy
> Caching results to improve performance
> Jettisoned Vuex in favor of event bus (Please share thoughts on this)
> Vue+Django+Webpack boilerplate for future Airavata developers (would this be helpful?)
> Thanks for reading!
> -Nicholas
> 
> 
> From: Mowery, Nicholas Benjamin <nbmowery@iu.edu <ma...@iu.edu>>
> Sent: Friday, June 5, 2020 6:04 PM
> To: dev@airavata.apache.org <ma...@airavata.apache.org>
> Subject: [External] Re: Project Update and Questions
>  
> This message was sent from a non-IU address. Please exercise caution when clicking links or opening attachments from external sources.
> 
> Hi all, 
> another update on the GeoGateway Django App. This week I've focused on state management with Vuex and developing a modular and lightweight method for adding KML map layers to the Leaflet map. I've opted to use Vuex to make communication between child components easier. I've also removed Vue as a CDN (in favor of Vue CLI + Webpack) and and fully separated the Vue frontend and Django backend. The boilerplate code is significant but I now have a stable development environment that can be deployed quickly. 
> A question I'm considering:
> What is the best way to implement file upload in an Airavata Django app.  Django has a relatively straight-forward method but it might not be the best in our case
> https://simpleisbetterthancomplex.com/tutorial/2016/08/01/how-to-upload-files-with-django.html <https://simpleisbetterthancomplex.com/tutorial/2016/08/01/how-to-upload-files-with-django.html>
> Generally, I'm wondering if this problem should be handled locally by the application rather than communicating with Airavata.
> Some things I've learned: 
> If the application is going to have more than 10 Vue components, implement a Vuex store from the start
> vue2-leaflet is not extensible enough for large GIS applications that require customized map layers
> Webpack configuration can be painful and a boilerplate for future Django + Vue + Webpack applications will be helpful
> Please reply with any comments or questions. Any recommendation regarding file uploads would be appreciated. Thank you!
> -Nick
> 
> Nicholas Mowery
> Student of Computer Science and Philosophy
> Student Developer | CIRC | GSoC Apache
> Indiana University Bloomington
> 
> From: Mowery, Nicholas Benjamin
> Sent: Thursday, May 21, 2020 5:51 PM
> To: dev@airavata.apache.org <ma...@airavata.apache.org>
> Subject: Project Update and Questions
>  
> 
> Hi all,
> This summer I am working on developing a GeoGateway Django app for the Airavata Django Portal. So far I have developed a skeleton of the app and integrated Vue.js for the frontend UI components. At this stage I'm looking for input on some of the choices I've made and if any of them should be adjusted.
> 
> Leaflet and Vue.js (over Google Maps and React.js)
> It seems at this scale that a modular app rather than Vue.js style SPA makes more sense (although some of the other Airavata GIS applications are mostly SPA)
> There are a lot of style choices to be made and many I'm likely still unaware of, so any tips on structuring and organizing a project like this will be helpful.
> I also have a couple questions I've accumulated about Django for anyone willing to help:
> When working with a custom Django app in the Airavata Portal, should I redefine the MEDIA_ROOT directory in the apps.py file? Is there a precedent for changing variables like this defined in the project-wide settings.py file on a per-app basis?
> I'm finding that {% include .....html %} works perfectly but {% extends ....html %} does not. I use the block/endblock syntax with unique names but the content doesn't show up. Is there a reason I should use extends over include?
> Thanks for reading.
> -Nick
> 
> Nicholas Mowery
> Student of Computer Science and Philosophy
> Student Developer | CIRC | GSoC Apache
> Indiana University Bloomington

GeoGateway Project Update

Posted by "Mowery, Nicholas Benjamin" <nb...@iu.edu>.
Greetings from sunny Bloomington,

An update on the GeoGateway Django App:

This week I've worked on setting up a reverse-proxy to bypass CORS when sending requests to external sources. To do this I've mapped GeoGateway URLs to request functions in the Django backend which are used by axios in the Vue frontend. This method is flexible but not as efficient as it could be. For the resources that take longer to resolve, I will cache the results periodically to improve performance (as per Marlon's suggestion).

In a previous email referenced Vuex and how it should be implemented in an application of 10 components or more; I'm learning that this is not necessarily true. Vuex is a very powerful tool for large applications but because of its complexity, can be more work to implement than an event bus. I've removed Vuex in favor of a global event bus and it has simplified things immensely. If anyone has developed with Vue before and has had to make a decision regarding state management and event listeners, I'd love to hear what decision was made and why as I'm sure there is room for improvement in my implementation.

After wrestling with the Vue+Django+Webpack boilerplate and eventually landing on a solid configuration, I've found development proceeds smoothly and working with Vue and Django separately is a pleasure. There are plenty of articles and repos that help to lay down the boilerplate for a Vue+Django+Webpack project but because this is a part of the Airavata Django Portal, the setup is a bit different. I think this setup could be useful to future Airavata developers and I hope to push a versatile boilerplate for future projects using the same technologies.


In summary:

  *   Django CORS reverse-proxy
  *   Caching results to improve performance
  *   Jettisoned Vuex in favor of event bus (Please share thoughts on this)
  *   Vue+Django+Webpack boilerplate for future Airavata developers (would this be helpful?)

Thanks for reading!
-Nicholas



________________________________
From: Mowery, Nicholas Benjamin <nb...@iu.edu>
Sent: Friday, June 5, 2020 6:04 PM
To: dev@airavata.apache.org
Subject: [External] Re: Project Update and Questions

This message was sent from a non-IU address. Please exercise caution when clicking links or opening attachments from external sources.


Hi all,

another update on the GeoGateway Django App. This week I've focused on state management with Vuex and developing a modular and lightweight method for adding KML map layers to the Leaflet map. I've opted to use Vuex to make communication between child components easier. I've also removed Vue as a CDN (in favor of Vue CLI + Webpack) and and fully separated the Vue frontend and Django backend. The boilerplate code is significant but I now have a stable development environment that can be deployed quickly.

A question I'm considering:

  *   What is the best way to implement file upload in an Airavata Django app.  Django has a relatively straight-forward method but it might not be the best in our case
     *   https://simpleisbetterthancomplex.com/tutorial/2016/08/01/how-to-upload-files-with-django.html

Generally, I'm wondering if this problem should be handled locally by the application rather than communicating with Airavata.
Some things I've learned:

  *   If the application is going to have more than 10 Vue components, implement a Vuex store from the start
  *   vue2-leaflet is not extensible enough for large GIS applications that require customized map layers
  *   Webpack configuration can be painful and a boilerplate for future Django + Vue + Webpack applications will be helpful

Please reply with any comments or questions. Any recommendation regarding file uploads would be appreciated. Thank you!
-Nick

Nicholas Mowery
Student of Computer Science and Philosophy
Student Developer | CIRC | GSoC Apache
Indiana University Bloomington

________________________________
From: Mowery, Nicholas Benjamin
Sent: Thursday, May 21, 2020 5:51 PM
To: dev@airavata.apache.org
Subject: Project Update and Questions



Hi all,

This summer I am working on developing a GeoGateway Django app for the Airavata Django Portal. So far I have developed a skeleton of the app and integrated Vue.js for the frontend UI components. At this stage I'm looking for input on some of the choices I've made and if any of them should be adjusted.


  *   Leaflet and Vue.js (over Google Maps and React.js)
  *   It seems at this scale that a modular app rather than Vue.js style SPA makes more sense (although some of the other Airavata GIS applications are mostly SPA)

There are a lot of style choices to be made and many I'm likely still unaware of, so any tips on structuring and organizing a project like this will be helpful.
I also have a couple questions I've accumulated about Django for anyone willing to help:

  *   When working with a custom Django app in the Airavata Portal, should I redefine the MEDIA_ROOT directory in the apps.py file? Is there a precedent for changing variables like this defined in the project-wide settings.py file on a per-app basis?
  *   I'm finding that {% include .....html %} works perfectly but {% extends ....html %} does not. I use the block/endblock syntax with unique names but the content doesn't show up. Is there a reason I should use extends over include?

Thanks for reading.
-Nick


Nicholas Mowery
Student of Computer Science and Philosophy
Student Developer | CIRC | GSoC Apache
Indiana University Bloomington