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

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
   edouard@marquez.cool
   

   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 edouard@marquez.cool
    @g123k
    

    View Slide