很荣幸作为前端专题讲师参加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. apache url rewrite 的RewriteRule参数详解

    apache url rewrite 的RewriteRule参数详解 我们经常会在apache那边对一些url进行一些重写操作,那么就会涉及到很多的重写策略的选择,比如重定向的方式,参数的处理,规则 ...

  2. android: permission和uses-permission

    首先,先看一下permission定义的格式: <permission android:description="string resource" android:icon= ...

  3. ios之如何删除默认的约束

    应用场景,你是否尝试过定义一个在设置了autolayout中的xib的控件,然后连线关联了outlet.跟住在代码中设置了针对这个控件的约束,但是发现没有显示效果,控制台里面打印出约束的问题.大概就是 ...

  4. iOS-OC-APP热更新,动态更新(仿QQ打开或关闭某个功能)

    一.前言 iOS开发更新APP我觉得是比较坑的就是审核时间比较长,审核比较严,对于刚入行的小伙伴来说,雷区比较多:所以热更新是比较重要的: 大家也许会发现我们常用的QQ现在下来也就一百多兆,但是用了几 ...

  5. HttpURLConnection GET/POST写法

    现在虽然HttpClient很好使,但也有人在用最原生的HttpURLConnection, 记录一下,备忘之. public class HttpUrlConnect { //get请求 publi ...

  6. AtomicInteger简介

    这个类真的非常实用,更重要的是 它确实非常简单: 附上自己的代码,可以自己试试: AtomicInteger,一个提供原子操作的Integer的类.在Java语言中,++i和i++操作并不是线程安全的 ...

  7. 面向.Net程序员的后端性能优化实战

    最近2个月没做什么新项目 完全是对于旧的系统进行性能优化 避免超时 死锁 数据处理能力不够等常见的性能问题 这里不从架构方面出发 毕竟动大手脚成本比较高 那么我们以实例为前提 从细节开始 优化角度 一 ...

  8. ARCGIS 10.1 发布服务问题以及注意事项汇总

    本文会逐渐丰富,并在遇到问题后进行整理进来. 一.了解ArcGIS Server以及如何利用ArcServer发布服务 官方中文帮助文档:http://resources.arcgis.com/zh- ...

  9. 比较下OceanBase的选举协议和Raft的选举协议的区别

    阿里技术大讲堂OceanBase专场中曾有专门一场讲座介绍OB自己实现的分布式选举算法:<分布式选举-破解数据库高可用性难题> 这里简单列一下这个选举算法和raft论文中提到的选举算法的区 ...

  10. [转]ASP.NET页面之间传递值的几种方式

    页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryString,Session,Cookie ...