For the third and final episode focusing on UI quality, Pascal is joined by Sara, Patrik and Aaron to discuss how design reviews happen at Facebook. Instead of looking at static screenshots alongside the code, reviews now include a dynamic representation of the view hierarchy that not only allows for inspection of properties but also directly highlights violations of Facebook's design standards for accessibility and usability. Learn how all of this grew out of a tool suite originally built for the web and much more in episode 32 of Inside Facebook Mobile.   Got feedback? Send it to us on Twitter (https://twitter.com/insidefbmobile), Instagram (https://instagram.com/insidefbmobile) and don’t forget to follow our host @passy (https://twitter.com/passy). Fancy working with us? Check out http://fb.com/careers.   Links: Podcast: Boz to the Future - https://tech.fb.com/introducing-boz-to-the-future-a-new-podcast-series-from-facebook-reality-labs/ Facebook Open Source on YouTube - https://www.youtube.com/channel/UCCQY962PmHabTjaHv2wJzfQ IFBM 29: Design Systems with Sriram - https://pca.st/u8r4u6h6 IFBM 30: Linting for Design Quality with Elle - https://pca.st/q336vyxe Sapienz: https://engineering.fb.com/2018/05/02/developer-tools/sapienz-intelligent-automated-software-testing-at-scale/ Jest - https://jestjs.io/ Timestamps: Intro 0:05 News: Boz To The Future 0:43 News: FBOSS ELI5 on YouTube 1:26 Interview Teaser 1:50 Interview Greeting 2:48 Sara Intro 3:10 Aaron Intro 4:15 Patrik Intro 4:43 UI Quality Team Mission 5:39 Shift Left Initiative 6:40 History of Quality Linting 8:08 Linting on Mobile 9:29 UIQR 15:17 Designer Diff Review 18:17 E2E Testing with Jest 25:55 Sapienz 27:12 UI Quality Scoring 29:17 Outro 41:16 Blooper 41:57

“What’s Facebook’s mobile architecture?” is a question we hear often. Instead of top-down MVC, MVW or MVVM, Facebook delegates the responsibility of choosing the right architectural patterns down to the engineers working on products. This episode's guests Yuan and Dustin pick up where Fabio left us in episode 28 and explain how the Product Foundation org builds abstractions that give engineers autonomy when they want and constraints for features to work cross-app when they need it. Links: IFBM 14 - Facebook iOS UI Infrastructure with Adam: https://pca.st/0qu2 IFBM 28: Modularising iOS Apps with Fabio: https://pca.st/episode/be165e38-74f3-449f-889a-eab14316c6ed Codemod: https://github.com/facebookarchive/codemod Fastmod: https://github.com/facebookincubator/fastmod ComponentKit: https://componentkit.org/ Litho: https://fblitho.com/ React Native: https://reactnative.dev/ Timestamps: Intro 0:06 Guest introductions 2:19 App Architecture 6:49 Codemodding 31:18 Shared Architectural Concepts 33:06 Building for Newsfeed 34:59 Scrolling Lists 41:41 Outro 55:43 Bloopers 56:36

We are continuing our focus on UI Quality from last episode and are diving deep into design linters. Elle and her team work on Facebook-internal Figma plugins that provide guidance on aspects like colours and usability of user interfaces. In the interview, Elle and Pascal discuss how the plugin leverages Facebook's web architecture to roll out changes quickly and how a shared REST API allows for rules to be used in multiple contexts. Got feedback? Send it to us on Twitter (https://twitter.com/insidefbmobile), Instagram (https://instagram.com/insidefbmobile) and don’t forget to follow our host @passy (https://twitter.com/passy). Fancy working with us? Check out http://fb.com/careers. Links Docusaurus 2.0 Beta - https://docusaurus.io/blog/2021/05/12/announcing-docusaurus-two-beta F8 - https://developers.facebook.com/f8/ Rapid release at massive scale - https://engineering.fb.com/2017/08/31/web/rapid-release-at-massive-scale/ Figma API - https://www.figma.com/developers/api GraphQL - https://graphql.org/ Relay - https://relay.dev/ Timestamps Intro 0:06 News: Docusaurus 2 News: F8 1:59 Elle introduction 2:13 Shift Left Initiative 3:32 UI Layout Linters 6:03 Figma Plugins 14:20 Outro 27:26 Bloopers 28:23

To improve consistency across our family of apps, engineers have built a large number of reusable components. But how do designers communicate to engineers which component to use? How do you keep the look consistent across our various frameworks? How do you make sure that documentation stays up-to-date? The way we always do: by building tools. Sriram from the Design Systems Engineering team talks about how their org solves the design-engineering handoff problems and improves the overall UI quality of Facebook apps. They work on a suite of tools that spans from providing access to our components directly in design tools like Figma to metrics that tell developers about potential quality issues in their surfaces. Tune in to learn directly from Sriram how we attempt to solve design at scale. Links: F8 Refresh: https://www.f8.com/ Flipper: https://fbflipper.com/ Facebook Open Source on YouTube: https://www.youtube.com/c/FacebookOpenSource Storybook: https://storybook.js.org/ InVision Design System Manager: https://www.invisionapp.com/design-system-manager Figma: https://www.figma.com/ Timestamps: Intro 0:06 Interview 2:39 Outro 30:17

