<AtomicDesign with React> Workshop

[JimmyLv]

<AtomicDesign with React> Workshop #171

项目纵向拆分

⓵ 定义目标和原则

培养 Portfolio 的 React 能力，贴合/引领 三靠谱 Client 的 Atomic Design 前端架构风格（后端 Microservices）

思考「微前端」在 三靠谱 的具体实践？主要在于团队内结构（不分前后端）与团队间的合作（组合型页面）

⓶ 展望结果

• TeamLead 能够独立起一个 AtomicDesign with React 的项目，搭建基础设施与代码规范
• Teammates 能够编写 React 组件、单元测试、 Storybook，完成页面需求并符合团队规范

⓷ 头脑风暴

@XMind @Mindnode

⓸ 组织整理

筛选 有用的/能够实践的 想法，并且输出 Actions

⓹ 明确「下一步行动」

• NPM 相关：npm scripts，搭建 register，使用 npm publish 版本 semantic versioning
• 使用 generator 搭建项目: create-react-app & react-app-stencil
  • (不讲什么，比如build webpack，性能)
• 在 React 中使用 JavaScript 高级技巧 #170
• 熟悉 Webpack 机制并添加 css-modules 支持

References

• https://github.com/JimmyLv/atomic-design-react
• https://github.com/diegohaz/arc
• http://atomicdesign.nobackend.website/

强力推荐今天看到的这一系列文章：

• UI Component Playbook，从设计讲到开发。
• Component-Driven Development，可理解为 “Visual TDD”
• UI component explorers — your new favorite tool

至于 Business Logic 可以被 Redux 完美 cover，且可 TDD…

[JimmyLv]

codebase: https://github.com/JimmyLv/atomic-design-react-workshop slides: https://jimmylv.github.io/slides/2017-03-16-atomic-design-with-react-workshop-01.htm mindmap: http://www.xmind.net/m/L2zN

next workshop:

• check homework (showcase & code)
• fetch data and render item list
  • component's lifecycle
  • setState()
  • AJAX
  • Array.map()
• form component
  • input element
  • handle event
  • button submit
• post data
  • error handling
  • success/information
  • *loading flag

[JimmyLv]

时间来不及讲第二讲了，先关掉吧。