JS全端开发
前后端分离实践
Created by 蔺文龙
分享内容
- 聊聊全端开发和全端工程师的情怀
- 全端开发为什么要前后端分离?
- 全端开发怎样做前后端分离?
- 分离后每一层怎样处理?
小调查
JS全端开发?
- 我们用 JavaScript 写前端,用 Node.JS 写后端,甚至使用基于 JSON 的 NoSQL数据库;
- 这里没有前/后端的区隔, 没有沟通问题, 也没有扯皮
- 我们关注MVC、Cache、ORM、BigPiper、性能优化、架构设计、移动跨屏...
- 我们参与设计、后台开发、前端开发、移动开发、运营维护、PS、文案...
我们是高端、大气、上档次的
全端工程师
也叫全栈(Full Stack)工程师
其实真相是这样的!
如何成为全端工程师?
- 发现问题,洞察需求,设计解决方案,并开发出初始版本的产品
- 为了达到目标,愿意去学习任何领域的技能和知识
- 如:后端开发、前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计、OAuth、SPA、Web Socket、HTML5/CSS3、微信公众号、微博应用等等...
困惑?
成为全端工程师不是为了工作本身,是为了方便实现自己的梦想。
逼格不低啊!
全端工程师,更重要的责任
Design and building a team or a company which builds great products.
其实,社会给了他们另一个称呼——创业者.
前端代码越来越复杂
- 无法统一协作模式,代码充满了约定
- JS跟CSS,依赖于后端产出的HTML
- 有的数据来自AJAX,有的数据印在DOM上
- 有的业务逻辑在前端,有的在Model层,更多的是在View层
前后端依旧高度耦合
- 前端依赖服务端开发环境
- 在服务端View层高度耦合
- 沟通成本高
- 职责不清晰
View层谁来维护?
- 前端写Demo,后端套页面
- 前端写View层,后端只管数据
无法良好的支持跨终端
- 业务逻辑散落在应用中
- 渲染逻辑强依赖后端页面
- 只能用responsive design硬来
高度耦合的前后端分工
- 沟通成本上升
- 维护成本上升
- 无法正确且快速的响应变化
- 代码的腐烂只是迟早的问题
接口分离, 后端提供数据, 前端自己搞
Model层 - JavaScript Object
View层 - JavaScript Template
业界的优秀方案
AngularJS, Backbone, EmberJS, KnockoutJS, React, etc.
前后端职责清晰了
后端 | 前端 |
- 提供数据
- 处理业务逻辑
- Server-side MVC架构
- 代码跑在服务器上
|
- 接收数据,返回数据
- 处理渲染逻辑
- Client-side MV* 架构
- 代码跑在浏览器上
|
各层职责重叠,并且各玩各的
- Client-side Model 是 Server-side Model 的加工
- Client-side View 跟 Server-side是 不同层次的东西
- Client-side的Controller 跟 Sever-side的Controller 各搞各的
- Client-side的Route 但是 Server-side 可能没有
重用问题
- 模版无法重用,造成维护上的麻烦与不一致
- 逻辑无法重用,前端的校验后端仍须在做一次
- 路由无法重用,前端的路由在后端未必存在
跨终端问题
- 业务太靠前,导致不同端重复实现
- 逻辑太靠前,造成维护上的不易
SEO问题
渲染都在客户端,模版无法重用,SEO实现 麻烦
有点沉重啊
因為有了NodeJS
我们有机会从工作职责上
重新定义前后端的分层
重新定义的前后端
前端的工作量是否增加了?
一些实践
Front-end Skills
中间件定制平台
“中间件定制平台”项目中用到的Skills
1、纯静态的前台工程,不依赖web server,可独立工程、独立开发
2、开发过程使用JSON file/MockJS,通过配置切换Angular Service数据源
window.__service.factory('templateRES',function($resource) {
var url = framework.getFinalURL('api/template/:method/1','../template/api/:method.json');
var json = $resource(url,{});
return json;
});
3、使用AngularJS,构建完善的前端MVC,简单高效的实现业务逻辑
4、使用Bootstrap做UI框架,使用Angular封装过的KendoUI/jQWidgets等UI组件,实现复制交互控件
4-2、组件的封装和组织
4-3、组件的HTML化使用
4-4、组件的MVC化控制
1、Sequelize实现ORM,简化数据库开发工作量
module.exports = function (sequelize, DataTypes) {
var WebSite = sequelize.define('Website', {
name: DataTypes.STRING,
status: DataTypes.INTEGER
}, {
tableName: 'bf_website',
timestamps: false
});
return WebSite;
}
1-2、Sequelize的Models
function Website(_) {
_ = _ || {};
this.id = _.id || 0;
this.status = _.status || 0;
this.name = _.name || '';
}
Website.findById = function (callback) {
Website.find({ where: {'id': this.id } } ).complete(function (err, obj) {
callback(err, obj);
});
};
Website.prototype.save = function(callback) {
Website.create(this).complete(function (err, obj) {
callback(err, obj);
});
};
module.exports = Website;
2、使用LinqJS,进一步简化ORM对象的操作
var Enumerable = require('linq');
var xpath = Enumerable.from(xpathArr)
.select(function(xpath){
if(xpath.name == inputs.xpath.name){
xpath = 'new value';
}
return xpath;
}).toArray();
3、使用ThenJS,直观管理数据库的多表操作
then(function(defer){
WebsiteDomain.del(inputs.ids , defer);
})
.then(function(defer, value){
Xpath.delByDomainId(inputs.ids, defer);
})
.all(function (defer, err) {
if(!err){
callback(null, {
code: '00',message: 'success.'
});
}
}).
fail(function (defer, err) {
callback(null, {
code: '01',message: err
});
});
4、自行开发的API系统(Model Proxy?),使NodeJS后端服务化,直接向前端开放业务接口
4-2、API的调用
实践中的全端开发技术家族
全端工程师,就是掌握多种技能,并能利用多种技能独立高效的完成产品的人。
Design and building a team or a company which builds great products.
THE END
Q & A