ember js mixins

This post will illustrate how ember mixins are used in the Open Event Frontend to avoid code duplication and to keep it clean to reduce code complexity. The Open Event application needs forms at several places like at the time of login, for the creation of the event, taking the details of the user, creating discount codes for tickets etc. Every form performs similar actions which taking input and finally storing it in the database. In this process, a set of things keep executing in the background such as continuous form validation which means checking inputted values to ensure they are correctly matched with their type as provided in the validation rules, popping out an error message in case of wrong inputted values, etc. which is common to all the forms. The only thing which changes is the set of validation rules which are unique for every form. So let’s see how we solved this issue using Ember Mixins. While writing the code, we often run into the situation where we need to use the similar behaviour in different parts of the project. We always try not to duplicate the code and keep finding the ways to DRY ( Don’t Repeat Yourself ) up the code. In Ember, we can share the code in the different parts of the project using Ember.Mixins. While creating the forms, we mostly have differing templates but the component logic remains same. So we created a mixin form.js which contains all the properties which are common to all the forms. The code mixin contains can be reused throughout different parts of the application and is not a concern of any one route, controller, component, etc. The mixins don't get instantiated until we pass them into some object, and they get created in the order of which they're passed in. The code for form.js mixin looks like this. export default Mixin.create({ autoScrollToErrors : true, autoScrollSpeed : 200, getForm() { return this.get('$form'); }, onValid(callback) { this.getForm().form('validate form'); if (this.getForm().form('is valid')) { callback(); } }, didRender() { const $popUps = this.$('.has.popup'); if ($popUps) { $popUps.popup({ hoverable: true }); } let $form = this.$('.ui.form'); if ($form) { $form = $form.first(); if (this.get('getValidationRules') && $form) { $form.form(merge(defaultFormRules, this.getValidationRules())); } }, didInsertElement() { $.fn.form.settings.rules.date = (value, format = FORM_DATE_FORMAT) => { if (value && value.length > 0 && format) { return moment(value, format).isValid(); } return true; }; } The complete code can be seen here. Let’s start understanding the above code. In the first line, we created a mixin via Ember.Mixin.create() method. We have then specified the property ‘autoScrollToErrors’ to true so in case if there is some error, the form will automatically scroll to the error. The property ‘autoScrollSpeed’ specifies the speed with which the form will auto scroll to show the error. ‘getForm()’ method helps in getting the object which will be passed to the mixin. In ‘onValid()’ method we’re validating the form and passing the callbacks if it is correctly validated. We then have ‘didRender()’ method which renders…