2019,开发者应该学习的16个JavaScript框架
- 来源 | 愿码(ChainDesk.CN)内容编辑
- 愿码Slogan | 连接每个程序员的故事
- 网站 | http://chaindesk.cn
- 愿码愿景 | 打造全学科IT系统免费课程,助力小白用户、初级工程师0成本免费系统学习、低成本进阶,帮助BAT一线资深工程师成长并利用自身优势创造睡后收入。
- 官方公众号 | 愿码 | 愿码服务号 | 区块链部落
- 免费加入愿码全思维工程师社群 | 任一公众号回复“愿码”两个字获取入群二维码
本文阅读时长:14min
根据Stack Overflow的开发人员调查,JavaScript是最广泛使用的编程语言之一。由于其不断发展的框架生态系统,可以为复杂和具有挑战性的问题找到最佳解决方案。尽管JavaScript的大部分生命周期都与Web开发有关,但近年来,它的使用似乎正在扩大。它不仅从前端移动到后端,我们也开始看到它用于机器学习(Machine Learning, ML)和增强现实(Augmented Reality,简称 AR)。
JavaScript的发展是由框架驱动的。尽管有一些在引领潮流,但还有许多其他较小的工具在2019年值得你关注。
JavaScript Web开发框架
React
React最初由Facebook于2011年开发,2013年开源。从那时起,它已成为构建用户界面的最流行的JavaScript库之一。根据NPM的调查,尽管React在2018年的增长放缓,但它将成为2019年的主导框架。由于其高使用率,2018年的JavaScript现状调查将其称为“采用的安全技术”。
在2018年,React团队发布了从16.3到16.7的版本,并进行了一些重大更新。这些更新包括新的生命周期方法,Context API,用于代码拆分的悬念,React Profiler,Create React App 2.0等。该团队已经制定了2019年的计划,很快将发布最期待的功能之一Hooks。它允许开发人员在不使用JavaScript类的情况下访问状态等功能。它旨在通过允许开发人员重用有状态逻辑而不对组件层次结构进行任何更改来简化React组件的代码。其他功能将包括并发模式,以允许组件树呈现而不阻塞主线程,数据获取的悬念等等。
Vue
Vue是由Evan You在为许多项目使用AngularJS为Google工作后创建的。它在2014年首次发布。分享他创建Vue的动机,Evan说:“我想,如果我能够提取我真正喜欢Angular的部分并构建一些非常轻量级的东西会怎样 。” Vue继续在JavaScript开发人员中得到很好的采用,我怀疑这种趋势很快就会停止。根据NPM调查,一些开发人员更喜欢Vue而不是React,因为他们觉得“在保持可扩展性的同时更容易上手”。
Vue是一个允许开发人员构建交互式Web界面的库。它提供类似于React的数据反应组件,具有简单灵活的API。与React或Angular不同,Vue的一个好处是它产生的干净的HTML输出。其他JavaScript库往往会在代码中留下散布着额外属性的HTML,而Vue会删除它们以产生干净的语义输出。它通过官方维护的支持库和包为复杂应用程序提供高级功能,如路由,状态管理和构建工具。
Angular
谷歌于2009年开发了AngularJS,并于2012年发布了第一个版本。从那时起,它得到了企业和个人的热烈支持和广泛采用。AngularJS最初是为设计师而非开发人员开发的。虽然它确实在设计上看到了一些改进,但它们还不足以满足开发人员的要求。后来的版本,Angular 2,Angular 4等已经升级,提供性能的整体改进,特别是在速度和依赖注入方面。
新版本简称为Angular,这是一个平台和框架,允许开发人员使用HTML和TypeScript构建客户端应用程序。它带有声明性模板,依赖注入,端到端工具以及解决开发难题的集成最佳实践。虽然AngularJS的架构基于模型 - 视图 - 控制器(MVC)设计,但Angular具有基于组件的架构。每个Angular应用程序至少包含一个称为根组件的组件。每个组件都与一个负责处理业务逻辑的类和一个代表视图层的模板相关联。
Node.js
围绕Node是否是一个框架(它确实是一个库)存在很多争论,但在谈论Web开发时,很难跳过它。Node.js最初是由RyanDahl编写的,他在2009年11月8日举行的首届欧洲JSconf上演示了这一点。Node.js是一个免费的、开源的、跨平台的JavaScript运行时环境,在浏览器外执行JavaScript代码。
Node.js遵循“JavaScript无处不在”的范例,通过围绕单一编程语言统一Web应用程序开发,而不是服务器端和客户端脚本的不同语言。在JSConf 2018中,Dahl描述了他的服务器端JavaScript运行时引擎的一些限制。其架构的许多部分都受到限制,包括安全性以及如何管理模块。作为解决方案,他引入了一个名为Deno的新软件项目,这是一个V8 JavaScript引擎上的安全TypeScript运行时,旨在纠正Node.js中的一些设计缺陷。
跨平台移动开发框架
React Native
React Native的故事始于2013年夏天,当时它是Facebook的内部Hackathon项目,后来于2015年开源。React Native是一个用于构建原生移动应用程序的JavaScript框架。正如你可能已经从其名称中猜到的那样,React Native基于React。它之所以被称为“本机”是因为使用React Native构建的UI包含本机UI小部件,这些小部件外观和感觉与使用本机语言构建的应用程序一致。
在后台,React Native将用Javascript/JSX编写的用户界面定义转换为适合目标平台的本地视图层次结构。例如,如果我们正在构建iOS应用程序,它会将Text原语转换为本机iOS UIView,而在Android中,它将使用本机TextView生成。因此,即使我们正在编写JavaScript应用程序,我们也不会在移动设备的shell中嵌入Web应用程序。我们正在获得一个“真正的原生应用”。
NativeScript
NativeScript由Telerik(Progress的子公司)开发,于2014年首次发布。它是一个开源框架,可帮助您使用JavaScript或任何其他转换为JavaScript的语言(例如TypeScript)构建应用程序。它直接支持Angular框架,并通过社区开发的插件支持Vue框架。使用NativeScript构建的移动应用程序可生成完全本机应用程序,这些应用程序使用的API与在Xcode或Android Studio中开发的API相同。
由于应用程序是用JavaScript构建的,因此需要一些代理机制来将JavaScript代码转换为相应的本机API。这是由NativeScript的运行时部分完成的,它充当JavaScript和本地世界(Android和iOS)之间的“桥梁”。运行时可以使用JavaScript代码在Android和iOS框架中调用API 。要做到这一点,需要使用JavaScript虚拟机——Google的V8用于Android,WebKit的JavaScript实现与iOS 7.0+一起发布。
Ionic框架
该Ionic框架是由Drifty公司创建,最初发布于2013年,它是一个开源的前端SDK,用于开发混合移动应用程序,使用熟悉的Web技术,如HTML5、CSS和JavaScript。借助Ionic,您将能够构建和部署跨多个平台的应用程序,例如本机iOS,Android,桌面和Web作为渐进式Web应用程序。
Ionic主要关注应用程序的外观或UI交互。这告诉我们,它并不意味着取代Cordova或你最喜欢的JavaScript框架。事实上,它仍然需要像Cordova这样的原生包装器来将您的应用程序作为移动应用程序运行。它使用这些包装器来访问主机操作系统功能,如相机,GPS,手电筒等。Ionic应用程序在低级浏览器外壳中运行,如iOS中的UIWebView或Android中的WebView,它由Cordova/PhoneGap等工具包装。
JavaScript桌面应用程序开发框架
Electron
Electron由GitHub的软件工程师Cheng Zao创建。它最初于2013年作为Atom Shell发布,然后在2015年更名为Electron.Electron使Web开发人员能够利用他们现有的知识和本地开发人员构建一个代码库并分别为每个平台发布。有许多流行的应用程序使用Electron构建,包括Slack,Skype for Linux,Simplenote和Visual Studio Code等。
Electron应用程序由三个组件组成:Chromium Web引擎,Node.js解释器和应用程序的源代码。Chromium Web引擎负责呈现UI。Node.js解释器执行JavaScript并为您的应用程序提供Chromium引擎无法使用的操作系统功能,例如文件系统访问,网络,本机桌面功能等。应用程序的源代码通常是JavaScript,HTML和CSS。
JavaScript机器学习框架
Tensorflow.js
在2018年的TensorFlow开发者峰会上,Google宣布了他们的机器学习框架TensorFlow的JavaScript实现,称为TensorFlow.js。它是deeplearn.js的继承者,于2017年8月发布,现在命名为TensorFlow .js Core。该团队最近发布了针对TensorFlow的Node.js绑定,所以现在相同的JavaScript代码将同时适用于浏览器和Node.js.
Tensorflow.js由四层组成,即用于GPU支持的数字操作的WebGL API,用于用户交互的Web浏览器,以及两个API:Core和Layers。低级Core API对应于以前的deeplearn.js库,它提供硬件加速的线性代数运算和用于自动区分的急切API。更高级别的Layers API用于在Core之上构建机器学习模型。它还允许开发人员使用Keras或TensorFlow SavedModels导入之前使用Python训练的模型,并将其用于在浏览器中进行推理或转移学习。
Brain.js
Brain.js是一个用JavaScript编写的神经网络库,是“Brain”库的延续,可以与Node.js一起使用或在浏览器中使用。它通过利用JavaScript的易用性和将API限制为几个方法调用和选项,简化了创建和训练神经网络的过程。针对不同的任务,它具有不同类型的网络,包括具有反向传播的前馈神经网络,时间步长递归神经网络,时间步长期短期记忆神经网络等。
JavaScript增强现实(AR)和虚拟现实(VR)框架
React 360
2017年,Facebook和Oculus共同推出了React VR,后者于去年改编并重新命名为React 360。这个改进的版本简化了3D空间中的UI布局,并且比React VR更快。React 360构建于我们之前讨论过的React之上,是一个JavaScript库,使开发人员能够创建3D和VR界面。它允许Web开发人员使用熟悉的工具和概念在Web上创建沉浸式360体验。
使用React 360构建的应用程序由两部分组成,即在你的React应用程序和运行时,这两部分将您的组件转换为屏幕上的3D元素。这种“角色划分”概念类似于React Native。由于Web浏览器是单线程的,因此应用程序代码与呈现代码分离,以避免应用程序中出现任何阻止行为。通过在单独的上下文中运行应用程序代码,呈现循环可以以高帧速率持续更新。
AR.js
AR.js由Jerome Etienne于2017年开发,旨在在网络上有效地实施增强现实。它目前提供60fps的效率,这对于基于Web的开源解决方案来说并不坏。该图书馆受到了诸如three.js,ARToolKit 5,emscripten和Chromium等项目的启发。
AR.js需要WebGL,一种用于HTML5 Canvas元素的3D图形API,以及WebRTC,一组浏览器API和协议,允许在Web浏览器和本机应用程序中实现音频,视频和数据的实时通信。利用ARToolKit和A-Frame中的功能, AR.js使得用于Web的AR的开发成为一个简单的过程,可以由新手编码器实现。
新兴的JavaScript框架
Gatsby.js
Gatsby的创始人凯尔马修斯在2017年辞去了他初创公司的工作,并开始全职专注于他的项目:Gatsby.js和Typography.js。Gatsby.js最初于2015年发布,其第一个版本于2017年问世。它是React.js的现代网站生成器,这意味着Gatsby中的所有内容都是使用组件构建的。使用Gatsby,可以创建动态和静态网站/网络应用程序,从简单的博客,电子商务网站到用户仪表板。
Gatsby支持许多数据库源,例如Markdown文件,无内容CMS,如Contentful或 WordPress,或REST或GraphQL API,您可以通过GraphQL进行整合。它还可以通过自动化来实现代码拆分,图像优化,内联关键样式,延迟加载和预取资源等功能。
Next.js
Next.js由ZEIT创建并于2016年开源.Red.js构建于React,Webpack和Babel之上,是一个小型JavaScript框架,可以轻松实现React应用程序的服务器端呈现。它提供了自动代码分割,简单的客户端路由,支持HMR的基于Webpack的开发环境等功能。它旨在帮助开发人员编写同构的React应用程序,以便相同的呈现逻辑可用于客户端和服务器端呈现。
Next.js基本上允许你编写一个React应用程序,SSR和代码拆分之类的东西会为你处理。它支持两种服务器端呈现模式:按需和静态导出。按需呈现意味着每个请求,呈现一个唯一的页面。此属性非常适用于高度动态的Web应用程序,其中内容经常更改,具有登录状态和类似用例。此模式需要运行Node.js服务器。另一方面,静态导出会将所有页面预先呈现为.html文件,并使用任何文件服务器为其提供服务。此模式不需要运行Node.js服务器,HTML可以在任何地方运行。
Nuxt.js
Nuxt.js最初由Chopin兄弟,Alexandre和SébastienChopin创建,并于2016年发布。2018年1月,它更新为生产就绪的1.0版本,并得到了一个活跃且得到良好支持的社区的支持。它是一个受Next.js启发的高级框架,它构建于Vue.js生态系统之上,简化了通用或单页Vue.js应用程序的开发。
在后台,Nuxt.js使用带有vue-loader和babel-loader的webpack来捆绑,代码分割和缩小代码。使用Nuxt,js的一个好处是它提供了一个nuxt generate命令,它使用相同的代码库生成Vue应用程序的完全静态版本。除此之外,它还为客户端和服务器端之间的开发提供了诸如异步数据,中间件,布局等功能。
NestJS
NestJS由Kamil Mysliwiec创建,于2017年发布。它是一个轻松构建高效,可靠和可扩展的Node.js服务器端应用程序的框架。它建立在TypeScript和JavaScript(ES6,ES7,ES8)的基础之上,并且受Angular的启发,因为它们都使用允许可重用性的模块/组件系统。
在后台,NestJS使用Express,并且还与各种其他库兼容,例如,Fastify。对于它的大多数抽象,它使用类并利用类和TypeScript带来的装饰器和元数据反射的好处。它带有保护,管道和拦截器等概念,并内置支持其他传输,如WebSockets和gRPC。
这些是从大量的javascript框架中挑选出来的。你当然不必成为他们所有的专家。在开始使用框架之前,你可以检查它是否有几个问题,例如它解决的问题,更好地执行相同操作的任何其他框架,是否符合项目要求,此框架适合哪种类型的项目等等,如果该框架对你有吸引力,可能会尝试用一个框架构建一个项目。