其实早就该写这篇博客了,一直说忙于工作没有时间,其实时间挤挤总会有的,可能就是因为懒吧!从2013年11月一直拖到现在,今天就简单谈谈 Worktile 的技术架构吧 。

Worktile 自上线到现在收到了很多用户的喜欢,我们倍感欣慰,自己做的产品得到了用户的认可是件幸福的事情,其中有很多来自IT的用户,经常在官方群或者知乎上问一些关于Worktile的技术问题:

Worktile 采用的是怎么样的架构?
Wortile 前后端采用了哪些技术?
...

Worktile整体架构一览

Worktile 是企业协同办公软件,所以一开始注定就应该是单页应用(SPA),因为使用SPA后,用户在浏览器端可以像操作原生客户端程序一样的体验(速度和流畅度),对于开发者来说,前后端分离,服务端只提供RESTful API服务,移动端集成也非常的方便,具体可以看下面这张草图。

前端

  1. Angular.js(客户端MV*)
  2. Bootstrap (CSS基础库和一些Javascript组件)
  3. UI Bootstrap (Bootstrap 的 Angular.js版本)
  4. jQuery (取代Angular.js中的jqLite,并作为其他第三方jQuery插件的基础类库)

Worktile的服务端基本上只是提供API数据服务的,不会渲染HTML,前端的代码在发布之前会使用 Grunt 工具打包合并压缩成一个js文件。

Angular.js

既然是SPA程序,前端必然要选择一个MVC(或者MVVM)框架,关于前端MVC框架有很多,当时面临选择的时候也是比较犹豫,因为在此之前我们只初略的使用过 Knockoutjs 。
其实我们当时就是急切的希望一个框架能做到:

  1. 数据能够双向绑定(或者只单向绑定)
  2. 前端路由功能
  3. 简单易学的模板语言

最终我们选择了 Angular.js,具体其中选择的细节就不一一描述了(之前在知乎上也回答过关于Angular.js 的问题:Angular.js 在实际应用中有哪些优缺点?),从开始使用到现在已经快2年了,事实证明当初的选择还是没有错的, Angular.js的确很适合 Worktile。

Bootstrap 和 jQuery

选择Bootstrap主要是为了使用它的基础CSS功能,在它的基础之上很容写出规范的样式代码,当然我们也需要使用其中的部分Javascrip组件功能,因为原生的 Bootstrap是基于 jQuery的,为了在Angular.js中也能很好的使用它,我们引入了 UI Bootstrap、关于jQuery大家再熟悉不过了,我们使用的很多第三方插件是jQuery的,所以也一并引入了。

上面只是列出了 Worktile 主要使用的几个Javascript框架和类库,真正使用的类库远不止上面列出的这些。比如日历库 ui-calendarunderscorejs 等等...

服务端

  1. Node.js
  2. Redis
  3. MongoDB

Node.js

服务端是构建在Node.js之上的,我们的服务端MVC框架采用的是 Expressjs,刚开始是 Express 3.x版本,现在已经升级到 4.x,Expressjs提供了 Route和模板引擎的功能,由于我们的服务端基本只提供数据服务,所以关于服务端模板引擎这块基本不使用(只有布局和一些配置项输出到界面时需要用到)。

选择 Node.js 是因为它简单,适合高并发的Web服务,而且我们的开发人员能够熟练使用它,关于Node.js的优缺点我在知乎上也曾经回答过:使用 Node.js 的优势和劣势都有哪些?

Redis

Worktile 用户的登录状态,一些临时使用的数据、部分业务数据缓存 都是放在 Redis 里面的,关于Node.js怎么和 Redis 连接采用 Node Redis 模块。

MongoDB

Worktile 并不是那种高度事物性的系统或者传统的商业智能应用,所以MongoDB非常适合,性能非常高,集群方便,而且以BSON结构存储,和Node.js完美集成。
Worktile 的数据层和MongoDB之间并不是使用 原生的驱动 ,而采用了 mongoosejs,类似Java或者C#上的ORM框架,使用 mongoose 可以很方面的定义数据 Schema,读取操作 MongoDB。

推送服务

前面也说了 Worktile 是 SPA程序,用户登录到系统之后,基本上所有的操作都不需要刷新浏览器,因为是一个协同办公软件,其他用户多数据进行操作需要实时更新,所以客户端必然要和服务端保持一种长连接,方面进行数据交互,我们的实时推送服务是采用 Erlang 语言编写的,感兴趣的可以查看:https://worktile.com/tech/basic/worktile-real-time-notice

采用 Erlang 是因为我们的开发人员有这方面的经验,并且Erlang非常适合做这个高并发实时推送服务。

如果你熟悉 Node.js 肯定知道 Sockiet.IO,我们最初的实时推送其实是采用 Sockiet.IO的,后来由于访问量的增张,原有的Sockiet.IO 是基于Worktile Web站点的,没有独立成单独的服务,重构的时候彻底采用Erlang重写了。

其实这2种技术都非常优秀,选择哪种主要取决于你擅长什么。

文件预览服务

使用过 Worktile 的人肯定都知道,在系统中上传一些文件,比如:word、excel、txt、pdf、ppt等等,都是可以在线预览的,关于 txt、pdf这些文件的预览其实好办,txt直接读取文件内容即可,pdf采用浏览器自带的预览或者使用一些Js类库都很方便的做到,但是对于 Ofiice 文件,是不可以直接读取的,所以我们自己搭建了一套 Ofiice的预览服务,这个服务主要是基于微软的 Office Web App服务

