Ui components development

274 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
274
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ui components development

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

×