后台快速开发脚手架.pptxVIP

后台快速开发脚手架 Faster than Faster 1. 目标 更快的满足后台需求 快速开发 或易于开发 1.1 目标拆解 怎么更快地进行开发？ 减少写的成本 使用框架减少代码量 使用工具创建样板代码 复用更多的代码 减少读的成本 代码文档 或者代码示例 方便的代码查阅与导航 1.1.1 项目快速启动 两种方式 Seed project vs Scaffold Angular React Seed project More More Scaffold Angular-cli antd-init ant-tool Angluar-cli 官方出品 支持模板代码生成 broccoli antd-init ant-tool 阿里出品 项目生成 Webpack + 定制化 结论 Angluar-cli 在减少代码量方面更胜一筹 此外，两者半斤八两 1.1.2 快速编码 良好的代码提示 方便的文档查询 代码导航 Code Snippet 工具乃至编程语言上的支持 VSCode 相较与Atom有更好的性能 以及更好的代码提示 开箱可用 类型标注与检查 Flow Typescript 1.1.3 界面快速构建 Css framework Bootstrap Materialize … Component library Ant-Design Prime Faces … 1.1.4 数据的快速编辑 表单的自动生成 表单验证 数据的绑定 1.1.5 通用流程的复用 文件上传 用户管理 权限验证 … 1.2 技术选型 Module Component Template Metadata Data Binding Directive Service Dependency Injection Angular2 View Component Virtual DOM One-way Data flow JSX Flow React Native React 1.2.1 Angular2与React对比 Typescript vs Babel Framework vs Choose By Your Favorite Template vs VDOM Component Server Render Data Binding Study Cost 1.2.2 为什么选择Angular2 Angular2与React在组件化上的成本相差不大 现有代码的利用 做后台就要大而全 外部库与依赖尽可能的少与一致 开发流程与代码一致更易于维护 1.2.3 可复用代码对比 React - ant design Angular2 - Prime Faces Ant Design（44个） Button按钮 Icon图标 Layout布局 Cascader级联选择 Checkbox多选框 DatePicker日期选择框 Form表单 InputNumber数字输入框 Radio单选框 Rate评分 Select选择器 Slider滑动输入条 Switch开关 TimePicker时间选择框 Transfer穿梭框 TreeSelect树选择 Upload上传 Alert警告提示 Badge徽标数 Carousel走马灯 Collapse折叠面板 Calendar日历 Card卡片 Dropdown下拉菜单 Modal对话框 Message全局提示 Notification通知提醒框 Progress进度条 Popconfirm气泡确认框 Popover气泡卡片 Timeline时间轴 Tooltip文字提示 Tree树形控件 Table表格 Tag标签 Breadcrumb面包屑 Menu导航菜单 Pagination分页 Steps步骤条 Tabs标签页 Affix固钉 LocaleProvider国际化 QueueAnim进出场动画 Spin加载中 Prime Faces（66个） AutoComplete Calendar Checkbox Dropdown Editor InputSwitch InputText InputTextArea Listbox MultiSelect Password RadioButton Rating Slider Spinner SelectButton ToggleButton Button SplitButton Carousel DataGrid DataList DataScroller DataTable OrderList GMap Paginator PickList Schedule Tree TreeTable Accordion Fieldset Panel Grid TabView Toolbar