ui components development
TRANSCRIPT
S
UI ComponentsDevelopment Guidelines
Create life cycle
Initiate
Render Loading Meta Loading Template Loading Data Actual Render Create sub views/components
Bind Internal events
Bind External events
Remove life cycle
Stop any running animations
Unbind/stop listening external Events
Unbind/stop listening internal Events
Unbind loading complete/failure handlers (meta, template ,data)
Abort any loading calls
Clear timeouts, intervals, debounced/deferred executions
Remove trails (popups)
Remove Sub views / child components
Remove element from DOM
Dependencies
Meta (country list, options list)
Template
Data (user selection)
Other components
Create States
Initiated
Waiting for other components to render
Loading (meta, template, data)
Rendered
Custom States (edit, summary etc)
Error States
Network/Time out (meta, template, data)
No Records
Invalid Input / Other service errors
Wrong Selection
Selection States
No Selection
Default Selection
All Selection
Some Selection
View Model DOM sync
User Interaction
DOM Eleme
nt
updateModelView ChangeModel
ChangeMode
lupdateDOMView Update
ElementsDOM
Plan for
Meta Refresh
External Model manipulation
Deep-linking widget state
Widget defaults
Dos
JSHINT code from day one, it saves a lot of errors and debugging
Use deferred for any async operation (loading, rendering)
Handle success and failure case for each deferred
Defer creating DOM elements more than 20
Debounce function calls if needed
Keep functions short, this increases re-usability
Dos ctnd..
Cleanup all event handlers, setTimeouts and deferreds, they are the main source of memory leaks
Go defensive, start with error case then code for success case
Provide user feedback about all waiting/loading to user, it makes your app look snappy.
Validate every user input, every input should have upper limit
Sanitize user input if needed before posting it to server
Donts
Don’t do DOM query for reading Widget state – should always be read from model
Don’t change elements outside given view, using $.closest, $.parent $(‘selector’) is possible use cases
Don’t update DOM without updating model, they are easy, but creates problems in future
Don’t use $.html(value) unless you know what you are doing, prefer rendering model values through template engine (handlebars etc)
Don’t write JavaScript files bigger than 200 lines, smaller the better.