Achieving peak performance in Flutter applications is a pursuit that requires careful planning, optimization, and strategic decision-making. In this article, we present a comprehensive guide to strategies that will help you deliver smoother, more responsive, and more efficient apps. Use our tips to optimize your creations and unlock the full potential of Flutter.

Excessive layout nesting

When we talk about excessive layout nesting, we refer to the practice of layering multiple widgets, one inside the other, often leading to a complicated widget tree. While Flutter’s flexible and expressive nature permits you to create intricate layouts, it’s essential to strike a balance between complexity and simplicity.

There are multiple drawbacks to excessive nesting:

1. It can lead to decreased performance as Flutter must traverse a deep widget tree during the rendering process, consuming more memory and processing power.
2. It makes your code harder to read, understand, and maintain.
3. It may result in unintentional bugs and hinder your ability to make quick modifications to the UI.

To mitigate these issues, Flutter developers should employ techniques like using layout widgets in moderation, employing the LayoutBuilder widget when necessary, and keeping a watchful eye on the widget tree’s depth. It’s crucial to prioritize the use of widgets that serve specific layout purposes, such as Column, Row, and Stack while avoiding excessive reliance on generic containers like Container and Padding.

By adhering to a strategy that minimizes excessive layout nesting, developers can create Flutter applications that are not only high-performing but also maintainable and adaptable, ultimately leading to a superior user experience and a streamlined development process.

Image compression

Image compression in Flutter is a crucial optimization technique employed to enhance application performance and minimize resource consumption. It involves reducing the file size of images without compromising their visual quality. By effectively compressing images, Flutter developers can create applications that load faster, occupy less storage space, and conserve network bandwidth.

When implementing image compression in Flutter, developers can choose from a range of strategies, including lossless and lossy compression techniques. Lossless compression retains the image’s original quality while decreasing its size, making it suitable for graphics that require high fidelity. Lossy compression, on the other hand, achieves higher compression ratios by sacrificing some quality, making it more suitable for images where a slight reduction in quality is acceptable.

Flutter provides developers with various packages and plugins, such as the flutter_image_compress package, to facilitate image compression^[1]. You can also use external tools to convert images into more efficient formats, such as WebP. These solutions enable you to adjust parameters like image format, quality, and resolution, tailoring the compression to your specific needs.

Source: https://seomelbourne.com/seo-optimisation/webp-image-format-speed-up-website/

Moreover, responsive design techniques can be combined with image compression to load images of different resolutions and sizes based on the device’s screen size and resolution. This further optimizes performance by reducing unnecessary data transfer and rendering of oversized images.

Lazy loading

This strategy helps manage and improve the performance of your applications by deferring the loading of images and data until they are actually needed. This approach is particularly useful when dealing with extensive lists or grids of items, such as those found in news feeds, galleries, or data-heavy applications.

In Flutter, lazy loading of images and data works by loading content on-demand as it comes into the user’s view rather than preloading everything at once. This strategy conserves resources, reduces data usage, and speeds up the initial app loading time. Lazy loading is particularly advantageous when dealing with large datasets or remote resources. By fetching data incrementally, you avoid overwhelming the device’s memory.

A popular example of a mobile application using infinite scroll is Instagram:

Source: https://peppermintcreate.com/what-does-infinite-scroll-mean-for-adword-users/

Minimizing memory usage

To minimize memory usage and prevent memory leaks, developers should focus on proper resource disposal, such as closing streams and controllers when they are no longer needed. Additionally, using Flutter’s static analysis tool and memory profiling tools can help identify and address memory-related issues.

It’s crucial to avoid global variables and singletons that may lead to long-lived objects in memory and to consider using efficient image-loading techniques, stateless widgets, and isolates for heavy computations.

Code splitting

Code splitting is a technique used in Flutter to optimize application performance by dividing the codebase into smaller, more manageable chunks. The goal is to load only the necessary code and assets, reducing the initial load time and memory usage.

A common approach to code splitting in Flutter is to break down the app into modules or features, each containing its own set of code, assets, and dependencies. These modules can be loaded dynamically when needed, allowing you to delay the loading of less frequently used features until they are actually required.

By splitting your codebase into smaller, logical units, you can achieve several benefits. First, it reduces the initial app load time, as only the essential code is loaded upfront. This is particularly advantageous in scenarios where users expect a quick app launch. Second, memory consumption is optimized because unnecessary code and assets are not loaded into memory until requested. Finally, it improves code maintainability by enforcing a clear and modular structure, making it easier to develop and maintain your application.

In Flutter, code splitting is often implemented using the previously mentioned concept of lazy loading. This is particularly useful when dealing with large applications with many screens, widgets, and resources.

Caching and local storage

Caching involves storing frequently accessed data, such as images, API responses, or other resources, in a local cache. It can be in-memory or on-disk and allows your application to quickly retrieve data without the need to fetch it from a remote server repeatedly.

Local storage, on the other hand, refers to the storage of persistent data on the device itself. It is especially useful for retaining user preferences, settings, and app-specific data. Flutter provides the shared_preferences package for straightforward key-value storage and the sqflite package for working with SQLite databases, allowing you to store structured data locally.

Combining caching and local storage can significantly enhance your application’s performance. By caching frequently used data, you reduce the need for frequent network requests, which can be time-consuming and resource-intensive. Local storage enables you to store data that should persist across app sessions, improving the user experience by preserving user preferences and application state.

7.   Multithreading

It is a crucial technique in Flutter for optimizing performance and responsiveness in applications. It involves running multiple threads of execution at the same time, allowing tasks to be performed in parallel. While Dart, the language used in Flutter, has built-in support for asynchronous programming, multithreading provides an additional level of control over concurrent operations.

In Flutter, multithreading is often used to perform time-consuming tasks without blocking the user interface (UI). This is critical to maintain the app’s responsiveness. By moving tasks like data fetching, image processing, or complex computations to separate threads, the main UI thread remains free to handle user interactions and maintain a smooth user experience.

Multithreading in Flutter is particularly beneficial for tasks like decoding images, deconstructing complex data, and performing long computations. By running these tasks in separate threads, you ensure that the UI remains responsive and the user experience is smooth, even when dealing with resource-intensive operations.

However, it’s important to manage communication between threads carefully to prevent data race conditions and other concurrency-related issues, ensuring that multithreading enhances your application’s performance and doesn’t introduce new problems.

State management

State management is a fundamental concept in Flutter that revolves around efficiently handling and updating the data and user interface of an application. It’s essential for building responsive and dynamic applications and avoiding unnecessary re-rendering. Flutter offers various state management techniques, allowing developers to choose the one that best fits their project requirements.

At its core, state management involves managing and sharing the application’s state or data between different parts of the application, such as widgets, screens, or modules. The state can be categorized into two main types:

• Local State – concerns data that is specific to a particular widget or a small portion of the application. Widgets manage their local state using the State object, which allows them to update and refresh their own content without affecting other parts of the application. This is often suitable for simple applications or small, self-contained widgets.
• Global State – also known as app-wide state, refers to data that needs to be shared and accessed across multiple widgets, screens, or even the entire application. Managing the global state effectively is essential for complex applications. Flutter offers various management solutions to handle global state, including Provider, Riverpod, BLoC, and GetX.

Performance testing

One primary aspect of performance testing in Flutter is assessing the app’s rendering speed. This involves measuring how quickly the app can render its user interface, taking into account factors like the frame rate (measured in frames per second, or FPS) and the time taken to build and display each frame. Performance testing tools and packages, such as the built-in Flutter DevTools, help developers monitor rendering performance and identify areas that may need improvement.

Another key consideration in performance testing is evaluating the app’s memory usage. Monitoring memory consumption helps identify potential memory leaks and resource inefficiencies. You can use Flutter DevTools and memory profiling to analyze memory allocation and ensure that the app releases resources appropriately, preventing crashes and slowdowns.

Source: https://dart.dev/tools/dart-devtools

