基于 iuap-react 技术栈的 Web 开发方案

@GuoYongfeng 2017-07-25 06:10:40发表于 iuap-design/blog

基于 iuap-react 技术栈的 Web 开发方案


image
(话不多说,先上图)

基础知识储备

基于 React 技术栈的应用开发,可以快速实现组件化、统一开发模型、获得更好的应用性能优化。基于 React 的应用开发,也是一种渐进式的应用架构,全部的技术栈包括 React 、React-router、Redux以及服务端渲染等,如果应用相对不那么复杂的话,只使用 React 即可。同时,了解一些如 Webpack、Babel、ES6/7、Node 等基础知识,会让开发过程更加顺畅。

如果都没接触,没关系,这里可以看到你想要了解的所有内容。如果你想要快速进入应用开发的状态,那么,我推荐你使用前端集成开发和调试工具 uba来帮助你。

快速开发工具支撑

前端集成开发和调试工具 uba 是一款基于 webpack 封装的 CLI 命令行工具它提供一站式工程初始化、本地服务调试、数据模拟、资源编译和打包、性能优化等功能

uba 可以提供多种开发场景,开发人员可以使用 uba-templates 进行更新和维护,当然也可以根据所需的样式和功能提供不同的模板。

组件库

单独的使用 React,其实就是在应用的 UI 层帮助我们快速开发,组件化的封装能够更加便捷的组织整个复杂的应用。但如果从 0 到 1 的去实现整个应用,未免显得有些效率低下。

基于此,我们结合 iuap design 设计语言打造了一款 React 组件库 tinper bee。tinper-bee 组件库为我们提供了基础类组件、布局组件、视图类组件、导航类组件、反馈类组件、表单类组件等,以及一些通用的业务组件的封装。相信我,tinper-bee 会为你在 UI 方面减少很多工作量的。

应用路由管理和应用状态管理

如果你的项目希望应用架构是一个单页应用 SPA 的架构模式,那么我建议你这个时候可以使用 React-router 来进行路由的管理,这个是开源的方案。

如果你的应用在前端数据层的处理或是组件间的数据传递遇到了较为复杂的需求,那么,tinper-mox 应用状态管理框架 可以解决你的问题。

更多

以上,如需获取更多信息,请访问:http://tinper.org/。当然,你也可以直接邮件(guoyff@yonyou.com)给我。