React UI Development: Introduction to "UI Component as API"
2 likes•1,559 views
This document summarizes a talk on developing user interfaces as independent components using React. It introduces the concept of "UI Component as API" where components are developed independently from applications using React and tools like Storybook. Components are developed as pure functions and tested using snapshot testing in Storybook. This allows different teams to work independently on isolated layers while still providing documentation and testing for components.
React UI Development: Introduction to "UI Component as API"
- 1. React UI development introduction to "UI Component as API” @kitaly Tech Talk Tokyo #5 2016-10-21
- 2. Who am I ? • Itaru Kitagawa (twitter: @kita_ly) • Web Front/Back-end Developer • Scala/Play • SPA with Angular/React • Recently obsessed with • SPA • Nand2Tetris • Work @ Bizreach Inc. • www.hrmos.co
- 3. Today’s Talk is a short version of … http://qiita.com/kitaly/items/85254fd346e2e575582b
- 4. Development of UI is HARD.
- 5. Development of Single Page App takes.
- 6. What makes it so hard? • Team members with different skills • Back-End Engineer (Java, Ruby, PHP, etc.) • Front-End Engineer (JavaScript) • Markup Coder (HTML, CSS, etc.)
- 7. What makes it so hard? • Poorly designed workflow • Poorly designed architecture • Lack of layering corresponding to different skills of developers
- 8. What makes it so hard? • Expectations for richer UI leads to complexity of GUI applications
- 10. Layers must be explicitly isolated ※ My project is based on React/Redux
- 11. The team should be able to develop different components independently
- 12. Back-end API is inevitably independent
- 13. How can we isolate UI and business-logic on client-side ? (Today’s main topic)
- 14. “UI Component as API”
- 15. “UI Component as API” • React and its surrounding libraries/tools enabled this concept • These names may make better sense • Functional UI Component • UI Component as Pure Function • UI Component as Converter
- 16. Functional Component with React ※ Not saying that you should not use “class”
- 19. OK, UI components can be API’s and be incorporated as part of applications later on
- 20. “But, how do we develop UI components without integrating them in applications?”
- 21. We need sandbox to develop UI components independently from applications
- 23. React-Storybook
- 24. Providing API’s takes thorough testing
- 25. Writing/maintaining tests is a hustle
- 26. You don’t have to write actual test cases with snapshot testing
- 27. Test methodologies for UI Component • Interaction Testing • Snapshot Testing • CSS/Style Testing
- 28. Storyshots: Testing tool for Virtual DOM Structural Testing https://github.com/kadirahq/storyshots
- 29. You may want to provide nice documents
- 30. Using Storybook add ons
- 31. Once again, Layering is keen
- 32. The team should be able to develop different components independently Implement Testing Documentation
- 33. Conclusion • Layering is keen for complex applications • React and its ecosystem empowers such development • Needs at least one person who’s good at Programming & Markup
- 34. You can find sample code here https://github.com/k-italy/react-storybook- demo-plus