INTRODUCTION

Introduction to Frameworks
Slides 01
Intro
•Native frameworks such as Android and iOS SDKs
are rock solid. They are the most stable choice for
mobile application development. They have lots
of available apps that are deeply tested and have
a large community and openly available tutorials.
•Thefollowing diagram displays the working of
native mobile application development
frameworks:
Native Platform

• The app in this framework talks directly to the system.

This makes the native framework the most powerful
choice in terms of functionality. However, it does have a
drawback: you need to learn two different languages,
Kotlin or Java for Android, Obj-C or Swift for iOS and the
SDKs.
WebView Systems (hybrid)
• We have the cross-platform approach, which is
famous for being productive. In this approach, we
can get the application for both Android and iOS
from a single code base, just like in Flutter. But
every framework has some drawbacks.
•Cordova-, Ionic-, PhoneGap-, and WebView-based
frameworks in general are good examples of
cross-platform frameworks, and they are
especially good solutions for frontend developers.
But these lack in performance, and the app view
in these approaches is composed by a WebView
rendering HTML; this means that the app is
basically a website.
•Cross-platform solutions such as Flutter
Pros and Cons
of using native over cross-platform
• Pros:
1. Performance
2. Full platform feature access
3. Closer alignment with expected user experience
•Cons:
1. Multiple code bases
2. Multiple development teams
3. Project Management: where the resources are not fungible (that is,
you cannot move a developer from one team to another) can lead
to complications in ensuring feature parity and defect resolution.
4. Differentiated defect reports
5. Feature parity complexities and alignment on product vision
6. Expense to move to a new platform
7. Complexities of moving off a failing platform
8. Different platforms having different features
Hybrid problems
• Once you move away from native development, you
introduce certain risks, such as the following:

1. The software bridge having slow performance or

deep, difficult to diagnose bugs
2. The transpilation process having deep, difficult to
diagnose, bugs
3. A lack of access to key platform features
WebView
• Thesystem uses a bridge to make the switch between
JavaScript to the native system. This process will be
too slow, depending on the features you need, which
adds another drawback to this system.
React Native
•ReactNative could be considered as one of the
best of the cross-platform frameworks, but it
heavily relies on OEM components. Lets take a
look at the workings of React Native:
React Native
React Native expands the bridge concept in the
WebView systems, and uses it not only for
services, but also to build widgets. This is really
dangerous in terms of performance; for example,
a component may be built hundreds of times
during an animation, but due to the expanded
concept of the bridge, this component may slow
down to a great extent. This could also lead to
other problems, especially on Android, which is the
most fragmented operating system.
Flutter
Flutter performs much better in comparison to other
solutions, because the application is compiled AOT
(Ahead Of Time) instead of JIT (Just In Time) like the
JavaScript solutions. It also eliminates the concept of
the bridge and does not rely on the OEM platform. It
does allow custom components to use all the pixels in
the screen. What does this mean? It basically means
that the app displays the same on every version of
Android and iOS.
Flutter
• Flutter eliminated the bridge and the OEM platform
and uses Widgets Rendering instead to work with the
canvas and events. And it uses Platform Channels to
use the services. In addition, it is not difficult to use
platform APIs with an asynchronous messaging
system, which means if you need to use a specific
Android or iOS feature, you can do it easily.
• Flutter also makes it possible to create plugins using
channels that can be used by every new developer.
• Flutter is a very useful tool to create mockups and
prototypes, which is a pro, as it is a good point of
contact for both designers and developers, two roles
often very distant from each other.
Flutter vs. React Native
React Native is open source, by Facebook
It is a popular framework mainly because it reuses the technologies
and methodologies of the React web framework. It uses JavaScript
for the general app look and feel, and then Java or Swift to write
native modules for the more complex features such as image editing.
The motto of the framework is "Learn once, write anywhere," unlike
the Flutter vision of writing once and running everywhere. This is
because the native modules are not reusable across the platforms,
leading to different code bases.
Like Flutter, React Native has hot reloading, allowing fast
development.
Performance wise, the general view seems to be that React Native is
slower than Flutter. There are many reasons for this, but the fact that
Flutter is compiled to native libraries whereas React Native has a
JavaScript layer seems to be a key contributor.
Flutter
• According to the survey, 42% of 31,743 developers
use Flutter to create applications.
• Google says that 500,000 developers use Flutter daily.
And in the overall picture, Flutter has 2 million users
today. Its rapidly increasing market makes Flutter one
of the best software to learn in 2024.
Xamarin
• Xamarin is open source by Microsoft
• Xamarin uses .NET technologies and the C#
programming language. When using Xamarin Native,
you get all the performance benefits of native apps, but
the user interface code is platform specific, so roughly
75% of the code base is shared. This means knowledge
of native languages is required in addition to Xamarin.
• LikeReact Native and Flutter, Xamarin supports hot
reloading to allow faster rebuild and testing.
• Considerations for the Xamarin approach are that the
licenses can be expensive, especially for an enterprise.
Additionally, the Xamarin community is much smaller
than the React Native and Flutter communities
Cordova
• Apache Cordova takes the web technologies of HTML, CSS,
and JavaScript and allows them to run on mobile apps.
Formerly PhoneGap, Cordova is itself more of a platform that
allows frameworks to run within it, such as Ionic:
• The Cordova app runs within a WebView, which is like a built-
in browser for each platform. This means that, unlike React
Native and Xamarin, all the code is cross-platform. However,
a major issue is that the WebView implementations for
different platforms can be subtly different, leading to
inconsistencies and bugs in the user interface.
• Additionally,depending on WebView performance, the app
can run slowly, especially on graphic-intense apps. As an
added complication, the WebView can be different on different
versions of the platform, so performance and user interfaces
can be different on different versions of the platform.
 FLUTTER
