Recos - experimental ts/jsx to Android Compose/SwiftUI compiler

Related tags

Miscellaneous Recos
Overview

Recos - experimental ts/jsx to Android Compose/SwiftUI compiler

This repository contains an early prototype of Recos, an experimental compiler, which would compile tx/jsx into Android Jetpack Compose and iOS SwiftUI.

For a long time, many technologies have been introduced to build cross-platform mobile apps using single codebase, and React-Native is the most popular framework in this area. However, React-Native has some kind of performance issues and relatively higher memory usage.

The main goal of Recos is to help us building high performance cross-platform mobile apps in a declarative manner.

Recos overview

Design

Getting started with Recos

Before starting this 101 tutorial, make sure our system have installed node, and suppose we are using macOS, we may consider install it via brew:

brew install node npm install getopts --save

For the Android side, in order to make Jetpack Compose works, we must use Android Studio Preview version in this moment.

Setting up the development environment is out of the scope of this tutorial, for more information, please read the latest official docs from Facebook and Google.

Using your convenient tool to write the first React app, we will use TypeScript in this case and named it hello.tsx:

function Item1(item, onItemClick) {
    const onClick = useCallback(() => {
        onItemClick(item)
    })

    return <Text style={{ color: '#fff' }} onClick={onClick}>偶数:{item.name}, {item.count}</Text>

}

function Item2(item, onItemClick) {
    const onClick = useCallback(() => {
        onItemClick(item)
    })

    return <Text style={{ color: '#fff' }} onClick={onClick}>奇数:{item.name}, {item.count}</Text>
}

function HelloWorld(current) {

    const [data, setData] = useState([])

    useEffect(() => {
        let ret = []
        for (let i = 0; i < 1000; i++) {
            ret.push({
                name: 'item' + i,
                index: i,
                count: 0
            })
        }
        setData(ret)
    }, [current])

    let render = function (i) {
        let item = data[i]
        if (item.index % 2 == 0) {
            return Item1(item, (it) => {
                it.count = it.count + 1
                setData(data)
            })
        } else {
            return Item2(item, (it) => {
                it.count = it.count + 2
                setData(data)
            })
        }
    }

    return <RecyclerView count={data.length} render={render}>Hello World!</RecyclerView>
}

The next step would be use js/cli.js to compile it into a bundle file:

node cli.js -s hello.tsx -o hello.bundle

Put the output file hello.bundle into Android project's app/src/main/assets, compile the Android app and we will see:

You might also like...
A comprehensive tutorial for Android Data Binding
A comprehensive tutorial for Android Data Binding

精通 Android Data Binding 更多干货可移步至个人主页 QQ 交流群:324112728 ,或者点击链接加入QQ群 官方虽然已经给出了教程 - Data Binding Guide (中文版 - Data Binding(数据绑定)用户指南) ,但是实践之后发现槽点实在太多,于是就

A Job Queue specifically written for Android to easily schedule jobs (tasks) that run in the background, improving UX and application stability.

Development in this repository is stopped. Future development continues on https://github.com/yigit/android-priority-jobqueue ========================

An android library for displaying fps from the choreographer and percentage of time with two or more frames dropped
An android library for displaying fps from the choreographer and percentage of time with two or more frames dropped

DEPRECATED TinyDancer is deprecated. No more development will be taking place. Check out the Google Android developer documentation for UI performance

Memory safer implementation of android.os.Handler
Memory safer implementation of android.os.Handler

Android Weak Handler Memory safer implementation of android.os.Handler Problem Original implementation of Handler always keeps hard reference to handl

Android Library to help you with your runtime Permissions.
Android Library to help you with your runtime Permissions.

PermissionHelper Android Library to help you with your runtime Permissions. Demo Android M Watch it in action. Pre M Watch it in action. Nexus 6 (M) N

Android validation library which helps developer boil down the tedious work to three easy steps.
Android validation library which helps developer boil down the tedious work to three easy steps.

AwesomeValidation Introduction Implement validation for Android within only 3 steps. Developers should focus on their awesome code, and let the librar

📄The reliable, generic, fast and flexible logging framework for Android
📄The reliable, generic, fast and flexible logging framework for Android

logback-android v2.0.0 Overview logback-android brings the power of logback to Android. This library provides a highly configurable logging framework

Android framework for node.js applications

Introduction Anode is an embryonic framework for running node.js applications on Android. There are two main parts to this: a port of node.js to the A

It makes a preview from an url, grabbing all the information such as title, relevant texts and images. This a version for Android of my web link preview https://github.com/LeonardoCardoso/Link-Preview
It makes a preview from an url, grabbing all the information such as title, relevant texts and images. This a version for Android of my web link preview https://github.com/LeonardoCardoso/Link-Preview

LeoCardz Link Preview for Android It makes a preview from an url, grabbing all the information such as title, relevant texts and images. Visual Exampl

Owner
cgspine
Android 开发
cgspine
The Android Version in Kotlin of The Dialer App (in SwiftUI)

Dialer An intuitive USSD client to handle most of the common actions for you. Contains common MTN Rwanda USSD activation codes, which drastically simp

Cédric Bahirwe 1 Dec 14, 2021
Experimental optical character recognition app

android-ocr An experimental app for Android that performs optical character recognition (OCR) on images captured using the device camera. Runs the Tes

Robert Theis 2.2k Dec 23, 2022
🔥🔥🔥Android Compose Banner!!! 安卓 Compose 版本的 Banner

Banner 打造 Compose 版本的 Banner 没有 ViewPager ? 之前写安卓的时候这都不是事,不管是自己使用 ViewPager 实现又或者是直接使用三方库,都不是什么难事;特别是使用三方库,添加一行依赖基本就没啥事了,但。。。现在使用 Compose 该怎么搞? 本来想着 C

朱江 39 Dec 7, 2022
Makes Google play in app purchase library (BillingClient) into a flowable that can easily be used in compose world

Billy the android Our goal is to make a modern api of BillingClient so that it is easier to use in compose world. This library is still early beta and

Stefan Wärting 16 Dec 14, 2022
Starter-Android-Library - Starter Android Library is an Android Project with Modular Architecture.

Starter-Android-Library - Starter Android Library is an Android Project with Modular Architecture.

OpenBytes 1 Feb 18, 2022
SL4A brings scripting languages to Android by allowing you to edit and execute scripts and interactive interpreters directly on the Android device.

#Scripting Layer for Android (SL4A) SL4A brings scripting languages to Android by allowing you to edit and execute scripts and interactive interpreter

Damon Kohler 2.3k Dec 23, 2022
****. Use the native and support library variants instead - https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html. An android library that makes it easy to add custom fonts to edittexts and textviews

Add to your project Add this line to your dependencies in build.gradle compile 'in.workarounds.typography:typography:0.0.8' Using the views There are

Workarounds 43 Nov 6, 2021
ZXing ("Zebra Crossing") barcode scanning library for Java, Android

Project in Maintenance Mode Only The project is in maintenance mode, meaning, changes are driven by contributed patches. Only bug fixes and minor enha

ZXing Project 30.5k Dec 27, 2022
RxJava binding APIs for Android's UI widgets.

RxBinding RxJava binding APIs for Android UI widgets from the platform and support libraries. Download Platform bindings: implementation 'com.jakewhar

Jake Wharton 9.7k Jan 6, 2023
A gradle plugin for getting java lambda support in java 6, 7 and android

Gradle Retrolambda Plugin This plugin will automatically build your java or android project with retrolambda, giving you lambda goodness on java 6 or

Evan Tatarka 5.3k Jan 5, 2023