Network performance is also crucial in Flutter applications. Performance testing involves examining the app’s behavior when interacting with remote servers or APIs. It assesses response times, data transfer efficiency, and error handling under various network conditions, ensuring that the app provides a seamless experience for users, even in less-than-ideal network environments.

Performance testing further extends to app startup times, navigation speed between screens, and responsiveness to user interactions. It also helps catch and fix any issues early in the development cycle, reducing the risk of performance-related problems in the final product. These aspects are vital for delivering a snappy and engaging user experience.

Animation optimization

One fundamental principle of animation optimization in Flutter is to minimize the use of heavy or excessive animations. Overloading an application with too many such elements can lead to performance issues. It’s important to use animations purposefully and avoid redundant or distracting effects that do not contribute to the user experience.

To optimize animations in Flutter, consider the following:

• Use tween-based animations: They allow you to specify the beginning and ending states of an animation, enabling precise control over the animation’s behavior.
• Custom easing curves: Use them sparingly to achieve specific visual effects, but keep in mind that complex curves can impact performance.
• Minimize the number of animations: Reducing the number of animations (especially complex ones) helps maintain a fluid user interface.
• Frame rate considerations: For smooth animations, it’s generally recommended to target a frame rate of 60 FPS, but for less critical animations, you can use lower frame rates to conserve resources.
• Use GPU-based animations: They allow applications to maintain high frame rates, offload graphic-intensive tasks from the CPU, and implement complex visual effects efficiently.

Minimizing the use of external resources

This approach involves reducing reliance on external services, assets, and dependencies, which can lead to improved performance, reduced loading times, and greater control over your application.

One way to achieve this is by reducing external network requests. Fetching data from external APIs or servers can introduce latency and dependency on external services. By minimizing the number of network requests, you not only speed up data retrieval but also reduce the risk of network-related issues that can disrupt the user experience. Consider caching data locally to further decrease the need for repeated network requests.

When it comes to external assets, such as images or fonts, keeping them to a minimum can optimize your app’s size and loading speed. Utilizing techniques like image compression, vector graphics, and loading assets on-demand (lazy loading) can help manage external assets more efficiently.

Another aspect to consider is the moderate use of third-party libraries and dependencies. While Flutter has a rich ecosystem of packages and plugins, excessive reliance on external dependencies can bloat your app, increase maintenance complexity, and introduce compatibility challenges. It’s essential to evaluate whether the benefits of a particular dependency outweigh the costs and potential risks.

Opting in to new Flutter features

Opting into new Flutter features is an essential aspect of staying up-to-date with the latest enhancements and capabilities offered by the framework. It allows developers to leverage new features, improvements, and APIs that can streamline development and enhance application performance.

Flutter frequently releases updates and new versions with experimental features and improvements. To opt into these new features, developers can start by updating their Flutter SDK to the latest version. This ensures access to the most recent advancements and fixes. An interesting example is Flutter 2.0, which introduced null safety, a feature that helps eliminate a whole class of bugs.

Once updated, developers can selectively enable new features as needed in their Flutter applications. This can be done through feature flags and configuration options. These flags are typically provided by the Flutter team or specific packages and allow developers to experiment with new features while maintaining backward compatibility with older versions of Flutter.

Source: https://developers.googleblog.com/2021/03/announcing-flutter-2.html

Monitoring and error reporting

To effectively monitor your Flutter application, you can use various tools and strategies. These include integrating monitoring services like Firebase Performance Monitoring or Sentry, which provide real-time insights into app performance, network requests, and error tracking. Such services allow you to collect valuable data, monitor the app’s behavior, and identify performance bottlenecks.

In addition to third-party services, Flutter provides built-in tools for performance monitoring, such as Flutter DevTools. This suite of tools offers insights into the app’s rendering performance, memory usage, and network activity, allowing developers to identify and address issues that may impact the user experience.

Error reporting is a critical part of monitoring, as it helps you understand when and why your app encounters issues. Flutter developers can integrate error reporting services like Firebase Crashlytics or Sentry, which capture error logs, exceptions, and stack traces. This data is vital for diagnosing and resolving issues, as it provides detailed information about the context in which errors occur.

Source: https://medium.com/@jesuseguncaleb/why-you-need-firebase-crashlytics-in-your-flutter-apps-b4ef2eb4525

Minimizing the use of external plugins

When you minimize the use of external plugins, you get a more concise and independent codebase. This can facilitate the maintenance of your project, as you have fewer external integrations to manage and update.

Furthermore, you gain greater control over the functionality of your application. Relying less on external plugins means that you’re not bound by the limitations or update schedules of those packages. You can tailor your app’s behavior more precisely to your specific requirements.

However, it’s essential to strike a balance between minimizing external plugins and leveraging the rich ecosystem of Flutter packages. Some third-party plugins can significantly speed up development and offer valuable features that would be time-consuming to implement from scratch. So, choose only high-quality and well-optimized plugins for Flutter.

Optimizing a Flutter application for specific platforms

Each platform, such as Android and iOS, has its own unique characteristics and performance considerations. By tailoring your app to the specifics of the target platform, you can enhance the user experience and make the app feel native on each platform.

One of the differences between Android and iOS is that they handle rendering and animations differently. Understanding these nuances and addressing them appropriately is essential to delivering the best performance and user experience on each platform. If you develop an application for both Android and iOS, remember to tailor optimizations to the specific solution.

These are just basic strategies for performance enhancement in Flutter applications. They will help you effectively optimize your creations and unlock their full potential. Apply them to ensure exceptional experiences for your users!

Flutter, Google’s open-source UI software development toolkit, has revolutionized mobile app development with its promise of creating stunning, high-performance applications across multiple platforms. However, building an app is just the first step. To truly maximize the potential of a Flutter application, optimizing it for performance, efficiency, and user satisfaction is essential. In this article, we delve into the critical realm of optimizing Flutter applications from a business perspective.

How Flutter works

Flutter, a dynamic open-source UI toolkit developed by Google, stands as a beacon in the realm of multi-platform application development. Its core essence lies in harmonizing the process of crafting applications that resonate with diverse platforms while using a singular codebase. Flutter has swiftly gained traction within the developer community and the business landscape, offering an efficient and unified solution for cross-platform app development.

At Flutter’s heart lies the concept of unification through simplicity. Imagine crafting an application where a single codebase becomes the architectural blueprint for both the iOS and Android ecosystems. This not only speeds up the development cycle but also minimizes the complexities associated with managing separate codebases, ultimately enhancing efficiency and productivity.

Flutter makes it possible to easily create mobile apps and effectively improve them. The paramount importance of optimization lies in its ability to directly influence a mobile application’s success and adoption. A well-optimized application becomes a magnet for users, tempting them with swift responsiveness, an intuitive interface, and an immersive experience. On the other hand, a poorly optimized app can repel users due to sluggish performance, frequent crashes, and excessive resource consumption.

Optimization also plays an important role in managing the costs associated with app development and maintenance. By identifying bottlenecks and areas for improvement early in the development process, businesses can save valuable time and resources. This leads to faster development cycles, quicker bug fixes, and a reduction in long-term maintenance costs.

Why optimization is essential for business

Optimization emerges as a critical concept related to fine-tuning the inner workings of a high-performance engine. This process involves crafting an application to operate at its best capacity, ensuring efficiency, speed, and a seamless user experience.

One of the key aspects of mobile apps’ optimization is user satisfaction. The CX Trends Report says that more than 90% of consumers want to spend more time with brands that offer streamlined customer experiences^[1].

User satisfaction directly influences their engagement. A satisfied user is more likely to interact with the app regularly, delve deeper into its features, and invest more time in the application. This heightened engagement often translates into invaluable feedback, enabling developers to refine and enhance the app, thus fostering a continuous cycle of improvement.

Moreover, user satisfaction significantly impacts a crucial aspect of a mobile app’s presence: app store ratings and reviews. Positive user experiences lead to better rates, bolstering the app’s visibility and attracting more users. On the other hand, a dissatisfied user base can tarnish an app’s reputation, resulting in adverse effects on its overall success and adoption.