is an UI toolkit for building natively
compiled applications for mobile,
desktop and web with a single
codebase.
Dart
•Flutter,
and the Dart programming language it
depends on, were created by Google and Dart
seems to be the perfect match for the following
reasons:
Dart compilation
Dart is flexible enough to provide different ways of
running the code, so Flutter uses Dart ahead of time
(AOT) compilation with performance in mind when
compiling a release version of the application, and it
uses just in time (JIT) compilation with sub-second
compilation of code in development time, aiming for
fast feedback for code changes. Dart JIT and AOT refer
to when the compilation phase takes place. In AOT,
code is compiled during the build process and before
running the code; in JIT, code is compiled while
running.
Dart
1. High performance: Due to Dart's support for AOT
compilation, Flutter does not require a slow bridge between
realms (for example, non-native Flutter code to native device
code), which makes Flutter apps responsive and allows a fast
startup.
2. Garbage collection: Flutter uses a functional-style flow with
short-lived objects, and this means a lot of short-lived
allocations. Dart garbage collection works without locks,
helping with fast allocation.
3. Easy to learn: Dart is a flexible, robust, modern, and
advanced language. The language has been adapted as Flutter
has become more popular, with lots of syntactic sugar, and
fundamental design changes, that really help with Flutter app
creation. Although it is still evolving, the language has a well-
defined object-oriented framework with familiar functionalities
to dynamic and static languages, an active community, and
very well-structured documentation.
Dart
4. Declarative UI: In Flutter, you use a declarative style to lay
out widgets, which means that widgets are immutable and are
only lightweight "blueprints." To change the UI, a widget
triggers a rebuild on itself and its subtree. In the opposite
imperative style (the most common), we can change specific
component properties after they are created.
5. Dart syntax for layout: Different from many frameworks that
have a separate syntax for layout, in Flutter, the layout is
specified inline within the Dart code. This gives greater
flexibility and reduces the developer's cognitive load. Flutter
has great tools for debugging layout as well as rendering
performance.
6. One code base to rule them all: The primary goal of the
Flutter framework is to be a toolkit for building apps that are
equivalent in performance, usability, and features to native
apps
Flutter Strengths and
Weaknesses

Strengths:
• Hotreload: Flutter has the best hot reload functionality
(equal to React Native and Xamarin), and this is a huge
productivity benefit.
• Single code base: Of all the options available, only a couple
(Flutter and Cordova) truly have a single code base that will
work across platforms. As discussed, this helps hugely with
project management, defect resolution, and new platforms
becoming relevant or old platforms being retired.
• Project vitality: Flutter has a very active community with a
huge range of community plugins, easy ways to ask
questions, and the most activity on Stack Overflow. If this was
a concern, it should have been mitigated somewhat by our
exploration of the community.
Flutter Strengths and
Weaknesses

Strengths:
• Performance: Dart compiling to native and the lack
of a software bridge ensure that Flutter, if not as
performant as native, is more than sufficient for apps.
• Documentation: The documentation on Flutter is
excellent. Compared to some other cross-platform
frameworks, the Google team, and the plugin writers,
have worked hard to ensure that Flutter is very well
documented.
Flutter Strengths and
Weaknesses

Weaknesses:
• New framework: Flutter is relatively new and
although that means it can learn from what has come
before, it also means that there are lots of changes
that can impact backward compatibility.
• App size: As mentioned in the native discussion, a
minimal Flutter app is already 5 MB. This is
comparable with other cross-platform frameworks, but
significantly bigger than native apps.
Flutter rendering
• One of the main aspects that makes Flutter unique is the
way that it draws the visual components to the screen.
Flutter chooses to do all the rendering work by itself. The
only thing it needs from the platform's SDK is access to
Services APIs and a canvas to draw the UI on
THE END