zoukankan      html  css  js  c++  java
  • React Native在特赞的应用与实践

    基于React技术栈构建开发前端项目,并使用React Native开发特赞移动APP

    目前正在使用Node.js开发和维护特赞服务网关,希望Node.js能够在更轻量级的微服务架构中发挥重要作用

    课程介绍:

    React Native在特赞的应用与实践

    课程摘要:

    APP开发技术的选型

    React Native开发过程中的主要问题

    异常监控、热更新与RN性能优化

    距离过年还有一个月不到,产品突然提出一个需求说,咱们要不做一个IOS应用吧,快过年了,给设计师一个新礼物吧。当时我的内心其它是拒绝的,于是我面带微笑着说:“好啊,我们尽量吧。。。。。。”

    IOS工程师是不指望了。

    于是,开始调研苹果应用的审核发布流程,热更新,具体的实现细节。为了赶上苹果的审核,两周的时候,我们发布了我们的第一个初始版本,在接下来的2周时间,我们完成了剩余所有功能的开发,并通过热更新发布到了线上。我们用了不到1个月的时间完成了特赞原生IOS的开发

    使用React的话,我们是通过声明式的方式定义组件,而后通过虚拟DOM在浏览器环境下,进行UI的渲染和数据的加载。

    而React的使用已经应用到了PC页面,移动页面,甚至服务端渲染等场景下。

    随着React Native的推出,我们甚至通过React更是拥有了开发IOS和Android应用的能力。记住,这是真的,真的原生应用!!

    Learn once,write anywhere. React官方的slogan

    为什么选择RN:

    首先呢,刚才提到过,通过 RN开发的应用,只要优化得当,是可以获得无限接近Native应用的交互操作体验的,所以说,手感非常丝滑,让人爱不释手

    然后就是,RN开发出来的应用,它的功能和性能都是很不错的。

    还有一点,对前端开发人员来说,真的是一个福音,那就是,RN可以直接通过Chrome进行调试,分分钟让你欲罢不能

    另一方面,因为我们团队本身就是React技术栈,所以选择RN是一个很自然的过程。适应的过程也非常的短暂。最后,也是影响我们抉择的一个因素就是,RN除了可以像WEB一样进行开发,还可以拥有WEB一样的发布能力,只要通过热更新就可以简单做到。

    使用前:调试、路由、数据管理、组件选型

    使用中:动画、缓存、手势、支付

    使用后:推送、异常监控、热更新、性能优化

    本次的分享,主要围绕RN开发前后我们涉及的方方面面进行探讨。包括开发前我们会重点考虑的调试、路由、数据管理组件选型等问题;

    开发过程中,我们则是要解决动画、缓存、手势、支付等问题

    业务功能开发完毕之后,则要关注消息推送、异常监控、热更新、性能优化这样更加重要的问题

    调试过程中遇到的坑:

    坑1:必须在第一次reload之后 才能进行断点调试

    坑2:必须把chrome调试控制台所在 tab放在最前面,否则操作模拟器内的界面将会严重卡顿

    当调试工作能够通过Chrome的DevTools进行时,一切都似乎变得简单起来了。

    我们可以进行熟悉的断点调试,变量审查;

    我们还可以结合React、Redux的Chrome插件直观的查看组件结构和整个工程的数据变化

    路由:push-->project-->chatDetail-->chatList-->home(Top)-->pop

    比如最初的我们处于home页,接着我们push到对话列表页,再push到对话详情、项目列表页,然后我们又可以pop回圣诞详情页。

    当然实际情况可以还要复杂一点,比如往回跳多个页面,跳回到指定页面等等。这一切都是一个堆栈来进行操作的

    所以这一切我们都可以用类似下面的一千代码来实现:
    this.props.navigator.push({

    name:'chat',
    params:{

      projectId,designerId,projectName

    }

    });//是的,开发使用的是JS,底层仍然是基于具体的平台

    通过Navigator组件对象的引用,我们可以跳转到对话列表(chat)页面,与此同时,我们带上项目ID,设计师ID等参数,这些参数我们在chat页面中很容易获得。

    React在WEB上可以通过React-router来管理路由,不过在RN中,路由管理变得更简单。通过Navigatro(或者最新的react-navigation)组件,我们把所有的Scene、场景、或者页面通过一个堆栈管理起来,页面的操作就是简单的出栈入栈操作

    Redux+AysncStorage

  • 相关阅读:
    人 生 死 梦
    接口(三):
    接口(二):
    Mac下OpenCV开发环境配置(Terminal和Xcode)
    OcLint的使用
    分类Category的概念和使用流程
    @class
    内存管理
    点语法
    多态的概念和用法
  • 原文地址:https://www.cnblogs.com/softidea/p/7242450.html
Copyright © 2011-2022 走看看