Furthermore, a content and satisfied user base is more likely to monetize the app effectively. Happy users are inclined to make in-app purchases, opt for premium subscriptions, or engage with advertisements. Thus, user satisfaction directly contributes to the app’s revenue stream and, by extension, the business’s financial success. An interesting example is Starbucks mobile app, which has led to a 26% increase in transactions^[2].

Source: https://www.indigo9digital.com/blog/starbucksmobileapps

In general, effective optimization lays the foundation for strong user retention. Users who find value and satisfaction in an app are more inclined to remain loyal and continue using it over an extended period. This consistent user base ensures stability and growth for the app, a key factor in its long-term success.

Optimization as a key factor in the competitive mobile apps market

New apps are downloaded 255 billion times a year. Moreover, daily app usage is 5 hours per user. No wonder that total revenue in the mobile applications market is projected to reach US$752,57bn in 2027^[3].

In this competitive market landscape, user expectations are at an all-time high. Consumers demand swift and seamless experiences from the applications they use. An optimized mobile app meets these expectations head-on, offering faster load times, smooth interactions, and efficient use of device resources. This translates into a competitive advantage by attracting and retaining users who seek superior performance and a positive experience.

On the flip side, maintaining unoptimized applications can be financially burdensome. These applications are often plagued with performance issues, leading to higher bounce rates, lower user retention, and increased frustration. The subsequent need for extensive customer support and the constant cycle of fixing bugs and optimizing features can result in significant costs. Additionally, unoptimized apps are more likely to face negative reviews and reduced app store ratings, further impacting their market competitiveness.

Costs of optimization

Since we have already mentioned the costs of optimization, let’s take a closer look at the most important factors in this matter. The expenses can vary based on the size and complexity of the application, the level of optimization required, the geographic location of the development team, and the chosen optimization strategies. They include mainly:

Development time associated with optimization

Optimizing a mobile app is a time-consuming process that involves multiple stages, such as identifying optimization areas, implementing changes, conducting tests, and iterating based on the results. The time required can vary based on factors like the complexity of the app, the extent of optimization needed, and the size of the development team. Optimization can range from a few weeks to several months, impacting the overall development timeline of the app.

Human resources

When it comes to human resources, optimizing a mobile app demands a strategic approach. One option is to bolster the team by hiring specialized professionals who possess expertise in app optimization. These specialists, such as performance engineers, user experience (UX) designers, and quality assurance (QA) personnel, come with a cost, encompassing salaries, benefits, and recruitment expenses.

Alternatively, existing development teams can be upskilled through training initiatives. This training involves investment in workshops, seminars, online courses, or external trainers who impart the necessary skills and knowledge in optimization techniques.

Tools or external services

The optimization journey also entails financial commitments for the essential tools and external services. Optimization tools play a significant role, facilitating performance monitoring, code analysis, and user experience assessments. These tools, however, come at a cost, involving licensing fees or subscription charges. Additionally, optimizing a mobile app might require the assistance of third-party services. These services can range from security audits and code reviews to performance testing.

Though they add to the costs, these external services are often necessary for thorough and comprehensive optimization, ensuring the app adheres to industry standards and performs at its best.

Business benefits from optimization

Despite the costs you have to bear, optimization can result in many priceless benefits for your mobile app. The most important advantages are:

Improved application performance

Improved performance, a core benefit of mobile app optimization, revolves around speed, responsiveness, and efficient execution of tasks. Optimizing an app fine-tunes its speed, making it faster to load and navigate. This heightened efficiency ensures smooth interactions within the app, from tapping buttons to scrolling through content, cultivating a satisfying user experience.

Additionally, optimization improves resource usage, reducing strain on the device’s memory and battery. It maintains consistency across diverse devices, regardless of specifications, promoting a reliable app that rarely crashes. This improved performance significantly influences user retention, keeping users engaged and returning for a seamless and enjoyable app experience.

An interesting example of optimizing an app for a better performance is Instagram for Android. In 2014, the developers managed to cut its start time in half, making it one of the fastest-starting apps on the market^[4].

Source: https://techcrunch.com/2014/11/10/instagram-discover-people/

Increased conversion rates and impact on revenues

Mobile app optimization significantly elevates conversion rates and directly influences revenue generation. By streamlining the user journey, enhancing the user experience, and making processes more efficient, optimization prompts users to seamlessly move through the conversion funnel.

Whether it’s making a purchase, signing up, or engaging with key app features, a well-optimized app nudges users towards these desired actions. A user encountering a smooth, intuitive process is more likely to complete the desired action, boosting conversion rates and translating into tangible revenue growth.

The positive impact on revenues is substantial. Higher conversion rates mean more users convert from visitors to customers, resulting in increased sales, subscriptions, or ad interactions. Moreover, satisfied users due to a well-optimized app are more likely to make repeat purchases and become loyal customers, providing a steady revenue stream over time.

One way to drive app revenue is through subscription optimization. It is used, for example, by Spotify, which offers skipping six songs per hour for free. When a user exceeds this limit, they get a message to upgrade to a premium account. Having a well-thought-out subscription strategy can help you improve your app’s revenue.

Source: https://www.swrve.com/resources/weblog/driving-app-revenue-through-subscription-optimization

Reduction in customer support costs

An optimized app is less likely to encounter glitches, errors, or confusing interfaces, leading to a decreased need for users to seek assistance. This reduction in support requests translates into cost savings as fewer resources and manpower are needed to handle customer inquiries, complaints, or technical problems.

Furthermore, app optimization often involves incorporating self-help features and intuitive designs that guide users effectively. Interactive tutorials, tooltips, and FAQs can be integrated to proactively address common concerns and queries within the app itself, reducing the need for external customer support. One example of an app that offers self-help features to users is Duolingo, which employs solutions such as interactive tutorials, in-app language tips, and practice opportunities.

Source: https://blog.duolingo.com/introducing-tips/

High ratings in app stores as a factor attracting new users

App Store Optimization (ASO) is a strategic approach focused on maximizing an app’s visibility and discoverability within app stores. It involves optimizing various elements associated with an app’s listing to enhance its ranking in search results and increase its appeal to potential users. This optimization process includes several key components, such as keywords, app title and description, icon and visuals, user reviews, and ratings.

Moreover, app store optimization entails cultivating a positive user perception through compelling visuals and engaging descriptions. A well-designed app icon, appealing screenshots, and an attractive app description can captivate users, encouraging them to click through to the app’s page. Positive user reviews and high ratings also play a crucial role, instilling confidence in potential users and influencing their decision to download the app.

A well-planned ASO campaign was run by Headspace, a meditation and mindfulness mobile app. It resulted in, among other things, a 40% increase in visibility and an 18% increase in installs via search^[5].

Source: https://apps.apple.com/us/app/headspace-sleep-meditation/id493145008

Maintaining a competitive edge in the market

With millions of apps vying for attention, it’s essential to stand out. Optimizing an app allows developers to fine-tune its performance, user interface, and overall user experience. A smooth, intuitive app with fast load times and minimal crashes attracts and retains users, setting it apart from competitors with poor performance. Moreover, optimization can uncover valuable insights into user behavior and preferences, enabling developers to adapt and innovate continuously to stay ahead of the curve.

A good example of an app standing out in the market is… Tinder. It revolutionized the dating landscape by introducing a simple yet highly engaging swipe mechanism to connect users. Its intuitive interface, gamified user experience, and effective matchmaking algorithms captured the attention of millions of users worldwide. The app successfully addressed the need for a modern, efficient, and entertaining dating platform, setting itself apart from traditional dating websites and applications.

Source: https://www.digitaltrends.com/mobile/tinder-profile-update-relationship-type-pronouns-badges-news/

Tools and Methods for Optimization

Using Flutter for mobile app optimization gives you a lot of unique tools and methods to keep improving your application. They enhance performance, user experience, and overall efficiency. Here are some key techniques commonly used:

