Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Ui components development

364 vues

Publié le

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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.