JS全端开发

前后端分离实践

Created by 蔺文龙

分享内容

  • 聊聊全端开发和全端工程师的情怀
  • 全端开发为什么要前后端分离?
  • 全端开发怎样做前后端分离?
  • 分离后每一层怎样处理?

小调查

JS全端开发?

  • 我们用 JavaScript 写前端,用 Node.JS 写后端,甚至使用基于 JSON 的 NoSQL数据库;
  • 这里没有前/后端的区隔, 没有沟通问题, 也没有扯皮
  • 我们关注MVC、Cache、ORM、BigPiper、性能优化、架构设计、移动跨屏...
  • 我们参与设计、后台开发、前端开发、移动开发、运营维护、PS、文案...

我们是高端、大气、上档次的

全端工程师

也叫全栈(Full Stack)工程师

看起来,很牛(ku)逼的样子!

其实真相是这样的!

如何成为全端工程师?

  • 发现问题,洞察需求,设计解决方案,并开发出初始版本的产品
  • 为了达到目标,愿意去学习任何领域的技能和知识
  • 如:后端开发、前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计、OAuth、SPA、Web Socket、HTML5/CSS3、微信公众号、微博应用等等...

困惑?

成为全端工程师不是为了工作本身,是为了方便实现自己的梦想。

逼格不低啊!

全端工程师,更重要的责任
Design and building a team or a company which builds great products.
其实,社会给了他们另一个称呼——创业者.

进入主题

后端MVC时代

前端?== 套页面

携手合作

The Problems

前端代码越来越复杂

                            
  • 无法统一协作模式,代码充满了约定
  •                         
  • JS跟CSS,依赖于后端产出的HTML
  •                         
  • 有的数据来自AJAX,有的数据印在DOM上
  •                         
  • 有的业务逻辑在前端,有的在Model层,更多的是在View层
  •                     

前后端依旧高度耦合

  • 前端依赖服务端开发环境
  • 服务端View层高度耦合
  • 沟通成本高
  • 职责不清晰

View层谁来维护?

  • 前端写Demo,后端套页面
    • 后端需要写HTML
    • 前端仍然确认后端写的HTML
  • 前端写View层,后端只管数据
    • 前端需要熟悉后端语言
    • 前端需要了解后端架构

无法良好的支持跨终端

  • 业务逻辑散落在应用中
  • 渲染逻辑强依赖后端页面
  • 只能用responsive design硬来

高度耦合的前后端分工

  • 沟通成本上升
  • 维护成本上升
  • 无法正确且快速的响应变化
  • 代码的腐烂只是迟早的问题

Client-side MV* 时代

接口分离, 后端提供数据, 前端自己搞


Model层 - JavaScript Object

View层 - JavaScript Template

业界的优秀方案


AngularJS, Backbone, EmberJS, KnockoutJS, React, etc.

前后端职责清晰了

后端前端
  • 提供数据
  • 处理业务逻辑
  • Server-side MVC架构
  • 代码跑在服务器上
  • 接收数据,返回数据
  • 处理渲染逻辑
  • Client-side MV* 架构
  • 代码跑在浏览器上

分离干净了,分工明确了,但是...

The Problems

各层职责重叠,并且各玩各的

  • 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

我们有机会从工作职责上

重新定义前后端的分层

重新定义的前后端

基于NodeJS全端开发

淘宝基于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