• Flutter DevTools is an essential tool for profiling and debugging Flutter apps. It provides insights into app performance, memory usage, and rendering. Developers can identify bottlenecks, optimize code, and enhance app responsiveness using this tool.
• Flutter Inspector is integrated within Flutter and allows developers to visualize and inspect the widget hierarchy of the app. It aids in identifying redundant or inefficient widgets, optimizing the widget tree, and improving app rendering performance.
• Code splitting and lazy loading are the techniques that help load only the necessary code and assets when required, reducing the initial load time of the app. This enhances app startup performance and user experience.
• Asset optimization is crucial for reducing app size and enhancing load times. Techniques like image compression and using adaptive icons contribute to a more efficient app.
• State management is essential for optimizing how the app manages and updates the state. Choosing an efficient state management approach, like Provider, Riverpod, or Bloc, minimizes unnecessary widget rebuilds, enhancing app performance.

When optimizing apps, it’s important to follow the best practices used by successful developers and brands. Effective solutions include:

• Minimizing widget rebuilds – employ const constructors and utilize the const keyword wherever possible to create stateless widgets. This minimizes unnecessary rebuilds and enhances app performance.
• Using keys wisely – this will help you update and manage the widget tree, especially in cases where widgets are reordered or reused.
• Optimizing images – utilize image formats like WebP, JPEG 2000, or JPEG XR for images to reduce their size without compromising quality. Leverage tools like ImageOptim or TinyPNG to compress images further.
• Delaying initializations – postpone non-essential initializations and heavy computations until they are needed, improving app startup speed.
• Managing memory effectively – be cautious of memory leaks by releasing resources when they are no longer needed. Use the dispose() method to clean up resources and avoid unnecessary memory consumption.
• Optimizing fonts – use system fonts or custom fonts with a limited set of characters to reduce font file sizes and improve app load times.
• Reducing UI redraws – minimize unnecessary UI redraws by limiting state changes and utilizing tools like the const constructor and memorization to memorize expensive calculations.

Optimizing applications in Flutter is not merely a technical endeavor but a strategic business move. By prioritizing optimization, businesses can amplify user satisfaction, streamline operations, reduce costs, and outpace competitors.

All of these benefits have their prices, of course. Optimization requires not only money but also time and appropriate skills. Businesses need to hire or train specialists, as well as use proper tools and external services. Nevertheless, such investments pay off! Optimized apps gain improved performance, increased conversion rates, higher ratings, and competitiveness on the market. Thanks to Flutter, developers can also reduce apps’ unnecessary costs.

Don’t hesitate to invest in optimization! Improving mobile apps in Flutter will undoubtedly pave your path to long-term business success.

Today, we are witnessing a significant increase in the popularity of mobile applications, driven by the growth of smartphones and mobile devices. Communication, entertainment, management, access to information from all over the world, financial services, health, and other aspects of daily life can be more or less related to mobile tools, and people of all ages are increasingly open to taking such a chance.  

But there is a dark side to the story: as the popularity of mobile apps grows, so does the number of threats, and keeping users safe is one of the most essential tasks companies face, especially as cybercriminals become more sophisticated in their methods of fraud. 

Methods to protect against these types of threats must be customized to the kind of application because while many of the general principles of design and management remain the same, specific implementations and security strategies can vary by technology and platform. 

In this short guide, we will focus on applications developed with Flutter, a framework from Google. 

Key Security Threats – the most common examples 

Understanding potential threats is the first step to protecting your applications. Unfortunately, there are numerous of them, and the creativity of criminals can be surprising – malware, phishing, man-in-the-middle (MitM), or authentication attacks are just a few examples. Fortunately, user education is also increasing, and more awareness means better data protection.  

Among the most crucial security issues highlighted by respondents were: 

Source: https://www.statista.com/statistics/1381432/mobile-app-usage-cyber-threats-consumers-worldwide/  

However, users are the last line of defense, and it is up to application developers and programmers to keep the software secure. So, let’s take a look at the most common threats an application can be exposed to: 

• Man-in-the-Middle (MitM) attacks – the threat involves intercepting and possibly modifying communications between two parties without being a participant in those conversations. Such an attack usually aims to capture sensitive data, such as login details, credit card information, or other confidential messages. 
• In-memory data attacks – the attack aims to gain access to sensitive data (e.g., passwords, credit card numbers, personal information) that is temporarily stored in the system or application memory (RAM). 
• Threats related to authentication – authentication is the process of verifying the identity of a user or system. It is a crucial element in ensuring the security of any IT system, but it is also vulnerable to various types of attack – from brute force, where an attempt is made to guess a password by entering multiple combinations, to phishing, where an attempt is made to extract data by impersonating other people or institutions (such as banks). 

Sometimes, drawing a clear line between the different types of threats is easy; other times, it can be a matter of using several techniques simultaneously (a perfect example is the combination of man-in-the-middle and phishing). 

Unfortunately, we are seeing an increased trend in the different types of threats, and the worry is mainly caused by periodic spikes, which can mean testing new attacker software. 

Source: https://securityboulevard.com/2023/05/man-in-the-middle-mitm-attacks-reaching-inboxes-increase-35-since-2022/  

While the sheer number of attacks and their increasing sophistication may be a cause for concern, another side of the coin is the risk associated with scaling applications, which can introduce new weaknesses. 

Why? The answer is simple – as the number of users, functionality, and integration with additional systems and services increases, the application architecture becomes more complex and challenging to monitor, and connecting to other systems, such as payment systems or databases, can create new entry points for potential attackers. 

That’s why working from the bottom up is essential, laying the groundwork for future expansion. 

Data Protection – how to secure users’ data 

Data protection and quick response to possible security problems are the factors that most strongly influence the audience’s trust. And without it, it is difficult to talk about the application’s success. 

Source: https://www.mckinsey.com/capabilities/risk-and-resilience/our-insights/the-consumer-data-opportunity-and-the-privacy-imperative  

So, how can you effectively protect sensitive data? Implementing multiple defenses is best, as each acts as an additional firewall against potential threats. What are the options? 

There are many, but we will focus on the most important ones: 

DATA ENCRYPTION 

Step one is data encryption – without it, you cannot even think about application security. Data encryption makes private information unreadable to outsiders, greatly increasing safety. And while it’s not a once-and-for-all solution, as it also needs to be monitored and updated, it is a foundation. Without data encryption, any hacker can easily access the data. 

It might seem that ensuring data security is a priority for every company, yet we continue to hear stories about data breaches. 

 

 

Source: https://www.statista.com/chart/2540/data-breaches/   

While the biggest breaches in this area happened a few or a dozen years ago, when security was taken lightly, it’s easy to imagine the consequences of such a leak today! That’s why preventing data leaks is so important. 

To avoid unpleasant situations, remember the following: 

• Regular updates 
• Multifactor authentication 
• Strong password policies 
• Education – both for employees and users 

SECURE SESSION MANAGEMENT 

Users who log into an application are given a kind of “access ticket”. This allows them to use the application freely but opens another door to various dangers. How do you counter them? 

The base is the secure storage of access tokens, i.e., the use of mechanisms such as HTTP-only cookies, which restrict access to the server only, or the introduction of a short expiration time for access tokens, which makes them useful only for a short time. 

In the second case, there may be a problem with an authorized user having to log in again after some time, but this inconvenience can be easily solved by introducing refresh tokens, which allow the user to extend the session without having to log in again, while still maintaining a high level of security. 

AUTHENTICATION AND AUTHORIZATION 

Authentication and authorization play a key role not only in applications developed in Flutter but in all digital systems and applications, and more and more developers are making users aware of this aspect.  

Why? Because applications often process and store sensitive data, such as users’ personal information or financial data (e.g., payment card numbers). With authentication, only authorized people can access this data. Moreover, authentication can be used to customize the in-app experience, offering users tailored content or features for a more satisfying experience. 

What are the best practices for secure user logins and password management? In our experience, these are the most effective: 

