Ui components development
-
Upload
ravi-kumar-hamsa -
Category
Technology
-
view
107 -
download
2
Transcript of Ui components development
![Page 1: Ui components development](https://reader033.fdocuments.us/reader033/viewer/2022052907/559059951a28ab664b8b480f/html5/thumbnails/1.jpg)
S
UI ComponentsDevelopment Guidelines
![Page 2: Ui components development](https://reader033.fdocuments.us/reader033/viewer/2022052907/559059951a28ab664b8b480f/html5/thumbnails/2.jpg)
Create life cycle
Initiate
Render Loading Meta Loading Template Loading Data Actual Render Create sub views/components
Bind Internal events
Bind External events
![Page 3: Ui components development](https://reader033.fdocuments.us/reader033/viewer/2022052907/559059951a28ab664b8b480f/html5/thumbnails/3.jpg)
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
![Page 4: Ui components development](https://reader033.fdocuments.us/reader033/viewer/2022052907/559059951a28ab664b8b480f/html5/thumbnails/4.jpg)
Dependencies
Meta (country list, options list)
Template
Data (user selection)
Other components
![Page 5: Ui components development](https://reader033.fdocuments.us/reader033/viewer/2022052907/559059951a28ab664b8b480f/html5/thumbnails/5.jpg)
Create States
Initiated
Waiting for other components to render
Loading (meta, template, data)
Rendered
Custom States (edit, summary etc)
![Page 6: Ui components development](https://reader033.fdocuments.us/reader033/viewer/2022052907/559059951a28ab664b8b480f/html5/thumbnails/6.jpg)
Error States
Network/Time out (meta, template, data)
No Records
Invalid Input / Other service errors
Wrong Selection
![Page 7: Ui components development](https://reader033.fdocuments.us/reader033/viewer/2022052907/559059951a28ab664b8b480f/html5/thumbnails/7.jpg)
Selection States
No Selection
Default Selection
All Selection
Some Selection
![Page 8: Ui components development](https://reader033.fdocuments.us/reader033/viewer/2022052907/559059951a28ab664b8b480f/html5/thumbnails/8.jpg)
View Model DOM sync
User Interaction
DOM Eleme
nt
updateModelView ChangeModel
ChangeMode
lupdateDOMView Update
ElementsDOM
![Page 9: Ui components development](https://reader033.fdocuments.us/reader033/viewer/2022052907/559059951a28ab664b8b480f/html5/thumbnails/9.jpg)
Plan for
Meta Refresh
External Model manipulation
Deep-linking widget state
Widget defaults
![Page 10: Ui components development](https://reader033.fdocuments.us/reader033/viewer/2022052907/559059951a28ab664b8b480f/html5/thumbnails/10.jpg)
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
![Page 11: Ui components development](https://reader033.fdocuments.us/reader033/viewer/2022052907/559059951a28ab664b8b480f/html5/thumbnails/11.jpg)
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
![Page 12: Ui components development](https://reader033.fdocuments.us/reader033/viewer/2022052907/559059951a28ab664b8b480f/html5/thumbnails/12.jpg)
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.