精华内容
下载资源
问答
  • 使用在React Native中运行Vue组件 React系统 由于Vue清晰的分层设计,我们可以轻松地拉出React系统(压缩为9 KB),并驱动React组件渲染。 npm install --save react-vue import React , { Component } from 'react...
  • Airbnb 宣布放弃使用 React NativeVue超越了React? 前端每周清单专注大前端领域内容,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目等栏 目。欢迎关注【前端之巅】微信...

    Airbnb 宣布放弃使用 React Native,Vue超越了React?

     

    前端每周清单专注大前端领域内容,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目等栏 目。欢迎关注【前端之巅】微信公众号(ID: frontshow),及时获取前端每周清单。

     

    新闻热点

    国内国外,前端最新动态

    Vue.js超越React.js?勿以star数论高低!:近日,在前端的 JavaScript 框架世界发生了一件称得上是“里程碑”的事:Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量,并在不久之后双双破了10W。

    纵观过去两年的数据,我们可以看到,与 github 的 star 数形成鲜明对比的是,根据 NPM 软件包的下载量来衡量,React 仍然在实际使用方面占据主导地位。它即将超过每月1000万的巨大下载量,并且还一直保持着高速的增长。

    但在过去的两年中,Vue 的增长速度比其他任何主流的 JavaScript 框架都快,最近赶上了 Angular.js,并逐渐缩小了它与 Angular 和 React 之间的差距。

    Airbnb 宣布放弃使用 React Native,回归使用原生技术:6月20日,Airbnb 技术团队在 Medium 上宣布,Airbnb 放弃使用 React Native,将回归到使用基于原生技术的自有框架开发 App。

    Airbnb 表示,尽管很多团队都依赖 React Native 并计划在可预见的将来使用它,但他们最终还是无法实现最初的目标。Airbnb 放弃使用 React Native 的主要原因是 React Native 未能实现完全的跨平台抽象,有时候仍然需要针对特定平台单独编写代码来解决问题。这就间接要求他们的工程师必须熟悉三个平台才能真正用好 React Native,然而绝大多数开发者只熟悉一两个平台,久而久之便引发了一系列的问题。

    Google发布Flutter预览版:6月21日,在北京 GMTC 大前端大会上,Google Flutter 高级工程师于潇宣布 Flutter Release Preview 1发布,并宣布与阿里巴巴闲鱼团队在 Flutter 上合作,这标志着 Flutter 进入了一个新阶段。在Google I/O大会之后,Flutter 生态得到了快速地增长,Flutter 的活跃用户增长了 50%,不仅如此,在 I/O 大会之后的几周内,在全世界范围内,已有超过 150 个与 Flutter 相关的事件发生。

    Flutter 团队表示,Flutter 从 beta 版本到现在的Release Preview 1,都体现了他们对稳定性和质量的信心和关注。

     

    开发教程

    步步为营,掌握基础技能

    大话大前端时代:Vue 与 iOS 的组件化(上):笔者是一名普通的全职 iOS 开发者,在接触到了前端开发以后,发现了前端有些值得移动端学习的地方,于是便有了这个大前端时代系列的文章,希望两者能相互借鉴优秀的思想。谈及到大前端,常常被提及的话题有:组件化,路由与解耦,工程化(打包工具,脚手架,包管理工具),MVC 和 MVVM 架构,埋点和性能监控。笔者先从组件化方面谈起,以前端和移动端(以 iOS 平台为主)对比为主,看看这两端的不同做法,并讨论有无相互借鉴学习的地方。

    服务端与客户端同构 —— Vue.js 应用框架 Nuxt.js:很多现代的JavaScript框架,比如Vue.js, 旨在构建单页应用(SPA)。单页应用的优势在于,改善用户体验,让网页速度更快,像APP一样流畅,即使更新。虽然单页应用优点很多,但是由于依赖多导致首屏渲染慢,无法做seo优化也是让人头疼的问题。

    服务端渲染是指,提前将页面在服务器端渲染好,当浏览器请求服务器时,直接返回渲染好的html页面返回。构建服务端渲染的JavaScript程序多少有些无趣,在开始编码之前,需要大量的基础配置。因此,解决vue.js服务端渲染问题的Nuxt.js产生了。

    通过本文,你讲学习到如何利用 Nuxt.js 搭配 Vue.js 构建服务端渲染的 JavaScript 应用程序。还学会如何使用其 generate 命令来生成我们页面的静态文件,并且,可以利用 Firebase Hosting 这样的静态托管工具部署。

     

    工程实践

    立足实践,提示实际水平

    美团外卖Android Crash治理之路:Crash率是衡量一个App好坏的重要指标之一。如果你忽略了它的存在,它就会得寸进尺,愈演愈烈,最后造成大量用户的流失,进而给公司带来无法估量的损失。本文讲述美团外卖Android客户端团队在将App的Crash率从千分之三做到万分之二过程中所做的大量实践工作,抛砖引玉,希望能够为其他团队提供一些经验和启发。

    太平洋保险CIMS系统微前端实践:微前端的概念最早由 ThoughtWorks 在 2016 年底提出,是一种将微服务推广到前端的设计理念。(https://micro-frontends.org/),目前的趋势是构建一个功能丰富且功能强大的浏览器应用程序,也就是位于微服务架构之上的单页应用程序(SPA)。

    微前端可以有效的降低前端的代码复杂度和更加灵活的解耦,甚至可以很好的组合当前流行的各种前端框架,例如 Vue,React,Angluar。同时, 微前端服务可以有自己的独立生命周期。在本文中,作者将告诉我们太平洋保险是如何利用微前端改造CIMS系统的。

    苏宁金融移动端登录优化之道:在登录优化过程中,苏宁金融秉持“图难于其易,为大于其细的思想”,已经达成登录响应时间、成功率及用户体验的提升。本文主要从如下几个方面介绍苏宁金融移动端登录优化的道和术:找到登录优化之道、完善系统的监测和度量、梳理登录的每个环节、优化登录的各个环节。

    大型网站的 HTTPS 实践:协议层以外的实践:百度已经上线了全站 HTTPS 的安全搜索,默认会将 HTTP 请求跳转成 HTTPS。百度 HTTPS 性能优化涉及到大量内容,在前端页面、后端架构、协议特性、加密算法、流量调度、架构和运维、安全等方面都做了大量工作。本系列文章将对此一一进行介绍。

     

    深度阅读

    深度思考,升华开发智慧

    浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层:本文会在主要描述以 Vue 技术栈为技术主体,ToC 端项目业务主体,在构建过程中,遇到或者总结的点(也会提及一些 ToB 项目的场景)。主要包括选择单页面还是多页面,全局配置、插件与拦截器,以及路由配置与懒加载等。

    深入理解JavaScript this:要说 JavaScript 这门语言最容易让人困惑的知识点,this 关键词肯定算一个。JavaScript 语言面世多年,一直在进化完善,现在在服务器上还可以通过 node.js 来跑 JavaScript。显然,这门语言还会活很久。

    所以说,如果你是一个 JavaScript 开发者或者说 web 开发者,学好 JavaScript 的运作原理以及语言特点肯定对你以后大有好处。不过你首先需要学变量作用域和作用域提升、JavaScript 的函数、闭包这些基础知识才能更好地理解this。

     

    开源项目

    乐于分享,共推前端发展

    JSUI:JSUI是一个强大的用于管理JavaScript应用程序的UI工具包,无论是前端还是后端应用程序,也不管应用什么框架,如果它有package.json,就能使用这个库。

    vue-native-core:vue-native是一个使用JavaScript构建跨平台原生移动应用程序的框架。它用Vue Native CLI生成Vue Native应用程序,这意味着Vue Native可以做任何React Native能做的事。

    spritejs:SpriteJS 是一款由360奇舞团开源的跨终端 canvas 绘图框架,可以基于 canvas 快速绘制结构化 UI、动画和交互效果,并发布到任何拥有canvas环境的平台上(比如浏览器、小程序和node)。

    展开全文
  • Vue开发React Native应用详解

    千次阅读 2019-04-09 20:41:42
    概述 自从2015年4月React Native...不过,也有公司对React Native 并不看好,如Airbnb在去年就开始宣布弃用React Native ,不管如何,React Native 的跨平台的目的是很诱惑的。 紧接着google发布了跨平台框架Flutter...

    概述

    自从2015年4月React Native 发布以来后,关于移动跨平台的话题就层出不穷,不管是大公司还是小公司都在开始使用React Native 来开发跨平台App。不过,也有公司对React Native 并不看好,如Airbnb在去年就开始宣布弃用React Native ,不管如何,React Native 的跨平台的目的是很诱惑的。

    紧接着google发布了跨平台框架Flutter,对于这个颠覆式的框架,可以说受到大多数开发者和公司的青睐,因为它是google开发的,目前活跃度明显超过了React Native。

    自从Flutter诞生后,React Native已经感受到了压力,因此加快了优化的进度。去年底公布了优化方案,目前正在重构js引擎,最大提升js的性能问题。毕竟React Native低层还是基于原生的系统去做的,目前来看有一定的优势,而且社区庞大,短期用户量还是有的。Flutter虽然流畅,UI层独立,但是很多插件还是要基于原生系统架构,不能完全独立。

    但是,不管是React Native还是Flutter,它们都不能脱离原生系统,除非android和iOS系统被另外一个系统取代。所以,不管未来如何,对于前端同学来说,React Native还是很有诱惑力的,它让前端同学有能力开发媲美原生应用的能力。

    在前端框架中,作为仅次于React 的框架,Vue在国内的趋势可以说已经超过React,更是受到广大程序员的喜爱。正是基于此,一家名叫GeekyAnts 的印度公司开发了 Vue Native,病用它来开发基于 React Native 的跨平台应用。

    Vue Native

    安装

    安装Vue Native可以使用vue-native-cli脚手架方式,安装的命令如下:

    npm install -g vue-native-cli
    

    新建项目

    安装vue-native-cli工具后,接下来就可以使用vue-native-cli的命令行来新建Vue Native应用。

    vue-native init <projectName>
    cd <projectName>
    

    安装依赖包

    创建项目后,还需要安装以下一些依赖包:

    npm install vue-native-core vue-native-helper —save
    npm install vue-native-script —save-dev
    

    Hello Word

    例如,下面是一个使用Vue编写的React Native程序,运行效果如下图:
    在这里插入图片描述
    和 React Native使用React一样,Vue Native使用的是Vue语法,开发者可以直接使用Vue语法来开发跨平台应用,对于熟悉Vue的开发者来说,使用Vue来开发移动应用可谓得心应手。
    和React Native一样,使用vue-native-cli初始化一个新的 app时,app的入口文件为App.vue。并且,开发者可以使用很多.vue文件来组合一个新的.vue文件,在app编译时系统会将所有的vue 文件翻译成以.js 后缀的 React Native 组件,最后调用原生组件进行渲染。

    指令

    在 Vue 中,指令是可以说是一种特殊的属性,他们都以v-作为前缀。

    v-if 和 v-else

    v-if和v-else用来编写条件语句。例如:

    <template>
        <view class="container">
            <view class="btn-container">
                <button title="show A" :on-press="() => handleBtnClick('A')" />
                <button title="show B" :on-press="() => handleBtnClick('B')" />
                <button title="show C" :on-press="() => handleBtnClick('C')" />
            </view>
            <view>
                <text v-if="type === 'A'">
                    A
                </text>
                <text v-else-if="type === 'B'">
                    B
                </text>
                <text v-else-if="type === 'C'">
                    C
                </text>
                <text v-else>
                    Not A/B/C
                </text>
            </view>
        </view>
    </template>
    

    运行效果如下:
    在这里插入图片描述

    v-for

    当然,还使用v-for指令来写循环,和 JavaScript 的 map 类似。例如:

    <template>
     <view class="container">
       <text
           class="text-container"
           v-for="todo in todos"
           :key="todo.text"
       >
         {{ todo.text }}
       </text>
     </view>
    </template>
    <script>
    export default {
     data: function() {
       return {
         todos: [
           { text: "Learn JavaScript" },
           { text: "Learn Vue" },
           { text: "Build something awesome" }
         ]
       };
     }
    };
    </script>
    

    运行效果如下:
    在这里插入图片描述

    示例

    KitchenSink

    KitchenSink是一个使用Vue 重写的Vue Native应用,源码地址为:https://github.com/GeekyAnts/KitchenSink-Vue-Native,可以下载源码并进行二次开发。

    Todo

    除了KitchenSink外,你也可以下载ToDo 应用,它是GeekyAnts 的高级软件工程师Ankit Singhania使用 Vue Native 编写的Vue Native应用,下载地址为:https://github.com/ankitsinghania94/vue-native-todo-app

    其他

    Vue Native 使用vue-router来实现导航逻辑,我们来看看下面的实现:
    在这里插入图片描述
    应用的状态,使用的是Vuex,具体可以参考Vue官网
    当然,这个库目前还在开发和升级中,并且React Native本来就很坑,Vue Native不过是为Vue开发移动应用提供了可能,还不好用目前并不好说。

    展开全文
  • Vue组件编译为React Native。 安装 npm install --save react-vue react-vue-helper npm install --save-dev react-vue-native-scripts 用法 在获得 在package.json添加脚本命令。 ... "scripts": { "compiler...
  • reactvue都是web端框架,运行在浏览器的。react native和weex是用前端的方法写native app, 即手机应用,能在app store下载的那种,用的是框架自定义的组件。而且具有一次开发,同时生成android、ios、uwp等平台的...

    react和vue都是web端框架,运行在浏览器的。react native和weex是用前端的方法写native app, 即手机应用,能在app store下载的那种,用的是框架自定义的组件。而且具有一次开发,同时生成android、ios、uwp等平台的应用的特点。你只要写一套业务逻辑,具体是怎么生成的是由框架搞定的。

    react native发展最早最快,但是至今仍是beta版,还有不少坑。weex,任重而道远。

    react和react native是一家人,vue和weex是一家人。一家人的特点差不多,语法逻辑是一样的。

    展开全文
  • 适用于Elasticsearch的Reactive Search UI组件库:适用于ReactVueReact Native阅读如何使用a。)使用React,b。)使用Vue或c。)使用React Native来构建电子商务搜索UI。 用于Elasticsearch的Che Reactive ...
  • 用于 Elasticsearch 的响应式搜索 UI 组件库:可用于 ReactVueReact Native 阅读如何构建电子商务搜索 UI a.) 使用 React,b.) 使用 Vue 或 c.) 使用 React Native。 在reactiveapps.io 上查看ReactiveSearch ...
  • 出版社:电子工业出版社,出版日期:2017 年9月,页码:540,扫描版,清晰度中等。
  • ReactVue对比

    千次阅读 2020-10-09 11:32:26
    2、Vue从设计上讲,跟趋向于简化使用,就是说Vue从骨子里面就是想用起来简单,但React更多的是为大型工程考虑。 3、React上手稍微难一点,除了Vue那些基础,你还得学习,纯函数组件,函数式编程,JSX,css-in-js,...

    2018-08-24 16:46:30

     

    1、Vue上手更简单,特别是从dom和jquery时代过来的程序员,或者习惯模板语言的后端开发,更容易接受Vue。

    2、Vue从设计上讲,跟趋向于简化使用,就是说Vue从骨子里面就是想用起来简单,但React更多的是为大型工程考虑。

    3、React上手稍微难一点,除了Vue那些基础,你还得学习,纯函数组件,函数式编程,JSX,css-in-js,高阶组件,Redux等。

    4、在组件化上,React更纯粹,也可以说更强大一些,而Vue不是完全组件化,应对一些复杂组件,可能会有些麻烦。

    5、React的设计,配合TypeScript,更适合大型或者超大型的多人协作项目,管理起来更规范,不容易出错。

    6、对于移动端跨平台的支持,React的兄弟项目ReactNative已经占了半壁江山,虽然React和ReactNative可以看成两个东西,但是也有很多关联性。而Vue在移动端开发上,目前来看,有阿里的Weex基于Vue,据说也很强大,但是肯定不如ReactNative那么主流和稳定,具体Vue在移动端的表现如何,需要时间观察。

    7、虽然Vue在中国、日本、韩国、法国等地区热度很高,在美国也有一定影响力,但在全世界范围看,React的社区比Vue要更大,资源也更丰富,React的背景Facebook,实力强于个人开发者-尤雨溪(背靠了阿里和一些小赞助公司)。但实力是相对的,实际上,两者实力都很强,不用担心Vue的实力不足或稳定性,Vue足够优秀,3、5年内应该都会是主流,只能说React在全世界范围内的资源更多,影响更大而已。

    8、Vue和React本身只是一个基础库,对于稍微复杂一点的项目来说,大多数用户都不会自己搭框架。所以说,选择Vue还是React,要重点比较两者的第三方开发框架、UI框架、组件库及各种资源是否丰富、有活力。

        就我目前看到的情况而言,Vue体系较热的UI框架有ElementUI、iView/ViewUI、Ant Design Vue、vant、mint-ui、vux等,Vue Admin(后台管理系统)相关资源比较丰富,很多中小公司都在用;React热门UI框架有Material-UI、Ant Design、Element-react等,比较集中。可以这样说,Vue的生态就像是游击队,而React更像是正规军。ElementUI和Ant Design都是阿里系的,如果没有Ant Design的话,感觉Vue在国内要强盛一些,但有了阿里Ant Design强势介入,许多中间派就倒向React了,特别是一些稍微大一点的公司。

    10、其他因素:Vue的核心开发团队只有尤雨溪一人(大概90%的代码都是他写的),假如他休假了、生病了,主要开发就暂停了,Vue想要健康的发展,应该要增加1~2个核心开发(每个人都深度参与开发,并可以推动开源生态发展)。

    11、其他因素:React从一开始就抱上了TypeScript的大腿,而Vue目前仍以ES为主,不得不说,在很长一段时间内,TS都是优于ES的,而Vue社区要切换TS生态,还有一段路要走。这注定了大公司、大项目选React+TS的概率要大一些。中小公司多少也会受到大公司的影响。

     

        总结:

    1、如果只是做项目,两者都很好,都是主流,都能极大的增强前端开发能力,选任何一个都没有错(做选择时,可考虑其他一些因素,比如自身能力、第三方组件)。

    2、如果想抱大腿、跳槽大公司,建议选React + TypeScript练手。

    3、5年以后的长远考虑?这两个的生命力,足以支撑5年,但你要说5年之后,它们是否还是主流,这个真不好说。现在前端技术发展太快。

    4、作为一个专业前端,建议前期学Vue的,都再把React了;反之,如果之前直接学的React,则一般不需要再去学Vue了,做项目,选一个就行了。

     

    参考文章:

    1、https://yq.aliyun.com/articles/608809

    2、https://blog.csdn.net/u013291076/article/details/53885604

     

    展开全文
  • React Native 内嵌webview ( Vue项目 ) ReactNative webview 属性 automaticallyAdjustContentInsets 控制是否调整放置在导航条、标签栏或工具栏后面的web视图的内容。默认值为true contentInset {top: number, ...
  • GitHub: react-vue 前言 react-vue 为两大前端框架搭了一座桥,它主要有三种用法 使用 Vue 的响应式系统驱动 React 渲染 使用 react-vue-loader 将 Vue...使用 react-vue-native-script 在 React Native 下运行 Vue...
  • 用于Elasticsearch的UI组件库:适用于ReactVueReact Native 阅读如何构建电子商务搜索用户界面 a。) ,b。) 或c。) 。 退房ReactiveSearch市场在 。 。 。 目录 1. ReactiveSearch:简介 ReactiveSearch...
  • 由于Vue NativeReact Native的包装,要使用CLI,必须全局安装expo-cli或react-native-cli 。 要全局安装Expo,请使用以下命令: $ npm install -g expo-cli 如果您想改用React Native CLI,请使用以下命令将其...
  • h5 或者vue添加监听 /* * vue 监听采用 * window.window.addEventListener ios * window.document.addEventListener android * h5 * window.addEventListener ios * document.addEventListener android * */...
  • 今天搞清楚了reactreactnative、Angular、vue他们之间的关系,这里记录一下。 简单的说: react、angular、vue是js的三大框架。 人们常说的,前端3大框架:Facebook的React,Google的Angular,中国的Vue。 为了大...
  • angular react vue优缺点对比

    千次阅读 2018-04-27 10:06:31
    今天分享的内容是前端3大框架,主要有介绍前端的发展历程,框架出现的原因和介绍angular、reactvue各自的优缺点,让大家能够对这3个框架有一个大致的了解。 首先介绍一下前端技术的发展 1994年可以看作是前端...
  • awesome-uikit 搜集了基于ReactVue的,还有传统,ReactNative的各种组件库
  •              ...2016年React巩固了它作为前端框架之王的地位,这一年中可以看到它在Web端和移动端的快速成长,同时稳稳领先于它
  • 1、什么是APP    使用HBuilder打包出一个app应用 ... 然后双击manifest.json文件去...react native的开发环境配置         转载于:https://www.cnblogs.com/yangyutian/p/11087543.html
  • 采用由VueReact Native开发的移动版Hacker News
  • react和vueAs for React and Vue.js, there’s enough said about them on the net. Svelte is a relatively young framework, so we’ll just add a couple of words about it. The most striking difference from ...
  • Vue NativeVue转换为React,因此React Native将应用程序代码识别为React。 入门 安装 $ yarn install 启动开发服务器 $ yarn start 在浏览器上运行 在终端上无事可做! 访问 ! 在设备/模拟器上运行 $ react-...
  • 注意: @storybook/react-native和@storybook/react-native-server现在与Storybook Core软件包( @storybook/react , @storybook/vue等)处于不同的发行周期。 @storybook/react-native的最后一个稳定版本是5.3.23...
  • Flutter 、VueReact Native 、Weex哪个好

    千次阅读 2020-03-10 23:43:14
    跨平台项目GSYGithubApp系列三大开源版本比较(Flutter 、React Native 、Weex) vue react angularjs这三个是同一类型...weex和react native是基于vuereact改造的移动端混合开发框架,把网页包装成app,可以通过...
  • JavaScript是世界上最流行的语言之一,ReactVue是JS最流行的两个框架。但各有优缺点,本文将详细对比两大框架 目录前言1、框架背景2、框架简介3、框架共同点4、各自优势5、两者区别6、总结 1、框架背景 2、框架...
  • React中实现Vue的插槽效果 下面这个是没有使用插槽正常展示的一个效果及代码 可以看到上面的导航栏内部的文字都是写死的 接下来再看使用插槽之后的变化
  • 职友集刚出炉的一条前端薪资数据:截至发稿日,前端近一年的月均薪为20.7K,薪资中位数位于20K-30K的区间。平均了金字塔顶部的前端专家和前端新人两群体后,20.7K的薪资基本符...
  • vue and react

    2018-02-08 11:05:15
    React 虚拟DOM(https://zhuanlan.zhihu.com/p/28562066)通过在 JS 和...当有数据变化时,例如 list 变为了 [ { id: 1, text: 'Item 1' } ],React 会执行如下三个步骤:接收到变更数据,整个 UI 被重新渲染为新的 ...
  • 分别为react,vue,weapp项目。 执行uhutu-cli --build,该操作会持续监听dev文件夹下的html文件和sass文件。实时生成对应的文件。 命令行参数参考uhutu-cli --help 项目文件夹目录 config.json 配置文件 dev 开
  • 我们项目组在APP编写过程中,遇到个问题:我们接入了某A购物团平台的商品数据到本网,然后使用vue写了个页面B放置这些数据,点击就跳转到A平台的网页或者APP购买,遇到一个问题:当没安装A这个APP时,在跳转到A平台...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,534
精华内容 5,413
关键字:

nativereactvue

vue 订阅