Mobile Development

Draft supports cross-platform mobile development for iOS and Android.

Overview

Write once, deploy to both iOS and Android. Draft compiles to native code with platform bindings.

Getting Started

Install Mobile Targets

draft target add aarch64-apple-ios
draft target add aarch64-linux-android
draft target add armv7-linux-androideabi

Create Mobile Project

draft new my-app --template mobile
cd my-app

Project structure:

my-app/
├── draft.toml
├── src/
│   ├── main.draft
│   ├── ui.draft
│   └── api.draft
├── ios/
│   ├── Info.plist
│   └── AppDelegate.swift
├── android/
│   ├── AndroidManifest.xml
│   └── MainActivity.kt
└── shared/
    └── models.draft

UI Framework

Declarative UI

import ui

action main()
    @app = @ui#App::new("My App")

    @app#view(fn() =>
        @ui#Column::new()
            #child(@ui#Text::new("Hello, World!"))
            #child(@ui#Button::new("Click Me", fn() =>
                @ui#alert("Button clicked!")
            fin action.))
            #child(@ui#List::new(@items, fn(@item) =>
                @ui#Row::new()
                    #child(@ui#Text::new(@item#title))
                    #child(@ui#Text::new(@item#subtitle))
            fin action.))
    fin action.)

    @app#run()
fin action.

Layout

import ui

@ui#Column::new()
    #padding(16)
    #spacing(8)
    #child(@ui#Text::new("Title"))
    #child(@ui#Row::new()
        #spacing(8)
        #child(@ui#Button::new("Cancel", @on_cancel))
        #child(@ui#Button::new("OK", @on_ok))
    fin action.)

Styling

import ui

@ui#Text::new("Hello")
    #font_size(24)
    #color(@ui#rgb(0, 122, 255))
    #font_weight(@ui#BOLD)
    #padding(16)
    #background(@ui#rgb(240, 240, 240))
    #border_radius(8)

Navigation

import ui

action main()
    @nav = @ui#Navigator::new()

    @nav#route("/", fn() => home_view())
    @nav#route("/profile", fn() => profile_view())
    @nav#route("/settings", fn() => settings_view())

    @nav#navigate("/profile")
fin action.

State Management

import ui

record AppState
    count: Int
    user: User?
fin record.

action main()
    @state = @ui#state(AppState { count: 0, user: nil })

    @ui#view(fn() =>
        @ui#Column::new()
            #child(@ui#Text::new(string(@state#count)))
            #child(@ui#Button::new("Increment", fn() =>
                @state#update(fn(@s) => AppState { count: @s#count + 1, user: @s#user })
            fin action.))
    fin action.)
fin action.

Networking

import http
import json

action load_users() -> Result<Array<User>, Error>
    @response = @http#get("https://api.example.com/users")?
    @data = @response#json()?
    return ok(@data)
fin action.

Platform APIs

Camera

import camera

action take_photo()
    @image = @camera#capture()
    @image#save("photo.jpg")
fin action.

Location

import location

action get_location()
    @loc = @location#current()
    @lat = @loc#latitude
    @lng = @loc#longitude
fin action.

Notifications

import notifications

action schedule_notification()
    @notifications#schedule(
        title: "Reminder",
        body: "Don't forget!",
        time: @time#now() + @time#minutes(30)
    )
fin action.

Storage

import storage

action save_data()
    @storage#set("username", "alice")
    @username = @storage#get("username")
fin action.

Biometrics

import biometrics

action authenticate()
    @result = @biometrics#authenticate("Unlock with Face ID")
    if @result#success
        @nav#navigate("/home")
    fin if.
fin action.

Permissions

import permissions

action main()
    @permissions#request([
        @permissions#CAMERA,
        @permissions#LOCATION,
        @permissions#NOTIFICATIONS
    ])
fin action.

Gestures

import ui

@ui#view(fn() =>
    @ui#Text::new("Swipe me")
        #on_swipe_left(fn() => @nav#back())
        #on_swipe_right(fn() => @nav#next())
        #on_pinch(fn(@scale) => @zoom(@scale))
        #on_long_press(fn() => @show_menu())
)

Animations

import ui

@ui#view(fn() =>
    @ui#Text::new("Animated")
        #animate(@ui#fade_in(duration: 300))
        #animate(@ui#slide_up(duration: 500))
        #animate(@ui#scale(from: 0.5, to: 1.0))
)

Lists

import ui

@ui#List::new(@items, fn(@item) =>
    @ui#Row::new()
        #child(@ui#Image::new(@item#icon))
        #child(@ui#Column::new()
            #child(@ui#Text::new(@item#title))
            #child(@ui#Text::new(@item#subtitle))
        fin action.)
        #on_press(fn() => @nav#navigate("/detail/" + @item#id))
)

Forms

import ui

action main()
    @form = @ui#Form::new()

    @form#text("name", label: "Name", required: true)
    @form#email("email", label: "Email", required: true)
    #form#password("password", label: "Password")
    @form#submit(fn(@data) =>
        @result = create_user(@data)
    fin action.)

    @form#show()
fin action.

Platform-Specific Code

import ui

action get_theme()
    if @platform#is_ios()
        return @ui#ios_theme()
    else if @platform#is_android()
        return @ui#android_theme()
    fin if.
fin action.

Building

iOS

draft build --target aarch64-apple-ios --release

Android

draft build --target aarch64-linux-android --release

Both

draft build --target mobile --release

Testing

@// Unit tests
draft test

@// iOS simulator
draft run --target ios-simulator

@// Android emulator
draft run --target android-emulator

Deployment

App Store

draft deploy --target ios

Play Store

draft deploy --target android

Performance

Mobile apps built with Draft:

Metric	Value
App size	~5-15 MB
Startup time	< 100ms
Memory usage	~20-50 MB
Frame rate	60 FPS