Box 文件服务

Worktile 中所有的文件存储在阿里云的OSS上,为了做一些权限的认证和安全问题,我们通过一个Box服务做中转,所有文件的上传下载都是走 Box 服务。这要感谢 5楼的Box之父 @Shaun Xu 写出了这么好的Box 服务。

以上是Worktile用的所有技术和架构简单介绍。

Worktile 自上线以来用户的增长也是非常迅速的,所以 Web服务器从原先的1台变成多台,数据库从单实例到现在的集群,等等,关于目前Worktile的服务器结构图参考如下:

Worktile 技术架构概要的更多相关文章

  1. 转载Worktile 技术架构概要

    Worktile 技术架构概要 其实早就该写这篇博客了,一直说忙于工作没有时间,其实时间挤挤总会有的,可能就是因为懒吧!从2013年11月一直拖到现在,今天就简单谈谈 Worktile 的技术架构吧 ...

  2. worktile的架构设计

    Worktile自上线两年多以来,以良好的用户体验和稳定的服务,获得了用户的认可和喜爱.截止笔者写这篇文章的时候,已经有超过10万家团队在使用Worktile.作为团队协作工具,从技术上分析首先要解决 ...

  3. Instagram的技术架构

    http://blogread.cn/it/article/5497 Instagram 被 Facebook 以10亿美金收购.团队规模:13 人.而在被Facebook收购前的一个月,整个团队才7 ...

  4. Hive技术架构

    一.Hive概念 Facebook为了解决海量日志数据的分析而开发了Hive,Hive是一种用SQL语句来读写.管理存储在分布式存储设备上的大数据集的数据仓库框架. 1. 数据是存储在HDFS上的,H ...

  5. Web高级征程:《大型网站技术架构》读书笔记系列

    一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...

  6. 聚光灯下的熊猫TV技术架构演进

    2015年开始的百播大战,熊猫TV是其中比较特别的一员. 说熊猫TV是含着金钥匙出生的公子哥不为过.还未上线,就频频曝光,科技号,微博稿,站上风口浪尖.内测期间更是有不少淘宝店高价倒卖邀请码,光内测时 ...

  7. eaby技术架构变迁

    如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭 最近在infoq上面看到 ebay介绍其系统架构变迁以及系统设计分享方面的讲座,其中 ...

  8. 大型网站技术架构介绍--squid

    一.大型网站技术架构介绍 1.pv高  ip高 并发量 2.大型网站架构重点    1. 高性能:响应时间,TPS,系统性能计数器.缓存,消息队列等.     高可用性High Availabilit ...

  9. 从Hadoop框架与MapReduce模式中谈海量数据处理(含淘宝技术架构) (转)

    转自:http://blog.csdn.net/v_july_v/article/details/6704077 从hadoop框架与MapReduce模式中谈海量数据处理 前言 几周前,当我最初听到 ...

随机推荐

  1. DFS序+线段树 hihoCoder 1381 Little Y's Tree(树的连通块的直径和)

    题目链接 #1381 : Little Y's Tree 时间限制:24000ms 单点时限:4000ms 内存限制:512MB 描述 小Y有一棵n个节点的树,每条边都有正的边权. 小J有q个询问,每 ...

  2. 【面试】HTTP post请求与get请求的区别

    1. get是从服务器上获取数据,post是向服务器传送数据. 2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过 ...

  3. lamp

      Linux+Apache+Mysql/MariaDB+Perl/PHP/Python一组常用来搭建动态网站或者服务器的开源软件,本身都是各自独立 的程序,但是因为常被放在一起使用,拥有了越来越高的 ...

  4. [转]oracle 分析函数over

      oracle 分析函数over 分析函数(OVER) 目录: =============================================== 1.Oracle分析函数简介 2. O ...

  5. 在CentOS下利用Python+selenium获取腾讯首页的今日话题。

    1.安装依赖包 yum install wget firefox gcc zlib zlib-devel Xvfb 2.安装setuptools 官网地址:https://pypi.python.or ...

  6. js排序算法总结—冒泡,快速,选择,插入,希尔,归并

    相信排序是任何一个程序猿都会用到的东西,今天简单总结记录下常见的排序算法. 一.冒泡排序 说起冒泡排序,可能每个人都不会陌生,实现思路相当简单明了,就是不停的对数组进行两两比较,将较大(较小)的一项放 ...

  7. expect脚本语言用法示例

    #!/usr/bin/expect set hostname [lindex $argv 0] set username [lindex $argv 1] set passwd [lindex $ar ...

  8. struts2中的jar包

    核心包: (后面数字是版本号,不同struts2版本,数字可能不一样.) struts2-core-2.1.8.1 struts2的核心jar包,不可缺少的 xwork-core-2.1.6 xwor ...

  9. AngularJS:自定义过滤器

    表达式:         {{ expression | filter1 | filter2 | ... }}         {{ expression | filterName : paramet ...

  10. [WPF] 我的WPF自学日记2,自定义入口

    在winform中入口文件就是Program.cs,而在WPF中看不到,因为它是自动生成的,可以说隐藏了,我们可以自定义一个入口文件,然后修改项目属性中的启动对象为我们自定义的入口文件. 首先新建入口 ...