In just seven steps, give your iOS native project the ultimate speed of Flutter hot reload debugging

“Live up to the time, the creation of non-stop, this article is participating in 2021 year-end summary essay competition”

1. Download InjectionIII from the Mac App Store.

2. Open InjectionIII, Open Project, and select your Project directory.

3. The selected items appear in Open Recent. Keep File Watcher checked.

4. The AppDelegate DidFinishLaunchingWithOptions configuration InjectionIII paths

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after application launch. #ifdef DEBUG //InjectionIII injection [[NSBundle bundleWithPath:@"/Applications/InjectionIII.app/Contents/Resources/iOSInjection.bundle"] load]; #else #endif return YES; }Copy the code

5. Write in the page controller where dynamic debugging is requiredinjectedMethod to add the UI method you want to manipulate toinjectedIf you want all controllers to use it, add it directly to BaseViewController.

// Objective-C:
- (void)injected {
    #ifdef DEBUG
        NSLog(@"I've been injected: %@", self);
        [self viewDidLoad];
    #endif    
}


// Swift
@objc func injected() { 
    #if DEBUG 
        print("I've been injected: \(self)")
        self.viewDidLoad() 
    #endif 
}

Copy the code

6. Recompile the project as the console can see

**💉 InjectionIII connected /Users/***/Desktop/*** */**/***. Xcworkspace ** **💉 Watching files under /Users/***/Desktop/**** // The following is just a warning, the author has explained in Issue, **💉 💉 ⚠️ Your project file seems to be in the Desktop or Documents folder and may prevent InjectionIII working as it has special permissions.**Copy the code

7. Modify the UI directlycmd + SYou can see the effect, some pages may take a long time or cannot be used, normal pages can be used.

enjoy 🙂

Introduce Flutter Hot Reload

  • Flutter is a cross-platform development framework developed by Google, and debugging is fast and real-time.
  • After modifying the text code in the Flutter editor and clicking Reload, the content of the simulator will change immediately without the App having to restart.
  • The principle of Flutter to achieve real-time compilation
    • Flutter will view the code that has changed since the last compilation when reload is clicked, recompiling the code base involved.
    • The recompiled libraries will be converted into kernel files and sent to DartVM, DartVM will reload the new kernel files,
    • This will cause the Flutter framework to trigger all Widgets and Render Objects to rebuild, rearrange, and redraw.
  • To support cross-platform development, Flutter uses a self-developed Dart language to run Flutter applications with the INTEGRATION of the Dart VM within the App.

The iOS native project has the principle of Flutter thermal overload

  • Injection for XCodeGitHub address
  • The Injection tool can dynamically execute iOS code in a running program without a restart.
    • Injection listens for changes in the source code file. If the file is changed,
    • The Injection Server will perform rebuildClass to recompile and pack into a dynamic library. Dylib.
    • After compiling and packaging it into a dynamic library, the writeString method is used to notify the running App via Socket.
- (BOOL)writeString:(NSString *)string { const char *utf8 = string.UTF8String; uint32_t length = (uint32_t)strlen(utf8); if (write(clientSocket, &length, sizeof length) ! = sizeof length || write(clientSocket, utf8, length) ! = length) return FALSE; return TRUE; }Copy the code
    • The Server sends and listens to Socket messages in the background, and the Client also enables a background to send and listen to Socket messages.
    • When the Client receives the message, the call is calledinject(tmpfile: String)Method that dynamically replaces classes at run time (the new class dynamically replaces the old class).
    • dlopenWill load the tMPFile dynamic library file into the running App, return pointer dl.
    • Next, DLSYM gets the symbolic address of the TMPFile dynamic library and can handle the class replacement.
    • Once the class’s methods have been replaced, we can begin to redraw the interface.
    • Fast debugging using dynamic library mode, the whole process without recompiling and restarting the App.

Post is not easy, like the likes of the people have more good luck 👍 :), regular updates + attention not lost ~