Enhancement/Refactor projects page to Vue single file component #148
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
c-w
force-pushed
the
enhancement/refactor-projects-page-to-vue-single-file-component
branch
2 times, most recently
from
34bddec
to
93760f0
Compare
Hironsan
reviewed
Apr 12, 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
force-pushed
the
enhancement/refactor-projects-page-to-vue-single-file-component
branch
from
93760f0
to
72d91c6
Compare
c-w
force-pushed
the
enhancement/refactor-projects-page-to-vue-single-file-component
branch
from
72d91c6
to
7f83f71
Compare
c-w
deleted the
enhancement/refactor-projects-page-to-vue-single-file-component
branch
This was referenced Apr 12, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently Django and Vue are somewhat coupled in that the project intermixes templating constructs from both eco-systems.
Examples of this in
projects.htmlinclude: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
.jsand.vuefiles. 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 toplugin:vue/recommended.