北京网站开发：混合应用和反应原生转型的时间？

2019.08.13 mf_web

191

有成就的音乐家经常谈论在他们的职业生涯的某些时刻，他们必须忘记旧习惯才能取得进步。这个过程经常导致它们在性能上回归，同时它们会调整到最终更好的方法。一旦新方法得到整合，它们就能达到以前技术无法实现的新高度。

像音乐家一样，所有专业人士都应经常质疑他们的方法，看看还有其他选择。如果一种方法以前是最好的，那并不意味着它仍然是最好的。然而，许多成熟的技术几十年来一直是最好的，可能永远不会被超越。重要的是，人们愿意考虑其他方法，并且不会过于偏重于他们最熟悉的方法。这种分析在软件开发中通常更加困难，因为新的框架和技术几乎与它们消亡时一样快。

北京网站开发本文将这一分析应用于混合移动应用程序并介绍为什么我真诚地相信React Native在很多方面都是开发的应用程序的卓越解决方案，即使它在你适应环境时引入了一些暂时的痛苦。为此，我们将重新审视为什么最初创建混合应用程序并探索我们如何达到这一点。然后，在此上下文中，我们将讨论React Native如何堆叠并解释为什么在大多数情况下它是更好的方法。

原始故事

这是2010年。您的公司有一个非常棒的Web应用程序，使用jQuery（或者，如果你是时髦的，某种AngularJS和React前身，如Mustache）。您拥有一支能够胜任HTML，CSS和JavaScript的开发团队。突然之间，移动应用程序正在接管。每个人都有一个。移动应用程序是新的Tickle Me Elmo！您疯狂地研究如何制作自己的移动应用程序并立即遇到一系列问题。你的团队没有能力胜任这项任务。您没有Java或Objective-C开发人员。您无法负担开发，测试和部署两个单独的应用程序！

不用担心。混合移动应用程序是你的银弹。这项闪亮的新技术使您能够快速（理论上）轻松地重复使用您拥有的（代码和开发人员），为您的新移动应用程序增添光彩。因此，您选择一个框架（Cordova，PhoneGap等）并开始构建或移植您的第一个移动应用程序！

对于许多公司和开发人员来说，他们的问他们现在可以制作自己的移动应用程序。

出现问题

自2010年以来，开发者论坛，博客和留言板一直充斥着关于混合应用程序功效的争论。尽管前面段落中描述了很大的前景和灵活性，但混合应用程序已经并将继续面临一系列非常真实的挑战和缺点。以下是一些最值得注意的问题

用户体验缺陷

在过去几年中，移动应用程序中用户体验的标准已经大幅提升。大多数智能手机用户大部分时间都只使用少数优质应用。他们或许不公平地期待他们试图像Facebook，MLB TV，YouTube和Uber那样精彩的新应用。

有了这个非常高的标准，混合应用程序很难衡量。诸如迟缓或有限的动画，键盘不当行为以及频繁缺乏特定于平台的手势识别等问题都会增加笨重的体验，这使得混合应用程序成为二等公民。使这个问题更加复杂的是混合应用程序依赖开源社区来编写本机功能的包装器。以下是应用中突出显示所有这些问题的屏幕截图。这个应用程序是从Ionic的展示中选出的，由摩根士丹利创建。

MS StockPlan的应用商店详情的屏幕截图。 — MS StockPlan的应用商店详情（查看大图）

一些事情应该立即显现出来。这个程序的评级非常低（2.5星）。它看起来不像移动应用程序，显然是移动网络应用程序的一个端口。清晰的赠品是非原生的分段控件，字体大小，文本密度和非原生标签栏。该应用程序不支持在本机构建时更容易实现的功能。最重要的是，客户注意到所有这些问题，并总结他们的感受“感觉过时”。

用户界面挑战

大多数用户都可以非常快速地卸载或忘记新应用。至关重要的是，您的应用会给用户留下良好的第一印象并且易于理解。其中很大一部分是看起来很敏锐和熟悉。混合应用程序看起来很棒，但它们的UI（如果它们看起来像Web应用程序）或外国（如果它们看起来像Android上的iOS应用程序，反之亦然）往往更加平台无关。

在安装应用程序之前，许多潜在客户将在应用程序商店中查看图像。如果这些屏幕截图没有吸引力或令人反感，则可能根本不会下载应用程序。这是在Ionic展示中找到的示例应用程序。这个应用程序是由Nationwide创建的，正如您所知，这两个应用程序看起来就像一个适合移动设备的网站，而不是一个移动应用程序。

