search

axismaps / levantCarta

4 stars 0 forks source link

Architecture proprosal #1

Closed DaviTeodoro closed 4 years ago

DaviTeodoro commented 4 years ago

Frameworks

Nuxt.js (vue.js)

Nuxt is a framework build on top of vue.js. It offers SSR, Routing, Static File Serving and Pre-processors out of the box.

Vuex

As it is a big scope project I propose we use Vuex for state management, Vuex let us easily pass the Map() instance down to the vue components. Its a nice "glue" between mapbox-gl state and vue.js.

Mapbox-gl

Mapbox-gl is a js library build on top o leaflet.js, but it offers a wider API, its is very well documented and uses WebGL to render.

Mapbox-gl-draw

Mapbox-gl has a plugin that adds support for drawing and editing features.

Sass

CSS extension language to make ours lives easier.

Element-ui

A Vue based component library that offers lots of components for common task out of the box. As its design system style is similar to ours we wouldn't need to make wider changes.

Since I've been using most of them together, I know they fit well. I haven't worked with Mapbox-gl-draw yet, but since it has good documentation I don't think it will be a big problem. I also put together an app using nuxt.js + mapbox-gl.js and Mapbox-gl-draw. And it already has some drawing features that we need.

App link: https://condescending-poitras-8efc7d.netlify.com/

davidheyman commented 4 years ago

I'm really happy with all of this @DaviTeodoro. Great work!

The next step is to figure out how we'll integrate with the server. Nuxt works with Express so it should be an easy integration with authentication, but I'm unsure about how to structure things. Can they live separately or should we bring them together into 1 full-stack application?

I'd also like to plan out:

  1. Documentation: Whatever is simple enough to get us to actually do it
  2. Testing: Once again, simple enough that we write the tests but enough to ensure that broken builds don't make it onto the master branch
DaviTeodoro commented 4 years ago

As we agreed, I am setting up a nuxt + sequelize application and will update this issue as it progresses.

Just for this setup part I'll be committing directly to master. If you don't mind of course.

Other stuff that I would need help to set up properly:

davidheyman commented 4 years ago

This is looking great so far. Two quick changes:

  1. Store all database connection parameters in a .env file and read it using dotenv-safe. This will require a .env.example file to be committed into the repo (.env should be ignored).
  2. Use the migration / model strategy for sequelize instead of sync. This will require the sequelize-cli and a .sequelizerc file to specify the location of the migrations directory.
DaviTeodoro commented 4 years ago

Dotenv-safe and migration / model strategy are now working! 3c4b659b8d5c0c50aedd57eb8252af69f8c5d0f4 and 0e955da792a01da41558cc36ce64e623afa4ee3b