1. SOME COMMON PRINCIPLES OF UI
DEVELOPMENT
@SAMSELIKOFF

2. STATEANY DATA THAT CAN CHANGE IN OUR APP

6. STATEANY DATA THAT CAN CHANGE IN OUR APP

7. $('.panel').click(function() {
var body = $('panel-body');
if (body.is(":hidden")) {
body.slideDown();
} else {
body.slideUp();
}
});

8. MODELS

9. STATE
EXPLICIT
UI

10. SUBSCRIBE AND RE-RENDER

11. DECLARATIVE RENDERING

12. <h2>
Hello, {{name}}! Here are your messages:
</h2>

13. {{! template.hbs }}
{{#if isOpen}}
<p>Lorem ipsum dolor</p>
{{/if}}
render() {
return (
<div>
{this.props.isOpen
? <p>Lorem ipsum dolor</p>
: null
}
</div>
);
}

14. HOW SHOULD WE ORGANIZE OUR APPS?

15. COMPONENTS

16. “THINKING IN REACT”

18. COMPOSITION, SEPARATION, ISOLATION, REUSE

19. WHERE SHOULD WE STORE OUR STATE?

20. STATE MANAGEMENT

21. COMPONENT STATE

22. STATE
HOISTING

23. STATE
HOISTING

24. STATE
HOISTING

25. STATE
HOISTING

26. STATE MANAGEMENTSINGLE SOURCE OF TRUTH

27. GLOBAL STATE

28. SUMMARY

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. THANKS
@SAMSELIKOFF