尊龙真人网上娱乐官网-尊龙z6尊龙开户平台-尊龙人生就是博!网址网站建设第一品牌
网络营销整合专家

我的前端之路:工具化与工程化

来源:未知   2020-11-22 01:32

 

  近年来,随着浏览器性能的提升与移动互联网浪潮的汹涌而来,Web前端开发进入了高歌猛进,日新月异的时代。这是最好的时代,我们永远在前行,这也是最坏的时代,无数的前端开发框架、技术体系争妍斗艳,让开发者们陷入困惑,乃至于无所适从。Web前端开发可以追溯于1991年蒂姆·伯纳斯-李公开提及HTML描述,而后1999年W3C发布HTML4标准,这个阶段主要是BS架构,没有所谓的前端开发概念,网页只不过是后端工程师的顺手之作,服务端渲染是主要的数据传递方式。接下来的几年间随着互联网的发展与REST等架构标准的提出,前后端分离与富客户端的概念日渐为人认同,我们需要在语言与基础的API上进行扩充,这个阶段出现了以jQuery为代表的一系列前端辅助工具。2009年以来,智能手机开发普及,移动端大浪潮势不可挡,SPA单页应用的设计理念也大行其道,相关联的前端模块化、组件化、响应式开发、混合式开发等等技术需求甚为迫切。这个阶段催生了Angular 1、Ionic等一系列优秀的框架以及AMD、CMD、UMD与RequireJS、SeaJS等模块标准与加载工具,前端工程师也成为了专门的开发领域,拥有独立于后端的技术体系与架构模式。而近两年间随着Web应用复杂度的提升、团队人员的扩充、用户对于页面交互友好与性能优化的需求,我们需要更加优秀灵活的开发框架来协助我们更好的完成前端开发。这个阶段涌现出了很多关注点相对集中、设计理念更为优秀的框架,譬如React、VueJS、Angular 2等组件框架允许我们以声明式编程来替代以DOM操作为核心的命令式编程,加快了组件的开发速度,并且增强了组件的可复用性与可组合性。而遵循函数式编程的Redux与借鉴了响应式编程理念的MobX都是非常不错的状态管理辅助框架,辅助开发者将业务逻辑与视图渲染剥离,更为合理地划分项目结构,更好地贯彻单一职责原则与提升代码的可维护性。在项目构建工具上,以Grunt、Gulp为代表的任务运行管理与以Webpack、Rollup、JSPM为代表的项目打包工具各领风骚,帮助开发者更好的搭建前端构建流程,自动化地进行预处理、异步加载、Polyfill、压缩等操作。而以NPM/Yarn为代表的依赖管理工具一直以来保证了代码发布与共享的便捷,为前端社区的繁荣奠定了重要基石。

  笔者在前两天看到了Thomas Fuchs的一则Twitter,也在Reddit等社区引发了热烈的讨论:我们用了15年的时间来分割HTML、JS与CSS,然而一夕之间事务仿佛回到了原点。

  分久必合,合久必分啊,无论是前端开发中各个模块的分割还是所谓的前后端分离,都不能形式化的单纯按照语言或者模块来划分,还是需要兼顾功能,合理划分。笔者在2015-我的前端之路:数据流驱动的界面中对自己2015的前端感受总结中提到过,任何一个编程生态都会经历三个阶段,第一个是原始时期,由于需要在语言与基础的API上进行扩充,这个阶段会催生大量的Tools。第二个阶段,随着做的东西的复杂化,需要更多的组织,会引入大量的设计模式啊,架构模式的概念,这个阶段会催生大量的Frameworks。第三个阶段,随着需求的进一步复杂与团队的扩充,就进入了工程化的阶段,各类分层MVC,MVP,MVVM之类,可视化开发,自动化测试,团队协同系统。这个阶段会出现大量的小而美的Library。在2016的上半年中,笔者在以React的技术栈中挣扎,也试用过VueJS与Angular等其他优秀的前端框架。在这一场从直接操作DOM节点的命令式开发模式到以状态/数据流为中心的开发模式的工具化变革中,笔者甚感疲惫。在2016的下半年中,笔者不断反思是否有必要使用React/Redux/Webpack/VueJS/Angular,是否有必要去不断追逐各种刷新Benchmark 记录的新框架?本文定名为工具化与工程化,即是代表了本文的主旨,希望能够尽可能地脱离工具的束缚,回归到前端工程化的本身,回归到语言的本身,无论React、AngularJS、VueJS,它们更多的意义是辅助开发,为不同的项目选择合适的工具,而不是执念于工具本身。

  总结而言,目前前端工具化已经进入到了非常繁荣的时代,随之而来很多前端开发者也甚为苦恼,疲于学习。工具的变革会非常迅速,很多优秀的工具可能都只是历史长河中的一朵浪花,而蕴藏其中的工程化思维则会恒久长存。无论你现在使用的是React还是Vue还是Angular 2或者其他优秀的框架,都不应该妨碍我们去了解尝试其他,笔者在学习Vue的过程中感觉反而加深了自己对于React的理解,加深了对现代Web框架设计思想的理解,也为自己在未来的工作中更自由灵活因地制宜的选择脚手架开阔了视野。

  引言的最后,我还想提及一个词,算是今年我在前端领域看到的出镜率最高的一个单词:Tradeoff(妥协)。

  月盈而亏,过犹不及。相信很多人都看过了2016年里做前端是怎样一种体验这篇文章,2016年的前端真是让人感觉从入门到放弃,我们学习的速度已经跟不上新框架新概念涌现的速度,用于学习上的成本远大于实际开发项目的成本。不过笔者对于工具化的浪潮还是非常欢迎的,我们不一定要去用最新最优秀的工具,但是我们有了更多的选择余地,相信这一点对于大部分非处女座人士而言都是喜讯。年末还有一篇曹刘阳:2016年前端技术观察也引发了大家的热议,老实说笔者个人对文中观点认同度一半对一半,不想吹也不想黑。不过笔者看到这篇文章的第一感觉当属作者肯定是大公司出来的。文中提及的很多因为技术负债引发的技术选型的考虑、能够拥有相对充分完备的人力去进行某个项目,这些特征往往是中小创公司所不会具备的。

  工具化是有意义的。笔者在这里非常赞同尤雨溪:Vue 2.0,渐进式前端解决方案的思想,工具的存在是为了帮助我们应对复杂度,在技术选型的时候我们面临的抽象问题就是应用的复杂度与所使用的工具复杂度的对比。工具的复杂度是可以理解为是我们为了处理问题内在复杂度所做的投资。为什么叫投资?那是因为如果投的太少,就起不到规模的效应,不会有合理的回报。这就像创业公司拿风投,投多少是很重要的问题。如果要解决的问题本身是非常复杂的,那么你用一个过于简陋的工具应付它,就会遇到工具太弱而使得生产力受影响的问题。反之,是如果所要解决的问题并不复杂,但你却用了很复杂的框架,那么就相当于杀鸡用牛刀,会遇到工具复杂度所带来的副作用,不仅会失去工具本身所带来优势,还会增加各种问题,例如培训成本、上手成本,以及实际开发效率等。

  笔者在GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean一文中谈到,所谓GUI应用程序架构,就是对于富客户端的代码组织/职责划分。纵览这十年内的架构模式变迁,大概可以分为MV*与Unidirectional两大类,而Clean Architecture则是以严格的层次划分独辟蹊径。从笔者的认知来看,从MVC到MVP的变迁完成了对于View与Model的解耦合,改进了职责分配与可测试性。而从MVP到MVVM,添加了View与ViewModel之间的数据绑定,使得View完全的无状态化。最后,整个从MV*到Unidirectional的变迁即是采用了消息队列式的数据流驱动的架构,并且以Redux为代表的方案将原本MV*中碎片化的状态管理变为了统一的状态管理,保证了状态的有序性与可回溯性。 具体到前端的衍化中,在Angular 1兴起的时代实际上就已经开始了从直接操作Dom节点转向以状态/数据流为中心的变化,jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据/状态为中心的开发模式。应用复杂后,直接操作 DOM 意味着手动维护状态,当状态复杂后,变得不可控。React 以状态为中心,自动帮我们渲染出 DOM,同时通过高效的 DOM Diff 算法,也能保证性能。

  抽象漏洞定理是Joel在2002年提出的,所有不证自明的抽象都是有漏洞的。抽象泄漏是指任何试图减少或隐藏复杂性的抽象,其实并不能完全屏蔽细节,试图被隐藏的复杂细节总是可能会泄漏出来。抽象漏洞法则说明:任何时候一个可以提高效率的抽象工具,虽然节约了我们工作的时间,但是,节约不了我们的学习时间。我们在上一章节讨论过工具化的引入实际上以承受工具复杂度为代价消弭内在复杂度,而工具化滥用的结局即是工具复杂度与内在复杂度的失衡。

  谈到这里我们就会明白,不同的项目具备不同的内在复杂度,一刀切的方式评论工具的好坏与适用简直耍流氓,而且我们不能忽略项目开发人员的素质、客户或者产品经理的素质对于项目内在复杂度的影响。对于典型的小型活动页,譬如某个微信H5宣传页,往往注重于交互动画与加载速度,逻辑复杂度相对较低,此时Vue这样渐进式的复杂度较低的库就大显身手。而对于复杂的Web应用,特别是需要考虑多端适配的Web应用,笔者会倾向于使用React这样相对规范严格的库。

  笔者最近翻译过几篇盘点文,发现很有趣的一点,若文中不提或没夸Vue,则一溜的评论:垃圾文章,若文中不提或没夸Angular 2,则一溜的评论:垃圾文章。估计若是笔者连React也没提,估计也是一溜的评论:垃圾文章。好吧,虽然可能是笔者翻译的确实不好,玷污了原文,但是这种戾气笔者反而觉得是对于技术的不尊重。React,Vue,Angular 2都是非常优秀的库与框架,它们在不同的应用场景下各自具有其优势,本章节即是对笔者的观点稍加阐述。Vue最大的优势在于其渐进式的思想与更为友好的学习曲线最大的优势其兼容并包形成了完整的开箱即用的All-in-one框架,而这两点优势在某些情况下反而也是其劣势,也是部分人选用React的理由。笔者觉得很多对于技术选型的争论乃至于谩骂,不一定是工具的问题,而是工具的使用者并不能正确认识自己或者换位思考他人所处的应用场景,最终吵的驴唇不对马嘴。

  React 与 VueJS 都是所谓小而美的视图层Library,而不是Angular 2这样兼容并包的Frameworks。任何一个编程生态都会经历三个阶段,第一个是原始时期,由于需要在语言与基础的API上进行扩充,这个阶段会催生大量的Tools。第二个阶段,随着做的东西的复杂化,需要更多的组织,会引入大量的设计模式啊,架构模式的概念,这个阶段会催生大量的Frameworks。第三个阶段,随着需求的进一步复杂与团队的扩充,就进入了工程化的阶段,各类分层MVC,MVP,MVVM之类,可视化开发,自动化测试,团队协同系统。这个阶段会出现大量的小而美的Library。

  React 并没有提供很多复杂的概念与繁琐的API,而是以最少化为目标,专注于提供清晰简洁而抽象的视图层解决方案,同时对于复杂的应用场景提供了灵活的扩展方案,典型的譬如根据不同的应用需求引入MobX/Redux这样的状态管理工具。React在保证较好的扩展性、对于进阶研究学习所需要的基础知识完备度以及整个应用分层可测试性方面更胜一筹。不过很多人对React的意见在于其陡峭的学习曲线与较高的上手门槛,特别是JSX以及大量的ES6语法的引入使得很多的传统的习惯了jQuery语法的前端开发者感觉学习成本可能会大于开发成本。与之相比Vue则是典型的所谓渐进式库,即可以按需渐进地引入各种依赖,学习相关地语法知识。比较直观的感受是我们可以在项目初期直接从CDN中下载Vue库,使用熟悉的脚本方式插入到HTML中,然后直接在script标签中使用Vue来渲染数据。随着时间的推移与项目复杂度的增加,我们可以逐步引入路由、状态管理、HTTP请求抽象以及可以在最后引入整体打包工具。这种渐进式的特点允许我们可以根据项目的复杂度而自由搭配不同的解决方案,譬如在典型的活动页中,使用Vue能够兼具开发速度与高性能的优势。不过这种自由也是有利有弊,所谓磨刀不误砍材工,React相对较严格的规范对团队内部的代码样式风格的统一、代码质量保障等会有很好的加成。

  一言蔽之,笔者个人觉得Vue会更容易被纯粹的前端开发者的接受,毕竟从直接以HTML布局与jQuery进行数据操作切换到指令式的支持双向数据绑定的Vue代价会更小一点,特别是对现有代码库的改造需求更少,重构代价更低。而React及其相对严格的规范可能会更容易被后端转来的开发者接受,可能在初学的时候会被一大堆概念弄混,但是熟练之后这种严谨的组件类与成员变量/方法的操作会更顺手一点。便如Dan Abramov所述,Facebook推出React的初衷是为了能够在他们数以百计的跨平台子产品持续的迭代中保证组件的一致性与可复用性。

  近年来随着应用业务逻辑的日益复杂与并发编程的大规模应用,函数式编程在前后端都大放异彩。软件开发领域有一句名言:可变的状态是万恶之源,函数式编程即是避免使用共享状态而避免了面向对象编程中的一些常见痛处。不过老实说笔者并不想一味的推崇函数式编程,在下文关于Redux与MobX的讨论中,笔者也会提及函数式编程不可避免地会使得业务逻辑支离破碎,反而会降低整个代码的可维护性与开发效率。与React相比,Vue则是非常直观的代码架构,每个Vue组件都包含一个script标签,这里我们可以显式地声明依赖,声明操作数据的方法以及定义从其他组件继承而来的属性。而每个组件还包含了一个template标签,等价于React中的render函数,可以直接以属性方式绑定数据。最后,每个组件还包含了style标签而保证了可以直接隔离组件样式。我们可以先来看一个典型的Vue组件,非常直观易懂,而两相比较之下也有助于理解React的设计思想。

  当我们将视角转回到React中,作为单向数据绑定的组件可以抽象为如下渲染函数:

  这种对用户界面的抽象方式确实令笔者耳目一新,这样我们对于界面的组合搭配就可以抽象为对于函数的组合,某个复杂的界面可以解构为数个不同的函数调用的组合变换。0.14版本时,React放弃了MixIn功能,而推荐使用高阶函数模式进行组件组合。这里很大一个考虑便是Mixin属于面向对象编程,是多重继承的一种实现,而函数式编程里面的Composition(合成)可以起到同样的作用,并且能够保证组件的纯洁性而没有副作用。

  很多人第一次学习React的时候都会觉得JSX语法看上去非常怪异,这种背离传统的HTML模板开发方式线版本中Vue也引入了JSX语法支持)。我们并不能单纯地将JSX与传统的HTML模板相提并论,JSX本质上是对于React.createElement 函数的抽象,而该函数主要的作用是将朴素的JavaScript中的对象映射为某个DOM表示。其大概思想图示如下:

  在现代浏览器中,对于JavaScript的计算速度远快于对DOM进行操作,特别是在涉及到重绘与重渲染的情况下。并且以JavaScript对象代替与平台强相关的DOM,也保证了多平台的支持,譬如在ReactNative的协助下我们很方便地可以将一套代码运行于iOS、Android等多平台。总结而言,JSX本质上还是JavaScript,因此我们在保留了JavaScript函数本身在组合、语法检查、调试方面优势的同时又能得到类似于HTML这样声明式用法的便利与较好的可读性。

  前后端分离与全栈并不是什么新鲜的名词,都曾引领一时风骚。五年前笔者初接触到前后端分离的思想与全栈工程师的定义时,感觉醍醐灌顶,当时的自我定位也是希望成为一名优秀的全栈工程师,不过现在想来当时的自己冠以这个名头更多的是为了给什么都了解一点但是都谈不上精通,碰到稍微深入点的问题就手足无措的自己的心理安慰罢了。Web前后端分离优势显著,对于整个产品的开发速度与可信赖性有着很大的作用。全栈工程师对于程序员自身的提升有很大意义,对于项目的初期速度有一定增速。如果划分合理的话能够促进整个项目的全局开发速度与可信赖性,但是如果划分不合理的话只会导致项目接口混乱,一团乱麻。但是这两个概念似乎略有些冲突,我们常说的前后端分离会包含以下两个层面:

  将原本由服务端负责的数据渲染工作交由前端进行,并且规定前端与服务端之间只能通过标准化协议进行通信。

  组织架构上的分离,由早期的服务端开发人员顺手去写个界面转变为完整的前端团队构建工程化的前端架构。

  前后端分离本质上是前端与后端适用不同的技术选型与项目架构,不过二者很多思想上也是可以融会贯通,譬如无论是响应式编程还是函数式编程等等思想在前后端皆有体现。而全栈则无论从技术还是组织架构的划分上似乎又回到了按照需求分割的状态。不过呢,我们必须要面对现实,很大程度的工程师并没有能力做到全栈,这一点不在于具体的代码技术,而是对于前后端各自的理解,对于系统业务逻辑的理解。如果我们分配给一个完整的业务块,同时,那么最终得到的是无数个碎片化相互独立的系统。

  笔者在2015-我的前端之路提及最初的网页是数据、模板与样式的混合,即以经典的PHP与JSP为例,是由服务端的模板提供一系列的标签完成从业务逻辑代码到页面的流动。所以,前端只是用来展示数据,所谓附庸之徒。而随着Ajax技术的流行,将WebAPP也视作CS架构,抽象来说,会认为CS是客户端与服务器之间的双向通信,而BS是客户端与服务端之间的单向通信。换言之,网页端本身也变成了有状态。从初始打开这个网页到最终关闭,网页本身也有了一套自己的状态,而拥有这种变化的状态的基础就是AJAX,即从单向通信变成了双向通信。图示如下:

  上文描述的即是前后端分离思想的发展之路,而近两年来随着React的流行服务端渲染的概念重回人们的视线。需要强调的是,我们现在称之为服务端渲染的技术并非传统的以JSP、PHP为代表的服务端模板数据填充,更准确的服务端渲染作用的描述是对于客户端应用的预启动与预加载。我们千方百计将客户端代码拉回到服务端运行并不是为了替换现有的API服务器,并且在服务端运行过的代码同样需要在客户端重新运行,这里推荐参考笔者的Webpack2-React-Redux-Boilerplate,按照三个层次地渐进描述了从纯客户端渲染到服务端渲染的迁移之路。引入服务端渲染带来的优势主要在于以下三个方面:

  对浏览器兼容性的提升,目前React、Angular、Vue等现代Web框架纷纷放弃了对于旧版本浏览器的支持,引入服务端渲染之后至少对于使用旧版本浏览器的用户能够提供更加友好的首屏展示,虽然后续功能依然不能使用。

  对搜索引擎更加友好,客户端渲染意味着整体的渲染用脚本完成,这一点对于爬虫并不友好。虽然现代爬虫往往也会通过内置自动化浏览器等方式支持脚本执行,但是这样无形会加重很多爬虫服务器的负载,因此Google这样的大型搜索引擎在进行网页索引的时候还是依赖于文档本身。如果你希望提升在搜索引擎上的排行,让你的网站更方便地被搜索到,那么支持服务端渲染是个不错的选择。

  整体加载速度与用户体验优化,在首屏渲染的时候,服务端渲染的性能是远快于客户端渲染的。不过在后续的页面响应更新与子视图渲染时,受限于网络带宽与重渲染的范畴,服务端渲染是会弱于客户端渲染。另外在服务端渲染的同时,我们也会在服务端抓取部分应用数据附加到文档中,在目前HTTP/1.1仍为主流的情况下可以减少客户端的请求连接数与时延,让用户更快地接触到所需要的应用数据。

  总结而言,服务端渲染与客户端渲染是相辅相成的,在React等框架的协助下我们也可以很方便地为开发阶段的纯客户端渲染应用添加服务端渲染支持。

  full-stack-between-reality-and-wishful-thinking

  全栈工程师对于个人发展有很大的意义,对于实际的项目开发,特别是中小创公司中以进度为第一指挥棒的项目而言更具有非常积极的意义。但是全栈往往意味着一定的Tradeoff,步子太大,容易扯着蛋。任何技术架构和流程的调整,最好都不要去违背康威定律,即设计系统的组织,其产生的设计等同于组织之内、组织之间的沟通结构。这里是笔者在本文第一次提及康威定律,笔者在实践中发现,有些全栈的结果就是强行按照功能来分配任务,即最简单的来说可能把登录注册这一块从数据库设计、服务端接口到前端界面全部分配给一个人或者一个小组完成。然后这个具体的执行者,因为其总体负责从上到下的全部逻辑,在很多应该规范化的地方,特别是接口定义上就会为了求取速度而忽略了必要的规范。最终导致整个系统支离破碎成一个又一个的孤岛,不同功能块之间表述相同意义的变量命名都能发生冲突,各种奇形怪状的id、uuid、{resource}_id令人眼花缭乱。

  今年年末的时候,不少技术交流平台上掀起了对于全栈工程师的声讨,以知乎上全栈工程师为什么会招黑这个讨论为例,大家对于全栈工程师的黑点主要在于:

  Leon-Ready:全栈工程师越来越难以存在,很多人不过滥竽充数。随着互联网的发展,为了应对不同的挑战,不同的方向都需要花费大量的时间精力解决问题,岗位细分是必然的。这么多年来每个方向的专家经验和技能的积累都不是白来的,人的精力和时间都是有限的,越往后发展,真正意义上的全栈越没机会出现了。

  轮子哥:一个人追求全栈可以,那是他个人的自由。但是如果一个工作岗位追求全栈,然后还来鼓吹这种东西的话,那证明这个公司是不健康的、效率底下的。

  现代经济发展的一个重要特征就是社会分工日益精细明确,想要成为无所不知的通才不过南柯一梦。不过在上面的声讨中我们也可以看出全栈工程师对于个人的发展是及其有意义的,它山之石,可以攻玉,融会贯通方能举一反三。笔者在自己的小团队中很提倡职位轮替,一般某个项目周期完成后会调换部分前后端工程师的位置,一方面是为了避免繁杂的事务性开发让大家过于疲惫。另一方面也是希望每个人都了解对方的工作,这样以后出Bug的时候就能换位思考,毕竟团队内部矛盾,特别是各个小组之间的矛盾一直是项目管理中头疼的问题。

  断断续续写到这里有点疲累了,本部分应该会是最重要的章节,不过再不写毕业论文估计就要被打死了T,T,笔者会在以后的文章中进行补充完善。

  所谓工程化,即是面向某个产品需求的技术架构与项目组织,工程化的根本目标即是以尽可能快的速度实现可信赖的产品。尽可能短的时间包括开发速度、部署速度与重构速度,而可信赖又在于产品的可测试性、可变性以及Bug的重现与定位。

  开发速度:开发速度是最为直观、明显的工程化衡量指标,也是其他部门与程序员、程序员之间的核心矛盾。绝大部分优秀的工程化方案首要解决的就是开发速度,不过笔者一直也会强调一句话,磨刀不误砍材工,我们在追寻局部速度最快的同时不能忽略整体最优,初期单纯的追求速度而带来的技术负债会为以后阶段造成不可弥补的损害。

  部署速度:笔者在日常工作中,最长对测试或者产品经理说的一句话就是,我本地改好了,还没有推送到线上测试环境呢。在DevOps概念深入人心,各种CI工具流行的今天,自动化编译与部署帮我们省去了很多的麻烦。但是部署速度仍然是不可忽视的重要衡量指标,特别是以NPM为代表的难以捉摸的包管理工具与不知道什么时候会抽个风的服务器都会对我们的编译部署过程造成很大的威胁,往往项目依赖数目的增多、结构划分的混乱也会加大部署速度的不可控性。

  重构速度:听产品经理说我们的需求又要变了,听技术Leader说最近又出了新的技术栈,甩现在的十万八千里。

  可测试性:现在很多团队都会提倡测试驱动开发,这对于提升代码质量有非常重要的意义。而工程方案的选项也会对代码的可测试性造成很大的影响,可能没有无法测试的代码,但是我们要尽量减少代码的测试代价,鼓励程序员能够更加积极地主动地写测试代码。

  Bug的重现与定位:没有不出Bug的程序,特别是在初期需求不明确的情况下,Bug的出现是必然而无法避免的,优秀的工程化方案应该考虑如何能更快速地辅助程序员定位Bug。

  无论是前后端分离,还是后端流行的MicroService或者是前端的MicroFrontend,其核心都是牺牲局部开发速度换来更快地全局开发速度与系统的可信赖性的提高。而区分初级程序员与中级程序员的区别可能在于前者仅会实现,仅知其然而不知其所以然,他们唯一的衡量标准就是开发速度,即功能实现速度或者代码量等等,不一而足。中级程序员则可以对自己负责范围内的代码同时兼顾开发速度与代码质量,会在开发过程中通过不断地Review来不断地合并分割,从而在坚持SRP原则的基础上达成尽可能少的代码量。另一方面,区分单纯地Coder与TeamLeader之间的区别在于前者更注重局部最优,这个局部即可能指项目中的前后端中的某个具体模块,也可能指时间维度上的最近一段的开发目标。而TeamLeader则更需要运筹帷幄,统筹全局。不仅仅要完成老板交付的任务,还需要为产品上可能的修改迭代预留接口或者提前为可扩展打好基础,磨刀不误砍材工。总结而言,当我们探究工程化的具体实现方案时,在技术架构上,我们会关注于:

  前后端业务逻辑衔接:在前后端分离的情况下,前后端是各成体系与团队,那么前后端的沟通也就成了项目开发中的主要矛盾之一。前端在开发的时候往往是根据界面来划分模块,命名变量,而后端是习惯根据抽象的业务逻辑来划分模块,根据数据库定义来命名变量。最简单而是最常见的问题譬如二者可能对于同意义的变量命名不同,并且考虑到业务需求的经常变更,后台接口也会发生频繁变动。此时就需要前端能够建立专门的接口层对上屏蔽这种变化,保证界面层的稳定性。

  多业务系统的组件复用:当我们面临新的开发需求,或者具有多个业务系统时,我们希望能够尽量复用已有代码,不仅是为了提高开发效率,还是为了能够保证公司内部应用风格的一致性。

  多平台适配与代码复用:在移动化浪潮面前,我们的应用不仅需要考虑到PC端的支持,还需要考虑微信小程序、微信内H5、WAP、ReactNative、Weex、Cordova等等平台内的支持。这里我们希望能够尽量的复用代码来保证开发速度与重构速度,这里需要强调的是,笔者觉得移动端和PC端本身是不同的设计风格,笔者不赞同过多的考虑所谓的响应式开发来复用界面组件,更多的应该是着眼于逻辑代码的复用,虽然这样不可避免的会影响效率。鱼与熊掌,不可兼得,这一点需要因地制宜,也是不能一概而论。

  声明式的渲染或者说可变的命令式操作是任何情况下都需要的,从以DOM操作为核心到数据流驱动能够尽量减少冗余代码,提高开发效率。笔者在这里还是想以jQuery与Angular 1的对比为例:

  目前React、Vue、Angular 2或其扩展中都提供了基于ES6的声明式组件的支持,那么在基本的声明式组件之上,我们就需要构建可复用、可组合的组件系统,往往某个组件系统是由我们某个应用的大型界面切分而来的可空单元组合而成,也就是下文前端架构中的解构设计稿一节。当我们拥有大型组件系统,或者说很多的组件时,我们需要考虑组件之间的跳转。特别是对于单页应用,我们需要将URL对应到应用的状态,而应用状态又决定了当前展示的组件。这时候我们的应用日益复杂,当应用简单的时候,可能一个很基础的状态和界面映射可以解决问题,但是当应用变得很大,涉及多人协作的时候,就会涉及多个组件之间的共享、多个组件需要去改动同一份状态,以及如何使得这样大规模应用依然能够高效运行,这就涉及大规模状态管理的问题,当然也涉及到可维护性,还有构建工具。现在,如果放眼前端的未来,当HTTP2普及后,可能会带来构建工具的一次革命。但就目前而言,尤其是在中国的网络环境下,打包和工程构建依然是非常重要且不可避免的一个环节。最后,从前端的项目类别上来看,可以分为以下几类:

  微服务为构建可扩展、可维护的大规模服务集群带来的便利已是毋庸置疑,而现在随着前端应用复杂度的日渐提升,所谓的巨石型的前端应用也是层出不穷。而与服务端应用程序一样,大型笨重的Web应用同样是难以维护,因此ThoughtWorks今年提出了所谓MicroFrontend微前端的概念。微前端的核心思想和微服务殊途同归,巨型的Web应用根据页面与功能进行切分,不同的团队负责不同的部分,每个团队可以根据自己的技术喜好应用相关的技术来开发相关部分,这里BFF – backend for frontends也就派上了用场。

  本文的最后一个部分着眼于笔者一年中实践规划出的前端开发计划,估计本文只是提纲挈领的说一下,未来会有专门的文章进行详细介绍。缘何称之为回归现实的前端开发计划?是因为笔者感觉遇见的最大的问题在于需求的不明确、接口的不稳定与开发人员素质的参差不齐。先不论技术层面,项目开发中我们在组织层面的希望能让每个参与的人无论水平高低都能最大限度的发挥其价值,每个人都会写组件,都会写实体类,但是他们不一定能写出合适的优质的代码。另一方面,好的架构都是衍化而来,不同的行业领域、应用场景、界面交互的需求都会引发架构的衍化。我们需要抱着开放的心态,不断地提取公共代码,保证合适的复用程度。同时也要避免过度抽象而带来的一系列问题。笔者提倡的团队合理搭配方式如下,这个更多的是面向于小型公司,人手不足,一个当两个用,恨不得所有人都是全栈:

  Redux是完全的函数式编程思想践行者(如果你对于Redux还不够理解,可以参考下笔者的深入理解Redux:10个来自专家的Redux实践建议),其核心技术围绕遵循Pure Function的Reducer与遵循Immutable Object的Single State Tree,提供了Extreme Predictability与Extreme Testability,相对应的需要大量的Boilerplate。而MobX则是Less Opinioned,其脱胎于Reactive Programming,其核心思想为Anything that can be derived from the application state, should be derived. Automatically,即避免任何的重复状态。Redux使用了Uniform Single State Tree,而在后端开发中习惯了Object Oriented Programming的笔者不由自主的也想在前端引入Entity,或者说在设计思想上,譬如对于TodoList的增删改查,笔者希望能够包含在某个TodoList对象中,而不需要将所有的操作拆分为Creator、Reducer与Selector三个部分,我只是想简单的展示个列表而已。笔者上大学学的第一节课就是讲OOP,包括后面在C#、Java、Python、PHP等等很多后端领域的实践中,都深受OOP思想的熏陶与灌输。不可否认,可变的状态是软件工程中的万恶之源,但是,OOP对于业务逻辑的描述与代码组织的可读性、可理解性的保证相较于声明式的,略为抽象的FP还是要好一点的。我认可函数式编程的思想成为项目构建组织的不可分割的一部分,但是是否应该在任何项目的任何阶段都先谈编程思想,而后看业务需求?这无疑有点政治正确般的耍流氓了。Dan推荐的适用Redux的情况典型的有:

  能够序列化记录用户操作,能够设置状态快照,从而方便进行Bug报告与开发者的错误重现

  能够在开发过程中实现状态历史的回溯,或者根据Action的历史重现状态

  能够为开发者提供全面透彻的审视和修改现有开发工具的接口,从而保证产品的开发者能够根据他们自己的应用需求打造专门的工具

  在不同的时间段做不同的事情,当我们在编写纯组件阶段,我们需要显式声明所有的状态/数据,而对于Action则可以放入Store内延后操作。以简单的表单为例,最初的时候我们会将表单的数据输入、验证、提交与结果反馈等等所有的逻辑全部封装在表单组件内。而后随着组件复杂度的增加,我们需要针对不同功能的代码进行切分,此时我们就可以建立专门的Store来处理该表单的状态与逻辑。抽象来说,我们在不同的阶段所需要的状态管理对应为:

  这个时候你也可以直接在组件内部修改状态,即还是使用第一个阶段的代码风格,直接操作store对象,不过也可以通过引入Strict模式来避免这种不良好的实践:

  随着项目体量进一步的增加与参与者的增加,这时候使用声明式的Actions就是最佳实践了,也应该是Redux闪亮登场的时候了。这时候Redux本来最大的限制,只能通过Action而不能直接地改变应用状态也就凸显出了其意义所在(Use Explicit Actions To Change The State)。

  笔者心中的前端架构如下所示,这里分别按照项目的流程与不同的开发时间应该开发的模块进行说明:

  实体类其实就是静态类型语言,从工程上的意义而言就是可以统一数据规范,笔者在上文中提及过康威定律,设计系统的组织,其产生的设计等同于组织之内、组织之间的沟通结构。实体类,再辅以类似于TypeScript、Flow这样的静态类型检测工具,不仅可以便于IDE进行语法提示,还能尽可能地避免静态语法错误。同时,当业务需求发生变化,我们需要重组织部分业务逻辑,譬如修改某些关键变量名时,通过统一的实体类可以更方便安全地进行修改。同时,我们还需要将部分逻辑放置到实体类中进行,典型的譬如状态码与其描述文本之间的映射、部分静态变量值的计算等:

  接口主要是负责进行数据获取,同时接口层还有一个职责就是对上层屏蔽服务端接口细节,进行接口组装合并等。笔者主要是使用总结出的Fluent Fetcher,譬如我们要定义一个最常见的登录接口:

  这里直接使用babel-node进行运行即可,然后由专业的测试人员写更加复杂的Spec。

  容器往往用于连接状态管理与纯组件,笔者挺喜欢IDE的LiveTemplating功能的,典型的容器模板为:

  前端开发完成并不意味着万事大吉,笔者在一份周报中写道,我们目前所谓的Bug往往有如下三类:

  (1)开发人员的粗心大意造成的Bug:此类型Bug不可避免,但是可控性高,并且前端目前配置专门的辅助单元测试人员,此类型Bug最多在开发初期大规模出现,随着项目的完善会逐步减少。

  (2)需求变动造成的Bug:此类型Bug不可避免,可控性一般,不过该类型Bug在正式环境下影响不大,最多影响程序员个人情绪。

  (3)接口变动造成的Bug:此类型Bug不可避免,理论可控性较高。在上周修复的Bug中,此类型Bug所占比重最大,建议未来后端发布的时候也要根据版本划分Release或者MileStone,同时在正式上线后设置一定的灰度替代期,即至少保持一段时间的双版本兼容性。

  线上质量保障,往往面对的是很多不可控因素,譬如公司邮件服务欠费而导致注册邮件无法发出等问题,笔者建立了frontend-guardian,希望在明年一年内予以完善:

  2016年末如往昔一般很多优秀的总结盘点文章涌现了出来,笔者此文也是断断续续写了好久,公司项目急着上线,毕业论文也是再不写就要延期的节奏。这段时间笔者看了很多大家之作后越发觉得自己的格局与眼光颇低,这也是笔者一直在文中提及我的经验与感触更多的来自于中小创团队,希望明年能够有机会进一步开拓视野。如果哪位阅读本文的伙伴有好的交流群推荐欢迎私信告知,三人行,必有我师,笔者也是希望能够接触一些真正的大神。

  前言距离上一次推荐图书,至少有一个季度了。今年还剩一个礼拜,是时候为2018的书单做准备了。今天推荐的是《前端工程化:体系设计与实践》前端工程化:系统设计与实践作者: 周俊鹏,主要研究方向为前端工程化和Web应用层架构,好于研究事物的本质,并且乐于从宏观的角度解决问题。时任搜狗地图Web前端开发主管。出版社:电子工业出版社本书由周爱民老师倾情作序,美团技术总监赵强、搜狐高级技术经理邵充、Faceb

  前端的小伙伴应该能够很明显地感觉到,在面试过程中,各大公司面试官已经非常注重前端工程化能力的考察了。前端工程化的演进可以极大地提升开发效率。前端发展到现在,社区涌现出大量的优秀框架和工具,得以将前端工程师从繁重的工作中解脱出来。比如,同样地给一个 dom 元素绑定一个 click 事件,使用 Vue 就会比 JS 更简单清晰。

  一、Node 通过 npm 安装相应的包,可一次性安装多个包 npm install 参数(可选,--global、--save-dev) 包名(grunt、bower、yo等)--global 作用:告诉npm我们安装的包不是项目层面的,而是系统全局层面的。其实,这么做是为了直接在命令行中使用安装的包。 --save-dev 作用:告诉npm把这个包添加到清单文件package.json中

  前端工程化是现代前端的必备技能 Web前端这几年进化速度之快让人咂舌。很多前端工程师都不禁吐槽“学不动了”。如今已经不是 HTML、CSS、JS前端三剑客仗剑走天下的时代了。 以笔者的亲身经历举例。笔者在 2011 年左右进入前端这个行业。当时工作的主要内容是,将设计稿切图转成静态页面,然后用 jQuery 插件实现一些页面的轮播图、跑马灯等交互效果。最后使用后端的模板语言如 smart、ve

  2016-我的前端之路:工具化与工程化从属于笔者的Web前端入门与工程实践,本文承接自笔者去年的年度总结:2015-我的前端之路:数据流驱动的界面。另外如果对整体编程技术体系与思维感兴趣的推荐阅读另一篇盘点文章:2016-我的技术之路:编程知识体系结构图 。 前言 二十载光辉岁月 近年来,随着浏览器性能的提升与移动互联网浪潮的汹涌而...

  本文介绍前端的项目模板设计,主要是为前端框架服务。本文涉及到 JavaScript、ESLint、ES6、Mock等

  前端工程化研究之数据mock化 相信大家都知道,前后端分离最的好处就是各司其职,效率更高。我们都知道,在早些年,也就是”三剑客“时代,往往等待后端开发完成之后,前端才能完全介入开发工作,有冲淡测试数据的角色。前端的眼里越来越大,往往项目的延期,推到前端的角色上,大部分的项目开发,往往都是前期很轻松,等到快上测试的时候,就是各种加班,更有甚者通宵,这又是谁的过呢?前端、后端?各种责任的推卸。开发的周期后端和前端不是同步进行的,造成开发的周期扩大,成本的增加;前后端的分离开发,按照规范执行,事半功倍,效率、成本

  引言:提到前端往往很多人的印象就是入门简单只是一个“画图”的,HTML、CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短的时间里写出炫酷的页面效果,然而入门简单并不意味着前端这碗饭很好吃,做惯了切图、布局、扣特效的前端新同学在向前发展的路上越来越觉得吃力,而没有任何编程思想和软件开发基础很多人对前端工程化、组...

  一、什么是前端工程化前端工程化是依据业务特点,将前端开发的规范、流程、技术、工具、经验等形成规范并建立成一种标准的体系。 二、为什么要前端工程化实现前端工程化的目的简单来说就是通过流程规范、自动化工具来提升前端的开发效率、性能、质量、多人协作能力以及开发体验。 近几年前端仍保持较高的速度发展,前端开发面临着的流程、资源组织和协同开发等各方面的挑战,所以建立前端工程化是各个团队必经的成长...

  前端面试汇总(2020年)     一 大纲   1、前言   2、前端工程化3、前端设计模式   4、前端安全性问题   5、前端跨域问题   6、前端数据加密   7、前端http相关问题   8、*前端基础知识点面试题   9、前端技术栈问题 前言   由于新冠肺炎疫情,现在成天呆在家里,加上也要准备面试,就在家里看面试题

  更新于2019-12-15 10:38:00 本人从事Java开发已多年,平时有记录问题解决方案和总结知识点的习惯,整理了一些有关Java的知识体系,这不是最终版,会不定期的更新。也算是记录自己在从事编程工作的成长足迹,通过博客可以促进博主与阅读者的共同进步,结交更多志同道合的朋友。特此分享给大家,本人见识有限,写的博客难免有错误或者疏忽的地方,还望各位大佬指点,在此表示感激不尽。 文章目录...

  使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点:node.jsvue.jswebpack前端工程化本篇不是写给零基础的同学看的,读者应具备一些服务器开发、前端开发基础本篇目标使用webpack+vue.js构建前端工程化本篇目标node.js基本入门node.js介绍环境搭建npm介绍npm淘宝镜像使用cnpm安装包node.js模块化程序结构node.js重要模块(API)

  前端工程化研究 前言 随着互联网的迅速发展,这几年进化速度之快让人咂舌,很多前端工程师都不禁吐槽“学不动了”。如今前端可谓包罗万象,产品形态五花八门,涉猎极广,各种各样的框架和库,随着web业务日益复杂化和多元化,UI的要求变高,从WebPage模式为主转变为WebApp模式,也从有混合模式开发到分离式开发的转变,对前端工程师的能力越来越来高,能力和层次已经不是 HTML、CSS、JS前端三剑客仗剑那个时代了,我记得在15年的时候我在上海,当时JS 框架以 jQuery 为主,less 基本都不用,而我

  前端架构: 1.前端工程化web应用复杂度的增加,特别是单页面应用的风靡。组件化,工程化,自动化成了前端发展的趋势。或者说一线的互联网公司就是这么做的。 每个前端团队都在打造自己的前端开发体系,这通常是一个东拼西凑,逐渐磨合的过程,在技术发展日新月异的今天,这样的过程真的是不可抽象和复制的么?本文希望能够通过系统的拆解前端开发体系为大家提供体系设计思路参考。前端工程的3个阶段

  前端自动化构建工具有: Bower,Gulp,Grunt,node,yeoman。。。 自动化构建是作为前端工程化中重要的部分,承担着若干需要解决的环节。包括流程管理、版本管理、资源管理、组件化、脚手架工具等。 流程管理 完整的开发流程包括本地开发,mock调试,前后端联调,提测,上线等。在每个团队的基础设施当中(如cms系统,静态资源推送系统等),都会存在一定程度将前端开发流程割裂。如何运用自动...

  前言 这一篇文章主要是关于前端规范化的内容,前端规范化是我们践行前端工程化过程中的重要的组成部分 有利于项目维护,以及二次开发,减低维护成本,便于后续人员接手 为什么要有规范化 1、软件开发需要多人协同 2、不同的开发者具有不同的编码习惯和喜好 3、不同的喜好增加项目维护成本 4、每个项目或者团队需要统一的标准 哪些地方需要规范化 1、代码、文档、甚至是日志 2、开发过程中人为编写

  先附上一张网上广为流传的前端知识体系图:前端知识体系 从大图中我们总结出: 优秀的Web前端开发工程师 要在知识体系上既要有 广度 和 深度!应该具备快速学习能力。前端开发工程师 不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。

  背景 1年前入职时,公司前端部门的静态代码部署都是用ftp工具拖拽部署,没有记录,没有关联,经常造成许多困扰的问题, 比如:今天有没有其他人在我要部署的路径上工作?我的代码为啥被盖掉了?被谁盖掉的?啥时候盖掉的? 本地build,ftp拖拽部署这种方式,导致git版本与手动的构建、部署没啥关联,更有在本地写完代码部署上去后,压根没传git这种失误可能发生。 靠人去遵守规范来控制工作流,总会有失误、...

