Event Recap: React Native & Flutter Hybrid Meetup
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
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:
Book a Discovery Call.