Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ui components development


Published on

Published in: Technology
  • Login to see the comments

  • Be the first to like this

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.