点击进入“下一篇”继续浏览
返回列表

最新资讯最新资讯

品牌创意网站建设 上市公司网站建设 大型门户类网站建设 全方位网站运营代理
企业官方网站建设 B2C电子商务网站建设 专题活动网站(MINISITE)

更多 +联系我们

业务电话:0755/837391590755/33121570

业务 QQ:   传真: 0755-83739169

E-mail:   售后QQ :764390686

我们的认知

当对手还在将注意力停留在碎片化的互联网设计或程序实现时,织梦帮早已开始将数字品牌的建设和传播进一步整合。只有通过整体的互联网品牌分析,帮助品牌建立互联网品牌传播价值,并围绕价值建立品牌粘性,提升品牌与用户的互动,更好的帮助品牌传播,触发用户的行动力才是我们工作的终极目标,这正是一流品牌的成功秘诀。
不可否认,建立互联网品牌传播价值的确是门艺术,但互联网不同于艺术涂鸦,企业投资品牌绝不是希望品牌成为某个艺术家的实验品。互联网传播的对象是用户,用户拥有自己的文化体系,群落共性才是互联网品牌传播创意的源头,如果我们不能帮助企业激发目标用户的共鸣,产生购买冲动,那将是品牌的悲剧! 因此,互联网传播必须建立品牌传播价值,为梦想者创造梦想品牌,织梦帮与您同行!

合作意向表

您需要的服务

现有网站改版
我需要做微信营销
建设全新的企业网站
要找长期合作公司,需要年度服务

您最关注的地方

对功能要求比较高
对设计创意要求比较高
需要可以购物支付
搜索引擎排名

预算

3-5万 5-8万 8-10万 10万以上需招投标
验证码