‘壹’ jQuery $(window).scroll事件出现问题
web前端开发 20 年变迁史,让我们来看看这20年里,web前端究竟经历了哪些变革,web前端在这20年里又有哪些突破和成就,怎么样看待这20年的web前端开发!
1990年,第一个Web浏览器诞生,而WWW的诞生直接拉开前端史的序幕。
从静态页面到Java,从依赖后端到自主开发,前端开发者从不被重视的“页面仔”逆袭为如今很多前端工程师的薪资比后端还高,从前端技术由国外开发者主导到如今国内自主产生的小程序技术,我们走了20年。
了解web前端:http://www.cnite.cn/qianan/
作者 | 司徒正美
责编 | 伍杏玲
1990 年,第一个Web浏览器的诞生;1991 年,WWW诞生,这标志着前端技术的开始。
在这将近20年的前端发展史中,我们经历了从最早的纯静态页面,到Java跨时代的诞生;从PC端到移动端;从依赖后端到前端可自由打包开发;从早期的网景Navigator浏览器到现在各家浏览器百花齐放……
我们经历了前端的洪荒时代、Prototype时代、jQuery时代 、后jQuery时期、三大框架割据时代,这其中均是由国外开发者主导,直到如今的小程序时代,才是中国开发者独创的。
这是漫长的技术储备下的成果,最终促成了良好的技术成长收获。期间的前端发展之路,崎岖艰难:
洪荒时代(1990~1994年)
在1990~1994年期间,前端界发生的大事有:WWW(World Wide Web)的诞生、浏览器的诞生、Java的诞生,没有专业的前端,页面全是由后端开发的。
1990年,万维网之父蒂姆·伯纳斯-李(Tim Berners-Lee)在NeXT电脑上发明了第一个Web浏览器。
1991年8月6日,Tim在alt.hypertext新闻组贴出了一份关于World Wide Web的简单摘要,这标志了Web页面在Internet上的首次登场。
最早的Web主要被一帮科学家们用来共享和传递信息,全世界的Web服务器也就几十台。由于仅是用来传递信息,从可视化方式或从传递数量上看,仅比电报强一点点。
当时还没有Java,用的是纯静态的页面。
1993年,CGI(Common Gateway Interface)出现了,人们可以在后端动态生成页面。
Perl由于跨操作系统和易于修改的特性成为CGI的主要编写语言。当然,CGI也支持其他支持标准输入输出和环境变量的语言编写,比如Shell脚本、C/C++语言,只要符合接口标准即可。
但显然,页面的内容更新完全由后端生成,这带来一个明显的缺憾:每次更新都要整页刷新,加上早期的网速情况,这个操作是非常慢的。因此针对这情况,人们从多方面着手改进:编写语言的升级、浏览器的升级、HTML的升级。
1994年,网景公司成立,发布了第一款商业浏览器Navigator。自从这款浏览器面世后,微软推出IE浏览器。虽说有竞争才有发展,但这也埋下了Java分裂的种子。
(1994 年,网景浏览器的截图)
同年,PHP诞生。PHP能将动态的内容嵌入到HTML中,提升了编写页面的效率与可读性,其性能也比一般的CGI高。PHP的界定符、循环语句等的发明,深刻影响了后来的ASP、JSP,乃致后来的Java前端模板引擎。
1994年10月,W3C小组也成立了,他们负责HTML的发展路径,其宗旨是通过促进通用协议的发展。
待这一切就绪后, Java于1995年诞生了。
传闻,网景工程师布兰登·艾克(Brendan Eich)只花了10天时间设计出 Java 语言,近乎上帝七日创造世界那么高效。但也因为工期太短的缘故,导致许多瑕疵,因此一直被正统传序员所嫌弃,直到Ajax的出世,才让人们找到理由忍受它的畸形。早期的浏览器都配有一个选项,用来禁止Java语言运行。
Java主要语言特征[1]:
借鉴C语言的基本语法;
借鉴Java语言的数据类型和内存管理;
借鉴Scheme语言,将函数提升到"第一等公民"(first-class citizen)的地位;
借鉴Self语言,使用基于原型(Prototype)的继承机制。
时下,静态语言大行其道,类与接口被证明是构建大工程的最佳实践,人们想不出没有类的语言如何编写业务。因此当时的微软也打造了另一门运行于浏览器的语言——VB。
如果继续细探Java的能力,你会发现它早期真的非常空洞,一门没有灵魂的语言,没有包管理机制,也没有像Java与C++那样的打辅助用的SDK,内置的方法也屈指可数。比如说数组方法,早期只有push、pop、shift、unshift、splice、slice、sort、reverse、concat、join等操作。动态调用方面,Function的apply、call操作还没有出现!
早年的偷懒,导致后来不得不补课:到了2019年,数组上的原型方法,是原来3倍。
除了方法缺乏,还有性能问题,大家讨论用eval还是Function,用哪种循环方式,用parseInit还是~~,就是为了那一点点的性能提升。例如jsperf.com,就是一个专门研究Java性能的网站。
因此Java诞生后,其两大任务就是完善语言特性与提高性能。这两座大山分别由着名的prototype.js与jQuery来搬掉。
在搬掉之前,前端界还有一个曲折实践——第一次浏览器战争,并由其发展而来UA嗅深技术。
浏览器战争(1994~2005年)
浏览器战争一共打了三场,IE浏览器vs网景浏览器、IE浏览vs火狐浏览器、IE浏览器vs谷歌浏览器。
第一场浏览器之战打得尤其激烈。
微软的IE浏览器发布于1994年,但此时的网景已经占领绝对优势。微软在落后的情况,反编译Netscape的源码,推出IE与J。但是由于Bug非常多,大家不愿意为IE开发网站,因此发掘出UA,专门过滤掉IE浏览器。
UA即Navigator.userAgent ,是用一个字符串来记录用户当前运行在什么操作系统与浏览器中。当前IE3的UA是这样的:
Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)
程序判断UA信息,假如发现当前运行的环境是IE浏览器的话,就提示用户用网景浏览器打开。因此微软不得不让自己的UA尽量伪装成网景的UA,欺骗用于检测UA的脚本,达到IE浏览器可以跑这些网站的目的。
最终,第一次浏览器之战以微软胜利,Netscape被美国在线收购,而落下帷幕。
第一次浏览器战争年代非常久远了,但其结局告诉我们,其实技术强弱并不重要。那时技术保护并没有这么重视,否则微软的行为可能会被告(谷歌的openSDK仅抄袭几十行代码,被Oracle公司诉讼赔88亿)。
第一次浏览器战争带来了一个问题:尽管当时有ECMA-262(Java规范文档)与W3C(HTML与CSS的规范文档),微软却没有照规范来实现Java、HTML与CSS,导致前端兼容问题的诞生。所以CSS Hack、浏览器判定、特性侦测,这些技术就应运而生。
这个时代最着名的人物是Dean Edwrad,他是最早的近乎完美解决事件绑定的兼容性大神,其addEvent()内置于jQuery最早的版本中。jQuery的作者John Resig看到其超强的技艺,最后放弃推出大而全的框架,专攻选择器引擎。
Dean Edwrad的IE7.js、IE8.js是早期处理浏览器兼容的良药,可以说是一切Polyfill[2]的起源。他写了大量的Hack, 比如在IE如何测量元素的宽高,许多操作DOM的兼容。
这时期太早,中国基本没有参与这次浏览器战争。
Prototype时期(2005~2009年)
Prototype是Sam Stephenson写的一个非常优雅的Java基础类库。他是Ruby的大牛,因此Prototype的许多方法名都是来自Ruby界。
Sam Stephenson最大的贡献是发掘了Prototype与创造了Function.prototype.bind,在数组上也写了一大堆方法,其中许多被标准化了。
同期的MooTools也是Prototype的方法,当时,大家还在前端论坛为这个争吵。还有前端工程师喜欢在当时很出名的前端聚集地——蓝色理想(现沦为设计师网站)上,讨论如何扒脚本、分享弹层、日历等小组件的技术,这在当时已经是非常了不起的事。
Prototype当时还解决两大问题:动画特效与Ajax请求。动画特效是由aculous提供,我们现在所熟知的各种缓动函数,各种特效的命名与大致的运行形态,都是由aculous确定下来的。
在早期,谷歌就开始使用iframe实现页面刷新。
2005 年2月,杰西·詹姆士·贾瑞特(JesseJamesGarrett)发表了一篇名为《Ajax:一种Web应用程序开发的新方法》的文章后,Ajax被挖掘出,大家才开始重视起这技术的应用。
例如IE下的ActiveXObject("Microsoft.XMLHTTP"),这是IE创建Ajax引擎的。假如当时有工程师开发出一个核心库,如果不包含Ajax的封装,便不好意思发布出来。
一些Ajax书藉
当时前端开发模式是选择一个核心库,找一些组件,或者扒别人的脚本进行开发
Prototype的源码挺好理解的,代码量也少,只有5000多行,里面的每个方法也很易扒出来,因此一些大公司总有高手能创造自己的Prototype。
但前端开发还是离不开后端,因为前端没有模块机制,当时我们需要用PHP进行打包。打包是雅虎34条军规之一,可以减少请求数。打包的同时也可以进行混淆,防止代码小偷来窥探。
N年前,前端面试必问的题目:
模块化的雏型, 在注释中标注它的依赖
这个时期,还没有前后端分离,可国内一些带着深厚后端背景的高手已经入场。
jQuery 时期(2009~2012年)
2006年,jQuery发布,它当时的竞争对手很多:Dojo、Prototype、ExtJS、MooTools。
所以那时jQuery的宣传口号仅能说是它的性能上升了100%、200%、300%。直到2009年,Sizzle选择器引擎研发成功,jQuery才取得压倒性的优势。
当时前端界首要面对的是浏览器兼容性问题,jQuery在处理DOM兼容上真是知微见着, 发掘出大量的DOM/BOM兼容方案(例如Dean Edwrad的addEvent(), IE的px转换方案,domReady的doScroll方案,globalEval的兼容方案等)
jQuery也打破了前端开发者的编程思维,之前是按照后端的开发思路来的:做一个业务就先封装一个类,有了这个类后,再想办法传入一个DOM,然后再通过类方法操作DOM。而jQuery是DOM为中心,开发者可以选一个或多个DOM,变成jQuery对象,然后进行链式操作。当时为了改变用户的思维,国内的高手写了不少文章来引导大家。
其次,开发者们已开始注重前后端分离,并要求不能污染Object原型对象,不能污染window全局变量。这样,jQuery只占用两个全局变量。
再次,jQuery非常轻量级,采用Dean Edwards编写的Packer压缩后, 大小不到30KB。并且里面实现得非常精妙,以令人瞠目的手段解决各种兼容痼疾。
为了学习这些技巧,高手们翻了一遍遍jQuery的源码,所以网上有大量关于其源码详解的书藉。甚至前端工程师在面试时也会被考到jQuery的源码实现,这样,jQuery在国内更加流行。
jQuery的流行间接带来以下的发展:
促使人们对CSS1~CSS3选择器的学习
促进了浏览器原生选择器引擎document.querySelectorAll、Element.matches的诞生
提高人们对domReady(DOMContentLoaded事件)的认识
促进了Promise与requestAnimateFrame 的诞生
最重要的是降低前端门槛,让更多人进入这行业,前端工程师的队伍越来越壮大。
这样的话,不断涌现出优秀的工程师,他们创造了大量jQuery插件与UI库。为后jQuery时代,人们研发前端模块加载、统一异步机制、 打造大型MVC框架, 甚至伸向后端,接管打包脚本而发明Node.js,来腾出大量时间。
这个时期涌现了大量jQuery-like的库,其中最着名的是Zepto.js。Zepto的出现也标志着我们进入移动互联网时代。那时配套出的着名库还有iScroll、fastclick、Lazy Load、Modernizr、fullPage。
jQuery的链式操作风麾一时,也带来许多问题,当Ajax出现依赖时,就不可避免就出现回调地狱。因此针对这方面的讨论,诞生Deffered与Promise。有关回调地狱的讨论,在后来讲Node.js异步处理时,将会再一次热烈地讨论。因此太阳下没有新事,我们总是遇到相似的问题。
jQuery如此多的选择器也法维护,随着越来越多人涌现这行业,页面的交互也越来越复杂,从Web Page向Web App进化,新的趋势带来新的开发方式。
后jQuery时期(2012~2016年)
这时期以RequireJS的诞生为起点,以RN的出现结束。同时解决了前端的模块定义问题,模块打包问题(通过Node.js),Java不依靠其他语言创造了一套自己的工具链。
jQuery的出现让前端工程师开发更加轻松,假如工程师想实现一个功能,现搜索出一个jQuery插件来实现。那时候大家在前端网站就整天介绍jQuery插件,很少讨论一些底层的实现。
前端工程师通常编写一个页面,会引入十多个乃至几十个jQuery插件,页面上塞满了标签。众所周知,浏览器是单线程,的加载,会影响到页面的解析与呈现,导致着名的白屏问题(当时前端用力过勐,body中的所有东西都是动态生成的)。
jQuery另一个问题是全局污染,由于插件的质量问题,或者开发的素质问题,这已经是IIEF模块或命名空间等传统手段无法解决了。
于是一些优秀的前端工程师们决定从取经后端,引入模块机制。早期,这种模块机制在Dojo、EXT这些框架中都是内置的,但是显然说服不了另一个框架的用户用对方的模块机制,于是有人立志要统一这种模块定义方式,成立了CommonJS。
但不料,CommonJS内部也有派系,谁也说不服对方。终于有一个人忍不住自己独立开发出RequireJS,其模块规范即为AMD。 AMD最大的优势是它支持各种插件,且简单明了,并且提供shim机制加载以非AMD规范编写的Java代码。
但在CommonJS诞生很久一段时间后,在后端的Node.js出现时才有用武之地。而国内,则流行另一种规范风格,背靠阿里的大旗,有人推出了SeaJS,号称其规范为CMD。其实无论国内还是国外,都产生许多模块加载器,但最后还是被淘汰了,规范一个就够了,不宜过多。
但是前端工程师的创造力就是这么惊人,从无到有,再到泛滥成灾,一年足矣。这可能与前端代码是开源的原因。最后有人统一了前两种规范(AMD、Node.js模块),同时还支持老式的“全局”变量规范。
自此,Java开发模式焕然一身了,大家只要在代码外面包一层就可以全世界通用,不用提心全局污染的问题。
其次,jQuery开发者需要解决大段HTML的生成问题,之前jQuery有$.html, $.append, $before等方法,可以将一大段符合HTML结构的字符串转换成DOM再插入到页面上。
但现在我们想分离出来,让HTML独立到不同的文件中,然后插数据,这就是前端模板。前端模板的情况与模板规范一样,从没有到多如芝麻的境地。这时筛选一个好用且性能高的模板是一件让前端工程师头疼的问题,那时网上有许多评测文章来介绍它们。
前端模板技术可以用一个公式来描述:
HTML = template(vars)
有了前端模板后,又诞生了前端路由,基于它们,人们发明一个新词汇SPA。作为这个时代的尾声,来自Ruby界的高手Ryan Dahl发明了Node.js。 前端工程师们欢唿:可以不用传统的后端就能自己写一个网站了!
Node.js的发展就不详述上,很快它就冒出海量模块、路由、状态管理、数据库、MVC框架都有了。这时,前端就缺自己的MVC框架了。Node.js转眼就十岁生日了。
着名的MEAN架构,是Java全栈开发的先锋。当时涌现了大量的MVC与MVVM框架。最先火起来的是Backbone.js,使用纯正的MVC模型, Backbone.js是jQuery最后的支持者,它强依赖于jQuery。
Backbone.js的作者还搞了另一套编译语言Coffee, 里面的箭头函数、类机制、 解构赋值等语法糖都深深影响了后来的ES6。
接着下来是谷歌的Angular,微软的Knockout.js,苹果的Ember.js这三个MVVM框架,MVVM就是比MVC多一个数据绑定功能,但这数据绑定功能是非常难实现。Knockout是使用函数代替属性的技巧实现,它的设计影响到后来的Mobx;Ember.js是基于Object.defineProperty;Angular是将函数体转译成setter()、getter()函数。
大公司的介入,对个人开发者影响是很大,毕竟大家都爱迷信大公司,因此局面一下子就稳定下来。大公司还带来了全新的开发模式,早期都是找一个核心库,再搜刮一大堆插件,然后自己写业务代码,最后后端打包。
大公司将后端开发经验挪用过来,用Node.js开发了一套CLI,里面包含了脚手架生成, 打包脚本、语法风格检测、环境变量插入,代码复杂度检测,代码提交时自动跑单元测试, 图片与JS压缩等功能。ESLint、JSLint、JSHint、CSS Lint、 htmllint等就是那时期出现的。
但CLI的出现导致了前端的分裂,以前大家都使用jQuery,但自CLI帮你建好项目的那一刻起,就将你划归某一子阵营,你是Angular?Ember.js?还是jQuery?对了,jQuery没有大公司支撑的阵营被快速边缘化。
对于个人开发者,他们是没有能力开发这么功能完备的CLI,于是出现了Code Climate、Travis CI、CircleCI这样的平台。它们的出现标志着jQuery小作坊时代的终结了。
CircleCI官网
前端开发者也出现分化:有些人转向后端,出现了CNode的门户网站。另外一些人开始搞工程化。一时间出现上百种构建工具,出名的有Grunt、Gulp、FIS3、webpack、 Rollup、npm-。
你方唱罢我登场,这些构建工具均会经历时代的考验,如大浪淘沙般,最后存活得仅为寥寥。
因此在这场工程化得盛宴中,注定把许多低层次的jQueryer淘汰掉。jQueryer在空闲之余培育出的前端模板、前端路由、MVC框架、模块加载器、Node.js构建工具,却不料最终成为它自己的挖墓人。
jQuery的时代一去不返了,再没有人关心拖堂拖了N年的Bootstrap 4终于发布了,没有人知道jQuery3.5的瘦身计划,也没有人问jQuery的源码,渐渐地,大家不关注jQuery的工具链了。
三大框架割据时代(2016~至今)
React是突然爆发的,虽然它是与Angular是同时期发布,但因为JSX怪异的语法让人们远离它。此时已经进入移动互联网的中期,大公司都有自己的App,或者基于原生,或者基于Hybird。
Hybird是用WebView加载一个网站或一个SPA。
由于原生成本太贵,需要招两套班子,一套安卓的,一套iOS的;而Hybird则一直存在性能问题。于是在2017年,Facebook推出了React Native(RN)。
RN的性能不比原生差多少,比Hybird能好些, 其次使用JSX开发界面比原生的快; RN 只需要低成本的前端开发人员就能上手了。中国国内经过瀑布流(图片导购)、团购、P2P、区块链等全新商业模式的开发浪潮后,前端人员数量大增。现在,他们只要稍微培训就可以转型为App开发。
在开发RN的过程中,人们开始了解React一系列的优胜之处。比如JSX背后的虚拟DOM技术,虽然事实证明虚拟DOM不会带来性能的巨大优势,但保证了你怎么写其性能不会太差。
React为了引入JSX,必须需要引入编译,这又间接促成Babel与webpack的壮大。尤其是Babel, 让我们在很旧的浏览器中使用非常新的语法,甚至一些还没有定案的语法。React从14升级到React 15,强制使用class语法,让这个推了好久的语法糖终于大规模落地。
之前如果Java想使用类,只能自己模拟类,由于没有官方的实现,只能任由各优秀工程师发挥。而普通人想用好类,需要了解很复杂的Prototype机制。
现在只用几个新关键字就可以得到这一切。
如果对比Python 2与Python 3间的升级,Java实在太辛运了!针对CSS逻辑功能过弱的问题,我们也有了新的解决方案:Less、Sass、PostCSS与CSS Moles!
谷歌在发布Angular的同时,也发布了一个叫Polymer的框架,那时它想推广一种叫Web Components的浏览器自定义组件技术。这其实是微软在IE5就玩剩的HTC技术的升级版。虽然它没有火起来,但它将、Style、Template三种内容混在一个文件的设计,启发一个留美华人,再结合当时的Backbone.js、Angular等设计,Vue.js横空出世。目前,这是国人最成功的前端框架了。
除此之外,国人也弄了好几套迷你React框架与迷你Vue框架。这有点像jQuery时代,大家疯狂做迷你jQuery框架一样。
总的来说,最有创造力的是React团队,做出状态管理器、CSS-in-JS、Flow静态类型检查、devTool、Fetch、前后端同构、Fiber、suspend、并发渲染等名词层出不穷。其中,状态管理器拥有上百套, CSS-in-JS也拥有上百套,Flow则让前端尝鲜到接口编程的好处,间接推动发Type发展。这三大框架无法比拼个一二出来:Vue.js有国人的拥趸,React与Angular有大公司光环。
三大框架的缠斗从PC领域扩展到移动端:React有RN, Vue.js有Weex,Angular有ionic。想当年我们为了兼容浏览器,攒了一大堆浏览器侦探的Hack,全部贬值为垃圾了。
在这时期,一种全新的后端渲染崛起,称之为前后同构,既拥有早期SEO的功效,又能复用大量的业务逻辑。随着国内移动互联网的发展,获客成本提高,各种有效的商业模式都进入红海,但只有头部用户能赚到钱,马太效应越来越严重,纯粹的技术解决方案已经无法满足商业诉求了。
小程序时代(2017~至今)
小程序时代与三大框架的时代几乎重合,但是出自不同一批人,决战的平台也不一样。
一直以来前端技术都是由国外开发者主导的,即便是Vue.js也是由美国的华人创造的。但是国内外的技术更新是存在代差,国内通常延期两三年,这个时间差可以让一些模仿者得以生存(如SeaJS、FIS、avalon)。但随着封闭的时间越来越长,国内肯会也会诞生自己的转有物种。小程序就是其中之一。
小程序的出现有着明显的商业诉求,因为马太效应,一些超大流量的App诞生了。这些大流量App集成了许多功能,但显然公司再多员工,也无法所有功能全是自己弄,于是产生小程序这种“外包”的手段。
小程序是国内前端技术的一次厚积薄发:底层运行的迷你React的虚拟DOM, 内置组件是使用Web Component,API来源于Hybird的桥方法,打包使用webpack,调试台是Chrome console的简化版, WXML、WXSS的语法高亮也应该是webpack或VS Code的插件, 模块机制是Node.js的CommonJS……其中最值得一提的是微信开发者工具,以后开发者工具成了各种小程序/快应用的标配。
但微信小程序一开始的复用能力非常弱,没有类继承,不能使用npm, 不支持Less、Sass, 因此基于它的转译框架就应运而生。第一代译转框架是wept、WePY、mpvue,它们无一例外是Vue风格的。因为WXML的模板指令与Vue非常相似,只是改一下就能兼容。当时也出现了一个MINA的框架,听说是微信团队开发的,可以单独架起Node.js后端,让小程序运于浏览器中,方便做单元测试。
第一代转译框架主要是基于Template标签实现组件机制,自定义组件机制是很后的事了。这就造成了利用第一代转译框架编写的小程序项目很难升级。那时候是个人开发者的天堂,这些框架都是某一大牛独力开发的。
第二代转译框架是大公司主导的,因为需要兼容的小程序越来越多,网络、支付宝、字节跳动、小米、华为等公司都推出自己的小程序和快应用。个人开发者很难凭个人力量去开发转译框架,这时候各大团队纷纷推出自己的轮子:如京东的Taro、滴滴的Chameleon网易的Megalo、去哪儿网的nanachi、网络的Okam等。
在这个时期,Angular显然落伍了,一是Angular升级太快,国内的高手还没有消化好,新一版的Angular又发布了。二是国内缺乏迷你Angular的轮子,导致庞大的Angular无法塞进小程序中。
国外谷歌发布了Flutter跨平台转译框架,但是它的编写语言是Dart,它也无法跨界到小程序中。
未来不仅国内一线巨头争夺小程序,二三线的巨头也可能会加入小程序的混战中,例如有人称360也在打造自己的小程序平台。小程序这种新的流量变现模式深刻地影响了国内的互联网布局。
结语
当初Java被误解为最糟糕的语言,时至今日它是最流行的语言:GitHub 60%的开源项目都是与Java有关。
以前,从事这行业的人被称为页面仔,现在他们的起薪有的比PHP、JAVA、C++等后端还高。甚至有人说,“任何可以使用Java来编写的应用,最终会由Java编写。”
我们前端开发者触及的领域不仅仅是浏览器,还可以做后端,做桌面端,做手机端,做小程序端,前端开发者的性价比越来越高,越来越重要。可谓是时代造英雄。
笔者有幸成为前端开发者大队伍中的一员,也坚信我们前端开发者以后的路会越来越宽,越来越好走。
资料:
[1]:计算机和编程语言的发展历史
[2]:Polyfill是一块代码(通常是 Web 上的 Java),用来为旧浏览器提供它没有原生支持的较新的功能。
作者简介:司徒正美,拥有十年纯前端经验,着有《Java框架设计》一书,去哪儿网公共技术部前端架构师。爱好开源,拥有mass、Avalon、nanachi等前端框架。目前在主导公司的小程序、快应用的研发项目。
本文链接:http://www.cnite.cn/qianan/share/20198308.html
‘贰’ 原生安卓比ios还要流畅,为什么到了国内之后国产手机一年就卡
尽管Android旗舰手机在核心硬件搭配方面已经不比iPhone差了,甚至在很多数据上面还要强于iPhone,尤其是在处理器核心数量、运行内存大小都要好过iPhone,不过Android手机还是没能改变用了一段时间之后就会很卡的常态,这到底是什么原因呢?原生Android当然会好很多,当然Android本身还是存在一些问题的,Android选择Java作为核心开发语言,而Java本身是一个虚拟机语言,加上Java语言确实也比较臃肿,加上Java语言的一些机制导致了Android的卡顿。
Android的问题是多方面,有本身技术选型的问题,也有生态管理上的问题,这两个问题非常棘手,不然这问题不早就解决了么,就看Google未来的长期战略是怎么规划的吧,是开发生态逐步规范化还是直接替代Android,就看Google自己的选择了。
‘叁’ 前端ui框架排名
在前端项目开发过程中,现在很少有人会使用原生的CSS来搭建页面,总归都会引入一些前端UI框架以减少代码的书写。一般为了方便自己的使用,很多大公司都有自己的一套UI框架,同时也会把其开源出来。下面就是最近经常使用并且很流行的一些前端UI框架,总有一款适合你:
Mint UI
Flutter
Flutter 是谷歌的移动端 UI 框架,可在极短的时间内构建 Android 和 iOS 上高质量的原生级应用。 Flutter 可与现有代码一起工作, 它被世界各地的开发者和组织使用, 并且 Flutter 是免费和开源的.
ionic
Ionic既是一个CSS框架也是一个Javascript UI库,Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。
‘肆’ 编程时选用的程序设计语言,对软件的开发与维护的影响
【CSDN 编者按】“如果我们把人类文明想象成汽车的话,那么软件开发行业就相当于汽车的引擎,编程语言就像引擎的燃料。”作为一名开发者,需跟随技术潮流的发展来学习新技术。2020年,你有计划新学一门编程语言吗?
本文作者从一名架构师的角度,详细分析了7种现代编程语言的优点与功能,你对哪门语言最感兴趣呢?
作者 | Md Kamaruzzaman,软件架构师
译者 | 弯月,责编 | 伍杏玲
封图| CSDN 下载于视觉中国
出品 | CSDN(ID:CSDNnews)
以下为译文:
如果我们把人类文明想象成汽车的话,那么软件开发行业就相当于汽车的引擎,而编程语言就像引擎的燃料。作为一名开发者,今年你应该学习哪种编程语言呢?
学习一种新的编程语言无疑是时间、精力和智力上的巨大投资, 但是学习一种新的编程语言可以提升你的软件开发技术力,促进你的职业发展。
在这里,我将献上一份现代编程语言的列表,这些语言不仅有助于提高你的生产力,而且还可以促进你的职业发展,并让你成长为更优秀的开发人员。这份列表还涵盖了非常广泛的领域:系统编程、应用程序开发、Web开发、科学计算等。
什么是现代编程语言?
“现代编程语言”这个说法本身就很含糊。许多人认为Python和JavaScript等语言是现代编程语言,还认为Java是一种古老的编程语言。实际上,这几种语言大约在同一时间出现:1995年。
大多数主流编程语言是上个世纪开发的:七十年代(如C)、八十年代(如C ++)、九十年代(如Java、Python、JavaScript)。这些语言在设计上并没有考虑现代软件开发生态系统:多核CPU、GPU、快速的互联网、移动设备、容器和云等。尽管许多语言中的许多功能都已进行一些改进,如并发等,而且在不断调整自己以适应时代,但它们依然保留了向后兼容性,无法抛弃那些过时的旧功能。
在这方面,Python就做得很好(某种意义上也未必是好事),Python 2和Python 3两者之间有明确的分界线。很多语言常常会为解决同一个问题提供十余种的方法,同时又没有顾及到开发人员的感受。根据StackOverflow的开发人员调查,大多数旧时的主流编程语言在“最可怕的语言”排名都名列前茅:
如果非要在新旧编程语言之间划个界限的话,那么应该是2007年6月29日,也就是第一台iPhone发行的时候。在这之后,编程语言界发生了很大变化。因此,在本文的列表中,我只考虑2007年以后的编程语言。
为什么要学习新语言?
首先,现代编程语言充分利用现代计算机硬件(多核CPU、GPU、TPU)、移动设备、大量数据、高速互联网、容器和云的优势。大多数现代编程语言会关注开发人员的体验,比如:
简洁明了的代码(减少样板代码)
内置的并发支持
空指针安全
类型推断
简洁的功能集
降低学习难度
融合所有编程范例的最佳功能
本文列表的许多编程语言都带有革命性地变化,并将永久地改变软件行业。一些已成为主流编程语言,还有一些则有望取得突破。因此选择这些语言作为第二种编程语言是明智的做法。
Rust
一直以来,系统编程语言环境主要由靠近硬件的语言(如C、C ++等)主导。尽管它们可以完全控制程序和硬件,但是它们缺乏内存安全性。即使它们支持并发,使用C/C ++编写并发程序也很困难,因为没有并发安全性。还有一些流行的编程语言是解释性语言,例如Java、Python、Haskell。这些语言具备安全性,但需要庞大的运行时或虚拟机。由于它们的运行时间长,因此Java等语言不适合于系统编程。
许多人曾尝试将C/C ++的功能与Java、Haskell的安全性相结合。然而,Rust才是第一个成功实现了这一点的编程语言。
Graydon Hoare在业余项目中开发出了Rust,他的灵感来自研究编程语言Cyclone。Rust是开源的,由Mozilla与许多其他公司和社区一起领导这门语言的开发。Rust于2015年首次发布,并很快引起了社区的关注。
主要特征:
通过所有权和借用概念提供内存安全和并发安全。
内存安全和并发安全在编译时确保,即如果程序代码可以编译,那么内存既安全又没有数据竞争。这是Rust最吸引人的功能。
它还提供了Haskell中元编程的表现力。凭借不可变的数据结构和功能编程功能,Rust提供了功能并发和数据并发。
Rust的速度非常快,纯Rust的性能甚至优于纯C。
在没有运行时的情况下,Rust可以完全控制现代硬件(TPU、GPU、多核CPU)。
Rust具有LLVM支持。因此,Rust提供一流的与WebAssembly的互操作性,而且Web代码也非常快。
流行度:
自2015年首次亮相以来,Rust已被开发人员广泛接受,并在StackOverflow开发人员调查中连续四年(2016、2017、2018、2019)被评选为最受欢迎的语言:
根据GitHub Octoverse的调查,Rust是运行速度第二快的语言,仅次于Dart:
此外,根据编程语言流行度排名网站PyPl的数据,Rust排名第18位,并呈上升趋势:
对比Rust提供的功能集,我们就会明白为什么微软、亚马逊、Google等科技巨头相继宣布投资Rust作为一种长期的系统编程语言。
根据Google统计的趋势,在过去的5年中,Rust的热度每年都在增加。
主要用途:
系统编程
Serverless 计算
商业应用
主要竞争对手:
C
C++
Go
Swift
Go
在本世纪初,Google面临两个扩展问题:开发扩展和应用程序扩展。开发扩展问题指的是他们不能仅通过投入开发人员的方式来添加更多功能。应用程序扩展问题则指他们无法开发出一款能够扩展到Google级别的计算机集群的应用程序。
所以在2007年左右,Google创建了一种新的编程语言,用于解决这两个扩展问题。两位才华横溢的Google软件工程师Rob Pike(UTF-8)和Ken Thompson(UNIX OS)创建了一种新语言。
2012年,Google正式发布了第一版的Go编程语言。Go是一种系统编程语言,但与Rust不同,它还具有Runtime和垃圾收集器(几兆字节)。但是与Java或Python不同,这个Runtime包含了生成的代码。最后,Go生成了一个本地的二进制代码,可以在没有附加依赖项或运行时的情况下在计算机中运行。
主要特征:
Go具有一流的并发支持。Go不通过线程和锁提供“共享内存”并发性,因为编程难度太大。相反,它提供了基于CSP的消息传递并发性(基于Tony Hoare的论文)。Go使用“ Goroutine”(轻量级绿色线程)和“ Channel”进行消息传递。
Go最大的杀手级功能是:简单,它是最简单的系统编程语言。新手软件开发人员只需几天就可以编写高效的代码,就像Python一样。有些大规模的云原生项目(如Kubernetes、Docker)都是用Go编写的。
Go还内置了垃圾收集器,这意味着开发人员无需担心C/C++中的内存管理问题。
Google投入了大量资金打造Go。因此Go拥有大量的工具支持。新手Go开发人员拥有大量的工具生态系统。
一般,开发人员80%的时间都花在了维护现有代码上,用于编写新代码的时间只占20%。由于其简单性,Go在语言维护方面表现出色。如今,Go在业务应用程序中大量使用。
流行度:
Go一问世就受到了软件开发社区热烈的欢迎。2009年-2018年,Go一直在TIOBE编程语言排行榜上徘徊。Go的成功为Rust等新一代编程语言铺平了道路。
如今,Go已是主流编程语言。最近,Go团队宣布了有关“Go 2”的消息,这门编程语言的发展会更加稳固。
几乎在所有的流行编程语言排行榜中,Go的排名都很高,已超过许多现有的语言。自2019年12月以来,在TIOBE指数排名中,Go名列第15位:
根据StackOverFlow的调查,十大最受喜爱的编程语言中,Go也位列其中:
此外,根据GitHub的数据,Go也是十大发展最迅速的语言之一:
Google趋势显示,在过去的5年中,Go的热度每年都在增加。
主要用途:
系统编程
Serverless 计算
商业应用
云原生开发
主要竞争对手:
C
C++
Rust
Python
Java
Kotlin
Java 是企业软件开发领域无可争议的王者。近年来,Java受到了一些负面评论:过于冗长,大量样板代码,容易出现意外的复杂性。但是,关于Java虚拟机(JVM)的争论却很少。JVM是软件工程的杰作,经过了时间的考验,提供了硬核的runtime。
多年来,Scala等JVM语言一直在努力克服Java的缺点,想成为更好的Java,但他们都失败了。最终,这场提升Java的探索以Kotlin的诞生结束。Jet Brains(流行的IDE IntelliJ背后的公司)开发了Kotlin,它可以在JVM上运行,克服了Java的很多缺点,提供许多现代功能。
与Scala不同的是,Kotlin比Java更简单,还可在JVM中提供与Go或Python开发人员同等的生产力。
Google宣布Kotlin是一流的Android应用开发语言,因此Kotlin在社区中的接受度得到了大幅提高。自2017年以来,同样受欢迎的Java Enterprise框架Spring也开始支持Kotlin。我曾尝试结合Kotlin与Reactive Spring使用,体验非常棒。
主要特征:
Kotlin的主要卖点在于其语言设计。我总是将Kotlin视为JVM上的Go/Python,因为它简洁明了的代码。因此,Kotlin的生产力很高。
与许多其他现代语言一样,Kotlin提供了Null指针、安全性、类型推断等功能。
由于Kotlin也运行在JVM中,因此现有Java库庞大的生态系统都可供使用。
Kotlin是一流的Android应用开发语言,并且已经超过Java,成为开发Android应用的首选。
Kotlin得到了JetBrains和Open Source的支持,因此具有出色的工具支持。
Kotlin有两个有趣的项目:Kotlin Native(将Kotlin编译为原生代码)和kotlin.js(Kotlin到JavaScript)。如果成功,则可以在JVM外部使用Kotlin。
Kotlin还提供了一种简单的方式来编写DSL(域特定语言)。
流行度:
自2015年首次发布以来,Kotlin的知名度不断飙升。根据Stack Overflow,Kotlin是2019年第四大最受欢迎的编程语言:
Kotlin还是增长最快的编程语言之一,排名第四:
在流行编程语言排名网站PyPl的排名中,Kotlin名列第十二名,并具有较高的上升趋势:
自从Google宣布Kotlin是一流的Android应用开发语言以来,Kotlin的流行趋势出现了大幅上涨,如下所示:
主要用途:
企业应用程序
主要竞争对手:
TypeScript
JavaScript是一门优秀的编程语言,在2015年之前,JavaScript有很多缺点。着名的软件工程师Douglas Crockford写了一本书名为《JavaScript: The Good Parts》,暗示了JavaScript有很糟的部分。无模块化,还有“回调地狱”,因此开发人员都不喜欢维护特别大的JavaScript项目。
Google甚至还开发了一个平台,可将Java代码反编译为JavaScript代码(GWT)。许多公司和个人都曾尝试开发更好的JavaScript,例如CoffeeScript、Flow、ClojureScript。最终,微软的TypeScript取得了成功。
微软的一队工程师在着名的Anders Hejlsberg的带领下,创建了JavaScript的静态类型、模块化超集——TypeScript。
TypeScript可以编译为JavaScript。于2014年首次发布后,TypeScript很快引起了社区的关注。Google当时还计划开发JavaScript的静态类型超集。Google对TypeScript青睐有加,以至于他们没有开发新的语言,而是选择与微软合作改进TypeScript。
Google选择TypeScript作为其SPA框架Angular 2+的主要编程语言。此外,流行的SPA框架React也提供对TypeScript的支持。另一个流行的JavaScript框架Vue.js也宣布将使用TypeScript开发新的Vue.js 3:
另外,node.js的创建者Ryan Dahl已决定使用TypeScript来开发安全的Node.js替代品Deno。
主要特征:
流行度:
开发人员喜欢TypeScript的优雅语言设计。在StackOverFlow最受欢迎的语言类别的调查中,TypeScript与Python并列第二名:
根据GitHub的排名,TypeScript是增长最快的编程语言之一,排名第五:
从GitHub的贡献度来看,TypeScript排名第七,打进了前十:
Google的趋势表明,在过去的几年中,TypeScript的热度越来越高:
主要用途:
主要竞争对手:
Swift
当初乔布斯拒绝在iOS中支持Java(和JVM),他认为Java不再是主流编程语言。如今我们发现乔布斯当初的估计是错的,虽然iOS仍然不支持Java。苹果选择了Objective-C作为iOS中的首选编程语言。Objective-C是一门很难掌握的语言,它不支持现代编程语言所要求的高生产力。
后来,苹果的Chris Lattner和其他人开发了一种多范例、通用的、编译编程语言——Swift,来替代Objective-C。Swift的第一个稳定版本于2014年发布。Swift还支持LLVM编译器工具链(也由Chris Lattner开发)。Swift与Objective-C代码库具有出色的互操作性,并且已确立为iOS应用开发中的主要编程语言。
主要特征:
流行度:
开发人员对Swift的喜爱不亚于许多其他现代编程语言。根据StackOverflow的调查,Swift在最受欢迎的编程语言中排名第六:
2019年,在TIOBE的编程语言排名中,Swift的排名上升到了第10名。鉴于这种编程语言只有5年的历史,可以说是成绩斐然:
Google的趋势表明,在过去的几年中,Swift的热度出现了激增:
主要用途:
主要竞争对手:
Dart
Dart是Google出品的第二大编程语言。Google是Web和Android领域的巨头,因此Google在Web和应用领域开发自己的编程语言也不足为奇。在丹麦软件工程师Lars Bak(领导Chrome的 JavaScript V8引擎开发)的带领下,Google于2013年发布了Dart。
Dart是一种通用编程语言,支持“强类型”和“面向对象”编程。Dart也可以转编译为JavaScript,凡是JavaScript可以运行的任何地方(例如Web、移动、服务器)几乎都可以运行 Dart。
主要特征:
流行度:
根据GitHub Octoverse数据显示,Dart是2019年增长最快的编程语言,去年它的流行度增长了五倍:
根据TIOBE指数显示,Dart排名第23,仅用了4年时间就超过了很多其他的现代编程语言:
根据StackOverflow的调查,Dart在最受欢迎的编程语言中排名第12:
受Flutter的影响,Google的趋势表明,在过去的两年中,Dart的热度急剧上升:
主要用途:
主要竞争对手:
Julia
本文提及的大多数编程语言都是由大型公司开发的,但Julia是个例外。科技计算领域通常都会使用动态语言,例如Python、Matlab。虽然这些语言提供易于使用的语法,但不适用于大规模的科技计算。他们需要使用C/C ++库执行CPU密集型任务,因此这就产生了着名的“两种语言”的问题,因为他们需要粘合代码来绑定两种语言。由于编写的代码需要在两种语言之间来回切换,因此总是会损失部分性能。
为了解决这个问题,麻省理工学院的一队研究人员计划从头开始创建一种新的语言,这种语言既可以利用现代硬件的优势,而且还结合其他语言的优势。于是,Julia诞生了。
Julia是一种动态的高级编程语言,提供一流的并发、并行和分布式计算支持。Julia的第一个稳定版本于2018年发布,并很快受到社区和行业的关注。Julia可用于科学计算、人工智能和许多其他领域,而且还可以解决“两种语言”的问题。
主要特征:
流行度:
Julia在许多领域主要与Python竞争。由于Python是最流行的编程语言之一,因此Julia想晋升主流还需要几年的时间。
虽然Julia非常新(只有一岁),但仍在TIOBE指数中排到第43名:
Google趋势显示,在过去的一年中,Julia的热度在稳步增长:
但是考虑到Julia的功能集,以及NSF、DARPA、NASA、因特尔等公司的推动,相信Julia取得突破的进展只是时间的问题。
主要用途:
主要竞争对手:
原文链接:https://towardsdatascience.com/top-7-modern-programming-language-to-learn-now-156863bd1eec
本文为 CSDN 翻译,转载请注明来源出处。
【End】
Python
Matlab
科学计算
高性能计算
数据科学
可视化
与Rust一样,Julia的主要特征在于语言的设计。这种语言在不牺牲性能的情况下,将高性能和科学计算中现有编程语言的一些功能结合在一起。就目前的情况来看,Julia出色地完成了这项任务。
Julia是一种动态编程语言,支持类型系统但类型不是必须的。因此,Julia这种编程语言很容易学习,生产力很高。
Julia的核心是多调度编程范例。
Julia内部支持并发、并行和分布式计算。
Julia为I/O密集型任务提供异步I/O。
Julia的运行速度非常快,可用于需要数百万个线程的科学计算。
JavaScript
TypeScript
应用开发
UI开发
与Go一样,Dart也非常注重开发人员的工作效率。由于Dart简洁的语法,以及高效的生产力,受到开发人员的喜爱。
Dart还提供“强类型”和“面向对象”编程。
Dart是少数同时支持JIT编译(运行时编译)和AOT编译(创建时编译)的编程语言之一。因此,Dart可以针对JavaScript运行时(V8引擎),并且Dart可以编译为快速的原生代码(AOT编译)。
跨平台原生应用程序开发平台Flutter选择了Dart作为开发iOS和Android应用的编程语言。从那以后,Dart的流行度越来越高。
与Goog的Go编程语言一样,Dart也具有出色的工具支持和庞大的Flutter生态系统。Flutter的日益普及也会推动Dart的采用率升高。
Objective-C
Rust
Go
iOS应用开发
系统编程
客户端开发(通过WebAssembly)
Swift的杀手级功能之一是其语言设计。语言本身很简单,语法简洁,比Objective-C更高效。
Swift还提供了现代程序语言的功能:null安全。此外,它还提供了语法糖来避免“厄运金字塔”。
作为一种编译语言,Swift和C++一样快。
Swift支持LLVM编译器工具链。因此,我们可以在服务器端编程,甚至浏览器编程(使用WebAssembly)中使用Swift。
Swift提供了自动引用计数(ARC)支持,可抑制内存管理的不善。
JavaScript
Dart
Web UI开发
服务器端开发
与Go或Kotlin同样,TypeScript的主要特征也是语言设计。TypeScript凭借其简洁明快的代码,成为了目前最优雅的编程语言之一。就开发人员的生产力而言,它与JVM或Go/Python上的Kotlin并驾齐驱。TypeScript是生产力最高的JavaScript超集。
TypeScript是JavaScript的强类型超集,特别适合大型项目,而且可以称为“可扩展的JavaScript”。
单页应用程序框架的“三巨头”(Angular、React、Vue.js)为TypeScript提供了出色的支持。在Angular中,TypeScript是首选的编程语言。在React和Vue.js中,TypeScript越来越受欢迎。
最大的两家技术巨头:微软和Google正在合作开发由活跃的开源社区支持的TypeScript。因此,TypeScript拥有最好的工具支持。
由于TypeScript是JavaScript的超集,因此凡是可以运行JavaScript的任何地方都可以运行TypeScript,包括浏览器、服务器、移动设备、物联网设备和云。
Java
Scala
Python
Go
‘伍’ 有没有大佬做过移动跨平台框架的对比,h5 rn weex flutter,性能方面
推荐:
uni-app
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/网络/头条/QQ/钉钉)等多个平台。
即使不跨端,uni-app同时也是更好的小程序开发框架。
Taro
Taro是一套遵循React语法规范的多端开发解决方案。
现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
使用Taro,我们可以只书写一套代码,再通过Taro的编译工具,将源代码分别编译出可以在不同端(微信/网络/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等)运行的代码。
‘陆’ flutter如何进行icloud
flutter用一个插件进行icloud。
拓展资料:为何flutter构建的App体积较大?
细心的开发者会发现flutter构建的App体积比native的大一些,是什么原因造成App体积大呢?
其实flutter 在release时App体积和native的大小差不多,而debug时体积通常会大。debug版本体积较大是为了Hot reload和快速编译。如果有flutter开发经验的朋友都体验过,如果您修改一下App的背景颜色,只需save一下就可以立刻看到修改后效果。我称之为“像艺术家一样在创造App”,因此为了实现这些目标,提高开发的效率,debug将占用全部资源。而当我们构建release版时,flutter又会采用AOT策略,提高App运行效率,release版只打包必需的资源,因而体积又会减少。
另外,flutter团队也一直在寻找减小程序大小的方法。
‘柒’ ibox新人盲盒怎么领取
打开主页进入即可。
研发环境配置是编码的前置工作,它也会影响新人落地对团队研发体验的第一印象。由于Flutter涉及Android与iOS双端的环境配置,导致不熟悉另一个端的同学配置起来,十分麻烦,上手难度高。另外,Flutter本地版本不一致,缺乏Flutter版本管理工具,文档零散更新不及时,这些都极大的耗费了团队同学的精力。
解决了研发环境问题,还需要解决工程环境问题,双端工程架构复杂,不熟悉某个端的同学面对编译问题难以解决。甚至很多同学就直接放弃了配置另外一个端的工程,平时开发只对着自己熟悉的端调试,违背了Flutter双端开发的理念。
‘捌’ 为什么flutter debug版本和release版本有差别
为了利用debug工具,大多数程序猿开发的时候使用AS的debug版本,最终发布版本是release版本,但是在这个转变的过程中可能会出现一些意外。
1、releas版本与debug版本的applicationId不一样
为了客户端上两个版本共存,通常debug设置不同applicationId,这会导致需要填写applicationId申请的第三方平台使用不正常,比如小米推送和微信分享等。
2、混淆问题: 一般情况下,debug版本的混淆是关闭的,release版本是打开的
这个坑我是多次涉入。
(1)使用Gson或者FastGson 转换Json字符后提供给某些类使用,比如Adapter。Release版本发现列表不能正常显示,结果是因为混淆的时候没有keep相关的Entity类。
(2) 使用反射,利用类名调起类时,注意keep该类,防止混淆。
使用案例: Switch 分支很多,导致代码很长,阅读困难。因此把switch的String作为类名, 使用反射调起。有新的情况时,只需要增加新类,不需要看以前的分支,也不用放在一个类里面。
‘玖’ flutter.framework如何与app.framework绑定
pp.framework Flutter项目的Dart代码编译而成的Framework。 engine Flutter的引擎Framework,一个pod库。
‘拾’ web前端开发需要学习什么知识