前言
作为一个四年经验的前端开发，代码的CRUD技能基本上炉火纯青。作为一份糊口的工作，基本能保障我作为碳基生物的生存需求。但是，安逸久了就会产生懈怠，技术债越欠越多，长此以往，升职加薪更是无望，故此技能还需精进。机缘巧合了解到抖音"哲玄前端"《大前端全栈实践》课程，一个项目打通0-1，从此再不用CRUD。我倒要看看到底怎么个事儿。
什么是Elpis
不知道各位在需求开发时有没有发现同类型的项目如：某东、某宝、并夕夕，首页是不是基本差不多，都是商品卡片滚动加载，亦或者某些公司内部各部门的运营平台或者后台管理平台，除了内容（数据）不一样外，其他的都是大同小异？那么，我们能不能把大同的这部分工作量沉淀下来，搞一个模板，是不是CRUD的工作就能减少很多呢？至于小异的部分，模版内留出插槽，根据用户需求定制化开发，这样下来是不是效率提升很多呢？而我们的时间是不是就可以从CRUD中解放一部分，只需要维护好这个模板就可以了呢？有了这个模板，是不是就能减少很多跟产品经理battle的时间呢？而这就是Elips要做的事。
数据驱动
没有梦想的码农不是好的程序员。上面的想法很好，那怎么实现呢？作为和用户交互的客户端，一切功能的核心就是数据，没有数据，全都白瞎（服务端也是）。既然数据如此重要，那么这个地基一定得夯实，制定一个数据模版（JSON）。地基有了，API，组件，页面还不都是手拿把掐？ 既然是模版，那一定要有规范。故 敕令JsonSchema为JSON大元帅，以定JSON之形状，规范开发者之行为。
elips-core
地基打好了，就得开始盖一楼了。
A：数据有了，怎么流通？
B：当然是发请求啦，不然玩单机吗？
A：那我猜你肯定绕不过这个
B：对喽。
用户在客户端页面操作，客户端发起http请求；服务端收到请求后返回给客户端想要的数据，这样数据就流通起来啦。但是数据可不是谁想要都有的，服务端也不是每次请求都给回应的。还记得上面的JSON大元帅JsonSchema吗？在这就已经派上用场啦。
'/api/project/list': {
get: {
query: {
type: 'object',
properties: {
proj_key: {
type: 'string',
}
},
required: [ 'proj_key' ]
}
}
}
这里规定的API的url，请求方法，还有参数类型，等等所有API的相关的信息，我们在middleware层增加API校验，通过后才能进入controller层进行数据查询及封装。不过elpis-core肯定不止这点功能，整体结构如下：
├── app/ # 业务代码目录
│ ├── controller/ # 控制器层：处理请求响应及数据封装
│ ├── service/ # 服务层：数据获取
│ ├── middleware/ # 中间件：参数及校验/接口签名/error抛错······
│ ├── router-schema/ # API 参数校验规则
│ ├── router/ # API 路由匹配规则
│ └── extend/ # 功能扩展
└── elpis-core/ # 框架核心
└── loader/ # 自动加载器
└── config.js # 项目配置
└── controller.js # 加载所有控制器文件
└── extend.js # 加载所有扩展功能（如：logger）
└── middleware.js # 加载所有中间件
└── router-schema.js # 加载所有API配置文件
└── router.js # 加载所有路由文件
└── index.js # 入口文件
CSR还是SSR
A：那么好，数据已经返回客户端，要怎么渲染呢？
B: 吾有两计
A: 愿闻其详
B: 计一：SSR服务端渲染。服务器在接收到用户请求后，通过模板引擎或框架将数据与HTML模板整合生成完整页面，直接返回给客户端，浏览器解析后立即显示内容。优点是
- 首屏渲染快，用户无需等待脚本加载；
- SEO友好，适合内容型网站；
- 兼容低版本浏览器或禁用JS的场景。
适合内容为主的网站（新闻、博客等），需优先考虑SEO；首屏速度要求高的场景（如移动端页面）
缺点是
- 需兼容旧版浏览器或弱网络环境；
- 服务器资源消耗大，需优化缓存策略；
- 开发复杂度高，需兼顾前后端逻辑。
A: 那另一计呢？
B: CSR客户端渲染。服务器返回基础HTML骨架和脚本文件，浏览器加载后通过JavaScript动态请求数据并生成页面内容。优点是 - 减轻服务器负担，适合高并发场景；
- 前后端分离，提升开发效率和维护性；
- 动态交互体验更佳（如单页应用）。
适合交互复杂的应用（如后台管理系统、社交平台）；前后端分离架构，需独立开发和部署；对服务器资源敏感的中小型项目。
缺点是
- 首屏加载慢，影响用户体验；
- SEO实现需额外配置（如预渲染）。
A: 成年人不做选择题，我全都要！
B: ......
A: 首屏采用SSR加快渲染速度并兼顾SEO，后续页面通过路由跳转对应模块，请求数据后进行CSR。完美~
结语
第一阶段的学习结束咧，有学到的新知识，也有复习的旧知识。积跬步以成千里，以上是我第一阶段的感悟和总结，仅供参考。欢迎大佬批评指正。
