Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Du Rust sur mobile : où en est-on ?

Du Rust sur mobile : où en est-on ?

Tauri et Dioxus sont deux frameworks pour concevoir des applications desktop en Rust. Il y a quelques semaines, ils ont annoncé le support du mobile : mais où en est-on vraiment ?

C'est ce que l'on verra dans cette présentation donnée à Android Makers by droidcon 2023

Edouard Marquez

April 29, 2023
Tweet

More Decks by Edouard Marquez

Other Decks in Programming

Transcript

  1. Du Rust pour du mobile
    Est-ce le bon moment de s'y intéresser ?

    View Slide

  2. Android Makers 2023 Hello World :)
    Qui suis-je ?
    Edouard Marquez
    Freelance Android & Flutter
    @g123k
    @DevCafe
    OpenFoodFacts
    [email protected]

    View Slide

  3. Android Makers 2023 La problématique
    VS
    Commençons sur le mobile

    View Slide

  4. Android Makers 2023 La problématique
    Type WebView
    Ionic, Cordova…
    Type Hybride
    React Native…
    Type "Natif"
    Flutter…
    Plusieurs choix sont possibles

    View Slide

  5. Android Makers 2023 La problématique
    VS VS
    Et maintenant sur desktop ?

    View Slide

  6. Android Makers 2023 La problématique
    ElectronJS est LA solution la plus fréquemment utilisée

    View Slide

  7. Source : Site officiel ElectronJS

    View Slide

  8. Android Makers 2023 La problématique
    Chromium Node.js APIs natives
    Initié par GitHub

    Atom Shell (2012-2013)
    + +
    Version 24

    03 avril 2023
    Comment ça marche ?

    View Slide

  9. Android Makers 2023 Desktop & cross-platform
    Source : https://blog.logrocket.com/advanced-electron-js-architecture/
    ElectronJS
    Processus principal Processus Node
    Processus de rendu
    Module back
    Module front
    Module partagé
    Architecture d'ElectronJS

    View Slide

  10. Android Makers 2023 Desktop & cross-platform
    Source : https://www.levminer.com/blog/tauri-vs-electron
    ElectronJS Tauri
    Taille du Bundle 85 Mo 👀
    Temps de démarrage 4 secondes 👀
    % CPU au repos 0 % 👀
    RAM au repos 120 Mo 👀
    Les performances d'ElectronJS

    View Slide

  11. Android Makers 2023 La problématique
    Chromium
    Même rendu sur tous les OS
    Binaire très lourd
    Forte consommation

    mémoire
    WebView
    Plus de dépendance
    Processus plus léger
    Compatibilité entre

    les OS
    Et si…

    View Slide

  12. Android Makers 2023 La problématique
    Source : https://www.electronjs.org/blog/webview2
    Mais une précision s'impose

    View Slide

  13. Source : https://learn.microsoft.com/en-us/microsoft-edge/webview2/

    View Slide

  14. Source : https://learn.microsoft.com/en-us/microsoft-edge/webview2/

    View Slide

  15. Android Makers 2023 La problématique
    Rust
    JavaScript
    Et si… (x2)

    View Slide

  16. Android Makers 2023 Rust ?
    Conçu et développé
    par Mozilla Research
    Graydon Hoare
    Totalement

    open-source
    Philosophie Mozilla
    Excellentes
    performances
    Similaires à C/C++
    "Memory Safe", sans
    avoir besoin de GC
    Vs C/C++
    Syntaxe inspirée de
    langages connus
    C/C++
    Récupéré par la
    Rust Foundation
    Suite aux licenciements
    Qu'est-ce que Rust ?

    View Slide

  17. fn main() {


    println!("Hello, world!");


    }
    main.rs

    View Slide

  18. Source : https://security.googleblog.com/2021/04/rust-in-android-platform.html

    View Slide

  19. Android Makers 2023 Rust ?
    Rust sur Android
    Source : https://security.googleblog.com/2022/12/memory-safe-languages-in-android-13.html

    View Slide

  20. Android Makers 2023 Rust ?
    Source : https://security.googleblog.com/2022/12/memory-safe-languages-in-android-13.html
    Rust sur Android

    View Slide

  21. Android Makers 2023 Rust ?
    Même la NSA le recommande !
    Source : https://www.nsa.gov/Press-Room/News-Highlights/Article/Article/3215760/nsa-releases-guidance-on-how-to-protect-against-software-memory-safety-issues/

    View Slide

  22. Android Makers 2023 Tauri
    Et maintenant…

    View Slide

  23. Android Makers 2023 Tauri
    Source : https://blog.logrocket.com/advanced-electron-js-architecture/
    ElectronJS
    Processus principal Processus Node
    Processus de rendu
    Module back
    Module front
    Module partagé
    Pour rappel, un projet ElectronJS

    View Slide

  24. Android Makers 2023 Tauri
    Module back
    Module front
    Et voici un projet Tauri !

    View Slide

  25. View Slide

  26. View Slide

  27. src
    assets
    index.html
    main.js
    style.css
    src-tauri
    icons
    src
    main.rs
    build.rs
    Cargo.toml
    tauri.conf.json
    Arborescence d'un projet Tauri / Vanilla

    View Slide

  28. src
    assets
    index.html
    main.js
    style.css
    src-tauri
    icons
    src
    main.rs
    build.rs
    Cargo.toml
    tauri.conf.json
    Arborescence du projet Tauri / Vanilla















    Tauri App














    Click on the Tauri logo to learn more about the framework











    Greet




















    index.html



    Greet





    View Slide

  29. src
    assets
    index.html
    main.js
    style.css
    src-tauri
    icons
    src
    main.rs
    build.rs
    Cargo.toml
    tauri.conf.json
    Arborescence du projet Tauri / Vanilla
    const { invoke } = window.__TAURI__.tauri;


    let greetInputEl;


    let greetMsgEl;


    async function greet() {


    greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value });


    }


    window.addEventListener("DOMContentLoaded", () => {


    greetInputEl = document.querySelector("#greet-input");


    greetMsgEl = document.querySelector("#greet-msg");


    document


    .querySelector("#greet-button")


    .addEventListener("click", () => greet());


    });


    main.js
    window.addEventListener("DOMContentLoaded", () => {


    greetInputEl = document.querySelector("#greet-input");


    greetMsgEl = document.querySelector("#greet-msg");


    document


    .querySelector("#greet-button")


    .addEventListener("click", () => greet());


    });


    View Slide

  30. src
    assets
    index.html
    main.js
    style.css
    src-tauri
    icons
    src
    main.rs
    build.rs
    Cargo.toml
    tauri.conf.json
    Arborescence du projet Tauri / Vanilla
    const { invoke } = window.__TAURI__.tauri;


    let greetInputEl;


    let greetMsgEl;


    async function greet() {


    greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value });


    }


    window.addEventListener("DOMContentLoaded", () => {


    greetInputEl = document.querySelector("#greet-input");


    greetMsgEl = document.querySelector("#greet-msg");


    document


    .querySelector("#greet-button")


    .addEventListener("click", () => greet());


    });


    main.js
    const { invoke } = window.__TAURI__.tauri;


    async function greet() {


    greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value });


    }

    View Slide

  31. src
    assets
    index.html
    main.js
    style.css
    src-tauri
    icons
    src
    main.rs
    build.rs
    Cargo.toml
    tauri.conf.json
    Arborescence du projet Tauri / Vanilla
    // Prevents additional console window on Windows in release, DO NOT REMOVE!!


    #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]


    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command


    #[tauri::command]


    fn greet(name: &str) -> String {


    format!("Hello, {}! You've been greeted from Rust!", name)


    }


    fn main() {


    tauri::Builder::default()


    .invoke_handler(tauri::generate_handler![greet])


    .run(tauri::generate_context!())


    .expect("error while running tauri application");


    }


    main.rs
    tauri::Builder::default()


    .invoke_handler(tauri::generate_handler![greet])


    .run(tauri::generate_context!())


    View Slide

  32. src
    assets
    index.html
    main.js
    style.css
    src-tauri
    icons
    src
    main.rs
    build.rs
    Cargo.toml
    tauri.conf.json
    Arborescence du projet Tauri / Vanilla
    // Prevents additional console window on Windows in release, DO NOT REMOVE!!


    #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]


    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command


    #[tauri::command]


    fn greet(name: &str) -> String {


    format!("Hello, {}! You've been greeted from Rust!", name)


    }


    fn main() {


    tauri::Builder::default()


    .invoke_handler(tauri::generate_handler![greet])


    .run(tauri::generate_context!())


    .expect("error while running tauri application");


    }


    main.rs
    #[tauri::command]


    fn greet(name: &str) -> String {


    format!("Hello, {}! You've been greeted from Rust!", name)


    }

    View Slide

  33. Android Makers 2023 Tauri
    Source : https://www.levminer.com/blog/tauri-vs-electron
    ElectronJS Tauri
    Taille du Bundle 85 Mo 2,5 Mo
    Temps de démarrage 4 secondes 2 secondes
    % CPU au repos 0 % 0 %
    RAM au repos 120 Mo 80 Mo
    ElectronJS VS Tauri, ça donne…

    View Slide

  34. Android Makers 2023 Tauri
    D'ailleurs, côté front…

    View Slide

  35. Android Makers 2023 Tauri
    Et sur mobile ?

    View Slide

  36. Android Makers 2023 Tauri
    Et sur mobile ?

    View Slide

  37. Android Makers 2023 Tauri
    Et sur mobile ?
    https://next--tauri.netlify.app/next/guides

    View Slide

  38. Android Makers 2023 Tauri
    Et sur mobile ?
    g123k/tauri_first_app

    Template Vanilla

    View Slide

  39. Android Makers 2023 Tauri
    Et sur mobile ?
    g123k/tauri-nextjs

    Template NextJS

    View Slide

  40. src
    assets
    index.html
    main.js
    style.css
    src-tauri
    icons
    src
    lib.rs
    build.rs
    Cargo.toml
    tauri.conf.json
    Arborescence d'un projet Tauri 2 / Vanilla
    main.rs
    mobile.rs

    View Slide

  41. src
    assets
    index.html
    main.js
    style.css
    src-tauri
    icons
    src
    lib.rs
    build.rs
    Cargo.toml
    tauri.conf.json
    Arborescence d'un projet Tauri 2 / Vanilla
    main.rs
    mobile.rs
    #![cfg_attr(


    all(not(debug_assertions), target_os = "windows"),


    windows_subsystem = "windows"


    )]


    use tauriapp::AppBuilder;




    pub fn main() {


    AppBuilder::new().run();


    }
    main.rs

    View Slide

  42. src
    assets
    index.html
    main.js
    style.css
    src-tauri
    icons
    src
    lib.rs
    build.rs
    Cargo.toml
    tauri.conf.json
    Arborescence d'un projet Tauri 2 / Vanilla
    main.rs
    mobile.rs
    #[tauri::mobile_entry_point]


    fn main() {


    super::AppBuilder::new().run();


    }


    mobile.rs

    View Slide

  43. src
    assets
    index.html
    main.js
    style.css
    src-tauri
    icons
    src
    lib.rs
    build.rs
    Cargo.toml
    tauri.conf.json
    Arborescence d'un projet Tauri 2 / Vanilla
    main.rs
    mobile.rs
    use tauri::App;


    #[cfg(mobile)]


    mod mobile;


    #[cfg(mobile)]


    pub use mobile::*;


    pub type SetupHook = Box Result<(), Box> + Send>;


    #[derive(Default)]


    pub struct AppBuilder {


    setup: Option,


    }


    #[tauri::command]


    fn greet(name: &str) -> String {


    format!("Hello, {}!", name)


    }


    impl AppBuilder {


    pub fn new() -> Self {


    Self::default()


    }


    #[must_use]


    pub fn setup(mut self, setup: F) -> Self


    where


    F: FnOnce(&mut App) -> Result<(), Box> + Send + 'static,


    {


    self.setup.replace(Box::new(setup));


    self


    }


    pub fn run(self) {


    let setup = self.setup;


    tauri::Builder::default()


    .setup(move |app| {


    if let Some(setup) = setup {


    (setup)(app)?;


    }


    Ok(())


    })


    .invoke_handler(tauri::generate_handler![greet])


    .run(tauri::generate_context!())


    .expect("error while running tauri application");


    }




    lib.rs

    View Slide

  44. Et le code

    Android / iOS ?

    View Slide

  45. Et le code

    Android / iOS ?
    // Initialiser le projet


    > tauri android init


    > tauri ios init


    // Lancer le projet en debug


    > tauri android dev


    > tauri ios dev
    shell

    View Slide

  46. src
    assets
    index.html
    main.js
    style.css
    src-tauri
    gen
    android
    build.rs
    Cargo.toml
    tauri.conf.json
    Arborescence d'un projet Tauri 2 / Vanilla
    icons
    src

    View Slide

  47. View Slide

  48. Android Makers 2023 Tauri
    Et les plugins ?
    package com.plugin.example


    import android.app.Activity


    import app.tauri.annotation.Command


    import app.tauri.annotation.TauriPlugin


    import app.tauri.plugin.JSObject


    import app.tauri.plugin.Plugin


    import app.tauri.plugin.Invoke


    @TauriPlugin


    class ExamplePlugin(private val activity: Activity): Plugin(activity) {


    @Command


    fun ping(invoke: Invoke) {


    val value = invoke.getString("value") ?: ""


    val ret = JSObject()


    ret.put("value", value)


    invoke.resolve(ret)


    MonPlugin.kt

    View Slide

  49. Android Makers 2023 Tauri
    Et les plugins ?
    import UIKit


    import WebKit


    import Tauri


    class ExamplePlugin: Plugin {


    @objc public func ping(_ invoke: Invoke) throws {


    let value = invoke.getString("value")


    invoke.resolve(["value": value as Any])


    }


    }


    @_cdecl("init_plugin_example")


    func initPlugin(name: SRString, webview: WKWebView?) {


    Tauri.registerPlugin(webview: webview, name: name.toString(), plugin:
    ExamplePlugin())


    }
    MonPlugin.swift

    View Slide

  50. Android Makers 2023 Tauri
    Et les plugins ?
    use tauri::{


    plugin::{Builder, TauriPlugin},


    Manager, Runtime,


    };


    #[cfg(target_os = "ios")]


    tauri::ios_plugin_binding!(init_plugin_example);


    pub fn init() -> TauriPlugin {


    Builder::new("example")


    .setup(|app, api| {


    #[cfg(target_os = "android")]


    api.register_android_plugin("com.plugin.example", "ExamplePlugin")?;


    #[cfg(target_os = "ios")]


    api.register_ios_plugin(init_plugin_example)?;


    Ok(())


    })


    .build()


    main.rs

    View Slide

  51. Android Makers 2023 Tauri
    Et les plugins ?
    use tauri::{


    plugin::{Builder, TauriPlugin},


    Manager, Runtime,


    };


    #[cfg(target_os = "ios")]


    tauri::ios_plugin_binding!(init_plugin_example);


    pub fn init() -> TauriPlugin {


    Builder::new("example")


    .setup(|app, api| {


    #[cfg(target_os = "android")]


    api.register_android_plugin("com.plugin.example", "ExamplePlugin")?;


    #[cfg(target_os = "ios")]


    api.register_ios_plugin(init_plugin_example)?;


    Ok(())


    })


    .build()


    main.rs
    #[cfg(target_os = "android")]


    api.register_android_plugin("com.plugin.example", "ExamplePlugin")?;


    #[cfg(target_os = "ios")]


    api.register_ios_plugin(init_plugin_example)?;


    View Slide

  52. Android Makers 2023 Tauri
    Et les plugins ?
    import { invoke } from '@tauri-apps/api/tauri'


    invoke('plugin:example|ping', { value: 'Tauri' })


    .then(({ value }) => console.log('Response', value))
    main.js

    View Slide

  53. View Slide

  54. View Slide

  55. Android Makers 2023 Tauri
    Qu'en conclure ?
    Les points négatifs
    Peu de doc
    Beaucoup de bugs
    Pas de deadline précise
    Les points positifs
    Meilleures performances
    Support de la communauté
    "Hype"
    Recommandé pour un
    projet desktop
    Attendre pour

    un projet mobile

    View Slide

  56. Android Makers 2023 Dioxus
    Et Dioxus dans tout ça ?

    View Slide

  57. Android Makers 2023 Dioxus
    Et Dioxus dans tout ça ?

    View Slide

  58. Android Makers 2023 Dioxus
    Et Dioxus dans tout ça ?

    View Slide

  59. Android Makers 2023 Dioxus
    Et Dioxus dans tout ça ?

    View Slide

  60. Android Makers 2023 Dioxus
    Dioxus utilise maintenant Tauri Mobile
    Cargo Mobile
    Tauri Mobile
    Dioxus Mobile

    View Slide

  61. Android Makers 2023 Conclusion
    Rust au long terme
    Rust sur le desktop (Tauri)
    (Dioxus)
    Rust sur mobile
    L'échelle de la confiance

    View Slide

  62. Merci !


    Questions ?
    Edouard Marquez
    Freelance Android & Flutter [email protected]
    @g123k

    View Slide