ui components development

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.