react ui development: introduction to "ui component as api"
TRANSCRIPT
React UI development introduction to
"UI Component as API”@kitaly
Tech Talk Tokyo #5 2016-10-21
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
Today’s Talk is a short version of …
http://qiita.com/kitaly/items/85254fd346e2e575582b
Development of UI is HARD.
Development of Single Page App takes.
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.)
What makes it so hard?
• Poorly designed workflow
• Poorly designed architecture
• Lack of layering corresponding to different skills of developers
What makes it so hard?
• Expectations for richer UI leads to complexity of GUI applications
Layering is keen
Layers must be explicitly isolated
※ My project is based on React/Redux
The team should be able to develop different components
independently
Back-end API is inevitably independent
How can we isolate UI and business-logic
on client-side ? (Today’s main topic)
“UI Component as API”
“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
Functional Component with React
※ Not saying that you should not use “class”
Functional Component with React
UI Component with Webpack/CSS-Modules
OK, UI components can be API’s and be incorporated
as part of applications later on
“But, how do we develop UI components without integrating
them in applications?”
We need sandbox to develop UI components independently
from applications
React-Storybook
Providing API’s takes thorough testing
Writing/maintaining tests is a hustle
You don’t have to write actual test cases
with snapshot testing
Test methodologies for UI Component
• Interaction Testing
• Snapshot Testing
• CSS/Style Testing
Storyshots: Testing tool for Virtual DOM
Structural Testing
https://github.com/kadirahq/storyshots
You may want to provide nice documents
Using Storybook add ons
Once again, Layering is keen
The team should be able to develop different components
independently
Implement
Testing Documentation
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
You can find sample code here
https://github.com/k-italy/react-storybook-demo-plus