• Two-factor authentication (2FA), where, in addition to a password, the user must provide a second verification code that can be generated by the application or sent via SMS or email. That way, even if a third party gets the password, they can’t log in without the second code. 
• Strong passwords that force the user to create a combination of letters, numbers, and symbols. 
• Automatic lockout after multiple failed access attempts. 
• Audit and monitor the application status so that as the application evolves and new features are added, the authorization system can be adjusted to meet growing needs. 

ATTACKS AND THE DEFENSE AGAINST THEM 

Even the best security system cannot completely protect an application from at least attempted attacks from the outside, that is why it’s so important to be prepared to respond quickly in an emergency. The worst thing to happen during a cyberattack is panic and chaotic action. 

So how can you prepare? First of all, procedures. To implement them, however, you need to know what you are defending against and how to do it, so here is a summary of the most common threats and examples of how to counter them. 

MITM ATTACKS 

Man-in-the-middle attacks intercept communications between two parties without their knowledge and can lead to phishing for sensitive data. The solution? Encryption and two-factor authentication will make the attackers’ job harder. It also is worthwhile to make users aware of such behavior, for example, by warning them not to click on suspicious links. 

XSS AND CSRF ATTACKS 

Cross-site scripting (XSS) involves inserting malicious scripts into pages that can then bypass specific user access controls. On the other hand, Cross-Site Request Forgery (CSRF) is an attack in which an attacker forces the victim’s browser to perform unwanted actions on the web application in which the victim is logged in. These two threats are often confused, but the specifics of the danger are less critical in the context of our article, which is primarily about protection. 

So, how can you protect against these types of attacks? The use of tokens, which must be sent with every request to ensure that it comes from a valid source, and a Content Security Policy (CSP), which limits the possibility of malicious scripts, work well. 

IN-MEMORY DATA ATTACKS 

In mobile applications, data stored on the device, such as passwords or private keys, can be vulnerable to attacks that have earned the term in-memory data attacks. This is where Flutter’s standard solutions, including the flutter_secure_storage plugin, provide secure storage for keys and other sensitive information. 

It’s also a good idea to limit the amount of time-sensitive data stored and to implement the encryption and authentication mentioned earlier. 

By keeping these practices in mind, we can increase the security of our mobile applications developed in Flutter and protect our users’ sensitive data. Of course, the above examples are not exhaustive but are the most common. But again, the key is to provide multi-layered security, from encryption to system monitoring and updating. 

Security testing 

Most applications are developed in stages, with user feedback guiding the way. However, this principle does not apply to security, as gaps in this area can not only discourage users from using the application but can also lead to severe consequences, including legal ones. 

That’s why it’s so important to test your security and, at a minimum, perform penetration tests and risk assessments. Working with Flutter, many of these tests can be automated, allowing you to manage your system more efficiently and react quickly when irregularities are detected. 

Where to start? With a risk assessment – think about what data your application processes, where it is stored, what functions are most critical, and what components may be vulnerable to attack. We hope this article will help you make that assessment! 

The next step is to determine the testing scope, i.e., the elements of the application to be tested. We know from experience that it can be difficult for developers to specify the testing area objectively, so sometimes, it is worth hiring an external company to perform a professional audit and point out possible threats and vulnerabilities. 

Finally, documentation. While no one likes “paperwork,” carefully documented results allow you to work more efficiently, set a course of action, and monitor progress. 

A lot of work? Yes, but we mentioned above that you can use many tools to make this phase easier. Among the most popular are: 

• The SonarQube plugin can help you write cleaner, more secure code. 
• OWASP ZAP and/or Burp Suite for real-time security testing. 
• Dependabot to help monitor dependencies in a project for various vulnerabilities. 

The list of available plugins is much longer, and many useful solutions can be found here. 

Platform security 

We’ve written a lot about the role of updates in keeping applications secure, but it takes two to tango, and not all users are eager for updates and will reject them indefinitely. This applies not only to updates to the applications themselves but even to operating systems, as a study conducted by Apple some time ago brilliantly demonstrated. 

 

Source: https://venturebeat.com/mobile/as-ios-13-hits-50-adoption-android-fragmentation-keeps-getting-worse/ 

 

Such fragmentation is a real problem because it stratifies the security management process. Hence the importance of taking countermeasures. This can be done in various ways – and again, juggling several of them works best. 

• Consistent versioning – communicate what the (new) version brings to the application, what it improves, or what bugs it fixes. 
• When a critical security update is available, send notifications to users to inform them of the need to update. 
• Before releasing an update, test it in a production environment to ensure you are not introducing new bugs or security vulnerabilities. 
• Use official distribution channels – always publish your applications to official stores, such as Google Play or the Apple App Store, to minimize the risk of third-party modification. 
• Respond to threats when the monitoring system detects a problem, even if it means temporarily disabling certain app features. 
• Regularly review server and application logs for unexpected or suspicious activity, analyze them, and respond to unwanted activity. 

Challenges and best practices in mobile application security 

Mobile application security is not only key to protecting user data, it is also critical to a company’s reputation. In the digital age, where security breaches are highly publicized and can result in significant financial and reputational losses, organizations must pay close attention to the security of their applications. And the list of potential threats continues to grow. 

While many risks and protections are common to all mobile applications, the specifics of Flutter require attention to the unique challenges of this platform. Due to the cross-platform nature of Flutter, developers need to be aware of both iOS and Android specifics and the potential risks associated with middleware interpreting Dart code. 

Our company has many years of experience in this field – if you need help to increase the security of your application, contact us! 

If your company is getting ready to create an app or make a significant upgrade to something you already have, it is best to begin with a basic understanding of the application development life cycle. While you are likely to count on a development firm or team to develop the app, it will be up to you to oversee the entire process and ensure that things go as planned. Experts along the way will take care of details in their area of specialization. However, a general overview will give you the confidence to choose the right people for the job and ensure the launch of your app is a success.

Whether you have questions about how to develop an app for iPhone, Android, or any other platform, the general applications development life cycle is the same. There are several ways to outline the process. They are mostly the same but may include a varying number of steps depending on the level of detail that is included. For our purposes, there are eight steps: research, goal setting, project planning, wireframing, prototyping, development, testing, and launching.

App Development Process, Step One: Research

Most people with questions about how to develop an app already have an idea. Often that idea needs some clarification and refinement, but it almost always needs research. The research is essential because it sets up the rest of the process. The exact type of research will depend on the kind of app and the intended user. You will start with clarifying questions like, “Is this app for existing customers, or is it designed to draw people into a relationship with our organization?”

The research will need to be internal and external. Internal research will examine buyer personas and sales funnels. In contrast, external research will look at things like consumer trends, competition, and download and purchase data from other apps.

Step Two of Developing an App: Goal Setting

If you ask an app development firm how to develop an app, one of their first questions should be, what are your goals? With your idea and research in hand, it is time to begin to lay out what you expect your app to do in relation to your overarching goals. How will this help your current customers, draw new customers, or raise awareness? What are some “must-haves” in terms of features? At the end of this process, what will success look like for your new app?

Step Three of the Mobile App Development Process: Project Planning

As a client, you likely have some idea in mind about when you think your app will be available in app stores. Only by understanding the full project can you anticipate how long it will take and what challenges along the way may delay the rollout. In developing the project plan, the roadmap to completion is created with objectives, timelines, and benchmarks. This is how you and the team will know if things are going according to plan.

Step Four of the Applications Development Life Cycle: Wireframing

With clear goals and a plan in hand, it is time to start bringing the app the life on paper. This begins with sketching out images of the final product. This step is more than a chance for you to see a glimpse of the creation. It helps designers understand future challenges in the app development process and possible limitations in functionality. Wireframing is a more precise version of the sketch and begins to demonstrate how the app will function.

Step Five of the App Development Process: Prototyping

In some cases, it is feasible to create a limited rough version of the app so that the developers and sometimes the client have a chance to see how the app will work. This prototype will be far from the finished product in terms of polish and functionality. However, it will give everyone a chance to get their hands on the app to be sure everything is headed in the right direction.

