JavaScript(React Native、Node.js等)移动、服务端通吃的全栈语言

简介:

作者:李宁老师

 东北大学计算机专业硕士。曾任沈阳东软股份项目经理。51CTO学院签约讲师。从事软件研究和开发超过20年。长久以来一直从事JavaAndroidiOSC++SwiftObjective-C以及跨平台游戏引擎(Cocos2d-xUnity3D等)的开发和技术指导工作。对国内外相关领域的技术、理论和实践有很深的理解和研究。

主要著作包括《Cocos2d-x实战游戏开发指南》(即将出版)、《Swift权威指南》、《Android深度探索 1和卷2》、《Android开发权威指南(第二版)》、《Android开发完全讲义(第三版)》、《Android高新之路面试宝典》、《Android深度探索(卷1):HAL与驱动开发》、《Android应用开发实战(第二版)》、《Java Web开发技术大全:JSP+Servlet+Struts+Hibernate+Spring》等畅销书。


不管是互联网公司,或是传统的软件公司,以及非IT企业,大多都需要开发各种类型的程序,包括移动App(主要是AndroidiOS)、Web程序、服务端程序等。这些程序使用的开发技术都不尽相同,如Android使用Java开发,iOS使用Objective-CSwift开发、Web程序页面使用JavaScriptHTML5CSS等技术,而服务端的选择就更多了,如Java EEPHPPythonRubyNode.js等。理论上,每一类的程序需要不同的开发小组完成,如Android开发小组、iOS开发小组,服务端开发小组等。这对于大公司没什么问题,反正钱多。不过对于大多数创业公司来说,可能是一笔不小的负担。

为了解决这个问题,现在出现了很多跨平台技术,包括基于HTML5的混合开发、C++跨平台解决方案等。不过这些也仅仅是跨平台。顶多解决了AndroidiOS之间代码最大限度共享的问题(仍然有一部分无法共享的代码需要单独编写),而服务端仍然要我们使用其他技术开发,如Java EE。不过自从有了Node.js以后,JavaScript就成为了服务端的开发语言,而且有了React.js,系统会将JSX代码(在后面介绍)自动转换Web页面的DOM元素。这样,JavaScript+JSX,连同Web+服务端一起搞定了,不过好像还少了点什么,对,移动端(AndroidiOS),这就是本文要讲的主题:React Native,下面会详细介绍一下React Native,以及用于设计UIJSX

React NativeFacebook  React.js Conf 2015 大会上推出的一个用于开发AndroidiOS App的一个框架。主要编程语言是JavaScriptUI使用JSX(一种语法类似于XMLUI描述语言)。

那么ReactNativeReact.js有什么区别呢?

任何一种跨平台框架都有两部分:UI和逻辑。对于这两种技术来说,UI都使用的是JSX,而逻辑都是用了JavaScript

React NativeReact.js的主要区别还是JSX。不管是React Native,还是React.js,在UI上都有一种技术:虚拟DOMVirtual DOM

那么什么是VirtualDOM呢?

其实JSX只是一种语法糖。Web通过DOM管理Element。而DOM的效率是很低的,为了提高DOM的效率,React.js提供了VirtualDOM,这项技术的工作是完全在内存中完成的,而且是增量修改DOM树,所以效率非常高。

对于Web来说,实际渲染时,仍然需要DOM,所以在最终渲染是,VirtualDOM仍然要转换成实际的DOM。而对于AndroidiOS,就没有DOM的概念的,UI完全是本地控件实现的,如Android中的TextViewEditText等。所以React Native就应运而生。如果说React.js在运行时将Virtual DOM映射成了DOM,那么React Native就是在运行时将Virtual DOM映射成AndroidiOS的本地控件。

从这一点可以看出,React.js用于Web开发,而ReactNative用于开发AndroidiOS App,他们都将UI抽象成了Virtual DOM,只是在实际运行时,前者将Virtual DOM映射成了DOM,后者将Virtual DOM映射成了AndroidiOS的本地控件。

由于ReactNativeUI仍然使用AndroidiOS的本地控件,所以在UI渲染上已经非常接近Native App了。尽管业务逻辑代码使用JavaScript,但由于JavaScript是即时编译的,也就是第一次运行时会将JavaScript代码编译成二进制,所以JavaScript的运行效率比较高。因此,React Native的运行效率要比基于HTML5CSS等技术的PhoneGapAppCan高很多,因为这些技术直接用HTML5进行渲染,而HTML5会大量使用DOM技术,DOMPC端的Web中也不算快,在移动端就更慢了。

总结:基于ReactNativeApp在运行效率上接近Native App,而且还拥有混合开发模式的两个优点:热更新(无需重新编译上传App即可更新,而且还不用通过App Store审核)和跨平台(降低了学习成本,使用同样的技术开发AndroidiOS App)。

OK,现在已经了解了React Native,是不是打算学一下呢!移动、Web和服务端使用同一种技术即可解决,尽管都需要进行开发,但技术是通用的,也就是说只要招JavaScript程序员,就可以同时解决移动、Web和服务端的问题,使用一个开发小组即可解决所有问题,也无需再招聘JavaOCJava EEPHP程序员了,这样会给创业公司节省了大量的开支。





 本文转自 androidguy 51CTO博客,原文链接:http://blog.51cto.com/androidguy/1836109,如需转载请自行联系原作者


相关文章
|
5月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
250 2
|
5月前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
473 1
|
10月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
存储 JavaScript NoSQL
Node.js新作《循序渐进Node.js企业级开发实践》简介
《循序渐进Node.js企业级开发实践》由清华大学出版社出版,基于Node.js 22.3.0编写,包含26个实战案例和43个上机练习,旨在帮助读者从基础到进阶全面掌握Node.js技术,适用于初学者、进阶开发者及全栈工程师。
248 9
|
前端开发 JavaScript 测试技术
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表,涵盖基础概念、安装步骤、代码示例及常见问题解决方法,帮助开发者轻松实现数据可视化。
420 11
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
前端开发 JavaScript 关系型数据库
基于 Vue2.0 + Nest.js 全栈开发的后台应用
Vue2 Admin 是一个基于 Vue2 和 Ant Design Pro 开发的前端项目,配合 Nest.js 构建的后端,提供了一个完整的全栈后台应用解决方案。该项目支持动态国际化、用户权限管理、操作日志记录等功能,适合全栈开发者学习参考。线上预览地址:https://vue2.baiwumm.com/,用户名:Admin,密码:abc123456。
247 0
基于 Vue2.0 + Nest.js 全栈开发的后台应用
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
732 10
|
开发框架 JavaScript 前端开发
Node.js日记:客户端和服务端介绍、Node.js介绍
Node.js日记:客户端和服务端介绍、Node.js介绍