React UI Development: Introduction to "UI Component as API"

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

https://getstorybook.io/

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