LT at Tech Talk Tokyo #5 2016-10-21

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

9. Layering is keen

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”

17. Functional Component
with React

18. UI Component with
Webpack/CSS-Modules

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

22. React-Storybook
https://getstorybook.io/

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