How to

A Picture Is Worth A 1000 Words, But What If Nobody Can See It?

A trick to speed up the loading of cached images on React Native

Be it an app or website, speed is crucial. Too much time taken to load content can turn away users, putting to waste hundreds, if not thousands of man-hours spent painstakingly writing, and reviewing code.

Quite recently, some of our code ninjas got together and built a nifty little component which can be made use of by anyone coding in a React Native environment. We have now made the code freely accessible on GitHub for you to experiment with.

Note: This library supports React Native 0.6 or above, which means iOS 9.0 and Android 4.1 (API 16) or newer.

Our module in action

What Does This Module Do?

In a nutshell, this module is a simple, lightweight CachedImage component that is adept at handling how an image will load based on network connectivity. It can deliver significant performance improvement, particularly when called upon to fetch high-resolution images within an app.

This module can be used to:

  • Manage how images are rendered within an app while reducing a user’s mobile data usage
  • Enable offline support for online images.
  • Manage an application cache within a predefined cache storage limit, or to reduce/limit how much of a device’s internal storage can be used by an app
  • Reduce loading times of static online images by switching between low resolution and high-resolution images

How Does This Module Work?

The module itself is built on React Native 16’s Context API, which allows to initiate a cache manager when an application starts up. A developer can define a cache limit for the whole application (500 MB for instance) and the module can cache images up to its defined cache limits without the need for concurrent caching processes. The cache manager will also scrap any data which exceeds defined storage limits.

The freedom to define a cache limit opens up the opportunity for developers to deploy our module on lower-end devices, which often possess relatively low internal memory capacities.

It is important to note that our module favors a client-side caching approach. Images will be downloaded and stored using a unique file naming pattern, which aligns with their original URLs. Whenever the application next requests for a similar URL, the caching module will step in to serve up the relevant cached image.

Since the whole point of a caching module is to reduce demands on device and network resources, our module makes use of the react-native-fetch-blob module to handle native (Android/ iOS ) file system access requests. Not only does this make our module lightweight, but it also reduces the dependence on excessive boilerplate code.

A Special Note From Our Developers

  1. This module provides a simple solution for handling cache with limits, but only for images. In practice though, requirements may vary from application to application. So feel free to use the architecture/structuring of this module to come up with customizable, scalable, and configurable advanced caching modules that support other file types as well.
  2. Currently, we have not implemented a validation method to prevent the scrapping of cache data which is in use. Because of this, defining a low value for the cache limit could lead to corrupted images. Therefore, use your judgment when deciding on the cache limit.

That’s about it. Do play around with this little module, and let us know what you think!

Cover image credits: salonlfc.com/

Announcements

A behind the scenes look at building an end-to-end platform for London's leading precision nutrition start-up

Fresh Fitness Food (FFF) offers bespoke meals delivered to‑door daily, in London and several other city centers in the UK. Through personalized (macro specific) meal plans, FFF gives its subscribers the exact nutrition they need on a daily basis, providing the precision, structure, and consistency needed to achieve their fitness goals. 

Having enjoyed steady growth since launch, last year saw FFF delivering around 60,000 meals a month. It’s website and backend solutions at the time could barely support this volume of orders, but FFF already had plans to grow in the UK and go international via a franchising model. Hence, while upgrading its web platform – FFF also wanted to digitize several manual processes and tasks done via a number of disjointed tools. The intent was to make its operations standardized and scalable while creating a proprietary technology platform that would transition it from meal delivery into a technology company. 

While searching for a technology partner FFF was introduced to Calcey by one of Calcey’s long-standing clients in London. Calcey’s long list of clients in the food-tech and fit-tech space in London made a convincing case that they had finally found the right partner. 

FFFs’ CEO Caspar and Emma who played the role of product owner for the new web portal traveled to Colombo to participate in a ‘design and discovery’ workshop to kick-off the project. During this intense week-long workshop they gave the Calcey team a crash course in the intricacies of their business model and brainstormed how the new digital platform could help FFF on-board, service and retain customers with greater efficiency.  

Fast-forward 9 months, FFF’s brand new web portal is now live and accepting orders! Calcey’s team built, tested the solution and completed the migration of FFF’s legacy data, which involved parsing data from several sources together to form complete client records, just in time for FFF to launch an integration with F45 and face its busiest season of the year with confidence.  

The cloud-based solution that Calcey delivered for FFF combines enterprise resource planning (ERP) capabilities with a customer relationship management (CRM) system. All recipes for food to be cooked, along with attached nutritional values are maintained within the solution. Similarly, all client records from their postcodes to fitness goals, nutritional needs, exclusions (due to preferred diet or allergies), and meal delivery schedules are managed within the web portal. Limiting the variety of meals cooked on a daily basis is key to FFF’s cost efficiency. However, this has to be done without overly repeating the same food types and taking into account the individual nutritional needs and exclusions of every user. Taking all of these constraints into account to arrive at meals to be served to a specific user on a daily basis or ‘meal balancing’ as it’s known at FFF, traditionally required a team of nutritionists. Today this the bulk of this work is done via an algorithm. After balancing the meals the solution creates a ‘cooking sheet’ stipulating food items and quantities to be cooked, a ‘labeling sheet’ setting out how portions should be customized for each user and a ‘shopping sheet’ listing down inventory to be purchased, on a daily basis. Finally, a delivery manifest is generated with precise instructions for delivery staff. A true end-to-end solution indeed or as FFF’s CEO puts it “a truly spectacular piece of software that works beautifully!”.

The new web portal had an immediate impact on FFF’s bottom line, improving its direct margin for food, staff and packaging costs by 14% within just 2 months of launch.

Announcements

Calcey Technologies sponsors Swedish Breakit SaaS Summit

Calcey Technologies, one of Sri Lanka’s leading software product engineering companies recently sponsored the BreakIT SaaS Summit in Stockholm, Sweden. The event was organized by BreakIT, Sweden’s leading digital publication and was attended by over 400 local industry executives. Calcey Technologies CEO Mangala Karunaratne and Software Architect Premuditha Perera delivered an expert address sharing lessons learned from Calcey’s many years of experience in delivering high complexity SaaS (Software as a Service) systems for clients in Silicon Valley.

Speaking after the event, Calcey’s CEO said, ‘We see great potential for providing software engineering services to Swedish companies. We already power one of Sweden’s largest e-commerce brands – Nelly.com – and have great partners and relationships here. We partnered with BreakIT in collaboration with our local partner in Sweden – Best of Sri Lanka. I’m looking forward to seeing Sweden join the U.S. and U.K. as one of our largest markets’.

Calcey’s CEO, Mangala Karunaratne on-stage at BreakIT SaaS Summit in Stockholm

BreakIT CEO Camilla Björkman said, “We are so proud to have Calcey Technologies as one of our main partners of the SaaS Summit in Sweden. They added a lot of value to the event by sharing their experience of building world-class SaaS products. I’m sure their presentation would have made a number of Swedish tech companies interested in visiting Sri Lanka.” 

Calcey Technologies is a boutique software product engineering firm that combines innovative Silicon Valley culture with the highly skilled engineering talent of Sri Lanka. Founded in 2002, Calcey’s 130-strong team provides Agile product engineering and quality assurance services and enterprise mobile, web and cloud solutions for clients across the globe.

Calcey’s development center and headquarters in Trace City, Colombo