Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement/Refactor projects page to Vue single file component #148

Conversation

@c-w
Copy link
Member

c-w commented Apr 10, 2019

Currently Django and Vue are somewhat coupled in that the project intermixes templating constructs from both eco-systems.

Examples of this in projects.html include:

  • Checking if the user is a superuser to modify the Vue template.
  • Using Django filters to inject the capitalized username.

This makes it somewhat hard to follow the Vue code and also makes it more difficult to modularize the Vue components and re-use them.

As such, this change improves the separation of concerns by having the Django template only scafold the root element for Vue and serialize any variables that are required from the Django context to Javascript so that Vue can access them. The rest of the templating is then moved into a Vue single file component. This will make it easier for the developer to understand the Vue components and make it very clear what is rendered by Django and what is rendered by Vue.

In order to keep the changes minimal and focused, for now, only the projects page is moved to the new single file component paradigm. In future changes, some of the other pages can also be converted by following the same approach as outlined in this change. In future changes, the projects component can also be split into more smaller components to even better leverage the Vue single file component mechanism.

The change also adds eslint for single-file components. The linter acts on Vue components in both .js and .vue files. To keep the changes minimal and targeted, for now the linter uses a very permissive rule-set which essentially means that the linter is mostly disabled. As a separate change (e.g. see this branch), we should fix all the lint issues and tighten the rule-set to plugin:vue/recommended.

@c-w c-w force-pushed the CatalystCode:enhancement/refactor-projects-page-to-vue-single-file-component branch 2 times, most recently from 34bddec to 93760f0 Apr 10, 2019
c-w added 4 commits Apr 10, 2019
Currently Django and Vue are somewhat coupled in that the project
intermixes templating constructs from both eco-systems.

Examples of this in `projects.html` include:
- Checking if the user is a superuser to modify the Vue template.
- Using Django filters to inject the capitalized username.

This makes it somewhat hard to follow the Vue code and also makes it
more difficult to modularize the Vue components and re-use them.

As such, this change improves the separation of concerns by having the
Django template only scafold the root element for Vue and serialize any
variables that are required from the Django context to Javascript so
that Vue can access them. The rest of the templating is then moved into
a Vue single file component. This will make it easier for the developer
to understand the Vue components and make it very clear what is rendered
by Django and what is rendered by Vue.
Note that the linter acts on Vue components in both `.js` and `.vue`
files.

To keep the changes minimal and targeted, for now the linter uses a very
permissive rule-set which essentially means that the linter is mostly
disabled. As a separate change, we should fix all the lint issues and
tighten the rule-set to `plugin:vue/recommended`.
@c-w c-w force-pushed the CatalystCode:enhancement/refactor-projects-page-to-vue-single-file-component branch from 93760f0 to 72d91c6 Apr 12, 2019
@c-w c-w force-pushed the CatalystCode:enhancement/refactor-projects-page-to-vue-single-file-component branch from 72d91c6 to 7f83f71 Apr 12, 2019
@Hironsan Hironsan merged commit 5862b37 into doccano:master Apr 12, 2019
2 checks passed
2 checks passed
Travis CI - Pull Request Build Passed
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@c-w c-w deleted the CatalystCode:enhancement/refactor-projects-page-to-vue-single-file-component branch Apr 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.