Router — mga batayan ng pattern ng routing sa iOS at Android

Ano ang Router: esensya ng pattern ng routing

Router — pattern na nagnekapkapsula ng lohika ng paglipat sa pagitan ng mga screen. Pangunahing ideya: Ang ViewController (o Presenter/ViewModel) ay hindi direktang tumatawag ng navigationController.pushViewController, kundi nagpapaalam sa Router tungkol sa intensyong lumipat. Nagpapasya ang Router kung aling ViewController ang gagawin at kung paano ito ipapakita. Maaaring simple ang Router (koleksyon ng mga paraan ng nabigasyon) o komplikado (may routing batay sa mga URL scheme, deep link, at push notification).

Tatlong approach sa Router — Router bilang serbisyo (global na Navigator-singleton), Router bilang bahagi ng modyul (approach ng VIPER), Router bilang protokol (abstraksyon para sa Coordinator). Global na Router — pagiging simple (isang instance bawat aplikasyon) — sikat sa maliliit na proyekto. Modular na Router — bawat feature ay may sariling Router — pamantayan ng VIPER at Clean Architecture. Protokol na Router — ginagamit sa Coordinator: RouterProtocol na may mga paraang push/present/pop/dismiss.

Kasaysayan ng pattern — Lumitaw ang Router sa mga web framework (URL Router — Rails Routes, Express.js) at inangkop para sa mobile development. Sa iOS, naging tanyag ang Router sa paglaki ng VIPER (2015-2017). Sa Android, Router — bahagi ng Jetpack Navigation (2018), ang pamantayang solusyon ng Google para sa nabigasyon. Ngayon ang Router ay hindi mahahati na bahagi ng bawat modular na arkitektura ng mga mobile aplikasyon.

Router sa iOS: implementasyon sa Swift

iOS Router — protokol na may mga paraan para sa iba't ibang uri ng nabigasyon. Binabalot ng pangunahing implementasyon ang UINavigationController. Maaaring pamahalaan ng Router ang mga modal na presentasyon (present/dismiss), push/pop sa stack ng nabigasyon, showDetail para sa Split View Controller at mga presentasyong buong screen (iOS 13+). Hindi gumagawa ng ViewController ang Router — tumatanggap ito ng handa na instance at ipinapakita ito. Ang paggawa ng ViewController ay ginagawa ng pabrika (Assembly, DI-container) o Coordinator.

// RouterProtocol para sa iOS
protocol RouterProtocol {
    func push(_ viewController: UIViewController, animated: Bool)
    func pop(animated: Bool)
    func popToRoot(animated: Bool)
    func present(_ viewController: UIViewController, animated: Bool)
    func dismiss(animated: Bool)
    func setViewControllers(_: [UIViewController], animated: Bool)
}

// Implementasyon ng Router sa pamamagitan ng UINavigationController
class NavigationRouter: RouterProtocol {
    private let navigationController: UINavigationController

    init(navigationController: UINavigationController) {
        self.navigationController = navigationController
    }

    func push(_ vc: UIViewController, animated: Bool) {
        if navigationController.presentedViewController {
            navigationController.dismiss(animated: false)
        }
        navigationController.pushViewController(vc, animated: animated)
    }

    func pop(animated: Bool) {
        navigationController.popViewController(animated: animated)
    }

    func popToRoot(animated: Bool) {
        navigationController.popToRootViewController(animated: animated)
    }

    func present(_ vc: UIViewController, animated: Bool) {
        navigationController.present(vc, animated: animated)
    }

    func dismiss(animated: Bool) {
        navigationController.dismiss(animated: animated)
    }

    func setViewControllers(_ vcs: [UIViewController], animated: Bool) {
        navigationController.setViewControllers(vcs, animated: animated)
    }
}

// Assembly — paggawa ng modyul na may Router
protocol ProfileModuleFactory {
    func makeProfileView() -> UIViewController
}

Router sa VIPER — bawat modyul ng VIPER ay may sariling Router na alam kung aling mga screen ang bubuksan mula sa kasalukuyang modyul. Gumagawa ang Router ng ViewController ng susunod na modyul sa pamamagitan ng pabrika at naglilipat ng kontrol. Router sa VIPER — tanging bahagi na naglalaman ng import UIKit (maliban sa View). Pinapasimple nito ang pag-test ng Presenter at Interactor: hindi sila umaasa sa UIKit.

Router sa Android: Jetpack Navigation Component

Jetpack Navigation Component — pamantayang router para sa Android, inirekomenda ng Google mula noong 2018. Ang nabigasyon ay tinukoy sa isang XML graph (nav_graph.xml): mga node (fragments, activities, destinations) at mga gilid (actions). Pinamamahalaan ng NavController ang mga transisyon: tumatawag ng FragmentManager.replace/add at namamahala ng back stack. Sinusuportahan ng Navigation Component ang deep link, argumento, animasyon ng transisyon at Safe Args para sa tipong-ligtas na paglipat ng data.

