Puzzle Pattern

Puzzle Pattern is a Vue.js development pattern created for code organization, while using the best practices, clean code, and much more.

Why use Puzzle Pattern?

When you are working with several different developers in one single project, the code tends to variate a lot one file to the other.

ESLint usually helps us with that already. However, there are a lot of cases some linters may look the other way, when it shouldn't.

If you wish to maintain a code pattern throughout your entire project, with clean and organized code, that can also help with code maintenance, this is the pattern for you!

1 MUST

• 1.1 Use ES6 in full capacity;
• 1.2 Set a default language to be used throughout the project. If it's not your native language, define all the words will not be translated;
• 1.3 Define a code order inside your <script> that must be followed throughout all components. Only declare it if you are going to use it in your component. The recommended order is:

// imports
export default {
  name: "",
  props: {},
  components: {},
  mixins: [],
  directives: {},
  data: () => ({}),
  computed: {},
  filters: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {},
  watch: {},
};

• 1.4 Props must always be an object with a declared type;
• 1.5 Props should be declared with lower camelCase. However, in the HTML they must be called with kebab-case;
• 1.6 Pass a parameter method only when needed;
• 1.7 Prioritize the use of const, otherwise use let;
• 1.8 The data () declaration must be like this: data: () => ({}); or data: vm => ({}); when you need to use a Vue instance property.
• 1.9 If you wish to use the queryString when sending a GET request, use the { params } object;
• 1.10 The export default must be at the same level of indentation as the <script>. The same goes for the first CSS property inside the <style>;
• 1.11 Remove all unused declarations, vars and empty tags. The same goes for the <script> and <style>;
• 1.12 One line break after all the imports;
• 1.13 One space always before and after a variable inside an interpolation;
• 1.14 Double quotes in all HTML tag attributes;
• 1.15 When a tag has more than one attribute, for each attribute place a line break;
• 1.16 Put a line break after each dot inside your script whenever possible;
• 1.17 When calling a method inside your HTML component, always put the parentheses "()";
• 1.18 Only use mapGetters when you are manipulating the state;
• 1.19 Moderate use of vuex, only in cases when you need the same state in a few components;
• 1.20 Using vuex, always use mapGetters, mapState, mapActions and mapMutations, instead of this.$store;
• 1.21 A vuex's action should always return a promise.
• 1.22 HTML tags must have their declaration in the following order: Tag, id, class, attributes.
• 1.23 Destructuring assignment should be only for variables and never for methods. Example: let { girls, guys, women, men } = state.
• 1.24 Component files must have upper camel Case name (except in index.vue files).

2 SHOULD

• 2.1 Use computed properties in your HTML instead of methods;
• 2.2 Use filter, map, reduce and find;
• 2.3 Create customized events rather than props with type Function which returns a callback;
• 2.4 Use the created () Lifecycle rather than mounted ();
• 2.5 Use v-if instead of v-show;
• 2.6 Use the .sync modifier rather than v-model;
• 2.7 Use display flex rather than other types of display;
• 2.8 Import your files with "@" rather than "../";
• 2.9 Whenever you are going to duplicate a code, create a mixin instead and declare it locally.

3 AVOID

• 3.1 Using watchs, use computed instead;
• 3.2 Using var, use const or let instead;
• 3.3 Using else, prioritize early return;
• 3.4 Using switch case;
• 3.5 Using forEach, for in, for and while;
• 3.6 Using the attribute style static in your HTML tags;
• 3.7 Using scoped on your <style>, instead create a class and wrap all your <template> on it, then put all other class you have inside that one;
• 3.8 Using the beforeUpdate () and updated () Lifecycle;
• 3.9 Using the directive v-html;
• 3.10 Using more than one props type;
• 3.11 Declaring global filters;
• 3.12 Declaring global directives;
• 3.13 Declaring global components with Vue.component();
• 3.14 Treating Date as a String, use momentjs instead;
• 3.15 Having several levels of indentation;
• 3.16 In a request, avoid grabbing all of the response. Instead, grab only what you are going to actually use.

4 DON'T

• 4.1 Declare global mixins;
• 4.2 Use the v-bind directive. Instead, use the short term (:);
• 4.3 Use the v-on directive. Instead, use the short term (@);
• 4.4 Use a div as an actual div using Pug. Create a class or id instead;
• 4.5 Use style, height, width, and other static attribute tags inside them directly. Create a class instead;
• 4.6 Use jQuery.

Code Style Recommended

This is the code style that was used to create this pattern and it's recommended to use Puzzle Pattern in it's full potential.

Template Engine Recommended

Pug is highly recommended to use in all your <template> thorough your project.

TODO

• Add code examples.
• Develop a Puzzle ESLint.
• Develop a Puzzle Editor Plugin.

Contributors

License

MIT © guastallaigor