React UI development introduction to "UI Component as API” @kitaly Tech Talk Tokyo #5 2016-10-21

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

Embed Size (px)

Citation preview

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


• Nand2Tetris

• Work @ Bizreach Inc.

• www.hrmos.co

Today’s Talk is a short version of …


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


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




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


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



Testing Documentation


• 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