给前端专用的开发服务器

1. 2014-04-28
FDS-给前端用的服务器

2. 什么是FDS？
Front-end development server.
Fds 是一套统一的本地开发环境，面向工程化的前端开发项目。
简化开发人员生产时对服务配置的依赖，提高前端开发人员的开发效率。
面向自动化的项目流程管理，交付，测试。减少复杂的人工操作。
自身包含的扩展机制，也能够提供给开发者灵活多变的个性化服务定制方案。
同时Fds也是一套跨平台的本地开发环境，完美支持win,linux,mac os。

3. FDS的功能？
• 静态服务配置
• 动态nodejs路由扩展(动态combine，解析require，import)
• http/https代理服务（rewrite/透明代理/调试手机/支持正则)
• Hosts编组支持
• 跨平台安装
• 导入导出项目配置（开发中）
• 静态服务中间件扩展（开发中）
• TaskShell配置(开发中)
• 以grunt和lithe为基础的一套项目管理方案最佳实践 (提供系列的grunt插件)

4. 传统的前端开发环境

5. 使用FDS的前端开发环境

6. 我们现在的前端工作流
• http://fd-server.org/start.html （最佳实践）
• 安装fds->使用lithe->简单的配置和打包规则编写->开发
• 提供统一的调试时动态合并的脚本，上线时打包的脚本。
• 针对不同项目，自己定制自己的扩展（server or grunt）

7. FDS解决什么，需求。
• 开发环境统一，共享扩展和插件
• 根据配置，快速帮助员工一键安装开发环境
• 不同项目之间的人员可以无损互调
• 降低配置学习成本（可视化的界面）
• 自动化，解放重复劳动

8. 开发普通项目
• 1.配置vhosts
• 2.配置debug模式的代理规则
• 3.配置相关hosts组
• 4.开发
• 全部在fd.server界面中完成

9. 调试线上代码
• 1.配置代理文件规则。
• 2.配置浏览器代理端口。
• 3.开发调试。

10. 调试手机网页
• 1.配置vhosts
• 2.配置整个vhosts的代理规则。
• 3.修改手机代理端口为fds得代理服务端口。
• 4.本地开发，手机实时生效。

11. 快速的项目切换和配置功能
• 在界面中提供分组功能。
• 后期会引入导入导出配置功能，方便团队共享。
• 后期会引入taskshell概念，部署打包共享一键化。

12. 不需要学习其他动态语言
• 只需要掌握js即可开发服务器中间件，动态路由。
• 只需要掌握js即可实现本地shell自动化。
• 前端的事都拿前端的code来解决。

13. 未来
• 提供专属的系列中间件（如支持php解析，自动combine url等）
• 提供特殊文件实时编译（less，coffeejs，markdown）
• 集成到测试机，发布系统。
• 等等。。

14. Q&A
• Thank you！
• 项目地址：https://github.com/SinaBlogFE/fd-server
• 官网地址：http://fd-server.org