// nav_graph.xml — graph ng nabigasyon
<!-- @xml/nav_graph.xml -->
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/loginFragment">

    <fragment android:id="@+id/loginFragment"
        android:name=".ui.login.LoginFragment">
        <action android:id="@+id/to_home"
            app:destination="@id/homeFragment" />
    </fragment>

    <fragment android:id="@+id/homeFragment"
        android:name=".ui.home.HomeFragment">
        <argument android:name="userId"
            android:defaultValue="0"
            app:argType="integer" />
        <deepLink app:uri="myapp://home/{userId}" />
    </fragment>
</navigation>

// Kotlin — nabigasyon sa pamamagitan ng NavController
class LoginFragment : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        binding.loginButton.setOnClickListener {
            val action = LoginFragmentDirections.toHome(userId = 42)
            findNavController().navigate(action)
        }
    }
}

// Safe Args — tipong-ligtas na argumento
class HomeFragmentArgs : NavArgs {
    val userId: Int get() = arguments?.getInt("userId") ?: 0
}

// NavigationUI — integrasyon sa Toolbar, BottomNav, Drawer
class MainActivity : AppCompatActivity() {
    private lateinit var navController: NavController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val navHost = supportFragmentManager
            .findFragmentById(R.id.nav_host_fragment) as NavHostFragment
        navController = navHost.navController
        NavigationUI.setupActionBarWithNavController(this, navController)
    }
}

Deep link sa Android Navigation — Sinusuportahan ng Navigation Component ang tahasang deep link (PendingIntent + NavDeepLinkBuilder) at di-tahasang (sa pamamagitan ng intent-filter sa manifest). Ang deep link ay maaaring pumunta sa anumang node sa nav_graph. Pagproseso ng push notification: Gumagawa ang Notification ng PendingIntent na may NavDeepLinkBuilder na nagpapanumbalik ng back stack at nagbubukas ng nais na screen. Awtomatikong pinangangasiwaan ng Navigation Component ang mga button na Up/Back at ibinabalik ang gumagamit sa nakaraang screen.

URL Routing: routing ng Deeplink at Universal Link

URL Routing — routing batay sa mga URL scheme, deep link, at universal link. Nagrerehistro ang aplikasyon ng isang scheme (myapp://profile/42) o universal link (https://example.com/profile/42). Nagpa-parse ang Router ng URL, kumukuha ng mga parameter (userId=42) at binubuksan ang katumbas na screen. Pinapayagan ng URL Routing ang pagbukas ng aplikasyon mula sa labas: sa pamamagitan ng link mula sa website, email, push notification, QR code. Gumagamit ang iOS ng NSUserActivity + universal link, Android — intent-filter + deep link.

// URL Router — parsing ng deep link at nabigasyon
protocol URLRoute {
    var pattern: String { get }
    func navigate(parameters: [String: String], router: RouterProtocol)
}

struct ProfileRoute: URLRoute {
    let pattern = "myapp://profile/{userId}"

    func navigate(parameters: [String: String], router: RouterProtocol) {
        guard let userId = parameters["userId"] else { return }
        let profileVC = ProfileViewController(userId: userId)
        router.push(profileVC, animated: true)
    }
}

// URL Router — pagmamapa ng URL sa mga ruta
class URLRouter {
    private var routes: [URLRoute] = []

    func handle(_ url: URL, router: RouterProtocol) {
        for route in routes {
            if let params = matchPattern(route.pattern, url: url) {
                route.navigate(parameters: params, router: router)
                return
            }
        }
    }
}

Deep link routing sa praktika — dapat iproseso ng aplikasyon ang deep link sa tatlong estado: hindi pa nasimulan (pagsisimula na may deep link), nasa background (pagpapanumbalik mula sa background), aktibo (onNewIntent/SceneDelegate). Dapat wastong ibalik ng URL Router ang back stack: sa deep link sa screen ng profile, dapat pindutin ng gumagamit ang Back at bumalik sa nakaraang screen. Magkaiba ang pagproseso ng iOS at Android ng back stack — dapat isaalang-alang ng Router ang mga katangian ng platform.

Paghahambing ng Router sa Coordinator at Navigator

Router vs Coordinator — Sinasagot ng Router ang tanong na "paano ipapakita ang screen?" (push/present), Coordinator — "aling screen ang ipapakita?" (aling flow ang sisimulan). Router — kasangkapan ng nabigasyon, Coordinator — tagapag-ayos ng flow. Ginagamit ang Router ng Coordinator. Sa VIPER, ginagawa ng Router ang parehong tungkulin: nagpapasya kung saan pupunta at kung paano ipapakita. Sa MVVM-C, Router — hiwalay na protokol na ginagamit ng Coordinator. Hindi nagbubukod ang mga pattern, bagkus nagpupuno sa isa't isa.

Router vs Navigator — Navigator — lumang pangalan ng Router sa komunidad ng iOS. Sa mga naunang implementasyon, ang Navigator ay isang Singleton na klase na may mga paraan ng paglipat. Navigator — isang global na Router-singleton. Mas simple ang Navigator, ngunit lumilikha ng mga nakatagong dependensiya. Router sa mga protokol — mas nasusubok at modular. Ang Navigator ay angkop para sa mga proyektong walang mahigpit na arkitektura, Router — para sa Clean Architecture at VIPER.