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

[grasilife]

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

Background and Requirements

1. 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.

2. 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.

3. 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:

1. 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.

2. 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.

3. 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

1. 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)
   }

2. Style Compilation
   Convert the style section into platform-specific style declarations.

3. Script Integration
   Embed the script section directly into the target platform logic.

[grasilife]

---

How Vapor Mode Can Improve the Cross-Platform View Compilation

What is Vapor Mode?

Vapor Mode is an optimization mode introduced in Vue 3, primarily aimed at compile-time static analysis. By completely removing runtime template parsing, Vapor Mode compiles templates and directives directly into highly efficient native code.
Its core concept is template as the compilation target, with a stronger emphasis on static analysis and optimization.

---

How Does It Improve the Above Approach?

We can leverage the advantages of Vapor Mode to optimize the process of compiling the Vue template and style sections into SwiftUI and Compose.

1. Static Template Analysis

• Current Problem
  In traditional compilation, dynamic template parsing can lead to complexity and performance overhead, especially when mapping across platforms like SwiftUI and Compose.
• Vapor Mode Optimization
  Vapor Mode provides complete static template analysis, directly compiling Vue templates into efficient, structured code. For example:
  • Input Template

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

  • Output SwiftUI

    var body: some View {
        Text(viewModel.message)
    }

  • Output Compose

    @Composable
    fun MyComponent() {
        Text(viewModel.message)
    }

2. Directive Optimization

• Current Problem
  Dynamic directives (like v-if, v-for) in Vue templates require extra logic processing, adding complexity to cross-platform compilation.
• Vapor Mode Optimization
  Vapor Mode can digest directives at compile time and convert them into native logic for the target platform:
  • Sample Template

    <template>
      <div v-if="isVisible">
        <Text>{{ message }}</Text>
      </div>
    </template>

  • SwiftUI Compiled Output

    var body: some View {
        if viewModel.isVisible {
            Text(viewModel.message)
        }
    }

  • Compose Compiled Output

    @Composable
    fun MyComponent() {
        if (viewModel.isVisible) {
            Text(viewModel.message)
        }
    }

3. Style Mapping

• Current Problem
  Vue's CSS syntax needs to be converted into platform-specific style declarations, which can lead to compatibility issues.
• Vapor Mode Optimization
  Vapor Mode supports scoped styles, allowing Vue styles to be directly parsed into platform-specific styles:
  • Input Style

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

  • SwiftUI Style Output

    .foregroundColor(.red)
    .font(.system(size: 16))

  • Compose Style Output

    Modifier.color(Color.Red).fontSize(16.sp)

4. No Runtime Dependencies

• Current Problem
  Vue's runtime dependencies can introduce redundancy during code generation.
• Vapor Mode Optimization
  Vapor Mode removes the runtime at compile time, generating pure static target code, reducing unnecessary dependencies and performance overhead.

---

Summary

By leveraging Vue's Vapor Mode, we can significantly improve the process of compiling Vue's view parts (template and style) into SwiftUI and Compose, with key benefits including:

1. More Efficient Template Static Analysis
   No runtime template parsing, directly generating efficient target code.
2. Directive Optimization
   Converts Vue's dynamic directives into platform-specific logic, reducing compilation complexity.
3. Style Reuse
   Easily map shared styles across platforms using scoped styles.
4. No Runtime Dependencies
   Reduces runtime overhead, improving performance and code quality.

blog:https://www.vuemastery.com/blog/the-future-of-vue-vapor-mode/#supported-features

[grasilife]

Proposed Workflow and Implementation

1. Vue Template Compilation to AST
   The first step involves parsing the Vue template using Vue's template compiler, which produces an AST.

   Example:

   const vueTemplateCompiler = require('vue-template-compiler');
   
   const template = `
     <div>
       <h1>{{ title }}</h1>
       <p v-if="showText">{{ text }}</p>
       <ul>
         <li v-for="item in items">{{ item }}</li>
       </ul>
     </div>
   `;
   
   const parsed = vueTemplateCompiler.compile(template);
   console.log(parsed.ast);

2. AST Transformation to SwiftUI/Jetpack Compose
   After generating the AST, the next step is to map the template structure (HTML-like tags and directives) to SwiftUI or Jetpack Compose code. Below is an example that transforms Vue's AST into SwiftUI code.

   Example:

   function vueAstToSwiftUI(ast) {
     let swiftCode = '';
     
     if (ast.tag === 'div') {
       swiftCode += 'VStack {\n';
     }
   
     if (ast.children) {
       ast.children.forEach(child => {
         if (child.type === 1) { // Type 1 means element node in Vue AST
           if (child.tag === 'h1') {
             swiftCode += `Text("${child.children[0].text}")\n`;
           }
           if (child.tag === 'p' && child.attrsMap['v-if']) {
             swiftCode += `if (showText) {\n  Text("${child.children[0].text}")\n}\n`;
           }
           if (child.tag === 'ul') {
             swiftCode += 'ForEach(items, id: \\.self) { item in\n  Text(item)\n}\n';
           }
         }
       });
     }
   
     if (ast.tag === 'div') {
       swiftCode += '}\n';
     }
   
     return swiftCode;
   }
   
   const swiftCode = vueAstToSwiftUI(parsed.ast);
   console.log(swiftCode);

In this example, the vueAstToSwiftUI function processes the parsed Vue AST and converts it into SwiftUI code. It recognizes various tags and directives in the Vue template and maps them to equivalent SwiftUI components. For instance, div tags are converted to VStack, h1 tags to Text, v-if conditions to conditional blocks, and ul tags with v-for are converted into ForEach loops in SwiftUI.

Here is the code for transforming the Vue AST into SwiftUI components:

function vueAstToSwiftUI(ast) {
  let swiftCode = '';

  if (ast.tag === 'div') {
    swiftCode += 'VStack {\n';
  }

  if (ast.children) {
    ast.children.forEach(child => {
      if (child.type === 1) { // Type 1 represents an element node in Vue AST
        if (child.tag === 'h1') {
          swiftCode += `Text("${child.children[0].text}")\n`;
        }
        if (child.tag === 'p' && child.attrsMap['v-if']) {
          swiftCode += `if (showText) {\n  Text("${child.children[0].text}")\n}\n`;
        }
        if (child.tag === 'ul') {
          swiftCode += 'ForEach(items, id: \\.self) { item in\n  Text(item)\n}\n';
        }
      }
    });
  }

  if (ast.tag === 'div') {
    swiftCode += '}\n';
  }

  return swiftCode;
}

For the example template, this would output the following SwiftUI code:

VStack {
  Text("{{ title }}")
  if (showText) {
    Text("{{ text }}")
  }
  ForEach(items, id: \.self) { item in
    Text(item)
  }
}

3. Generate SwiftUI Code
   Once we have the AST and the conversion logic in place, we can now generate SwiftUI code that utilizes dynamic data like title, showText, and items.
   Here’s an example of the generated SwiftUI code:

import SwiftUI

struct ContentView: View {
  @State var title = "Hello, World!"
  @State var showText = true
  @State var text = "This is a conditional text."
  @State var items = ["Item 1", "Item 2", "Item 3"]

  var body: some View {
    VStack {
      Text(title)
      if showText {
        Text(text)
      }
      ForEach(items, id: \.self) { item in
        Text(item)
      }
    }
  }
}

[grasilife]

In the future, Vite will fully transition to Rust, including new tools like Rolldownand oxc. I hope this ecosystem will be helpful to you.

[grasilife]

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:

1. 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.

2. 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.

3. 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>