全栈工程师如何快速构建一个Web应用

文／技匠（简书签约作者）

前不久，为我的微信订阅用户编写了一个分享学习编程和设计资源的小站——技匠社 jijiangshe.com，有朋友问我是如何在短时间内写出这个网站的，我又用到了哪些技术和框架呢？这其实是一个挺有意思的话题，我们都知道全栈工程师能够快速地开发出一个网站或者APP，那么他们到底是怎么做到的呢？我花了一些时间将我在这个实验性的小项目中所作的一些实践写成文章，并给这个系列起了个名字叫做《全栈修炼》，在简书上与大家进行分享。

如果你问十个全栈工程师，如何快速构建一个Web应用，我相信你会得到10个不同的答案，因为每一名全栈工程师的技术栈都不尽相同。以设计见长的全栈设计师可能会告诉你，做一个很好的设计，然后套用一个博客系统或基于CMS的内容管理平台（如Drupal，Jommla，Wordpress）就可以快速建站，而前端全栈工程师可能会建议，用HTML5+JavaScript（AngularJS或React）来写网站的前端，用Node.js来写后端服务。我最早是一名Java程序员，后来当了架构师，又自学设计，成为了一名全栈工程师。因此，我会更偏向于使用Java来构建稳定且便于扩展的后端服务，并用Html5+CSS3+JavaScript，再结合一些流行的前端框架来快速写出一个Web应用来。当然，这绝对不是唯一或最优秀的技术组合，你需要根据不同的应用场景和你自身的专长来进行合理的选择。

作为《全栈修炼》系列的第一篇文章，我将从整体的角度，结合技匠社这个网站开发的各个重要环节（网站定位、功能设定、设计、架构、开发、部署、性能调优、数据统计、开发工具），来谈谈我在构建这个真实网站过程中的一些思考与实践。而在后续的文章里，我则会结合这个实际案例，分享具体的技术实现方法和代码示例，从而使你也能像全栈工程师那样独立开发出自己的应用来。

网站定位与功能设定

网站无论大小都应该有清晰的定位，也就是你希望你的网站做什么？这一点非常重要，我见过很多网站虽然功能很多，但由于缺少明晰的定位而少人问津。而我要写的这个小站只有一个核心功能，那就是要帮助我的微信订阅用户们（大多是学习计算机或设计的在校大学生和那些工作不久希望提升技能的设计师或程序员们）分享那些优秀的开发或设计（学习）资源。

围绕这个核心功能，我便得到了构成这个网站所需要的三个主体功能：

资源发布与展示。（核心功能，用户可以分享他们的资源，也可以看到其他人的分享） 用户的第三方登录（为了快速开发，我省略了不必要的用户注册功能，全部采用第三方社交平台登录） 用户反馈功能。（用户反馈几乎是我自建的每个网站中都包含的功能，这使我能通过不断收集用户的反馈来改进这个平台。）

至此，已经完成了网站的功能设定，我尽可能省略了一切不必要网站功能，也没有写任何文档，这使我能够以最快的速度将这个Web应用实现出来。这种方式也是目前增长黑客们所普遍采用的一种做法：快速搭建出一个具备核心功能的应用原型 —— MVP(Most Viable Product 最小化可行产品)，来验证自己的业务模型，然后再根据用户的需求和反馈来不断进行改进。当然，随着项目规模的不断扩大，以及更多团队成员的加入，我们可以回过头来再去补齐那些在前期遗漏的文档，记住，仅当确认文档能够产生价值时，才去编写它们。

信息架构

这个阶段在不同的团队或项目中会有很多不同的名字，比如概要设计、业务建模等等，而我最喜欢信息架构这个名字，因为在这个阶段，我们所要做的就是对不同纬度和粒度的信息进行抽象、规划、设计，来支撑整个网站的信息体系。我曾经历过很多不同的信息架构方法论，从最初基于模块的设计，到后来的领域驱动设计（DDD）、面向服务的设计(SOA)，Oracle的基于数据建模驱动的设计，再到最新的微服务架构设计 等等。我想说，这些方法论大多是针对那些大规模应用而言的，你需要了解它们，并有意识地在你的系统设计中去匹配这些优秀的架构和设计思想，这有利于你做出可扩展性良好的系统，从而避免因整个系统复杂度与规模的扩大而导致的大规模重构风险。

对于我们这个小站来说，我们只需要先定义出合适的业务领域和实体模型，这里，我们定义出以下三个业务实体，并为这些实体添加所需要的字段。

User-用户

Resource-资源

Feedback-用户反馈。

围绕着这三个领域模型，我们再定义出三个服务，并为它们增加相应的方法：

UserService-用户服务 ResourceService-资源服务 FeedbackService-用户反馈服务。

信息架构阶段完成后，我们已经对整个网站有了一个全面的视图，下一步，我们就可以进入UI设计阶段了。

UI设计

我经常在CSDN、V2EX等一些开发社区看到一些程序员分享的由他们独立开发的网站或工具。当我访问这些网站时却往往发现，这些网站大多只是简单套用了一个模板或干脆根本没有任何设计。这样的网站虽然功能不错，但很难吸引用户前来使用。我也不是一名设计师，只是利用业余时间自学了设计，但当我需要独立完成一个网站时，我仍然会尽我所能地做一些设计，而为了能够快速实现一个网站，我的做法往往是借助现代网站设计工具（比如Blocs）或利用现成的网页模板去实现它。而在这个项目中，我也用到了一套相对简洁的H5+CSS3网页模板。

使用模板有很多优点，比如你可以直接获得优秀的设计，利用网页模板自带的HTML、CSS、JavaScript代码，可以节省大量开发时间等等。但使用模板同样会带来一些问题，比如网页模板可能会包含大量你不需要使用的页面或代码，你需要小心地剔除它们，一些设计师写的脚本很可能存在缺陷，你需要去修复它。同时我想说，你必须首先理解设计才能正确地使用模板，因为模板往往不能解决你所有的设计需求，你总会需要在你的设计中添加一些额外的页面，这时你就必须基于现有的设计，去进行添加或改造，这往往比从头开始进行一个完整的设计还要难，因为你必须保持和网页模板的设计者相一致的设计思路，否则你的网站将变得非常不和谐，而在整个过程中，你必须理解设计的各个方面：色彩、字体、动效 等等。

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!