Step Six of Developing an App: Development

If you ask someone how to develop an app for iPhone or Android, this is the part of the process they will likely think of. This step is where you will count on a team of experts. These specialists include a user experience (UX) designer, a user interface (UI) designer, coding experts, and people with specific knowledge of Apple and Android devices. This step is the most complex and often the longest part of the app development process. If you want to know how long does it take to develop an app, know that most of the time will be spent in this step. A project manager will oversee the work of the full team at this point. This leader will likely use modern project management tools and practices like Agile to create multiple iterations of the application to work out bugs and continue to add functionality. As a client, you may be involved in different aspects of this process, especially as new versions of the app are complete are ready for user feedback.

Step Seven of Mobile App Development: Testing

The thought of launching a new app is exciting, but launching one full of bugs can create a negative impression of your business. This can work against the reason you created it in the first place. Testing will be an integrated part of the development process, with tests be running on each iteration and with the addition of each feature. However, there is also a final comprehensive testing phase where the team will rigorously test the app for functionality, usability, and performance. It will also be tested on different platforms such as iOS and Android and different models of devices. Testing will also include getting the app into the hands of users with the chance to hear their feedback for possible necessary modifications or improvements.

Step 8 of Developing an App: Launching

This step is where everything comes together. However, if done wrong, you will not see the maximum impact and return from your investment. The biggest question your team will face here is how to get your app on as many mobile devices as possible. How this is accomplished will depend on the primary audience of the app. If you created it to improve the experience of existing customers, you likely already have channels to get the word out. If, instead, the app was designed to be a part of your sales funnel and draw people into a relationship with potential customers, getting the word out will be more challenging. Your team will ensure that your app is available in the appropriate app stores. However, more work will be needed to promote it to your target customers. App store optimization will help people find your app. However, it will take a comprehensive marketing plan that includes your website, social media, paid advertising, and even influencer marketing.

Frontend technologies have always been evolving and changing. From creating webpages based almost entirely on tables we moved to complex, responsive single-page applications.

JavaScript started to play more and more an important part across the years, handling basic functionality for the website at first, and becoming a crucial foundation as of today.

The past… up to now

Over the years, many tools were created which helped to speed up web development. From jQuery (it was used to build the first version of Gmail by the way), to Backbone (the first framework that allowed the creation of a single-page app), AngularJS (the first framework that provided two-way binding and real-time HTML markup updates) to Knockout, Meteor and finally, the ones that are being talked about over and over: React, Angular and VueJS. I bet discussions about those three happen to you on a daily basis.

The present and the future

