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.
SOME COMMON PRINCIPLES OF UI
DEVELOPMENT
@SAMSELIKOFF
STATEANY DATA THAT CAN CHANGE IN OUR APP
STATEANY DATA THAT CAN CHANGE IN OUR APP
$('.panel').click(function() {
var body = $('panel-body');
if (body.is(":hidden")) {
body.slideDown();
} else {
body.slide...
MODELS
STATE
EXPLICIT
UI
SUBSCRIBE AND RE-RENDER
DECLARATIVE RENDERING
<h2>
Hello, {{name}}! Here are your messages:
</h2>
{{! template.hbs }}
{{#if isOpen}}
<p>Lorem ipsum dolor</p>
{{/if}}
render() {
return (
<div>
{this.props.isOpen

? <p>Lor...
HOW SHOULD WE ORGANIZE OUR APPS?
COMPONENTS
“THINKING IN REACT”
COMPOSITION, SEPARATION, ISOLATION, REUSE
WHERE SHOULD WE STORE OUR STATE?
STATE MANAGEMENT
COMPONENT STATE
STATE
HOISTING
STATE
HOISTING
STATE
HOISTING
STATE
HOISTING
STATE MANAGEMENTSINGLE SOURCE OF TRUTH
GLOBAL STATE
SUMMARY
COMMON UI PRINCIPLES
▸ Explicitly identify & store state
▸ Declaratively render your UI from state
▸ Use Components to bre...
THANKS
@SAMSELIKOFF
Common UI patterns
Common UI patterns
Common UI patterns
Common UI patterns
Upcoming SlideShare
Loading in …5
×

Common UI patterns

The JavaScript community has learned a lot in the last 5 years. Here are some common patterns that the community has converged on.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

  • Be the first to like this

Common UI patterns

  1. 1. SOME COMMON PRINCIPLES OF UI DEVELOPMENT @SAMSELIKOFF
  2. 2. STATEANY DATA THAT CAN CHANGE IN OUR APP
  3. 3. STATEANY DATA THAT CAN CHANGE IN OUR APP
  4. 4. $('.panel').click(function() { var body = $('panel-body'); if (body.is(":hidden")) { body.slideDown(); } else { body.slideUp(); } });
  5. 5. MODELS
  6. 6. STATE EXPLICIT UI
  7. 7. SUBSCRIBE AND RE-RENDER
  8. 8. DECLARATIVE RENDERING
  9. 9. <h2> Hello, {{name}}! Here are your messages: </h2>
  10. 10. {{! template.hbs }} {{#if isOpen}} <p>Lorem ipsum dolor</p> {{/if}} render() { return ( <div> {this.props.isOpen
 ? <p>Lorem ipsum dolor</p> : null } </div> ); }
  11. 11. HOW SHOULD WE ORGANIZE OUR APPS?
  12. 12. COMPONENTS
  13. 13. “THINKING IN REACT”
  14. 14. COMPOSITION, SEPARATION, ISOLATION, REUSE
  15. 15. WHERE SHOULD WE STORE OUR STATE?
  16. 16. STATE MANAGEMENT
  17. 17. COMPONENT STATE
  18. 18. STATE HOISTING
  19. 19. STATE HOISTING
  20. 20. STATE HOISTING
  21. 21. STATE HOISTING
  22. 22. STATE MANAGEMENTSINGLE SOURCE OF TRUTH
  23. 23. GLOBAL STATE
  24. 24. SUMMARY
  25. 25. 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
  26. 26. THANKS @SAMSELIKOFF

×