从应用程序商店的评论（两个平台上都是3星）可以清楚地看出这个应用程序有几个问题，但是这个用户界面的任何应用都不太可能吸引新客户。它显然只供现有客户使用，他们认为他们也可以尝试一下。

性能问题

关于混合应用程序最常见的抱怨是性能不佳，错误和崩溃。当然，任何应用程序都可能存在这些问题，但性能问题长期以来一直困扰着混合应用程序。此外，混合应用通常具有较少的离线支持，在较差的网络条件下可能需要更长时间才能打开并执行更差。任何开发人员都听说过上面提到的任何一个“bug”，并且他们的应用程序因此被公开处罚。

总体缺乏高级应用程序

所有这些问题都加起来绝大多数主要应用程序都是本地编写的。快速浏览一下PhoneGap和Ionic的展示，展示了顶级应用程序中明显的缺点。最受欢迎的混合应用程序之一是Untappd，尽管它是一个非常棒的平台，但下载量不到500万。这似乎是一个很大的数字，但它把它放在最常用的应用程序列表中。

此外，还有很多已从混合迁移到本机的应用程序。该列表包括Facebook，TripAdvisor，Uber，Instagram和许多其他人。

找到从原生应用到混合应用的高端应用列表将非常具有挑战性。

混合应用程序的最终防御

本节的重点不是过分批评混合应用程序，而是表明存在替代方法的空间。混合应用程序是一项非常重要的技术，并且在许多情况下已成功使用。回到Ionic展示，有几个应用程序看起来比上面的更好。Baskin Robbins，Pacifica和Sworkit是最近的三个例子。

在过去四年中，混合应用程序开发人员和框架一直在努力改进他们的应用程序，他们做了令人钦佩的工作。然而，潜在的问题和基本缺点仍然存在，如果你在2017年建立一个新的应用程序，最终可以找到更好的选择。

另一种方法

虽然很明显混合应用程序与本机应用程序并不相符，但它们的优势和成功不容忽视。它们有助于解决非常真实的资源，时间和功能问题。如果有另一种解决这些相同问题的方法，同时也消除了混合应用程序的缺点，那将非常有吸引力。React Native可能就是答案。

概述和优势

React Native是一个跨平台的移动应用程序开发框架，它基于流行的React Web开发框架。与React一样，React Native是一个开源项目，主要由Facebook和Instagram的开发人员维护。

此框架用于创建具有共享JavaScript代码库的Android和iOS应用程序。在创建React Native应用程序时，所有业务逻辑，API调用和状态管理都存在于JavaScript中。UI元素及其样式在代码中被通用化，但呈现为本机视图。这使您可以获得高度的代码重用，并且仍然具有遵循每个平台的样式指南和最佳实践的UI。

React Native还允许您根据需要编写特定于平台的代码，逻辑和样式。这可以像使用特定于平台的React组件一样简单，也可以像在React Native应用程序中使用特定于平台的C库一样高级。

与HYBRID APPS的相似之处

与混合应用程序框架一样，React Native可实现真正的跨平台开发。Instagram已经分享了其React Native项目的代码重用率为85％到99％。此外，React Native使用许多Web开发人员熟悉的技术（JavaScript和React）构建。如果开发人员不熟悉React，那么如果他们熟悉AngularJS，jQuery或vanilla JavaScript，那么学习Objective-C或Java就会非常容易。

此外，调试 React Native应用程序也应该是Web开发人员熟悉的过程。这是因为使用Chrome的调试工具来监控代码的行为非常容易。在模拟器或实际设备上查看应用时，可以使用Chrome工具。作为额外的好处，开发人员还可以根据需要使用更多本机调试器。

React Native调试器的屏幕截图 — iOS React Native调试器窗口

这里的主要内容是React Native解决了混合应用程序框架要解决的相同核心问题。

混合应用程序的进一步改进

与混合应用程序不同，React Native应用程序本机运行，而不是在Web视图中运行。这意味着它们不仅限于基于Web的UI元素，当与可怜的JavaScript解释器配对时，这些元素可能会很迟钝。由于React Native呈现原生UI元素，因此应用程序立即在平台上感觉更加自在，并使用户在首次使用时更加舒适。此外，通过更完整地使用本机工具和分析实用程序，React Native可以提高开发人员的生活质量。

