很荣幸作为前端专题讲师参加2016年SDCC,与周爱民老师同台,听业界牛人的分享真是受益匪浅。对我来说是第一次在如此规模的专题论坛上演讲,全程紧张的要命,提前准备好的内容有很多因为紧张没有讲出来。此次参会最大的收获不仅仅是对自己的一次锻炼,更多的是了解前端行业的技术现状和未来走向。

我的分享主题是《基于webpack的前端工程解决方案》,ppt可以在这里下载。演讲前对ppt有稍微的修改,与提交给CSDN的ppt稍有出入,但是并不影响整体内容。

与其他几位演讲嘉宾分享的内容相比,我的分享主题其实并没有很多干货。主要的内容是讲述本人自2016年4月份加入58到家,独立承担前端工程解决方案的探索和开发中的一些经验和感想。更多的是对前端工程化理想模式的思考和探讨。

首先介绍58到家前端工程解决方案boi目前的模式:

上图展示的是目前业内比较普遍的前段工程解决方案,也是58到家目前阶段所采用的。这套方案涵盖了从项目初始到前端资源部署上线中的各个环节。boi以webpack为构建核心,整体架构如下图:

webpack可以说是目前最流行的构建工具之一,功能全面稳定,可扩展性良好并且有庞大的社区资源。webpack的定位就是解决项目构建中的各种需求:

前端工程解决方案中,构建是核心环节,但并不是唯一的环节,所以boi围绕webpack打造的构建核心,同时提供了脚手架、本地服务器和本地部署功能:

boi提供了清晰的工作流,可以很大程度上提高开发效率:

这套工作流存在一个致命的缺陷:提测和上线的文件存在一定的差异,并且build动作由开发者本地执行,如果存在多人协作的项目,必须存在一个汇总的开发者来执行代码的merge和build。

所以上图展示的本地工作流只是一种过渡的方案,并不严谨。

boi提供的功能几乎都是本地可执行的,但是我们对boi的目标定位是:

  1. 本地作为开发工具;
  2. 云端作为编译工具。

boi的脚手架、本地服务器可以提高开发者本地开发的效率,功能开发完成之后,由部署到云端的boi统一执行构建,搭配模拟真实环境的测试沙箱,保证测试文件和线上文件的高度统一:

以上方案只需build一次,且是面向生产环境的build。这样就解决了测试和线上文件的不统一问题,但是仍然存在进步空间:本地&测试&线上,三个环境的代码统一

这也是对前端工程化理想模式的感想之一。其实前端工程师越来越向全能手的角色发展,包揽中间层和客户端。这这样的定位下,前端工程化的理想模式应该包含哪些环节呢?以下是我个人的一点感想:

当然,这只是一己之见,欢迎大家共同探讨。

文中提到的boi会在后续的博文中陆续解析。

