Validating data in Ember

Talks about validation in general and specifically in Ember and some caveats and tips for using both, client and server side validations.
mentions ember-cp-validations and ember-changeset-validations addons

Transcript

1. Validating data in Ember Slava Vitebski 2018.08.27
2. First application using Ember started on 2014: • Ember 1.6.0.beta.2 – Ember data 1.0.0.beta.7 – Ember validation 1.0.0.beta.2 Ember history in Redis Labs 2
3. • Ember 3.3 (in-house) – 13 routes and 5 models • Ember 2.16.0 (onprem) – 24 routes and 31 models • Ember 2.13 (in-house) – 9 routes and 0 models • Ember 2.11 (service) – 55 routes and 39 models Ember today in Redis Labs 3
4. “Form validation helps us to ensure that users fill out forms in the correct format, making sure that submitted data will work successfully with our applications.” source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation 4
5. Pros - Quick feedback - no need to perform request to server - Better UX - immediate awareness of what wrong and how to fix it - Reduce load on server - validation logic executed on client - Faster and easier to implement Client-side validations 5
6. Cons - Duplication logic - multiple interfaces: REST API, Mobile app, desktop app - Less secure - if only implemented on client side Client-side validations 6
7. Pros - More secured - if UI bypassed server will stop harmful request - Some validations can only be done on server - registering user with unique email Server-side validations 7
8. Cons - Duplication logic - multiple interfaces: REST API, Mobile app, desktop app Server-side validations 8
9. Always do all validations on server first and only add necessary UI validations to improve user experience. 9
10. Using HTML5 input new features: - The required attribute - The min and max attributes - New text INPUT types: color, date, datetime-local, email, month, number, range, search, tel, time, url, week - The pattern attribute: specifies a regular expression to validate control’s value - message customization using setCustomValidity DOM API Client-side validations - methods 10
11. EmberJS Homemade method Client-side validations - methods 11
15. We can do it better - using EmberJS CP (Computed Properties) Client-side validations - home made 15
17. We can continue and improve it and finally make Ember Addon Client-side validations 17
18. but, we already have many addons for that Client-side validations 18
23. ember-changeset-validations - being very generic - lacks any support for server-side validations ember-cp-validations - “Easily integrated with Ember Data's DS.Errors” Client-side and Server-Side validations 23
24. Consuming server-side validation errors using Ember Data Client-side and Server-Side validations 24 - Populate Model’s errors key - Population depends on adapter used - errors property on DS.Model of DS.Errors type, filled with errors payload returned from server - depends on adapter - Built-in adapters: RESTAdapter and JSONAPIAdapter - server must return 422 and JSON with errors - can be customized - Custom Adapter can implement different logic
25. Client-side and Server-Side validations 25
26. We are hiring! https://redislabs.com/company/careers/ 26
27. Thank You! slava@redislabs.com https://www.linkedin.com/in/slava-vitebski-9509832/ 27