Technical Proposal: Cross-Platform View Layer Reuse Based on Template Separation #12314

grasilife · 2025-01-08T07:50:29Z

grasilife
Jan 8, 2025

Technical Proposal: Cross-Platform View Layer Reuse Based on Template Separation

Background and Requirements

Challenges in View Reuse
Cross-platform development (e.g., iOS and Android) often requires platform-specific view code, which significantly increases development and maintenance costs.
Mature Logic Sharing Solutions
Frameworks like KMM (Kotlin Multiplatform Mobile) have improved efficiency by sharing logic layers, but there is still substantial room for improvement in view layer reuse.
Separation of View and Logic
Inspired by Vue's Single-File Component (SFC) structure, this proposal suggests reusing the template and style parts for cross-platform views while retaining the script part for native code (e.g., Swift and Kotlin). This approach reduces view code duplication and enhances flexibility by combining shared views with native logic.

Technical Path

1. Template-Driven View Layer

Concept
Use a Vue-like template to define the view structure. The HTML-style syntax is intuitive and easy to understand.
- Compile the template into platform-specific view code:
  - SwiftUI View structures for iOS.
  - Jetpack Compose Composable structures for Android.
Implementation
A template compiler parses the template into an abstract syntax tree (AST) and generates corresponding platform code.

2. Style-Driven Visual Consistency

Concept
Use CSS-like style syntax to describe view styles.
- Compile styles into platform-specific systems:
  - SwiftUI modifiers (e.g., .foregroundColor, .font).
  - Compose modifiers (e.g., Modifier).
Implementation
A style compiler maps shared style rules to platform-specific implementations.

3. Flexible Native Logic Integration

Concept
- Use native code (e.g., Swift or Kotlin) in the script section, maintaining seamless integration with platform-specific logic.
- Optionally, adopt frameworks like KMM to share logic layers across platforms.
Implementation
The script section is directly embedded in the target platform logic without additional compilation.

Advantages of .vue Over JSX

Compared to JSX, Vue's SFC model offers several advantages:

Clear Separation of Concerns
- Vue's SFC structure separates template, style, and script into distinct sections, making it easier to organize and maintain.
- According to Vue's creator, Evan You, the template syntax is more intuitive and beginner-friendly, lowering the learning curve for developers.
Better Compilation Suitability
- JSX is highly dynamic, which complicates static analysis and optimization.
- Vue templates are declarative and static by nature, making them easier to parse and compile into optimized target code.
Stronger Extensibility
- Templates support platform-specific directives (e.g., v-if, v-for) that can be optimized during compilation for efficient rendering.
- Scoped styles reduce the risk of style conflicts.

Framework Implementation Overview

1. Architecture Design

File Structure
Each component is written in a .dioxus file (or similar extension), mimicking Vue's SFC:

<template>
  <Text>{{ message }}</Text>
</template>

<style>
  Text {
    color: red;
    font-size: 16px;
  }
</style>

<script>
  export default {
    data() {
      return { message: 'Hello, World!' };
    },
  };
</script>

2. Compilation Workflow

Template Compilation
Parse the template into an AST and map it to platform-specific view code:
SwiftUI example:

var body: some View {
    Text("Hello, World!")
        .foregroundColor(.red)
        .font(.system(size: 16))
}

Jetpack Compose example:

@Composable
fun MyComponent() {
    Text("Hello, World!", color = Color.Red, fontSize = 16.sp)
}

Style Compilation
Convert the style section into platform-specific style declarations.
Script Integration
Embed the script section directly into the target platform logic.

grasilife · 2025-01-08T07:51:11Z

grasilife
Jan 8, 2025
Author

Alternative Proposal: Direct Usage of Vue Syntax for Compilation

Proposal

Instead of creating a new AST transformation pipeline, we can leverage Vue's existing compiler and syntax directly to generate SwiftUI and Jetpack Compose code. This approach offers the following advantages:

Reusability of Vue's Compiler
Vue's compiler is already a mature and optimized solution for parsing and transforming templates. By using it directly, we can avoid the need to reimplement parsing logic in another language, such as Rust.
Improved Cross-Platform Portability
Maintaining the Vue syntax ensures better consistency and portability across platforms, including the web. Developers familiar with Vue's ecosystem can work seamlessly, and the same template syntax can be used for both web and native platforms.
Efficiency in Development
Avoiding the duplication of effort to create a new compiler allows more focus on the transformation layer that maps Vue's AST to platform-specific code for SwiftUI and Jetpack Compose.

Implementation Overview

Step 1: Leverage Vue's Compiler
Use Vue's existing compiler to parse .vue files and generate the intermediate AST. This AST can then be used as the starting point for generating SwiftUI or Jetpack Compose code.
Step 2: Develop Target-Specific Code Generators
Build separate code generators for:
- SwiftUI: Transform Vue's AST elements (e.g., div, p, v-for, v-if) into SwiftUI components like VStack, Text, and ForEach.
- Jetpack Compose: Map the AST to Compose's Column, Text, and LazyColumn.
Step 3: Ensure Compatibility
Keep Vue's directives (v-bind, v-if, v-for, etc.) intact to ensure that the syntax remains consistent. The goal is to minimize deviations from the standard Vue development workflow.

Input Template (Vue)

<template>
<div>
 <h1>{{ title }}</h1>
 <p v-if="showText">{{ text }}</p>
 <ul>
   <li v-for="item in items" :key="item">{{ item }}</li>
 </ul>
</div>
</template>

<script>
import { ref } from 'vue';

export default {
setup() {
 const title = ref('Hello, World!');
 const showText = ref(true);
 const text = ref('This is a conditional text.');
 const items = ref(['Item 1', 'Item 2', 'Item 3']);

 return {
   title,
   showText,
   text,
   items,
 };
},
};
</script>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Technical Proposal: Cross-Platform View Layer Reuse Based on Template Separation #12314

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Technical Proposal: Cross-Platform View Layer Reuse Based on Template Separation #12314

grasilife Jan 8, 2025