Alright, let’s put forward some forecasts about the future of frontend frameworks. To smart guess, speculate and place our bets correctly, we’ll need some analysis of the current situation. There’s no future without the present (pretty sure I’m plagiarising Paulo Coelho now…). What do we have today then? Do you happen to be familiar with that drinking game, that one where you have to come up with a word that isn’t part of a name of any JavaScript tool/framework/lib? If it is, you drink. An example: I came up with the word “castle”, but… there is Castle.js in the npm repository: (https://www.npmjs.com/package/castle.js/v/1.0.11). So… I’ve lost already.

Don’t play this game. It’s dangerous.

Despite that, it does prove a point. There is plenty of JS stuff and there is much more if we extend to frontend stuff. Depending on your use case, you can find something suitable for you. Frameworks are an answer to developers’ needs that are often dictated by business needs. Those business needs are a response to what a user may need and how to make money fulfilling that. What also comes into play are the devices and the proportion of their usage. According to Statcounter.com, the usage of mobile devices has eclipsed and surpassed the desktop:

Even without a graph, based on daily observation, one prediction is easy: the future is mobile. Because of that, we will take a look at how to create a native app nowadays and how it may become even easier soon. But first… Let’s look at the hottest frameworks right now that try to meet our demands for creating a web application. Just for the record, here is the Google Trends filter used for this comparison:


As you can see, React took the biggest part of the cake overtaking Angular around May 18′. Vue JS was speeding up fast, but slowed down a bit last year. It has more stars on GitHub than the others though. Angular, although still strong, is falling further and further behind React. But what they offer us right now and what in the near future?

Angular

The one that is the most complex, sophisticated and difficult-to-learn compared to the other two. However, it does provide a whole platform to develop an app with. No additional libraries are needed for things like routing or global state management. It is based on Typescript (a big advantage) and made by Google. Perfect for big enterprise projects.
With Angular, the future looks bright and you can see it for yourself right now. In version 8.0 there is a new rendering engine available called Ivy and it can provide up to 40% less bundle size and that tackles the biggest Angular disadvantage. It will be integrated as default in Angular 9.0 but it is possible to switch it on in the current version. Ivy will provide faster build times and an open door to cool new features like higher order components and component lazy-loading.

React

Made by Facebook, perhaps it does not provide as many tools as Angular (we need some libraries to achieve the same level of functionality). However it is faster, lighter and easier to learn. React uses virtual DOM for DOM manipulation (Angular doesn’t do that). It is well supported and reliable. It has to be. It is used by Instagram, WhatsApp and Netflix (among many others).
2019 was a crucial year for React. The major changes were React Hooks, React.Lazy and Suspense. Some new, experimental features for the future are:

• Concurrent Mode, which will allow an app to adjust to the user’s device and network speed by making the rendering interruptible. React in Concurrent Mode will be able to interrupt an ongoing update to do something more important, and then come back to what it was doing earlier.
• Suspense for Data Fetching – we will be able start the rendering before fetching data finishes. It will suspend rendered component and proceed to the following ones and then come back again to check if the data is ready.

It is very possible that React will stay in first place in terms of popularity.

Vue

Have you heard anyone complaining about Vue.js? Well, I haven’t. It is the most convenient framework, for both learning and usage. Gaining popularity and love from the open source community since the very beginning, Vue is the new and better AngularJS. Doing things similarly, but better in every way. It is not a coincidence. The creator of Vue, Evan You, did actually work on AngularJS. Vue.js is maintained by him and his team. It is an exception among the previously mentioned frameworks. They are both backed by huge companies. Vue is not. This may be perceived as a drawback, but for many – it isn’t. What about the future? In 2020 the new version will be released – Vue 3.0. It will be completely rewritten, based on Typescript and even more lightweight with API for creating observables. That’s huge. After the release, the Vue based repo count will go nowhere but up. There are several major changes scheduled for each of the top frameworks. The developer teams are not taking it easy. Looking at the tendencies right now, it is also noticeable that Typescript is going to be implemented more and more vastly, allowing developers to appreciate better code maintenance and control. There is a real possibility that soon, more projects will be with, rather than without Typescript (I didn’t mention it, but you can use it with React too). Another thing worth noting here is the browser support. Internet Explorer 11 support declines over time. As an example – it is announced that Vue.JS 3.0 will support IE11 but in a separate build with the same reactivity limitations of Vue 2.X. It won’t be a surprise to see many statements about ditching IE11 support entirely in various websites/web apps/tools. And that’s a good thing for developers. Focusing on new features is always more productive.

Svelte

Well yes, I didn’t put it on the graph. My prediction is that I’d have to if I were writing this in 2021. Svelte is not that new, although since version 3 it has gained a lot of popularity. It is a framework that provides reactive components, but the approach is different. SvelteJS, which runs at build time, relocates all the work into a compile step having itself about 4KB gzipped. You can write 40% less code comparing to React and have faster, reactive components without virtual DOM. It’s perfect for small applications (not much other functionality), but definitely worth testing out and keeping track of in the near future.

Mobile app development

As I mentioned earlier, the future is mobile. At the beginning, there wasn’t much choice in mobile app development. For Android we had to use Java and Android Studio and for iOS there was Swift or objective C and Xcode. Now we have a plenty of options. We could, for example, develop a Progressive Web App (PWA). It will work instantly after the user adds it to the device’s home screen. With a single code base from a framework like React or Angular you can access native features through Service Workers. What’s interesting – PWA made by Twitter was used longer with more content viewed since it was made a default mobile web experience. When you need an extra lightweight app which could run everywhere, whose performance is not so heavy and uses only basic native features, then this is the perfect solution for you. If not, there are also…

Hybrid Apps

Having the same, or sharing most of the code base, hybrid app frameworks are today’s answer to the question of how to develop an app for both Android and iOS. The answer is different depending on the approach. And there are quite a few approaches. Below, you can see some of the most popular:

Ionic

It was the first hybrid framework. Technology-wise it is quite close to PWAs because your app will be based on HTML/CSS/JS. The idea is quite simple – Ionic just wraps a web app made with Angular inside a native app giving it access to native features. It is not the best approach if we look at performance but quite fast nevertheless. The new version 4.0 will bring some key features like:

• transition to being a universal framework for the web, iOS, Android and desktop
• web components
• React and VueJS support
• performance improvements and a single code base for PWAs/apps/web apps/desktop thanks to transitioning from Cordova to Capacitor (cross-platform app runtimes)

Some predictions were made that Ionic will soon be redundant. Well, after this newest release, I don’t think so.

Flutter

The freshest one here, Flutter is relatively new and growing rapidly. Its setbacks are the Dart language Flutter is based on (you’ll have to learn it) and well… being new. These are relatively minor when set against big Google support (they are the authors) and functionality that allows developers to use lots of native widgets and pre-made components. More focused on Android at first, iOS support is catching up. Moreover, the Dart language will look very familiar to somebody who already knows JavaScript. It compiles to the native code of the chosen device. Also, contrary to React Native, all device functionalities are accessible via Flutter core plugins, not by community-made third party ones. Flutter looks very promising for the future and is a very interesting choice now. Especially considering the growing community and planned support for other platforms, like the web, macOS and Fuchsia.

React Native

This Facebook version of React offers many pre-build components to create your native app with. Then, the React Native toolchain will compile an app from them as a result. The ease of use contrasts here with some stuck moments that you may encounter using React Native. In some cases you’ll face the necessity of making some workarounds. Thankfully, you can turn to the community with a issues that you encounter – most often, there lies a solution. Many third-party packages are available, though not all of them can be compatible with the newest version of React Native or Android or iOS itself. Being aware of the situation will spare you some headaches. Fortunately, the React Native team and the community work hard to make developers lives easier. In 2019 many updates were released. The newest one, React Native Doctor is a tool made by the community to help with troubleshooting and fixing errors with the development environment. It even gives you links to what you’re missing. In 2020 React Native will be enriched by a new renderer (named Fabric) and the architecture is going to be rebuilt. It will be possible for JavaScript to affect the Native state synchronously (previously it was async). That will fix some issues and give developers more control over changes inside the app.

NativeScript

NativeScript is something similar to React Native. In this open-source framework, you can have native components markup alongside JavaScript. It is possible to use NativeScript with Angular, VueJS and plain JS. It also allows you to work with the latest native APIs. You won’t have to wait for plugins to begin support for a new feature. NativeScript apps can run on native devices directly. There’s no browser interaction or cross-compiling required. NS aims for a ratio of 90% common code between the iOS and Android platforms and the output result is a fully native app. Alongside core modules, you also have over 700 plugins to choose from. Some disadvantages of this framework? Well, the app size is bigger and performance slower than the previously mentioned React Native. The roadmap for the future presents us an ambitious approach from the NativeScript team. Their plan is to extend NS functionality to Android Auto and iOS CarPlay. Support of desktop apps is also planned and the longest shots consist of providing AR/VR app building blocks, wearables support and more.

Read also: Classic, headless or hybrid CMS? Maybe all of them together?

The future

The future looks quite optimistic. Since ECMAScript 2015 (and even earlier) many tools were presented to the frontend world. Communities and companies are not stopping in pursuit of delivering solutions that meet developers’ needs. The most popular frameworks are being improved constantly. Some of them are on the verge of crucial changes during 2020, which will make them even more useful. There is a noticeable trend to create an application for many platforms with as much common codebase as possible. The “cross-platform” term will not only apply to the iOS/Android, but to web, desktop, wearable devices and more.

The future is… fluid?

Or full of freedom. Yes, I’m using some odd words here, but I’m not trying to sell you any stuff. These words match quite well to a bigger picture that I would like to present. Future frontend development will be more fluid because of versatility and a wide range of options. Being fluid, if it comes to being platform independent, having responsive design (from a watch to a monitor), great performance or even being language independent. JavaScript still will be there, but more often compiled from TypeScript, although… there is also WebAssembly, which can be output from a compilation from a low-level source language like C/C++. Heavy performing JavaScript applications are able to use WebAssembly functions and benefit from that. What it could offer the framework world is a new level of performance. On top of that, there are Web Workers, which introduce the potential of multi-threading to JavaScript without aid from WebAssembly.

Having all of this while devices become more powerful over time gives us (among other perks) virtual or augumented reality that becomes more interesting and popular than today or performance-demanding games for the web. I don’t know about you, but all those new (and improved existing) possibilities leave me quite excited about the future. And what could be more exciting than that? Well… taking a part, smaller or bigger, in building it together of course.

A Content Repository API for Java (JCR) is a specification form Java application programming interface (API) to access content repositories. Data in JCR is kept in a tree of nodes with a hierarchical structure.

One of the open source implementations available is Apache Jackrabbit. This implementation is used by multiple Content Management Systems (CMS) like Magnolia, Jahia or Hippo CMS.

Apache Jackrabbit

Apache Jackrabbit is used in multiple CMS, so understanding its flow of data will be helpful in understanding its usage in other systems. The following information and more can be found on this page:  https://jackrabbit.apache.org/jcr/first-hops.html

Dictionary

In Apache JackRabbit there are some key words that are worth knowing:

• Repository – an area prepared by JackRabbit where data is stored with a set of operations to access\modify it
• Node – a single unit of a JCR tree stored in a repository can have multiple subnodes (child nodes) and properties
• Root node – a node without a parent
• Property – stored parameters of a node
• Workspace – an area in a repository, helpful when there is need to separate nodes structures from each other
• Session – a session opened in a chosen repository and workspace after login. Depending on the login, permissions may differ e.g. an anonymous user cannot save a new node.

Installation

One of the easiest ways to install is by adding a few dependencies to a pom file using the Apache Maven management tool.

<dependencies>

<!– The JCR API —>

<dependency>

<groupId>javax.jcr</groupId>

<artifactId>jcr</artifactId>

<version>2.0</version>

</dependency>

<!– Jackrabbit content repository —>

<dependency>

<groupId>org.apache.jackrabbit</groupId>

<artifactId>jackrabbit-core</artifactId>

<version>2.12.1</version>

</dependency>

</dependencies>

Adding both dependencies allows the use of JCR functionalities with a basic configuration. It’s enough for basic usage.

Usage

Usage of JCR is mainly focused on two goals – searching data and modifying nodes. There are examples of practical uses of Apache JackRabbit on the following page:

https://jackrabbit.apache.org/jcr/first-hops.html

So as to not copy the whole tutorial, only the key points will be mentioned in following paragraphs.

Login/logout

To gain access to operations on nodes the user needs to be logged in and a session needs to be created. It is possible to log in in the repository for example.:

As an anonymous user to the default workspace:

Session session = repository.login(new GuestCredentials());

As default admin user to the customWorkspace workspace:

Session session = repository.login(new SimpleCredentials(“admin”, “admin”.toCharArray()), “customWorkspace”);

The repository can be created on the spot by using the static method JcrUtils.getRepository(), but using JNDI or configuration to create it is better practice.

After finishing, the work session should be closed by:

session.logout()

Searching data

The session allows the user to get the required nodes from the workspace. There are multiple ways of doing that, but most common are through subnodes/parents, by path and by query.

The first one is used by obtaining a parent node or subnodes of a given node and using them.

Node parent = givenNode.getParent();

NodeIterator subNodes = givenNode.getNodes();

The second one is simply by using the getNode method from a node already found, eg:

Node rootNode = session.getRootNode();

Node searchedNode = rootNode.getNode(“node1/subNode/searchedNode”);

The last one is more complex, by using a query:

String query = „select * from [primitive_type]”; QueryResult qr = session.getWorkspace().getQueryManager() .createQuery(query, “JCR-SQL2”).execute(); NodeIterator searchedNodes = qr.getNodes();

Firstly it’s necessary to get queryManager from the workspace, to create the query and then execute it.

The default language used is JCR-SQL2. It allows the creation of complex queries like adding conditions. The result of the query is returned in the form of an iterator.

After obtaining the required node, the easiest way to get its properties is by using the getProperty() method. It enables retrieval of an instance of property class. Getting the value is done by using a specific method like getString()

Property propertyInstance = rootNode.getProperty(“propertyName”);

String propertyValue = propertyInstance.getString();

Read also: Benefits of immutability in a software development

Changing nodes

A session is needed to operate on nodes, but to modify them there is an additional need for permission. Methods are quite intuitive like:

node.addNode(“nodeName”);

node.remove();

node.setProperty(“propertyName”, “propertyValue”);

node.setProperty(“propertyName”, (Value)null);

node.getProperty(“propertyName”).remove();

The last two are to remove the property from the node. That can be trickier.

The most important part of editing the JCR tree is saving modifications made in session. It is done by using

session.save()

Without that, the method status of the JCR tree will not change.

JCR in Magnolia

A good example of a Content Management System using the JCR mechanism is Magnolia CMS. It is a system which allows users to easily configure the frontend and backend part of an application. JCR nodes are skillfully used to keep both configuration and content readable for developers and non-technical users, making it easy to develop.

Magnolia keeps the JCR Session inside a Magnolia context (MgnlContext class), hides the login/logout mechanism from direct access and hides pure Apache JackRabbit methods in a prepared set of classes for easier use. It is possible to avoid using them, but it is worth knowing about them.

Prepared classes

Most of the functions in Apache JackRabbit used to obtain information from the node tree use RepositoryException. To avoid  handling in Magnolia (info.magnolia.magnolia-core:6.0) there is set of classes with methods which take care of it.

They are named with the JCR object name and the Util part, such as:

• NodeUtil
• PropertyUtil
• SessionUtil

What’s more, these classes give the user additional, sometimes more complex, functionalities e.g., NodeUtil with the method getSiblingsBefore allows the extraction of sibling nodes that are before the chosen node in the iterator of all siblings.

Queries

In a situation when there is a need to find a node of a specific type and there is no node given with a link to that node, like parent-child, there is the possibility of searching via query. In Magnolia there is already a prepared class QueryUtil which facilitates the finding of required nodes by multiple search method implementation. In the most basic one only the workspace name and query statement are necessary to get nodes in the form of an iterator. The default query language is JCR-SQL2.

Testing

In Magnolia there is a prepared set of classes that helps testing. It is possible to add them by using a dependency:

<dependency>

<groupId>info.magnolia</groupId>

<artifactId>magnolia-core</artifactId>

<version>{Version}</version>

<type>test-jar</type>

<scope>test</scope>

</dependency>

They help to focus on creating only objects needed for the test and disregarding context, users etc. They are named with a Mock part and JCR name such as:

• MockNode
• MockProperty
• MockSession
• MockWorkspace
• MockQuery

An example test method:

@Test

public void should_get_type() {

//given

MockNode node = new MockNode(name, “pageType”);

TestedClass testedClass = new TestedClass();

//when

String type = testedClass.getType(node);

//then

Assertions.assertEquals(“pageType”, s);

}

Moreover, there are classes to help quickly create a JCR structure like the method createSubnodes of the NodeTestUtill class which allows the loading of structure from file. An example of usage:

MockNode page = new MockNode(name, “mgnl:page”);

NodeTestUtil.createSubnodes(page, getClass().getResourceAsStream(“/model/page.properties”));

return page;

with page.properties:

/form.@type = mgnl:area

/form/0.@type = mgnl:component

/form/0.mgnl\:template = customTemplate

/form/0/processors.@type = mgnl:contentNode

/form/0/processors/0.@type = mgnl:component

/form/0/processors/0.processorType = processor1

/form/0/fieldsets.@type = mgnl:area

/form/0/fieldsets/0.@type = mgnl:component

/form/0/fieldsets/0/fields.@type = mgnl:area

/form/0/fieldsets/1.@type = mgnl:component

/form/0/fieldsets/1/fields.@type = mgnl:area

More information about testing can be found in documentation on the following page: https://academy.magnolia-cms.com/display/DEV/Unit+tests

The idea of immutability is widely spread. However, I think it is quite rarely used in real programming among Java developers. In this article, I’m going to explain the benefits of immutable objects.

The first advantage of immutability is avoiding side effects. Let’s take a look at an example:

public static double average(Collection<Double> numbers)

When we look at the signature of the method, it seems that everything is OK. The method takes a collection of doubles and returns an average. However, nothing prevents a developer from implementing the method in this way:

public static double average(Collection<Double> numbers) {

if (numbers == null || numbers.isEmpty()) {

throw new IllegalArgumentException();

}

double average = numbers.stream()

.mapToDouble(Double::doubleValue)

.average()

.getAsDouble();

numbers.clear();

return average;

}

Therefore, this method is not a pure function. It doesn’t have a boundary between arguments and the result, because an argument is changed as well. In order to ensure nothing like that will happen we should pass an immutable collection.

Another reason why immutability is great is connected with different collections. Let’s assume that we have a Point class:

@Data

@AllArgsConstructor

public class Point {

private int x,y;

}

What will happen if we put an instance of the Point class into HashMap and later on we change the value of x or y? Let’s check:

Map<Point, String> pointLabelMap = new HashMap<>();

Point point = new Point(3, 4);

pointLabelMap.put(point, “Mutable point”);

System.out.println(“Label: “ + pointLabelMap.get(point));

point.setX(0);

System.out.println(“Label: “ + pointLabelMap.get(point));

And this is the result:

Label: Mutable point

Label: null

After the point instance had been changed, the hashcode of that object was different, therefore it couldn’t be found in HashMap (a bucket not found). Similar side effects can be observed when it comes to using tree-based structures like TreeMap. Once an object was put in a structure. The order of objects is not changed if the object was modified. Because of that, it is highly recommended to use an immutable object as a key in map structures.

Read also: What is the distinction between Java and JavaScript?

Another gain from immutability is the fact that we don’t need any more defensive copies. I’m pretty sure that a lot of programmers who remember java.util.Calendar and java.util.Date remember how they had to make a lot of copies of those objects. For instance, let’s assume that we need to create a DTO class which represents delivery data. And we have a field which tells us when we, a client, should expect items to be delivered. Usage of java.util.Date calendar will force us to create a defensive copy of the date. It’s because it can be used later on in some other computations.

Many people will say that creating immutable objects will lead to a garbage collector overhead. However, this is not true at all. The first reason is that we don’t need defensive copies. As I pointed out before. And it is much easier to delete an object from a heap than an old one.  When we create a new object, which has almost all references as an old object and one or a few new references to new objects, it is better than having an older object which has references to new objects. We are also able to use an object pool and flyweight pattern to manage those value objects. We all know a very good example: String class.

The last benefit I would like to describe is thread-safety – objects which are immutable are perfectly thread-safe. There are no race conditions on the mutating state of the object, and the final keyword ensures visibility for other threads.

Of course, there are areas where immutability is not the best option. The first of them is GUI – where mutation of a state and a graphical interface go naturally together. Sometimes we also need mutable objects when we use concurrency. For instance, the BlockingQueue class should be mutable in order to work correctly. Mutable data structures are often very useful when we need high performance. There are more situations when mutability is better than immutability. However, I still believe that immutability is great when it comes to proceeding data e.g. in business applications.

I hope I’ve persuaded you to change your way of thinking about using immutability and to take full advantage of its the benefits.