2016 SDCC会后总结的更多相关文章

  1. SDCC 2016中国软件开发者大会十三大主题

    SDCC中国软件开发者嘉年华(Software Developer Carnival China),是由全球最大中文IT社区CSDN于2007年创办的软件技术领域顶级盛会,将如约于2016年11月18 ...

  2. 2016第三届C++大会参会感悟(上)

    继05年第一届C++大会,09年第二届,2016年10月28日-29日,在上海举行第三届C++大会.讲师主要有C++之父 / Bjarne Stroustrup,前Facebook研究科学家 / An ...

  3. OneZero第四次站立会议(2016.3.24)

    会议时间:2016年3月24日 15:30~15:47 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论,确定会后修改内容. 会议内容:以下为会议插图 1.界面原型方面,在 ...

  4. OneZero第五次站立会议(2016.3.25)

    会议时间:2016年3月25日 12:45~12:57 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论,确定会后修改内容. 会议内容:1.界面原型已经确定.(夏负责) 2 ...

  5. OneZero第二周第二次站立会议(2016.3.29)

    会议时间:2016年3月29日  13:05~13:16 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论,确定会后修改内容或分配下一步任务. 会议内容:以下是会议插图 1 ...

  6. OneZero第二周第三次站立会议(2016.3.30)

    会议时间:2016年3月30日  13:00~13:20 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论,确定会后修改内容或分配下一步任务. 会议内容: 1.前端,完成功 ...

  7. OneZero第二周第四次站立会议(2016.3.31)

    会议时间:2016年3月30日  13:00~13:20 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论,确定会后修改内容或分配下一步任务. 会议内容: 1.前端,夏.张 ...

  8. 2016上海站EC-final总结!

    2016上海站EC-final总结 本想在知乎上发起一个话题:没有半点准备实力菜得抠脚的选手突然有机会参加final是什么体验.不过感觉这样太高调了,于是..... 以上说的就是事实,毫无准备.毫无状 ...

  9. SFDC 微服务实践之路 2016.12.10 杭州(整理)--转

    原文地址:http://mp.weixin.qq.com/s/8cC4Ewt6yPjnxdYxuNZlFQ 微服务是什么? 微服务是一种细粒度(Fine-Grain)的SOA 或许在座的高朋了解过其概 ...

随机推荐

  1. 27Where条件筛选数据-简单(必学)-天轰穿sqlserver视频教程

    大纲:简单条件查询 模糊查询 复合条件 使用IN子句 BETWEEN子句 空值与非空值 优酷地址 代码下载地址 http://www.cnthc.com/?/article/160

  2. React Native入门遇到的一些问题

    本文示例参考自<React Native第一课> React Native官方文档中文版(含最新Android内容) 这里只大概记录下我的操作步骤和遇到的问题,一定要牢记下面这条: 如果你 ...

  3. 向Spotify学习如何设计产品(转)

    导语:Spotify是瑞典的精益创业项目,同时保持着很棒的产品交付记录.一般在产品上线之后,开发者才知道人们喜不喜欢它.Spotify如何解决这个问题? 本文转自 kent.zhu's Blog,原文 ...

  4. 轻松搞定面试中的二叉树题目(java&python)

    树是一种比较重要的数据结构,尤其是二叉树.二叉树是一种特殊的树,在二叉树中每个节点最多有两个子节点,一般称为左子节点和右子节点(或左孩子和右孩子),并且二叉树的子树有左右之分,其次序不能任意颠倒.二叉 ...

  5. Thinkpad X240使用U盘安装Win7系统

    更改BIOS设置 不同电脑的进入BIOS的方式可能不太一样,Thinkpad X240的进入方式是在电脑启动的时候按下回车键,然后按F1进入BIOS. 1. 修改secure boot为Disable ...

  6. Console中加入招聘等个性化信息

    try { if (window.console && window.console.log) { console.log("%c XX息科技 ", "f ...

  7. Oracle 数据库表同步方法浅议

    总结一下Oracle数据库表级别的复制同步 一.通过触发器进行表的复制 原理,是监听表上都某一字段进行的DML操作,然后得到DML操作的数据,重新在另一个表上执行DML操作. 优点: 简单,编写一个触 ...

  8. Swift 3 新特性

    原文:What's New in Swift 3? ,作者:Ben Morrow,译者:kmyhy Swift 3将于今年下半年推出,为Swift开发者们带来了很多核心代码的改变.如果你没有关注过 S ...

  9. [转]HTTP请求模型和头信息

    原文链接:http://www.java3z.com/cwbwebhome/article/article2/2406.html 目录 一.连接至Web服务器 二.发送HTTP请求 三.服务端接受请求 ...

  10. 利用nodejs+phantomjs+casperjs采集淘宝商品的价格

    因为一些业务需求需要采集淘宝店铺商品的销售价格,但是淘宝详情页面的价格显示是通过js动态调用显示的.所以就没法通过普通的获取页面html然后通过正则或者xpath的方式获取到想到的信息了. 所幸我们现 ...