Frontend platforms @ realestate.com.au

As our realestate.com.au audience has grown, so have the teams that build it. In this talk, I’ll present how we’re building and adopting micro frontends, design systems, and tooling together in our frontend platform products to build web and native experiences at scale. I’ll present the drivers behind our frontend platform strategy the lessons we’ve learnt along the way.

While microservices enabled REA to scale our technology and teams on the backend, our web and native apps have faced the scaling challenges of working in monoliths. Splitting out standalone experiences to solve this brought both technical and product divergence which led us to adopt an internal frontend platform strategy including design systems and micro frontends across React, iOS, and Android.

Transcript

1. How frontend platforms are helping us evolve realestate.com.au Stewart Gleadow Architect | realestate.com.au | @stewgleadow
2. Scaling journey ❯ Web platform ❯ Native platform ❯ Future direction ❯ Lessons ❯
3. Scaling journey ❯ Web platform ❯ Native platform ❯ Future direction ❯ Lessons ❯
4. • 129m monthly visits1 • 12.6m monthly users2 • 650 tech people • 60 squads • 75 initiatives (1) Nielsen Digital Media Ratings (Monthly Tagged), July-September 21, P2+, Digital (C/M), text, realestate.com.au vs Domain, Total Sessions. (2) Nielsen Digital Media Ratings (Monthly Tagged), July-September 21 (monthly averages), P2+, Digital (C/M), text, realestate.com.au, Unique Audience.
5. 2010 2015 2020
6. Year Number of Systems 2000 2005 2010 2015 2020 Building software at different scales
7. Centralise (high alignment) Decentralise (high autonomy) Hybrid (aligned autonomy & platforms) 2010 - 2013 2013 - 2018 2018 - present
8. Number of Systems Year Aligned at small scale Unconstrained autonomy 2000 2005 2010 2015 2020
9. 9 1. A mindset shift from local to company-wide tech thinking. 2. Approaching tech platforms as long-lived products.
10. Number of Systems Year Aligned at small scale Aligned autonomy Unconstrained autonomy Shifted to an internal platform strategy 2000 2005 2010 2015 2020
11. Different scaling journey for the front end Unique authors per system Pull requests per system Our main frontend systems for realestate.com.au
12. Scaling journey ❯ Web platform ❯ Native platform ❯ Future direction ❯ Lessons ❯
13. Monolith Micro UIs Micro Frontends Web Platform
14. Alignment Autonomy ~2018 Web 2021 ???
15. ConstructKit Monolith Micro UIs Web Platform Start with your design system
16. ConstructKit Start with the foundations
17. ConstructKit Build from the bottom up based on need
18. ConstructKit Business-level components are valuable (but later)
20. Start with your design system.
21. Monolith Micro UIs Web Platform Identify common web concerns Argonaut
22. Argonaut Capabilities Micro Frontends Tooling
23. Argonaut Routing Authentication Analytics Observability Experiment Webview Capabilities
24. Micro Frontends Argonaut
25. https://martinfowler.com/articles/micro-frontends.html Micro Frontends Argonaut
26. Branch deploys
28. Monolith Micro UIs Micro Frontends Web Platform
29. Used for 56% of realestate.com.au experiences Powers 28% of realestate.com.au frontends Saved an estimated 213,000 hours of effort 30-40% less code required after migration 60% faster build and deploy cycle
30. Scaling journey ❯ Web platform ❯ Native platform ❯ Future direction ❯ Lessons ❯
31. Alignment Autonomy Native
32. Monolith Modules Native Platform Nautilus ConstructKit
33. ConstructKit Use standalone demo apps for any native mobile libraries.
34. SwiftUI Jetpack Compose
35. Nautilus Capabilities Micro Frontends Tooling
36. Micro frontends Cocoapods Nexus Compile time integration
37. Monolith Modules Micro Frontends Native Platform
38. Integrated into all our mobile frontends Powers 5 separate micro frontends Helping drive visual consistency (and dark mode!) Fast feedback with fast local and CI build times
40. Authors by type of system Main apps Mobile platform Micro frontends
41. Make coffee Check slack/email Continue working
42. Commit and merge, early and often Batch up changes Total build times in CI for Main App vs Micro Frontends
43. Scaling journey ❯ Web platform ❯ Native platform ❯ Future direction ❯ Lessons ❯
44. Adopt: Continue to adopt and build out our frontend platform. Extend: Move towards building component-based experiences. Transform: Research Server Driven UI as a future direction. Where to from here…
45. And keep doing research…
46. Scaling journey ❯ Web platform ❯ Native platform ❯ Future direction ❯ Lessons ❯
47. Pick when to adjust your platform strategy. Mike Von, https://unsplash.com/photos/RvM_tS_C7sE
48. Treat your platforms as products.
49. Start with your design system.
50. Sensible constraints accelerate platform development.
51. Micro frontends are for organisational scale and decentralisation.
52. Scaling journey ❯ Web platform ❯ Native platform ❯ Future direction ❯ Lessons ❯
53. How frontend platforms are helping us evolve realestate.com.au Stewart Gleadow Architect | realestate.com.au | @stewgleadow