search

openoakland / TrashTalk

Repo for artifacts of the Trash Talk app for organizing cleanups and graffiti abatement.
Other
7 stars 10 forks source link

Frontend Frameworks Discussion #118

Closed mosdevly closed 6 years ago

mosdevly commented 6 years ago

Glad to see so much enthusiasm in slack for this :) I'd really like to see us move toward this development too this year.

As far as the next version of Trashtalk, v0.2 will release this month. It's basically in just good enough shape to let the CUT group start giving us some feedback but something of a farcry from what we'd like to see as users and developers. I say this to say: there's no rush to get the frontend implemented in the next few weeks or anything like that. I think we can get it done by the end of Q2, that's fantastic.

Some things I think we should think about in this move:

  1. How will this framework change our code base?
  2. What are the top priority features that make this a good idea?
  3. How will this impact deployment?

And with that let's discuss. https://github.com/openoakland/trashtalk-front

mosdevly commented 6 years ago

For the first question, this move will simplify a ton of code on the backend. Right now we're mostly relying on Django with templating, meaning it's handling every thing. This also means that we're using regular views half the time but the other half we're acting as an API for external services like See Click Fix and Adopt a Street. With a frontend, we can convert Django to a straight API and focus a lot more on services.

However, this also means deployment is twice the fun. We will effectively need to deploy two apps: the api and trashtalk. This is not hugely difficult or even that time consuming, but I want to make sure everyone is aware that this is not a free or simple move.

Top features? A more responsive, dynamic, interactive app is the way to go if we want people to like using it. A frontend will help with that. Specifically, I'd want it to handle forms, flash messages, no-refresh page updates, alerts ...the very things that make them worth using at all.

I overall really feel it's a good move though. There is a learning curve but I don't know that that's a negative given the current crew we have. Tim is pretty quick on the learning curve so I have no doubt he can learn it. I've used Angular 1, but not any of the others and I have some React experience (I don't really care for it though). I'd originally though something like Vuejs would be a nice gradual ramp up to something as massive as React or Angular, but I'd be interested to hear other thoughts on that.

TangoYankee commented 6 years ago

I am researching Angular, React, and Vue. I am leaning towards Vue. Vue's Positives:

  1. relatively shallow learning curve
  2. use of HTML templates a. Work can be delegated to HTML designers b. Existing templates can be readily adapted
  3. An integration with Bootstrap a. Existing Styling can be readily adapted

I am concerned that Vue is new and being developed by a small team. To explore this concern, I want to take a couple days to explore the documentation and tutorials.

There are a lot of consideration. I didn't want to go through an exhaustive list here. The above list contains just some of things that stuck out to me.

madsid commented 6 years ago

I put together a repo using vue-cli and some common standards. Please check the link, It has some nice linting for JS. Helps with someone learning and also I followed a clear directory structure for components which would help with people jumping in and working on a feature easily.

https://github.com/madsid/trashtalk-front

mosdevly commented 6 years ago

We're looking like we want to dip our toe in the Vuejs waters so let's roll with it.

The frontend repo is linked in the first post, FYI. It's empty so just clone, and push as per usual. You can use whatever you're testing out with the backend API already so you should be good to use data from the Trashtalk app. Please make sure to post any issues you encounter with the API. I know I've not finished everything up back there but definitely enough to test.

mosdevly commented 6 years ago

Related to PR here: https://github.com/openoakland/trashtalk-front/pull/1

Here's some rough API documentation: https://github.com/openoakland/TrashTalk/wiki/Trashtalk-API-Documentation

It lays out the base endpoints and defines the request and responses. We should talk about how Vuejs will be configured for making these requests.