Fabio joins Pascal to go deep into a listener question: How does Facebook modularise iOS applications? After discussing the state of the iOS build systems and package managers out in the wild, they turn to Buck, Facebook’s monorepo build system, and how it helps developers to define clear module boundaries. One of the problems when a new module is only one new folder away are dependency graphs which look like a big ball of spaghetti. Thankfully, Buck offers some ways of taming sprawling graphs before they get out of control.   Topics: Litho: https://fblitho.com/ Litho RenderCore: https://github.com/facebook/litho/tree/master/litho-rendercore Flipper: https://fbflipper.com/ ComponentKit: https://componentkit.org/ Pragma​ Conference 2016 - Fabio Milano - 'I have a framework idea' - Repeat less, share more: https://www.youtube.com/watch?v=ml6NSv5wDRU Buck: https://buck.build/ Spiritfarer: https://www.imdb.com/title/tt12924108/ Ori and the Will of the Wisps: https://www.imdb.com/title/tt8329350/

Garima joins Rachel (@rachelnabors) and Pascal (@passy) to discuss the challenges of building custom layouts for notifications in a fragmented Android ecosystem. They discuss how sampled data helps to ensure that our billions of daily active people get the best possible experience and users on older phones aren’t left behind. If you ever wondered what the “useful” and “not useful” buttons on Facebook notifications actually do and how you clicking on them could help not just you, but all people on Facebook have a better experience, listen in! Please do send us feedback! You can reach us via email mobilepodcasts@fb.com, Twitter (@insidefbmobile) or Instagram (insidefbmobile). Timestamps Intro 0:06 Garima early days at FB 1:16 Notification Infrastructure 5:21 Outro 46:12 Bloopers 46:46

Rachel (@rachelnabors) and Pascal (@passy) are back for another interview about Android infrastructure at FB. Thomas joins them to share how the internal Kotlin adoption has progressed since the last time we checked in with Sergey on the topic. In the deeply technical discussion, the three discuss how ABI generation speeds up builds, which Kotlin language features still need to be used with caution and what a plan to 100% Kotlin for Android might look like.   Please do send us feedback! You can reach us via email mobilepodcasts@fb.com, Twitter (@insidefbmobile) or Instagram (insidefbmobile). Topics React 17: https://reactjs.org/blog/2020/10/20/react-v17.html React Native docs update: https://reactnative.dev/blog/2020/07/23/docs-update ktfmt: https://github.com/facebookincubator/ktfmt Timestamps Intro 0:00 News 1:00 Interview 7:28 Outro 44:44 Bloopers 52:29

For another socially distant interview, Pascal and Rachel are joined by Martin and Kevin who work on Instagram Reels, which had its global launch just a few weeks ago. They lift the veil on country tests, what makes stitching videos seamlessly together so hard on Android and iOS and share their thoughts on the short-form video space in general. You will also learn why doing the simple thing first really pays off when working on complex projects. Before the interview, Pascal walks you through the recent events in the Facebook Open Source space. Please do send us feedback! You can reach us via email mobilepodcasts@fb.com, Twitter (@insidefbmobile) or Instagram (insidefbmobile). Topics Hermes: https://hermesengine.dev/ Facebook Open Source on YouTube: https://www.youtube.com/channel/UCCQY962PmHabTjaHv2wJzfQ Docusaurus v2: https://v2.docusaurus.io/ Timestamps Intro 0:05 News 1:16 Interview 3:32 Outro 43:02 Bloopers 43:45

Inside Facebook Mobile is back for a special interview with the team behind the Facebook COVID-19 Info Centre. Chang, Jarman and Zaven share their experiences of building and shipping a global product like this over the course of just a few weeks. We discuss how the early architectural decisions enabled the seamless collaboration with tens of teams that were all working remotely.   Before we get to the interview, Mihaela joins Pascal for a quick check-in on Litho, the native UI framework for Android, and Flipper, an extensible dev-tools platform for mobile.   Please do send us feedback! You can reach us via email mobilepodcasts@fb.com, Twitter (@insidefbmobile) or Instagram (insidefbmobile). Topics COVID-19 Hub: https://www.facebook.com/covid-19 Litho: https://fblitho.com/ Flipper: https://fbflipper.com/ Timestamps Intro 0:06 News: Litho 1:09 News: Flipper 4:31 Interview 7:27 Post-Interview 35:36 Outro 37:50 Bloopers 38:14

With large-scale public events seeming rather distant right now, the concept of virtual conferences is an exciting way to stay in touch with people and learn new things. Pascal is joined by the organising team of the Women of React conference, where women take the virtual stage, but everyone is welcome to attend and participate. Cassidy, Sara, Kevin, Jenn and our very own Rachel share how they came up with the idea and what you need to kick off your own online conference.   The conference will happen on Saturday, April 25, 2020 and you can register for free at https://womenofreact.com/.   Please do send us feedback! You can reach us via email mobilepodcasts@fb.com, Twitter (@insidefbmobile) or Instagram (insidefbmobile).   Topics Women of React: https://womenofreact.com/ event.Handler() pod: https://eventhandlerpod.com/ Board Game Arena: https://boardgamearena.com/ Timestamps 0:00 - Intro 1:54 - Interview 27:28 - Outro