以下是最近发布的React Native应用程序的两个屏幕截图。这些图像突出显示了使用此框架可以实现的特定于平台的界面。如您所见，每个应用程序都使用其原生地图，并具有遵循每个平台设计指南的标注。在Android上，标注是从地图底部升起的卡片。在iOS上，标注连接到地图上的选定元素。可以在两个应用程序中执行相同的操作，并且大多数代码都是共享的，但是额外的特定于平台的修改确实有助于整体可用性。

怎么做的？

下面是一个React Native组件示例。它演示了构成React Native应用程序的一些常见元素，并突出了Web开发人员应该熟悉的领域。以下代码片段描述了每个部分正在执行的操作。

import PropTypes from "prop-types";import React, { PureComponent } from "react";import { Dimensions, StyleSheet, Text, View } from "react-native";import LoadingAnimation from "./LoadingAnimation";import SearchBar from "./SearchBar";const { width } = Dimensions.get("window");const styles = StyleSheet.create({
    title: {
        backgroundColor: colors.transparent,
        color: colors.black,
        fontSize: 19,
        fontWeight: "500",
    },});export default class MovieList extends PureComponent {
    state = {
        movies: [],
        filteredMovies: [],
        loading: true,
    };
    componentWillMount() {
        this._fetchMovies();
    }
    _fetchMovies = () => {
        fetch("https://mywebsite.com/getMovies/", {
            method: "GET",
        })
            .then(res => res.json())
            .then(res => {
                this.setState({
                    movies: res,
                    filteredMovies: res,
                    loading: false,
                });
            })
            .catch(err => {
                this.setState({
                    error: "Unable to get movies.",
                });
            });
    };
    _applyFilter = term => {
        const filteredList = this.state.movies.filter(
            movie => movie.title.toLowerCase().search(term) !== -1,
        );
        this.setState({
            filteredMovies: filteredList,
        });
    };
    _renderTitleRow = movie => {
        const titleLimit = width >= 375 ? 26 : 20;
        let formattedTitle = movie.title;
        if (formattedTitle.length > titleLimit) {
            formattedTitle = formattedTitle.slice(0, titleLimit - 3) + "...";
        }
        return (
            <Text numberOfLines={1} style={styles.title} key={movie.id}>
                {formattedTitle}
            </Text>
        );
    };
    render() {
        if (this.state.loading) {
            return (
                <View>
                    <LoadingAnimation />
                </View>
            );
        } else {
            return (
                <View>
                    <SearchBar onFilterChange={this._applyFilter} />
                    {this.state.filteredMovies.map(movie => this._renderTitleRow(movie))}
                </View>
            );
        }
    }}

复制

大多数Web开发人员都应该熟悉上面的大部分代码。绝大多数代码只是JavaScript。许多渲染逻辑都是新的，但从HTML迁移到React Native视图非常简单。此外，样式属性与CSS非常相似。让我们来看看这段代码：

state
State是一个对象，它包含我们的组件 MovieList需要运行的许多值。更改状态属性（使用this.setState()）时，将重新呈现整个组件以反映这些更改。
componentWillMount
ComponentWillMount是一个生活方式函数，在呈现组件之前调用。初始网络请求通常属于此功能。
_fetchMovies
此函数发出一个返回电影对象数组的网络请求。成功完成后，它将state使用列表进行更新并设置loading为false。请注意，它还将初始值filteredMovies设置为返回的列表。
_applyFilter
我们导入的SearchBar组件调用此函数。为简单起见，假设只要SearchBar更改键入组件的值，就会调用此函数（可能会有一些去抖动）。此函数只包含一些JavaScript，可将filteredMovies列表过滤到相关标题。
_renderTitleRow
此功能输出单个电影的视图。它包含一些逻辑，以确保我们的输出是统一的，并呈现一个基本的文本组件。
render()
此函数输出组件的视图。它有条件地呈现电影列表或加载动画，具体取决于存储在state对象中的加载值。

谁这样做？

在决定如何构建自己的应用程序时，向行业领导者学习是很重要的。其他公司和开发人员可能浪费了数年时间和数百万美元来构建应用程序，几分钟之内您就可以从他们的错误和经验中学习。以下是一些在其应用中使用React Native的大型公司的快速列表：Facebook，Instagram，Airbnb，百度，Discord，腾讯，优步和Twitter。

其中许多应用程序最初是使用其他方法编写的，但已完全转换为React Native，或者现在使用React Native来扩充其现有的本机应用程序。

有一个值得注意的趋势是许多高级应用程序被转移到React Native作为跨平台解决方案，而之前，这类应用程序中的大多数技术转换都是从跨平台到特定于平台。这种变化简直不容忽视。