Discussing the architectural solution: Micro-frontends with iframes

Cand avem deaface cu UI-uri compuse din mai multe componente dezvoltate fiecare in limbaje/solutii diferite, cam cea mai la indemana solutie sa le pui cap la cap, adica sa le integrezi intr-un singur web App/UI, ar fi solutia cu iframes.

Mergand mai departe cu ideea asta, am realizat ca ar putea fi dezvoltata si mai mult de atat.

Si mai exact, sa luam urmatorul exemplu:

Avem o aplicatie de Unity care se build-uieste pe iOs si Android. Ideea este ca in Unity, chestiile banale cum ar fi niste form-uri, adica, in general, partea de UI, ar lua mai mult timp pentru cineva din zona de web, care e obisnuit cu HTML/CSS/JS, decat sa le dezvolte in Unity.

Prin urmare, ma gandeam la o idee de arhitectura, general valabila, in care o parte din aplicatia mobila (sa zicem o serie de screen-uri), care nu presupune interactiune hardware cu device-ul, sa fie doar un iframe/webview dintr-un JS web app.

Ce limitari credeti ca ar exista? Care ar fi concern-urile ?

Nu cred ca iframe te va ajuta cu ceva.

Poate incerci asta

Nu prea asi merge in directia cu iframes deoarece intri in tot felul de probleme de securitate cand vrei sa faci componentele sa comunice intre ele, probleme de rendering etc… varianta cu iframes e potrivita pentru widget-uri externe pe care vrei sa le integrezi la tine pe site.
Daca ai deja un stack anume parerea mea este sa folosesti unul singur (oricare ar fi el, react/angular/vue) si foloseste peste tot, vei avea mai putine batai de cap.

Daca vrei sa mergi inainte cu iframe recomand sa te uiti peste Zoid, o libraria de la Paypal pentru lucrul cu iframes

2 Likes

Am folosit varianta cu iframes pentru un application shell, e ok dacă îți faci un framework pentru el (zoid sau altceva) dar testarea automată se complica rău de tot. Mock-urile sunt horror și trebuie duplicate în fiecare librărie. Mai introduce tot felul de probleme cu permisiunile, cookie, OAuth în iframe dacă cumva ai lucruri de pe domenii diferite.

Nu există o arhitectură bună care să fie universală. Cel mai mult react native se aproprie cu web render combinat cu native, dar atenție comunicarea va fi asincronă.

Shopify are ceva framework să încarci componente de react în webview la native on the fly. (Ca să faci propriile extensii la aplicația lor)

Acum pe browser poți să te folosești de module și să încarci lazy doar ce ai nevoie, asta se poate face cu nx. Încarci aplicația principală și în funcție de path încarci librăriile. Pentru comunicare folosești ceva state manager global, localStorage.

Limitarea principală e testarea, după state-ul trebuie sincronizat. La UI poți avea probleme cu randarea fonturilor, scalarea, componente inconsistente. Dacă ai componente foarte legate de modul cum se iau datele vei duplica logica pentru luarea datelor.

1 Like