Download to read offline
Common UI patterns
- 1. SOME COMMON PRINCIPLESOF UI DEVELOPMENT @SAMSELIKOFF
- 2. STATEANY DATA THATCAN CHANGE IN OUR APP
- 6. STATEANY DATA THATCAN CHANGE IN OUR APP
- 7. $('.panel').click(function() { var body= $('panel-body'); if (body.is(":hidden")) { body.slideDown(); } else { body.slideUp(); } });
- 8.
- 9.
- 10.
- 11.
- 12. <h2> Hello, {{name}}! Hereare your messages: </h2>
- 13. {{! template.hbs }} {{#ifisOpen}} <p>Lorem ipsum dolor</p> {{/if}} render() { return ( <div> {this.props.isOpen ? <p>Lorem ipsum dolor</p> : null } </div> ); }
- 14. HOW SHOULD WEORGANIZE OUR APPS?
- 15.
- 16.
- 18.
- 19. WHERE SHOULD WESTORE OUR STATE?
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. STATE MANAGEMENTSINGLE SOURCEOF TRUTH
- 27.
- 28.
- 29. COMMON UI PRINCIPLES ▸Explicitly identify & store state ▸ Declaratively render your UI from state ▸ Use Components to break up your app ▸ Ensure your data has a single source of truth
- 30.