[前端架构]写在前面的话

跑到北京来之后，发现换了个环境，整个人适应了好久，才突然想起来自己好久没有写博客了。仔细想来，工作到现在也快一年多，在通往前端工程师的不归路上也慢慢变得不再像以前那么迷茫。

虽然每天都 learning and coding， 但是都没有时间总结思路和思考。还是写写博客，总结总结思路，让自己整体能录得到提升和升华。

以下摘抄自网络：

后端架构师通常从后端逻辑角度出发去做产品，通常用户体验不是很好。前端架构师则通常从界面的角度去做产品，通常缺失架构意识在复杂的界面层下可能会失控。（摘自 前端那些事儿 ）

机器的部署属于运维的物理架构，SOA属于服务架构。

架构要解决的事情：组件的集成，方便后期的维护。

大公司的前端架构：

• 阿里的Kissy和Arale spm
• 腾讯的JX
• 百度的Tangram F.I.S
• 360的QWrap

常见的前端产品形态包括：

• 内容型Web站点 侧重渲染方面的优化，前端逻辑比重小（如：公司官网）
• 操作型B/S系统 以数据和逻辑为中心，界面较规整（如：CRM）
• 内嵌Web的本地应用 要处理缓存和一些本地接口，包括PC客户端和移动端（如：html5 应用）
• 游戏

全端应用: 本地应用 和 浏览器应用

• iOS
• Android
• PC 桌面
• 浏览器 （node-webkit）

全栈：能书写 浏览器端的代码 和 服务器端的代码

优化系统前端：

• HTML结构的优化，减少DOM树的层次等等
• CSS渲染性能的优化，批量写入DOM变更之类
• 资源文件的优化，比如小图片的合并，图像格式的处理，图标字体的使用等
• JavaScript逻辑的优化，模块化，异步加载，性能优化
• 加载字节量的优化，主要是分摊的策略
• HTTP请求的优化

前端组建化:

• html模板化
• JavaScript模块化
• CSS编译式（less, sass）

建议本地实现JS模块化开发，而非用 require.js 或者 sea.js 实现模块化加载。 ？？(自己的领悟)

项目构建工具：

Grunt

合并文件

Gulp

---

用户体验的提升并非是UI做几个图，搞一些花哨效果就可以了，它是一个系统工程，涉及从用户习惯调研、产品设计、前端开发、甚至后端服务等一系列环节，需要从易用度、观感、加载性能、流畅度等各方面共同提升。