Components Architecture (based on React).md

• Atomic Design to structure the components
• Webpack 2: dev server and bundle dependent modules.
• Use ESLint with the Airbnb style guide.
• Babel: transpired JSX and ES6+ syntax to ES5.
• Jest, Sinon, Enzyme: unit testing for React components.
• Pact(node): contract testing and simple mock server.
• Storybook: Component-Derived Development(CDD)
• CSS-Modules: provide isolated component styling scope. => styled-components
• Integrated with StyleGuide (with theme)
• Jenkinsfile and Ansible: for build and deployment to AWS S3.

Firstly, we are using the Atomic Design methodology to organize the struct of our React components. Basically the idea is to build these components in the different levels, and the Atomics can be combined to Molecules, and Molecules can come into Organisms... Finally, the template will be used to create a page, which including the basic layout of UI page, and to be filled by small elements in real.

So, when are talking about the UI page, we are talking about the components. Of course, we are using the Components-Driven Development which benefits by using React storybook. This is the storybook which provides the runtime for each React components so that we can develop these components independently:

1. Focus development
2. Increase UI coverage
3. Target feedback
4. Build a component library
5. Parallelize development
6. Test visually (TDD)

Actually, you can think it as the visualized TDD, Test-Driven Development, give your instant feedbacks and make you confident.

And also we are using the enzyme and jest to do the unit testing, which can provide the watch mode for the better experience when you are running the test, and also the test coverage is quite easy to setup and use.

and also, given that Webpack 2 already released in last month and it provides us these features:

• ES6 Support
• Tree shaking

and in here, I want to say thank you to Dart team, they upgrade to the Webpack 2 version and we merge the pull request back to our react-app-stencil.

About the styling, we already integrated with the StyleGuide in Less:

[picture of LESS]

Currently, StyleGuide is only supported Bower and we need fix the path issues when we are using NPM as package management tool, of course in this codebase, we already fix and integrated with almost all StyleGuide, so that you can use the StyleGuide 'Out of the Box'.

we also extract some of the components into the react version StyleGuide, which called react-style-guide-components, for example, these Carousels in our OSP page.

about the Jenkins and application deployment, we also include the Jenkins groovy and Ansible scripts in the repo, which can be used to the build and deployment.

so this is the pipeline of our stencil, which already supports to build and publish to nexus, then ansible can do the deployment to AWS S3, which can easily and quickly store the static assets files of UI page.