Единая кодовая база для мобильных устройств и Интернета

Есть много вариантов единой базы кода для web / ios / android. Самый простой - создать веб-приложение.

Некоторые варианты:

• Прогрессивное веб-приложение
• Гибридные приложения (например, Ionic)

Я сделал один пакет на основе кода для ReactJS и React-Native. Я могу рассказать вам свое решение и свой опыт с этим.

UI

Обе структуры используют один и тот же синтаксис для описания пользовательского интерфейса (JSX). Если вы углубитесь в детали, то увидите, что есть несколько отличий:

• ReactJS: <div/>
• React-Native: <View/> Это означает, что в вашем приложении / архитектуре всегда будет часть «фреймворк». Чтобы свести к минимуму конкретный код до различий, вы можете использовать JSX для предоставления свойств таким компонентам, как стили, данные или событие функции.

Функциональность

React-Native использует / содержит фреймворк ReactJS и все запускается на виртуальной машине JavaScript. Таким образом, для "неродная / пользовательская функциональность" вы можете использовать старые добрые функции, написанные на JavaScript, или пакеты, предоставленные (например, через npm), в обоих приложениях (ReactJS && React-Native)

Как использовать один код для обоих приложений

Теперь у нас нет проблем с функциональностью. Но как преодолеть специфику пользовательского интерфейса. Мое решение заключалось в том, чтобы написать какой-то псевдокод для компонентов, специфичных для фреймворка:

1. Для каждого фреймворка напишите псевдокласс, обозначающий ваш составная часть. В следующем примере показан некоторый класс, отклоняющий RN. Вид класс:

Моя реализация очень простого компонента View на стороне ReactJS

import React, { Component } from 'react';

class View_Wrapper extends Component {
  render() {
    return (
      <div style = {this.props.style}>
        {this.props.children}
      </div>
    );
  }
}

export default View_Wrapper;

Моя реализация очень простого компонента View на стороне React-Native

import React, { Component } from 'react';
import { View } from 'react-native';

class View_Wrapper extends Component {
  render() {
    return (
      <View style = {this.props.style}>
        {this.props.children}
      </View>
    );
  }
}

export default View_Wrapper;

2. Создайте собственный проект для вашего общий код (Создать проект) и предоставьте ему свои написанные компоненты Вид. Это означает, что вы импортируете свой общий код в свой проект React или React-Native и передаете проекту общий код свои компоненты фреймворк.

Моя реализация класса внутри моего проекта общий код, который содержит для меня представление. В этом коде вы можете повторно использовать компонент Вид и написать свой пользовательский интерфейс с помощью этого компонента. Это означает, что в React будет div против того, что React-Native будет содержать View.

let View = undefined;

const registerView = (View) => {
  UIProvider.View = View
};

const getView = () => {
  return UIProvider.View;
};

let UIProvider = {
  View: View
};

//Functions for component registration
UIProvider.registerView = registerView;

//Functions to receive shared components
UIProvider.getView = getView;

export {UIProvider};

Проблемы, которые я преодолел таким образом

• Ключ к использованию компонентов - разбить все на пустой JavaScript и использовать его в своих проектах React или React-Native. Возможно, это связано с тем, что у меня отсутствовал опыт работы с веб-пакетом, но у меня с этим много проблем. Они были причиной, потому что, если вы создаете приложение React с помощью create-response-app, конфигурация веб-пакета будет сделана за вас, и не так просто разбить вещи до желаемого уровня.

• Другой момент: вы должны использовать Компоненты высокого порядка для использования ваших компонентов в вашем пакете / библиотеке с общим кодом или что-то еще. Если вы новичок в этом, это может сбивать с толку вначале, но дает вам большую ценность, если вы его используете и понимаете.

Кроме того, чтение

• Кристиан Сепульведа - Совместное использование кода между приложениями React и React Native
• Игорь Бурлаченко - Совместное использование кода между React и React-Native

Проверь это. React Native для Интернета

Уже используется крупными компаниями, и мне он кажется очень многообещающим. Возможность даже поделиться кодом презентации - это просто потрясающе!

Лучший стек будет реагировать для Интернета и реагировать на мобильные устройства, потому что реагирование использует виртуальный дом, который ускоряет ваш веб-сайт. А когда дело доходит до единой базы кода, оптимизированного размера APK и поддержки сообщества, response-native намного опережает native-script.

Я бы посоветовал выбрать React для Интернета и React Native для мобильных устройств. Это заставляет ваших разработчиков однажды научиться и писать для любой платформы. И я лично не предлагаю единую базу кода для всех платформ, так как это делает вещи беспорядочными. Я бы предпочел поддерживать 3 базы кода для Интернета, Android и IOS (или, по крайней мере, две базы кода для Интернета и мобильных устройств) и делюсь общим кодом.

Вы можете использовать гибридные приложения, чтобы иметь единую базу кода, но помните, что это приложения-оболочки, и поэтому производительность падает.

Вы также можете использовать одну и ту же базу кода для мобильных устройств и Интернета, используя react-native-web.

Вы можете создать PWA или использовать React Native Web: https://github.com/necolas/react-native-web

У обоих есть свои взлеты и падения. Но я замечаю, что все больше разработчиков склоняются к React. Однако, поработав с обоими, я посоветую вам внимательно следить за Флаттер. Потому что я считаю, что внешний вид, ощущения и производительность приложения, созданного с использованием Flutter + Dart, имеют преимущество перед обоими. НО, как и я, каждый разработчик только сдерживается, потому что на сегодняшний день их веб-часть все еще находится в стадии бета-тестирования.

Проверьте платформу quasar на предмет единой базы кода для мобильных, веб-приложений, приложений Mac и Windows.