The Declarative Revolution: React, SwiftUI, and Jetpack Compose

Introduction

Mobile development has evolved significantly with the advent of declarative UI frameworks. SwiftUI for iOS, Jetpack Compose for Android, and React for web development have paved the way for developers to build UIs efficiently. Unlike cross-platform tools such as React Native, these frameworks retain the full power of their respective platforms while shifting from an imperative approach to a declarative one. This article delves into how parallel development using SwiftUI and Jetpack Compose can be aligned...

1. The Declarative Shift: SwiftUI, Jetpack Compose, and React

• 
  Imperative vs. Declarative: In traditional development, imperative programming required step-by-step UI manipulation. Declarative frameworks like SwiftUI, Jetpack Compose, and React represent a leap forward, allowing developers to declare the UI state directly and let the framework handle rendering.


• 
  Common Layout Components:
  
  
  
  
  • 
    SwiftUI: Uses layout structures like VStack and HStack, which resemble the row and column structures of CSS Flexbox.
  
  
  • 
    Jetpack Compose: Utilizes Column and Row, operating on the same principles as Flexbox in CSS, making UI composition intuitive and responsive.
  
  
  • 
    React: Utilizes div and span combined with flex and grid CSS properties for layout, showcasing a similar declarative mindset.
  
  
  
  
  
  

2. Similarities in State Management

• 
  State and Observability:
  
  
  
  
  • In SwiftUI, @ObservedObject allows passing an observable object to views, much like passing props in React. This enhances modularity and reactive updates.
  
  
  • Jetpack Compose uses State and MutableState to manage data updates in the UI, facilitating reactive UI updates similar to SwiftUI and React’s useState and useEffect hooks.
  
  
  
  
  
  



• 
  
  Example:
  

  class BookViewModel: ObservableObject {

      @Published var books: [Book] = []



      init() {

          loadBooks()

      }



      private func loadBooks() {

          if let url = Bundle.main.url(forResource: "Books", withExtension: "json"),

             let data = try? Data(contentsOf: url) {

              // Parse JSON and update books array

          }

      }

  }

  class BookViewModel(context: Context) {

      private val sharedPreferences = 

          context.getSharedPreferences("BookPreferences", Context.MODE_PRIVATE)



      fun loadBooks(): String {

          return context.assets.open("Books.json").bufferedReader().use { it.readText() }

      }

  }

3. Data Storage: UserDefaults, SharedPreferences, and Local Storage

• 
  Persistent Storage:
  
  
  
  
  • In iOS, UserDefaults is commonly used for lightweight data storage. Developers can store user settings, app state, and other small data chunks efficiently.
  
  
  • On Android, SharedPreferences serves a similar purpose, providing simple key-value storage.
  
  
  • 
    React: Typically uses localStorage or sessionStorage for storing small data persistently in web applications.
  
  
  
  
  
  



• 
  
  Code Comparison:
  

  UserDefaults.standard.set("Sample Book", forKey: "LastOpenedBook")

  let lastOpenedBook = UserDefaults.standard.string(forKey: "LastOpenedBook")

  sharedPreferences.edit().putString("LastOpenedBook", "Sample Book").apply()

  val lastOpenedBook = sharedPreferences.getString("LastOpenedBook", null)

  localStorage.setItem("LastOpenedBook", "Sample Book");

  const lastOpenedBook = localStorage.getItem("LastOpenedBook");

4. Loading Assets

• 
  

  Loading JSON Data:

  
  
  
  
  
  • iOS and Android can both load local JSON files stored within the app's bundle or assets. React web apps typically fetch data from the server or use fetch() to access local assets.
  
  
  • 
    SwiftUI:
    
  
  
  
  
  

  if let url = Bundle.main.url(forResource: "Books", withExtension: "json") {
  
      let jsonData = try? Data(contentsOf: url)
  
      // Parse JSON
  
  }
  
  

  
  
  
  
  
  
  
  • 
    Jetpack Compose:
    
  
  
  
  
  

  val json = context.assets.open("Books.json").bufferedReader().use { it.readText() }
  
  // Parse JSON
  
  

  
  
  
  
  
  
  
  • 
    React:
    
  
  
  
  
  

  fetch("/path/to/Books.json")
  
    .then(response => response.json())
  
    .then(data => {
  
      // Use JSON data
  
    });
  
  

  
  
  
  
  
  

5. Bringing It All Together

Parallel development in SwiftUI, Jetpack Compose, and React might sound like duplicating work, but it’s not. The key is understanding shared principles, aligning development workflows, and using a declarative approach for UI. By adopting similar patterns and structures, developers can streamline logic implementation across platforms without losing the native touch.

Conclusion

Building apps natively with SwiftUI, Jetpack Compose, and React can be an efficient alternative to using cross-platform frameworks like React Native. With shared principles, consistent state management, and a declarative approach, developers can harness the full power of each platform, avoiding the limitations and dependencies of cross-platform tools. The result? A better, smoother, and fully native user experience tailored for iOS, Android, and the web.