Event Recap: React Native & Flutter Hybrid Meetup

We held our first hybrid React Native and Flutter Meet-up at the GeekyAnts office on September 3, 2022.
Chayan
Sep 9

We recently hosted 50+ developers in the first React Native & Flutter hybrid meetup. We discussed the latest developments in the two technologies, explored future trends, and revealed details of two experimental projects at GeekyAnts. 

In this article, we have put together the key talking points from each speaker and their presentations.

Topics & Tech Spotlight

Flutter and React Native hybrid meetup

State of React Native

Speaker: Shivraj Kumar, Associate Director of Engineering, GeekyAnts

The new architecture of React Native enhances the capabilities of React Native and increases the quality of the development experience. As a result, we forecast its popularity rising. Also, accessibility has become a key focus for the community. It needs to stay that way.

Recent releases by Expo — EAS Build System, Config plugin, and Expo modules — solves the difficulty of using native modules with Expo. This is a  huge popularity boost factor for the Expo ecosystem. The new Expo CLI, which is 4X faster than the current CLI, will also do the same. It is local and fully bundled with the project, reducing project timelines.

The new Expo-metadata is an exciting ongoing beta. It will simplify the uploading of apps to stores by bringing information distribution from the development stage. Figuring out missing information and compliance gaps will be a piece of cake.

Other exciting developments are the release of FlashList and Skia. They will be a big boost to the “Many Platform Vision” of React Native.

Results with the new React Native architecture

Speaker: Saurabh Kumar, Software Engineer, GeekyAnts

Users can create their turbo modules with the new React Native architecture (which requires interfaces written in a typed dialect of JavaScript). These specifications will be used by Codegen to generate code in strongly typed languages.

Recent changes to the architecture have also seen a shift from bridge-based architecture to JSI. This ensures smoother scrolling and better implementation of the Fabric view manager.

The future of React Native's new architecture model is bright. There are projections for an impressive load time of 0.86 sec and application storage of 106 MB.

Performance in React Native

Speaker: Rajesh De, Software Engineer, GeekyAnts

React Native’s performance has always worried developers. The limitation of Flatlist is a great example. And while solutions like removeClippedSubviews, maxToRenderPerBatch, windowSize, and getItemLayout exist, it still does not provide an easy user experience. 

Flashlist is a great alternative to flatlist as it breaks free from the cycle of mounting and unmounting processes. It just changes the new item in the same component that has been mounted. This increases performance by a great margin.

The Hermes JS engine will be a game-changer for boosting performance, especially for low-end devices. It has the ability for adapting garbage collection on demand, replace the JIT compiler with an AOT compiler, and precompile source code into bytecode.

Using a bundle visualizer tool can also help in benchmarking performance by assisting in determining the size of each package used in the application.

What’s New in Flutter

Speaker: Pushkar Kumar, Software Engineer, GeekyAnts

Flutter3.0, with already 5600+ pull requests, is a steep performance improvement compared to other versions. There's a lot to look forward to with updates to frameworks, packages, development tools, extensions, performance, and API. There is also a possibility for the introduction of global selection on the web, Material Design 3, and Impeller, the new graphic engine.

Dart 2.18 is another significant development to track. It delivers improved interoperability, type inference, and null safety updates.

We, at GeekyAnts, have always focussed on open source contributions. Our GitHub is a testimony to our community. The goal is to continue the same momentum for Flutter.

Addition of interactive live streaming to your Flutter app to improve user retention

Speaker: Aditya Thakur, Open Source Contributor, Speaker at Flutter Vikings, Flutter Global Summit

Live events, webinars, and video conferencing will continue to rise in popularity. This makes adding interactive live online streaming to Flutter applications critical for increasing user retention. 

The HLS streaming feature, which can be enabled by importing the HMS SDK, is a great example of creating one's live streaming platform. Another unique prospect with ground-breaking significance is the 100MS platform and its compatibility with Flutter and React Native, respectively.

Platform Channel - Communicate Flutter with Native Code

Speaker: Vishal Singh, Flutter developer, GeekyAnts

The idea of integrating Native SDKs with Flutter is intriguing. It can be achieved by using DartSDK as a plugin and passing the method call and binary encoded signal to their respective hosts.

Special care must be taken to ensure seamless integration, particularly to mitigate the effects of platform change and the visible differences.

NativeBase for Flutter

Speaker: Hasnen Tai, Flutter developer, GeekyAnts

We are experimenting with Flutter to recreate what we did for React Native with NativeBase. This is to create a codebase that is concise and promotes rapid production.

The project is still in its early stages, yet showing promising results. Currently, we have removed limitations in using themes and introduced options for using tokens. 

We have also open-sourced packages from GeekyAnts for Flutter developers to explore, experiment, and contribute.

Twitter Space clone

Speaker: Ruchika Gupta, Tech lead, GeekyAnts

Using a 100 ms SDK in Flutter and a fire-base subscription, we are working on a Twitter space clone. This new application is packed with significant improvements to Twitter's current functionality, such as the addition of raising the hand and reporting a speaker.

The app’s name is SpeekUp.

Panel Discussion: Differences in React Native & Flutter

The meetup concluded with a panel discussion with Sanket Sahu, CEO of GeekyAnts. It was focused on the contrasts between Flutter and React Native. The panel consisted of Hasnen Tai, Ruchika Gupta, Shivraj, and Suraj Ahmed. 

Key takeaways:

  • All basic APIs are available in Flutter web, but performance-wise there is still a lot to do. SEO problems and high-loading time are key issues. React Native web is more mature.
  • Having the same codebase is key to bringing better functionalities in Flutter
  • WebView requires proper guidelines to ensure its best use. Most applications today use it, but it is blended well with the native components that one cannot distinguish its presence
  • The React Native community is continually working to bring universality to the development process
  • Flutter and React Native are learning from each other and will ride on each other’s momentum
  • Think like a mobile dev, rather than a framework dev. It is important to keep the focus on the final output.

Wrap Up!

Communities and collaboration are key pillars of the GeekyAnts way. This meetup was a result of this philosophy. We plan to continue holding similar events in the future. 

To know more about what we do, check out our website and follow us on our social channels: LinkedIn, Twitter, and Discord.

You can watch the live event here: