DEV Community: Prakash Donga

Flutter Widgets - A brief guide

Prakash Donga — Fri, 06 Nov 2020 05:32:58 +0000

In the eyes of mobile developers, Flutter is manna straight from heaven

Developers of an iOS app need not answer the question “When is it coming to Android?”

They already have questions haunting them like:

When is the build ready to be shipped?
How are we going to support this?
Why is your shirt so dirty and you smell funny?

This was why Flutter came to the scene and unifying the iOS and Android codebases meant that developers now had more time to do other things, like sleep.

Image Credit

So now that we know Flutter is super useful, let us see what Flutter Widgets are all about.

What’s with Flutter and Widgets now?

Flutter was developed by Google to make sure that there is not a steep learning curve for an iOS developer or an android developer when they want to go cross-platform.

All that Flutter asked was a blank screen.

There were widgets pre-built so that the developers don’t have to spend hours thinking about which codebase to copy to note pad and vice versa.

The central idea behind a widget is that once you build your UI using Widgets, you can then use these widgets to describe what view should look like, along with their configuration and state.

See how we can use a simple Flutter App to call the runapp() function with a widget:

The minimal Flutter App simply calls the runApp() function with a widget

The Widget Tree consists of two widgets, the Center widget and its child, the Text Widget.

Here are a few basic widgets listed for your ready reference:

Text,
Row,
Column,
Stack and
Container.

There is a whole lot of free information available on the official Flutter widget page, which you can find here

The functionalities of a widget consist of anything ranging from a framework for your entire app (scaffold widget) to even animating an ink splash!

Creating your first Widget

Every widget has its own unique purpose, just like how you were created on this earth to fulfill your own destiny. (Sorry got a bit philosophical there).

Okay Margaret Mead never said that, but that doesn’t mean you can stop on creating your first widget.

Imagine if you as a developer should code an “action button” for a shopping app. You can use the codebase from a Dart programming language and build the entire widget in less than a day.

For the full video tutorial, click here.

And there you have it, folks!! Everything we know about Flutter Widgets.

GraphQL VS REST — Which one to choose when? | SoluteLabs

Prakash Donga — Tue, 04 Aug 2020 04:07:35 +0000

REST as an API standard has evolved over the past few years, and GraphQL has slowly emerged as an architecture of choice among the developers due to its advantages. Before we dive into the debate of GraphQL vs. REST, let’s brush up a bit on our basics.

An API (Application Programming Interface) is the intermediary that lets two software applications to talk to each other. An API dictates how a client can load data from a server.

GraphQL helps specify precisely what data it needs from an API, which is called declarative data fetching. Now that we have the basics in place let us see how REST and GraphQL came into being.

REST — is History?

REST stands for “Representational State Transfer.” It is a set of rules that determines how an API looks like. One of these rules dictates that you should get a resource (a piece of data) when you link to a specific URL.

The URL is called a request, and the data sent back is called a response.

When you call a RESTful API, the server will transfer the representation of the state of the resource to the client.

For example, if you call the Facebook Profile API to fetch a specific user, REST will transfer the state of that user, including name, profile picture, latest posts, and more.

Image Credit

To perform an operation in REST, you need to call it in the form of an HTTP request, such as GET, POST, PUT or DELETE. For example, to get the Facebook profile of a particular user, you will need the URL that identifies that user and the HTTP method GET.

Now that you know the basics of REST let's see how GraphQL came into existence and how it evolved.

GraphQL - Better than the REST?

While RESTful APIs provided a great new way of computers to interact with one another, there were also a few hiccups that made developers look elsewhere.

For starters, RESTful APIs returned more data than what was needed, meaning more API calls. Since every endpoint could return only the specified data, developers had to design endpoints keeping the front-end views in mind.

All this resulted in less flexibility, and Facebook engineers decide to build an alternative to REST. GraphQL was built by Facebook in 2012 and was made open source in 2015.

GraphQL describes how you can communicate with a server and transfer data from a client to a server. It differs from REST fundamentally due to the fact that the client can specifically ask what data it needs.

GraphQL makes it easy to source and aggregate data from multiple sources. Instead of multiple endpoints, you had a "smart" endpoint that can collect complicated queries and present the output in whatever format the client requires.

We will tell it to you with the help of a metaphor. Imagine you have to order food from your cafe, buy groceries, and borrow a book from a library. With REST, you will be making three different phone calls, which are three requests.

With GraphQL, these three phone calls can be replaced by a single one, like talking to Siri. All you have to do is tell the address to these places, and then place your order ("fetch me a Cappucino, a loaf of bread, and a copy of today's Herald.")

This is a very rudimentary way to look at how GraphQL works, but it serves the purpose. We will now see how GraphQL and REST are similar.

Similarities between GraphQL and REST

GraphQL and REST essentially accomplish the same task, i.e., communicate with a server and retrieve data. Here are a few similarities between the two:

Both GraphQL and REST are based on the concept of a resource, and they specify IDs for those resources.
Both GraphQL and REST rely on frameworks and libraries to handle the tiny networking details.
Both can differentiate if an API request is intended to read data or write it.
Endpoints in REST API are similar to the list of fields on Query and Mutation types in GraphQL.

Where does GraphQL far better than REST

We have seen how GraphQL and REST are almost similar, but GraphQL does score a few brownie points over REST. These include situations like Over-fetching and Under-fetching of data and faster Front-end development. Let us take a look at these in detail.

Take a simple blog as an example. If you want to show all the latest posts on the front page, your REST query will look like this:

Now, if you want to return the author as well, you have three methods in REST.

The first method is to fetch the authors from another resource.

The code to accomplish this task will look like this:

1. UNDER-FETCHING

If you use the above method, you will have made two server requests instead of one. This may not look like a problem at this stage, but as you continue to scale the app, there will be multiple requests to the server to different endpoints in order to fetch all the data.

The REST API endpoint may not have all the data that an application needs, and so it doesn't get everything the application needs in one data fetching exercise. This is called under-fetching.

Meanwhile, if you use GraphQL to solve the same problem, the code will look like this.

As you can see, there is only one request to the server, and there are no multiple round trips to slow down the server. This is one of the prime benefits of GraphQL.

2. OVER- FETCHING

Another method to retrieve the author's data in REST is to modify the resource also to return the author.

The code for accomplishing this in REST will look like:

Changing this resource may have a secondary effect at another place in your application, something you may not have considered.

If you want to add a sidebar in the case of our blog, that also shows the top monthly posts with their titles, subtitles, and date, using the resource /api/posts we created earlier.

We have modified this resource, and now the sidebar shows the author as well, which we don't need. This fetching of useless data is a major concern for users who have limited data plans.

GraphQL, on the other hand, fetches only the data that we need, so a GraphQL query to solve this problem will look like

As you can see, even if we add a sidebar, this query will return only the required data.

Apart from data fetching, GraphQL also speeds up development on the front end.

3. FASTER FRONT-END DEVELOPMENT

There is a third way to solve the problem of retrieving posts with the relevant author's name, which can be done in REST by creating a new resource that returns the posts with the author.

So to create a new resource, the code in REST will look like:

But the problem with this approach is that each new specific view needs a specific endpoint. When the view needs a new data, the development has to slow down until you update the endpoint.

This problem can be overcome by GraphQL since it fetches only the required data.

Nothing slows down. All you have to do is add a new field to the existing query. So the GraphQL code to accomplish this will look like:

As you can see, all we did was add a couple of lines to the existing GraphQL code.

The client has much more freedom with the data fetched using GraphQL, so we can get around developing our page much faster.

Where does REST still hold its mettle?

While we have stated all the benefits of GraphQL, there are a few benefits of using REST that also deserve mention.

These advantages include:

Code vulnerability in GraphQL: GraphQL lets you retrieve the exact data that you want from the server, which leads to a tricky security issue. If an attacker wants to carry out a DDoS (Denial-of-service-attack) to an unprotected server, all he has to do is execute an expensive nested query to overload your server. This is not the case with REST, where you use separate HTTP calls to extract data.
Error Reporting: With REST, you can use API responses and build a monitoring system for error messages. But error reporting in GraphQL leaves a lot to be desired, with the ubiquitous "200 K Error - Something went wrong" message.
HTTP caching issue: HTTP caches are used by modern browsers to identify resources and make sure no two resources are the same and avoid refetching. With GraphQL, there is no way to use a universal identifier because we use the same URL for all the requests. You have to set up your own cache in GraphQL, which is tiresome.

Now that you have seen both the pros and cons of GraphQL and REST, you might have a question that many developers face.

Which among GraphQL and REST should I use to build my website?

The answer is highly subjective and depends on a host of factors.

If your API is intended to be used on a mobile application, use GraphQL since it offers better bandwidth usage.

If you need caching and monitoring facilities in your API, use REST.

This being said, you can also use a combination of GraphQL and REST for a project. It all depends on your data and performance requirements. To make matters clear, get in touch with us here at SoluteLabs, and we would love to set up a discovery meeting.

Is React Native the Right Choice for Startups

Prakash Donga — Mon, 13 Jul 2020 09:04:38 +0000

If you have ever worked at a startup or know someone who does, you know that in general, employees have their hands full, every day of the workweek, which is sometimes seven days in a hyper-growth startup.

Startups move fast. Real fast.

And you can’t afford mistakes. According to this Investopedia report, 20% of the startups fail within the first year, and only a measly 25% of the businesses make it to the 15 year mark.

Here are some of the reasons that make a startup tick:

1. Need to iterate fast: A startup needs to test its products and bring them to the market fast. In today's fast-paced world, there are no prizes for coming in second.

2. Scale quickly: Blitzscaling should be the mantra that startups need to live by. For instance, the Indian app Chingari grew from a customer base of 500 thousand to over 10 million in a matter of weeks, when the Government of India banned Tik Tok in the country.

3. Work within tight deadlines: Startups these days move at the speed of light, and they need to if they wish to stay in the game. It only takes six days to start a business in the United States, so by the time you have convinced your college-going cousin to drop out and come slum it out with you, there are already ten other people working on a similar product.

In spite of all these factors, there has never been a better time in history to venture out and start something on your own. Unsurprisingly, the US is the biggest tech market in the world, clocking in at an impressive $1.9 trillion in 2019.

So you have decided to start up on your own, and are now looking at the various technologies out there in the market to choose the best for your app.

While there are a host of technologies out there, both native and cross-platform, we chose React Native as a good starting point if you are planning to build an app.

What is React Native?

React Native is a mobile application framework based on Javascript that is used to create hybrid mobile apps that run both on Android and iOS.

React Native is based on ReactJS, which was developed at Facebook as early as 2015. React Native has a set of components for Android as well as iOS to build mobile apps with a native look and feel.

If React Native sounds like a choice to build an app for your startup, then this is the article for you. We cover a whole range of topics in this blog post, answering questions like:

Is React Native is a good contender when you are choosing to build your app for your startup?.
Is it all rainbows and sunshine, or are there drawbacks of using React Native to build your app?
If not React Native, what are my alternatives?
Why did the drunk rabbit cross the road at three in the morning?

Okay, the last one is a long story and slightly off-topic, but we got you covered on the rest of the questions.

Which Startups are using React Native?

Before we dive into the Pros of using React Native, here are three success stories of startups who have used React Natives to skyrocket their business.

Pinterest: Pinterest can loosely be called a social network for ideas. People can share their ideas on various topics by "pinning it" on their user boards. These ideas can be in the form of photos, images, or other infographics.

Pinterest has clocked a monthly user base of close to 175 million active users, and the number of users keeps increasing by the day.

It took Pinterest all of 10 days to implement their iOS app using React Native, and an additional two days to port it to Android. Pinterest engineers say they saved close to a week of implementation time with React Native, and there were no instances of performance regression.

Wix: If you have ever built or considered building a website, the chances are high that you would have heard of Wix. Wix allows you to build a website using drag and drop tools, meaning you don't need to write a single line of code.

When the approximate 110 million users of Wix wanted to build websites using an app, Wix turned to React Native to scale quickly.

Wix developers chose React Native for its speed and efficiency and loved the fact that React Native is open source and free. With more than 80% of the app code written in Javascript, Wix did not have to hire or train new developers to achieve porting to React Native. Win-win for everybody.

Myntra: Ecommerce is growing at lightning speed in India, and the online clothing and accessories company Myntra was one of the early entries into this space.

With a staggering total of 24.48 million visitors to the site, the Myntra app needed a solution that was quick, efficient, and easy to scale. React Native came as a natural choice.

Myntra adopted React Native for its app soon after it was released, and today, more than 50% of the iOS app and critical screens of the Android app run on React Native. Developers of Myntra's engineering team are especially happy with the Hot Reloading and instant refresh feature, which helps them ship features fast.

What are the advantages of using React Native to build an app for your startup?

1. Lesser time to market:

The time taken for an app to go from the conception stage into the hands of the consumer is critical for any startup. You cannot afford to build a masterpiece of an app for years and hope the consumers will come.

More than 90% of the codebase is shared between iOS and Android if your startup chooses React Native to develop its app. With an average of 1024 apps hitting the Apple store in a single day, an early, mover advantage cannot be overlooked for your app's success.

2. More developers available:

React Native has been around for more than half a decade now, which means there is a big developer marketplace from which your startup can pick the best programmers, provided you pay a premium, of course.

Developers of React Native charge anywhere between $100 - $125 per hour in the US, and you can always find developers online on platforms such as Upwork or Fiverr. If it is an entire development team that you are looking for, then we, at Solutelabs, will be more than happy to talk to you.

3. Supports third-party plugins:

To the uninitiated, third party plugins allow a level of customization that is not available with other platforms. One of the USPs of React Native is that it supports third-party plugins.

Since React Native does not have all of the components in its main framework, it uses third-party plugins, which include native and Javascript modules.

For instance, if you want to enhance your app with a map functionality in your app, you can always connect a third-party plugin to your React Native app.

4. Declarative coding:

Declarative programming is a method where you just describe the program/ UI, and React implements it. Declarative programming makes the code more readable and easier to reason about.

To put it in simple terms, instead of saying, " Can you fetch me a glass of that drink," you can simply say, "Beer, please."

Using React, you can simply change the program's state, and the UI will change its look accordingly.

5. Reduced costs:

Building a cross-platform mobile app is far more economical than building an app separately for iOS and Android.

Payroll is one of the most expensive costs for a startup, with an average company of five employees spending around $305,000 on salary, according to data from this survey.

Instead of hiring two separate developers, if you choose React Native, you only have to pay for a single developer who will help you launch the app on Android as well as iOS. The money saved can then be used in other critical functions, such as marketing.

6. Reusable components:

At its core, a React Native application is a bunch of components in a component tree. Each one of these components has its own logic and control.

The reusable components work the same across Android and iOS, meaning you don't need to break your head while supporting both the platforms simultaneously.

Reusing some of the components also makes development easier, along with making the code easier to maintain. In case there are changes in the implementation details of any one component, all you need to do is adjust it in one place, and it takes effect everywhere else.

7. Readymade solutions and libraries:

To help speed up the development process, React Native comes inbuilt with a lot of readymade tools and libraries.

These libraries help speed up the development process. For instance, if you want to achieve a native look and feel for your app, you can give Nativebase a try. This is a collection of the most important cross-platform React Native components.

Type checking tools and testing libraries are some of the other libraries that help develop your app faster.

8. Hot Reloading:

Ask any developer out there what is the one key advantage of using React Native, and Hot Reloading will be an answer that will pop out in most of the cases. To put it in very simple terms, Hot Reloading allows you to inject new versions of files that you edited during runtime while keeping the app running.

Hot Reloading means you don't lose any of your state, a key advantage when you are tweaking the UI of your app.

Any time your code changes, you can have your app reload automatically, which helps in accelerating development time.

9. Open-source community:

React Native is open source, and since it has been around since 2015, there is a large community of developers available online.

This means you can have all your queries regarding RN answered in a jiffy, and if not, there are always Github or Reddit threads like this one to answer your questions.

React Native is backed by Facebook and has a large group of enthusiastic developers to support the framework, including people from Callstack, Infinite Red, Microsoft, and Expo.

What are the disadvantages of using React Native?

While we have mentioned all the good stuff that React Native brings to the table, not everything is all rainbows and sunshine. There are a few cons to consider before you finalize on React Native to build an app for your startup, including:

1. Messy and hard to maintain code:

React Native makes it easy to develop your mobile app, but if you have an existing codebase, it is not so easy to get your app up and running.

Integrating your existing mobile codebase to React Native takes up a substantial amount of time. Once your app starts to scale, your APIs may not behave the way you want in React Native.

This means you will have to dive into Native Libraries to make adjustments and your Javascript developer may need to write native code, in order to fill any gaps that may occur in functionality.

2. Frequent updates:

Facebook releases new updates to the React Native framework frequently. The platform is ever-changing, and bugs are discovered on a daily basis.

Every new React Native update has a lot of changes, and developers need to keep updating their app regularly. This was one of the reasons Airbnb famously stopped using React Native a couple of years ago.

Continuous investments are required to support React Native's volatile ecosystem, and your startup might as well use that money in more creative ways.

3. Tricky UI design:

From the very beginning, React Native has been considered a bad choice while developing apps that require many user interactions, animations, and screen transitions.

The iOs and Android subsystems are at the opposite ends of a spectrum, and thus a unified API cannot be used by the developers.

In most cases, UI has to be created with Swift / Java, and the native modules communicate with the JS part of your app using bridges that are asynchronous. Every pass along one of these bridges results in a performance hit for your app.

4. Abstraction layer issues:

With React Native, you are deploying large pieces of code which is present between the developer and the native platform. With these kinds of abstractions, bugs are a common issue.

If you spot a bug in any of the abstractions, you will have to get to the implementation to fix it. These issues may be out of your knowledge area, and you may end up depending on outside help.

You may also be dependent on third parties if you have to maintain the framework, which is an added hassle. You will also be on the constant pressure to keep this abstraction layer updated.

These are some of the limitations of React Native. If you are still unsure of using React Native to build an app for your startup, you can also consider the following alternatives.

What are the alternatives to React Native?

1. Flutter:

Flutter is an open-source UI toolkit that uses the Dart programming language to build apps for mobile, web, or desktop. It is also cross-platform like React Native and uses a single codebase shared between Android and iOS.

Image Credit

Flutter is developed by Google, and there is a tonne of resources available online to learn Flutter. We suggest you start with this step by step tutorial.

Popular apps built using Flutter include Reflectly, Hookle, and the fitness app WaterManiac.

2. Xamarin:

Xamarin is Microsoft's answer to building cross-platform apps that uses the .NET framework. Xamarin apps can be written on a PC or Mac and later compiled into native application packages.

With a robust community of over 1.4 million developers, there is a lot of material online for anyone who wishes to learn Xamarin. You can start with this basic tutorial by Microsoft.

Xamarin has been used to develop a variety of apps, including Olo (online food ordering), Storyo (video story creator), and Insightly (CRM and Project Management app).

3. Ionic:

Ionic is an open-source software development kit created to build hybrid mobile apps. Ionic uses HTML, CSS, and Javascript to build its apps. Ionic apps are built with web technologies, rendered using Web views.

The original Ionic version was launched way back in 2013, and since then, it has grown a sizable developers community online. To get started with Ionic web development, you can head over to this website.

Popular apps built using Ionic include the fitness app Sworkit, the grocery delivery app Shipt, and Untappd, a social network for beer enthusiasts.

While these are some of the few alternatives to using React Native, as a startup, you may also wonder if it is beneficial going the native way to develop your mobile app.

When should I choose native app development over React Native for my startup?

Native app development is far from being obsolete, and we even wrote a blog post explaining this, which you can read here.

Although React Native is good if you want to go to market fast and have a scalable mobile app, at a lesser cost, going native is a good choice if:

Performance is crucial to your app.
Your app is heavy on animations and complex screen transitions.
Your app needs to interact a lot with the phone's hardware, such as GPS, camera, etc.
Your app needs to work offline.
Security is a vital concern for your app, such as a banking app.

If the above conditions are essential to your app, it is better to natively develop the app, even though it may entail higher development costs and longer time-to-market.

Frequently asked questions:

1. How much does it cost to build a React Native app?

Prices of developers vary from country to country, with developers in the United States charging the most at $100- $125 per hour. In India, it costs anywhere between $15 to $25 per hour, depending upon the developer's credentials and past experience.

2. Where can I find React Native developers for my startup?

Although there is a host of freelancing websites such as Upwork and Fiverr offering React Native developers, we strongly recommend you to dig deeper to find individual developers online who are vetted. There are websites such as Toptal and Flexiple. If you are looking for an entire team, you can give us, Solutelabs, a ring.

3. What kind of app should I choose for my startup? Hybrid or React Native?

Hybrid apps can be developed more quickly, are relatively cheaper, and web developers feel right at home developing a hybrid app. But it does come with a few drawbacks: slower performance, difficulty adding new features, and bug fixing. To cut a long story short, given a choice, as a startup, you should always prefer a React Native app over a hybrid app.

We hope you leave this article with all your questions answered when it comes to deciding if React Native is the best choice to develop your mobile app.

Let's have a discovery meeting for your startup idea and help you identify which framework would be the best fit for your startup app development.

When should you not use React Native for App development

Prakash Donga — Tue, 07 Jul 2020 06:33:12 +0000

React Native has been around for more than half a decade now, and we have a lot of users commending it for all its benefits. Cross-platform development, use of Third-party libraries, faster app development, reduced complexity, etc.

Every framework comes with its own set of limitations, and React Native is no exception. There are a few glitches that React Native is riddled with, which has put off even the most seasoned of developers.

The major drawbacks of React Native were thrown into the limelight when Airbnb famously switched from React Native, sunsetting the technology to focus its efforts on building the Native app.

Companies like Udacity soon followed suit and moved out of React Native, citing performance and maintenance issues.

So is React Native the best choice for you to build your app? In this article, we look at some of the drawbacks of the React Native framework and why it is probably not the best solution for you to build your app.

1.Applications with complex User Interfaces

Imagine you are building a chat app. The app requires a high level of customization, and there are a lot of processes running in the background at any given point of time. If you ask any developer which framework they would prefer to build this app, the chances are slim that they would answer React Native.

Although Javascript allows developers to build fast and smooth apps, native building platforms, such as Java, Swift, and Objective — C, are much better to build apps that are resource-intensive.

Native iOS offers far better solutions for creating complex animations when compared to React Native. Also, if you have to use Camera, Touch ID, GPS, etc. for your app, React Native does not offer support for these. You have to use the native framework to access these features.

Developers may face issues while dealing with screens using complex gestures since there is a sea of difference between Android and iOS touch subsystems to be combined in a unified API.

2.Building utilities such as battery monitors

When you set out to build utilities such as battery monitors, media players, antivirus, etc. it is much easier to use native app development compared to React Native. This is because these applications always use native features and APIs provided by iOS.

Image Credit

One could argue that we could use native wrappers for APIs and components to build these utilities, but this takes up a lot more time and effort on the part of the developers, compared to using native components.

3.Apps built specifically for a single OS

Ever heard of Nova Launcher, an Android app that lets you customize your home screen, icons, and dock widgets? Or Luci, an app that helps you track your dreams? If you are a loyal iOS user, tough luck because these are some of the most popular Android-only apps.

But that doesn't mean iOS users are not a part of the "exclusive app" club. Apps such as Timepage, for instance, is an iOS-only app that is designed beautifully and enables you to see your schedule for the day easily, even going as far as predicting weather on a particular day using historical data.

Image Credit

With both Android and iOS having a plethora of apps that are built exclusively for the respective OS, a React Native app will always feel inferior to these apps, simply because it cannot handle the complexity of a native app. The performance of your app depends on a lot of factors, but time and time again, it has been shown that native apps out-perform apps built on React Native.

4.Apps utilizing a lot of Computation

We have seen previously that React Native is great to build small, simple apps that don't require a lot of user interactions. But what happens when you need to build an app that utilizes heavy computational power from your smartphone, say, a stock trading app.

Given the very nature of Javascript, it is clear that you would need to offload some of the heavy computational operations to the native part of the mobile app.

Image Credit

Considering the fact that according to a Tech Beacon survey, a whopping 61% of users expected an app to load in under 4 seconds, and 80% of respondents indicating that they will only use a problematic app a maximum of 3 times, performance of the app becomes a key issue. You cannot afford to publish an app to the Play Store or App store that has long loading times unless you want to cause some serious damage to your company's reputation.

5.Differently behaving components

When you build a cross-platform app using React Native, you expect the app to behave the same way in Android as well as iOS. While this may be true in most cases, there are a few worrisome exceptions.

Take Reflectly, for example. An intelligent journal, the app uses AI to help users keep track of their thoughts and maintain a diary of activities. The app was initially developed in React Native, and the team published it for iOS on the App store.

Image Credit

When the team then decided to release Reflectly for Android, it was looked upon as a routine task that required minimum effort, since React Native is supposed to be "cross-platform." Instead, the team faced failed overflows, missing scroll elements and shadows cut off.

The team then spent an agonizing six months building the iOS app first and fixing it for Android. The app soared in popularity, and eventually, the team behind Reflectly decided to port to Flutter.

This is just one of the horror stories of elements behaving differently in iOS and Android, and an important aspect to keep in mind while developing your app.

6. Abstraction layer issue

For the uninitiated, an abstraction layer, also known as "the bridge," allows React Native to activate the actual rendering APIs on Android and iOS. This abstraction layer is built on top of the native platform to create more functionality.

So how does this abstraction layer affect your React Native app? For starters, finding bugs in the abstraction layer is a real pain, as countless developers will testify.

A bug in the abstraction layer means an unexpected bug in your application. These bugs are extremely difficult to diagnose, in addition to being difficult to pinpoint.

If this wasn't a big enough hurdle, the abstraction layer adds another hurdle to the app development process- third party libraries. Using an abstraction layer means being dependent on these third-party libraries to ensure your framework is up-to-date and does not break easily.

If your app uses custom designs, you will have to implement them in native languages such as Objective C or Java. This beats the very purpose of pf building a hybrid app, and developers are left frustrated for all the additional code.

All in all, if your app is developed using React Native and depends on an abstraction layer, it is high time to reconsider going in that direction.

7. Third-Party Resources

There are specific use cases where downloading third party resources becomes the only way for you to build your app. This is one of the reasons why you must reconsider using React Native while building your app.

Take, for instance, the use of Tab bar. While it is easy to build a Tab Bar in iOS, it isn't easy to implement this in Android. To add things like this, you often have to download third-party resources and libraries. This increases the dependency of your app on an aspect that you can't control.

Image Credit

Add to this the fact that React Native updates happen very frequently, and the chances that your third party libraries or resources that you have used in your app get outdated. According to Facebook, updates to React Native now are scheduled once a month.

If you are building an app that heavily relies on third-party resources, then think twice before choosing React Native.

8. Testing and implementing hassles

If you are an established app developer and are looking to pick up React Native to help boost your go-to-market speed, you might want to reconsider due to debugging issues. This is because a new developer who is just learning the ropes of React Native cannot utilize all the features of the chrome debugger to edit each element's property.

React Native does come with an in-built code inspector, but it is not the most versatile solution around.

Image Credit

There are also implementation issues that work against React Native as a framework. For example, consider building a feature such as long lists. These could be anything ranging from tweets on twitter, Facebook posts, etc. These are all in-app lists. When more and more users start using your app, and these lists become long, it is really difficult to implement it from a development point of view.

React Native does provide a Flatlist Library to deal with this issue, but it can't be compared with Android's RecyclerView or iOS's UICollectionView.

9. Architecture issues

React Native, like any other framework, is based on a core architecture that comes with its own set of problems that cannot be fixed. Take, for instance, the behaviour of JSON( JavaScript Object Notation).

Every piece of data flowing through your app has to be serialized into JSON while moving in and deserialized while moving out. This double pass can wreak havoc if your app is data-intensive, and also prevents sharing of memory between Javascript and native.

Image Credit

Another major drawback of using React Native is high initialization times. This is because any code written in Javascript needs to be parsed in the JavaScript Virtual Machine. When you compare this with binary loading, there will always be a high initialization time.

Before delving into React Native to build your app, be aware of these architectural issues.

10.Community support

React Native has a large community online to answer all your queries when developing an app. Still, many feel this community is mostly web focussed and consists of people in the web industry.

In other words, there is a comparatively fewer number of native developers who will support you while you are building a React Native app.

So those are our top 10 concerns that you should keep in mind before choosing React Native for Web development. Did we miss anything? Write to us in the comments section below, and we will give you a special shout out.

14 Reasons to Choose React Native for App Development

Prakash Donga — Mon, 15 Jun 2020 06:54:23 +0000

Open-sourced 5 years ago by Facebook, React Native was developed after an internal hackathon to create Native UI elements using Javascript. React Native was the perfect combination for developers who wanted to create native UI using the tooling of their choice - Javascript. Since then, React Native has grown by leaps and bounds.

But, why? Let's take a look at some past developer experiences.

Building an app has never been easier, with thousands of resources available online and a lot of developers churning out tutorials every second. But there has always been a polarizing war between Android and iOS.

Do you learn Java/Kotlin to develop Android Apps that have a wider reach and a huge audience? According to the latest reports, there are 2.56 million apps on Google Play Store alone. So your average customer is spoilt for choice.

Or would you prefer the much more lucrative iOS, where consumers, on average, spend 2.5 times as much as Android users? In that case, you will have to go down the objective-C/Swift learning path.

But a few developers at Facebook were tired of using different languages to build apps that did essentially the same thing, and, back in 2015, came up with a framework for developing native-style apps for Android and iOS using a single language, Javascript. They called this framework React Native.

The mantra that Facebook has used is "Learn Once, Write Anywhere," and React Native is a perfect application of this saying. So without further ado, let's dive right into the reasons why you should consider React Native for App development.

Reason 1: Supports Cross-Platform App Development

Talk to any developer on the planet, and they will tell you how much of a headache it is to maintain both Android and iOS apps because they were written in different languages and use different frameworks.

A single platform to develop the app means consistent user experience across multiple platforms. All one needs is a proficient Javascript developer who is comfortable with native UI libraries, APIs, and hybrid app development.

Caveat: Although most of the time, there will be no need to learn native programming languages in detail, there might be times wherein you might have to work with some native development. This happens especially when you're integrating native SDKs for Android/iOS but no React Native SDK is available or when certain specific native features aren't available with React Native.

Reason 2: Develop Apps Faster (Move Fast and Build break Things?)

React Native has been around for more than half a decade now, with a large online support community that is growing by the day. What does this mean to the average developer? There are tonnes of relevant components out there ready for use, which means you don't have to build everything from scratch.

Due to a single code, the chances of finding a bug in a React Native app is greatly reduced. This means that a Minimum Viable Product (MVP) can be built faster than ever. You can easily launch the first version of your app with bare minimum functionality, your MVP, and keep everything else for later development.

Once you know what additional features are required, you can go ahead and build them, rather than wasting time and resources on building detailed interfaces. Get your app out fast, see what is working and what's not, and then put your weight behind the things that are working.

Using a shared layer for iOS and Android means React Native apps are developed at least 30% faster.

Reason 3: Update Apps Without Going to the App Stores - Code Push

Once the app is published on the App Store or the Play store, you might realize that you missed out on a typo or wanted to tweak a small feature. With native apps, adding new features means you have to reiterate the build process, and upload the updated versions of the app on the store.

This would then go through the approval process of Apple or Google, followed by which the users have to install the updated apps manually.

But all this was before Code Push - being used by React Native and Apache Cordova. With the App Center cloud service, the app is automatically updated during run time, and the users can see the changes without needing to re-launch the app.

Reason 4: Work with a tight budget

We have already seen that React Native apps can be built a lot faster than building separate Android and iOS apps. While time-saving is an obvious advantage of using React Native, another important benefit is the money saved.

When you are a small startup that is just getting off the ground, you need to maximize the ROI on every penny spent. Instead of hiring separate iOS and Android developers, you can instead divert those resources to hire a good React developer. While there are cross-platform options such as Xamarin and Cordova, developers agree that they do not provide the best experience.

Reason 5: Reduce Development Complexity (Simple and Supple)

With React, complex tasks are made simple using easy to read code. The UI library made by Facebook is used by this framework to create code that is simple to understand and to implement React JS.

App development projects usually have different expected outcomes, and React Native provides a simple and straightforward solution to a variety of these problems.

A key feature of React Native is "Hot Reload." Using this feature, app developers get a live preview of the code and its actual impact, all of which co-occur while coding the app. This makes sure that developers commit the least amount of errors, and makes the code "bug-free."

The hot reload app means that the code can be corrected or customized while the app is being uploaded. The system gives you a state-independent perspective, even during a state change.

Reason 6: Looks like a Native App

Apps built with React Native have native UI components as opposed to Phonegap or Ionic. Using the latter makes the user experience always feel web-based, rather than a native app. This is an area where React Native scores big time.

React Native allows your application to use elements that are native to the mobile design. Instead of single components that render elements across both platforms (ex. Button), React Native components are aware of other native components. React Native takes the building blocks from the native user interface and combines it with its own Javascript.

The result? Apps look and work like native apps, and the user experience is greatly enhanced. Add to this the fact that React uses the same building blocks for iOS as well as Android, the look and feel that the users expect will be the same across both platforms.

To get similar functionality as a native app, developers also have the option to write a mixture of native and React code. This further enhances the "native-like" appearance of the app.

Image Source

Reason 7: Same programming language makes things straightforward

While building an app using React Native, the primary code base uses the same foundation-level programming language for both Android and iOS.

This is similar to building the same app and deploying it both on the Play Store and App Store. You can also recompile the app easily without any changes in the framework at a level of your choice.

While other Javascript-for-mobile approaches wrap your Javascript code into a web-view, in React, a component describes its own appearance. React handles the rendering after this stage, a clean abstraction layer separating these two functions. This abstraction layer, known as "the bridge," enables React Native to call the rendering APIs on iOS (real UI Views) and Android (native Views)

With React Native, most of your code will be written in standard Javascript and CSS. React then takes your application and runs it using the host platform's Javascript Engine. You thus get the benefits of native performance, behaviour, and animations, without actually having to write Java or Objective C code.

Image Source

Being mostly written in Javascript, you can make use of a lot of perks of web development like, for instance, the ability to instantly "refresh" your application to see changes in your code.

Reason 8: Lots of ready-made solutions and libraries

With React Native, there are plenty of ready-made solutions and libraries to ease development activities.

There are testing libraries such as Jest, Chai, Mocha and Enzyme that aid in writing bug- free code. Expo is a free and open source tool chain which will help you monitor the progress of your app and test new features.

Potential errors in your code can be checked easily using a process called linting, and ESLint is a great tool to accomplish this task in React Native. Type Checking can also be done faster now thanks to tools such as Flow and PropType.

Redux is one of the most popular React Native libraries that accomplishes State management. With all these tools and libraries, you can easily move heavy computation towards the server and build cloud-native apps.

Reason 9: Supported by Facebook

Facebook is promoting React Native in a big way, by constantly updating the framework with new features and new ways to solve our problems. React Native is already more than half a decade old and has a huge developer community online.

The ease of use of the language, along with cross-platform compatibility, means React Native is being adopted by more and more developers. If you take a look at React Native's Github repository, you can see that nearly 2000 developers have committed more than 16000 times in 72 branches, with a whopping 300 and above releases. Facebook itself uses 750+ screens made in React Native in their apps

// Detect dark theme var iframe = document.getElementById('tweet-1234801516843819009-646'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1234801516843819009&theme=dark" }

In the absence of a steep learning curve, even general-purpose developers can create apps with minimal support from mobile app specialists. With support from tech giants such as Facebook, React Native is now becoming the de facto language for mobile app development.

In January of 2018, Facebook opened the door to conversations like what should be part of a certain release, by creating a React-Native-releases-repository, where everyone could keep releases of React Native in a collaborative manner.

React Native is already adopted by companies such as Skype, Uber, Tesla, Walmart, Pinterest, and Bloomberg, and it doesn't look like it is slowing down.

Reason 10: Individual users get personalized UX

React Native was built with the ability to segregate Framework code, Native code, Javascript code, and styling. This means developers can easily create different styles for the app from the server-side.

Developers can now deliver a personalized user experience to each individual user on the same application. Personalization is one of the cornerstones of digital transformation.

Image Source

The level of personalization possible on React Native is so high that you can, on the server-side, define personalized style per user group, and each user will then be able to see their own personalized UX.

Reason 11: Third-party plugins

React Native has a lot of reusable libraries available online, and this number is keeping on increasing by the day as more and more companies such as Wix start supporting it.

Building an app from scratch, with an original software foundation, can be an expensive and a time-consuming affair. To overcome this challenge, you need to re-use some of the existing components, and this is where 3rd party plugins come in.

Third-party plugins eliminate the need to use specific Web View functions. React Native can act as the framework that connects the plugin with a native module. There are a variety of options available to link the processes, which help in faster loading and smoother running, along with better memory management.

Simply head on over to your favourite React Native community or library, search the required plugin, and use it to enhance the app's performance.

Reason 12: Developer Availability and Community

A great reason to use React Native is the ease with which we can find developers. Backed by Facebook, who does a lot of heavy lifting in the development space, React Native has a very robust community online.

Facebook engineers are always developing and updating the platform, which helps keep it relevant. React is also among the top 3 most commonly used libraries.

Javascript being one of the most accepted programming languages, has allowed a large pool of specialists to mushroom, who can build React Native apps. Javascript's wide range of applications and its maturity enables even new developers to pick up the language quickly.

Choosing React Native to develop your app gives you the flexibility to choose a smaller team of designers, programmers, QA specialists, etc. Being a popular programming language, finding a new React Native developer is easy if your current developer has left the organization in the midst of developing the app.

Smaller teams also tend to be more involved and innovative, according to this Forbes article. All the more reason for you to choose React Native.

Reason 13: Access to Native API

Using React Native, developers can imitate the look and feel of the UI very close to Javascript and less like a framework. This makes the development process simpler and enables the UI to give quicker responses.

React Native's components match 1:1 with native development artifacts, and the result is the app looking indistinguishable from a native app.

React Native also seamlessly integrates with the existing code, since it is compatible with native software. Developers can thus build complex apps using simple code.

Reason 14: Easier Debugging

One of the biggest advantages of having a single codebase for Android and iOS is that the detection of bugs becomes easier. React code being reusable; you only need to give a single update for both platforms.

Ask any developer, and they will tell you that debugging is not the most pleasing job around. You have to spend hours looking at yours, or sometimes others code, and pinpoint that exact location where the developer has made a silly syntax error.

With React Native, your team does not have to spend countless hours looking at two different codebases. A single bug fix removes the bugs in all the different operating systems at once, helping you deliver consistent behaviour across all platforms.

When you are developing a native mobile app, you or your team will need to use the particular platform's Integrated Development Environment (IDE), having to learn all the nuances of the relevant debugger. But with React Native, you can use a few commonly available tools, such as console.log or Nuclide, a plugin released by Facebook itself.

And lastly, with React Native's "hot reload" feature, developers can now perform functions such as error handling at runtime, and instantaneously see their results on the running app. Compare this to native development, where developers have to halt the entire system, apply the fix, and then restart it again. The developers can push updates later, and the end-user will not be affected.

There you have it. Thirteen reasons why your next app should be built using React Native.

SoluteLabs is a leading React Native app development company taking pride in building most complex enterprise applications in a shorter development cycle and on-budget. Talk to us now!

Why invest in a telemedicine app:11 Reasons

Prakash Donga — Mon, 08 Jun 2020 08:04:40 +0000

The coronavirus pandemic has brought into prominence a technological development that has seen a lot of interest over the past few years but has never really taken off — telemedicine.

Telemedicine is a relatively new form of e-healthcare where patients and doctors are connected via video calls, chat, text, or phone calls.

Telemedicine has evolved alongside technology in the past few years. The pandemic has only heightened the importance of a good telemedicine system to back up the regular healthcare industry.

The US government, for instance, waived many billing and geographical limitations for telemedicine in March.

History of Telemedicine

Telemedicine has been around for quite some time, although not in the format that we know it. As early as 1940, there have been documented cases of medical record transfer over telephone lines in Pennsylvania. In the '60s, NASA used microwave technology to transmit X-ray photographs and other medical information to the Public Health Service hospital.

As we moved into the 21st century, telemedicine evolved into more sophisticated methods, with smartphones replacing desktop computers and the increase in internet penetration, making telemedicine adoption easier in rural areas.

The value of the global telemedicine market was estimated at a whopping 17.8 billion dollars in 2014, and this number is expected to grow at a rate of 18.4 percent through 2020.

So why should you consider investing in telemedicine? We will now give you 11 reasons as to why investing in telemedicine is worthwhile your time and money. Read on to learn more.

Reason 1: Supports Social distancing

In this age of the coronavirus pandemic, social distancing is seen as a key step in stopping the spread of the virus in its tracks.

A poll by Gallup found that 72 percent of adults in the US say they will now avoid public places like restaurants and stores.

64 percent of all the respondents said they would "mostly" isolate themselves, and the percentage is only poised to go higher as the virus spreads through the country.

At the time of publishing this article, the US has recorded close to 86,000 deaths and another 1.5 million infected by the coronavirus. The only way this curve can be flattened is by practicing social distancing.

Telemedicine is the perfect solution to help tide over this crisis, especially in a developed country like the US, where close to 81% of the population owns a smartphone.

With government intervention encouraging the use of telemedicine, social distancing is probably the biggest benefit of investing in this field.

The Centers for Medicare and Medicaid Services (CMS), for instance, allowed remote healthcare to be billed the same way as an in-person visit, for more than 80 new services.

It is obvious that governments across the world want to help telemedicine grow, and that makes it the right time to invest in this field.

Reason 2: Helps deliver care to patients in rural areas

With video consultations and on-demand doctor's appointments, telemedicine can help bridge the gap between the number of doctors and patients, especially in countries like the US.

According to this data by the WHO, there are close to 26 doctors per 10,000 patients in the US, whereas the number of doctors falls to approximately 8 per 10,000 in a developing nation like India.

The US census data tells us that one in five Americans lives in rural areas, which translates to roughly 60 million people. Coming to India, this number sees a surge, with approximately 68% of the country living in rural areas. That is a huge chunk of the population that can be served using telemedicine.

While mobile penetration is strong in the US, with approximately 77% of the country using smartphones, the technology is in place, and all that is needed is a rise in awareness among the people.

Telemedicine apps have been going strong post the COVID 19 crisis, and physicians have been upping their game to help provide timely medical assistance to people all across the US.

For example, Dr. Bob Murry, chief medical information officer at NextGen Healthcare, has switched all his appointments to virtual-only.

Doctors like Bob will soon have to conduct a majority of their consultations over the internet, which means inclusive -healthcare for people living in rural areas.

Having a wide geographical reach, is thus, a definite plus in case of telemedicine, and a strong reason for considering an investment in this field.

Reason 3: Reduces initial investment

A visit to the doctor is a costly affair and something that a vast majority of patients want to avoid. The average cost of treating non-life-threatening cases such as sore throat, flu, and bronchitis is $1800 more in the emergency room than in primary care settings, according to this report.

Setting up a clinic will also leave a big hole in the investor's wallet, be it the physician or the bank that is helping them open the clinic. According to the website doctorly.org, launching a primary care practice costs anywhere from $70,000 to $100,000, which includes money for rent, payroll, insurance, and living expenses for the first few months.

Compare this to the low initial cost of setting up a telemedicine practice. This would require you to buy some basic medical devices, which would cost you somewhere in the range of $5000 to $10,000, along with a video conferencing platform ( $1500), a telemedicine cart which includes telemedicine software, primary care devices and mobile case ($20,000) and basic training for your staff ($200). That's an entire setup for under $40,000!!

If you want to learn about the cost of setting up a telemedicine facility in detail, you can check out this blog.

Setting up a telemedicine facility is far cheaper than setting up a physical practice. With more and more people turning online for their medical needs, it is a prime reason for you to invest in this space.

Reason 4: Reduces patient's waiting time

Waiting times can be frustrating to the patients, and it reflects in their doctor's satisfaction scores. We define waiting time here as both the amount of time it takes a patient to book an appointment with the doctor and also the amount of time the patient waits physically once they visit the doctor.

In 2017, Merritt Hawkins created a survey in which they found that in 15 large U.S Metros, a person had to wait 24.1 days before he could book an appointment with a doctor. On average, "new patients" spend 2.7 weeks after calling for their first appointment.

The patient's predicament doesn't end once they reach the doctor too. The average waiting time for a patient in the United States was 18 minutes and 13 seconds, according to this 2018 Vitals study.

Image Source

All this can be avoided with the help of a telemedicine app. Patients can see the availability of the doctors, pick a time that suits them, and carry on with their appointment from the comfort of their homes. The only bottleneck here is the internet speed at both the patient's and the doctor's site, and with services such as 5G in the pipeline, this can be easily overcome.

Reducing the patient's waiting time is a definite plus point for considering an investment in the telemedicine space.

Reason 5: Helps patients dealing with chronic ailments

Chronic diseases are generally incurable diseases that require prolonged medical attention, such as asthma, type 2 diabetes, cancer, and heart disease. According to various studies, approximately 133 million Americans suffer from some form of chronic illness or another. That is roughly 40% of the population, and the numbers are on the upswing.

Chronic diseases account for 81% of US hospital admissions, and 91% of all prescriptions filled. That's a large percentage that telemedicine can have a positive impact on.

Telemedicine can greatly help the patients who have a chronic ailment and who live in rural areas, and who have to travel a lot to see their primary health care provider. Many patients may also be uncomfortable sitting for prolonged amounts of time, and these patients will benefit a lot if they can talk to their doctor and get a diagnosis done from the comfort of their homes.

A patient suffering from a chronic ailment may need to make lifestyle changes, such as quitting smoking or adopting a new exercise regimen. With telemedicine, doctors can keep a closer eye on their patients.

There are different types of specialized equipment that the doctors can use to monitor their patient's health remotely , for instance, a Bluetooth scale. More on these types of equipment later.

If the patient of a chronic ailment sees a new symptom, telemedicine allows him to get instant feedback from their physician, instead of traveling long distances. This will also help the doctors gauge if the patient needs readmission or if their condition can be cured with a tweak in the medication. This helps in reducing hospital costs for the patient.

Reason 6: Helps you differentiate from your competition

In a highly competitive healthcare environment, telemedicine can help your clinic stand out among the competitors.

According to this report by Business Insider Intelligence, in 2018 alone, there were an estimated seven million telehealth users worldwide, and three -quarters of large US companies provided telemedicine as part of their health plan.

75% of the people polled admitted that they were willing to attend a doctor's appointment remotely.

Image Credit

The stats show that there is more than enough willingness among employers and patients alike to take advantage of telemedicine facilities, and the onus is on the healthcare providers to now set up the necessary infrastructure.

As the coronavirus pandemic washes over the world, more and more people will think twice before stepping into a hospital, and telemedicine will be the method of choice for most patients to interact with a doctor.

For family practices or local physicians, telemedicine allows the opportunity to compete with retail health clinics or larger practices. Patients are now on the lookout for non-traditional ways to healthcare, and telehealth can help these small clinics to position themselves as an alternative to big hospitals.

Reason 7: Helps save time for doctors & patients

A study spanning two decades, conducted by the University of California Davis, found that adoption of telemedicine saved a patient nearly four hours of driving time and $156 in travel costs.

One of the most telling advantages of telemedicine is that it saves patients and doctors enormous amounts of time. Time spent by the patient to travel to a doctor, time spent in waiting rooms, time spent to collect test results, all are eliminated when you use telemedicine.

For doctors, telemedicine means they can attend to patients sitting far away during their lunch breaks/ after regular practice hours.

The adoption of telemedicine also has an ancillary benefit in the form of time savings for the administrative staff in these clinics. When a person decides to partake in an online consultation, the office staff don't have to worry about check-ins and rooming for these patients. This time can be used to give better service to the patients who actually visit the clinic, improving the overall satisfaction score.

Reason 8: Reduces treatment costs

The UC Davis study, which we mentioned earlier, also found that over a time period spanning two decades, from 1996 to 2013, showed that telemedicine collectively saved patients approximately $3 million in costs.

According to another study by Nemours Children's Health System, telemedicine saved a patient an average of $50. Telehealth appointments, on an average, cost $24 less than a normal visit for every patient.

Alfred Atanda Jr, MD, who led the Nemours study, says, "Telemedicine may be utilized by providers to keep cost and resource utilization low."

Doctors can adopt the use of telemedicine to retain patients in their practice. A Truven Health Analytics study showed that 71% of emergency room visits were unnecessary. Every healthcare visit the patient seeks outside their family physician is dollars lost to the person.

Setting up a home telemedicine practice also means that the physicians can leave their practice early, which means they don't have to pay for utilities or other expenses incurred by keeping the clinic open. If the supporting staff is paid by the hour, the physicians can save money on their payroll by spending less time in the office.

Reason 9: Provides access to medical aid during pandemic / natural disasters

The coronavirus pandemic has accelerated the adoption of telemedicine and has thrown into light the vast loopholes in the medical system.

This article from The Economist shows how Chinese telemedicine services like WeDoctor, JDHealth, and Ali Health rose up to the challenge and opened online coronavirus clinics to treat patients across the nation.

For patients, telemedicine gives them the opportunity in distance monitoring and remote diagnosis of mild diseases like a fever in case they are under quarantine.

And telemedicine providers have jumped at this opportunity to provide quality healthcare to patients and bring them onboard.

UCSF, for instance, has screened over 50,000 patients using its automated platform and has helped in identifying and preventing the spread of the virus.

In North Carolina, UNC Health Alliance is using its COVID-19 Quarantine Checks to provide daily check-ins to more than 1000 people.

And it's not just the coronavirus pandemic. Telemedicine can be vital in providing vital healthcare to patients in case of natural disasters like a tornado.

Nemours, a telehealth service provider, was among the many vendors who provided free telemedicine services in the time of Hurricane Irma and Harvey.

American telehealth companies like MDLive, American Well, Doctor on Demand and TeleDoc, all offered free healthcare facilities in the time of Hurricane Harvey.

While natural disasters cost the state millions of dollars in damage and irreplaceable loss of human lives, they must also be seen as an opportunity to advance telemedicine technology further.

Reason 10: Eases access to expert opinions

In the US, there are 5.2 neurologists for every 100,000 patients, according to this study by the US National Library of Medicine. This number varies from 12"1 in more developed parts like Massachusetts to a measly 2.6 in Nevada and Wyoming.

An NCBI study shows that there are 48 cardiologists per 100,000 patients in the United States. The pattern is similar for other specialists such as oncologists, dermatologists, critical care specialists, etc.

Imag Credit

Telemedicine aims to address this gap by connecting specialists with their patients via call, chat, or video. Patients, especially those living in rural areas, need not travel hundreds of kilometers to see a specialist.

There are several portals, including Specialists on Call and Chiron health, who focus on providing customers with specialist care. American Well has taken a step ahead and launched

"The Exchange," which is an online marketplace that connects every stakeholder in the medical industry.

American Well CEO Roy Schoenberg said that the company wants to do what Amazon did for book stores initially, and create a reliable national virtual healthcare system.

Expert opinions matter and the ability of telemedicine to provide this service at low cost means this is a great time to invest in this field.

Reason 11: Brings advancements in telemedicine makes diagnosis easier

Telemedicine relies heavily upon technology to make it a differentiator to the normal healthcare system, and the rapid advancements in technology have only helped telemedicine gain more prominence.

Take diagnostic equipment manufacturer ekuore, for example. The company provides solutions such as electronic stethoscopes and other allied products.

Electronic stethoscopes with interchangeable chest pieces mean doctors can remotely monitor the health of their patients with an app on their smartphone. This comes in handy if your patient is hundreds of kilometers away and has to drive all that distance just for a regular check-up.

The app also allows a doctor to record and edit auscultation, share it with other doctors to gain a second opinion, and display a phonocardiogram on their smartphones.

It is technologies like this that give telemedicine that edge over conventional healthcare systems and makes it one of the most lucrative investments you can make.

Watch this space for more on telemedicine, including costs, the best telemedicine apps in the market at the moment, and how you can build your own telemedicine app.

15 UX Tips for great Progressive Web Apps (PWAs)

Prakash Donga — Tue, 19 May 2020 10:23:09 +0000

Starbucks is known for its quirky marketing strategies, as well as being a great supporter of upcoming technologies. So when they announced that they had doubled their daily active users using Progressive Web Apps, it got our attention.

As we studied more and more about PWA's, we kept reading about stories of how they have made a huge impact on businesses.

For instance, Housing.com, one of India's leading online real estate platforms, saw their bounce rate reduce by a whopping 40% after they introduced a PWA.

Commonfloor groups saw a 10% increase in overall traffic and a 2x increase in daily active users once it tried its hands on PWA.

Image Source

Uber designed its PWA to load fast, even on 2G networks, and it now takes less than 3 seconds to load the core app.

Having been part of developing a few PWAs ourselves, we at SoluteLabs decided to write a comprehensive post on the state of PWAs in 2020, which you can find here.

When a few people wrote in asking for best practices while developing a PWA, we decided to dig deeper and find out the nitty-gritty details that contribute to the success of a PWA.

So without further ado, here are 15 UX tips that will help you build a great Progressive Web App.

1. KISS (Keep It Simple, Stupid)

"Simplicity is the ultimate sophistication."

The quote, by Leonardo Da Vinci, however, is relevant to a lot of things, ranging from Apple products to PWAs.

Image Credit

To put things in perspective, a mobile screen is roughly 3–5 diagonal inches, compared to 20–30 inches on a desktop screen. Also, keep in mind that the mobile phone has much less processing power when compared to a desktop computer.

Also, apps generally use a far lesser amount of content than a mobile web page, meaning you will have even less to work with.

So curb your enthusiasm when it comes to impressing the user with an intricate layout and complex design. No one wants to look at how much fancy artwork you can cram into their tiny mobile screen.

Remember, your ultimate objective is to serve the customer, rather than making them go gaga over your design. If an element in your PWA shows lower engagement compared to others, consider removing it altogether.

2. Ensure smooth navigation

A PWA is expected to behave more like a mobile app from a UX point of view, and a website from a technological point of view. Treat your approach to developing the PWA the same way as you would while developing a native app.

A good starting point is to avoid web-based interaction elements like footers completely. With a PWA running in a full-screen mode, you don't have browser functionalities to help the user.

To overcome these challenges, it is best if you use an easy to use the navigation bar in your app, preferably a small one that doesn't take up a lot of screen space.

Touch gestures should be used sparingly, since they are hard to code and not worth the effort, from a UX point of view.

As a rule of thumb, keep some sort of navigation element at the bottom of the screen. Again, tie navigation back to the first point we wrote about keeping things simple.

3. Use simple fonts

As mentioned in point no.1, with PWAs, it is always better to use simple fonts, which will help decrease load time.

Fonts are notorious in slowing down your website, as explained in this article.

As a rule of thumb, use device default fonts wherever possible.

Only use the fonts you really need and try not to load any font-weight you are not using. Limit the font files to a maximum of three (including different weights).

Stacking together all the fonts that a modern platform uses, tweaking the app's typography so that it is consistent with the user's operating system, will also help speed up load time on your PWA.

Users of your PWA will transition smoothly between your PWA and your app since they are already used to the fonts. The default fonts are Roboto on Android and San Fransisco on iOS.

Image Source

This technique is being used by Medium, which is populating its user interface with device fonts.

Try avoiding custom fonts, as they create distractions and slow down the performance of your PWA.

4. Cross-browser functionality

One of the key advantages of a PWA is the ability to enhance and polyfil a host of features when the browser lacks the ability to natively support them.

The term "Progressive" in Progressive Web Apps is itself since the app works well in all the browsers, and a user is presented with an enhanced behavior whenever there is an update in the browser.

Image Source

When designing a PWA, it is important to be aware of each browser's capability to be compatible with the PWA features.

While the common browsers such as Google Chrome and Mozilla Firefox support almost all of the PWA's features, Safari still does not support a few key PWA functionalities such as Web push notifications.

Our friends at Good Barber have put together an impressive checklist when it comes to the compatibility of different PWA features with different browsers, which you can check out here-

Image by GoodBarber

Keep these limitations in mind while designing your PWA.

5. Create an Offline mode

Designing your PWA means making all its features available to your user, whether they have a good internet connection or not.

A study by Trivago, a leading hotel search engine, showed that once they implemented their PWA-evolved site, 67% of users whose connection was interrupted, continued using the site once they came back online.

The trick here is to replace the loading spinner with something relevant, like a small game that the user can play while waiting for the content to be loaded (Remember Google's infamous Dinosaur game?)

Image Credit

Another great trick to keep users engaged in times of a lost internet connection is the use of Skeleton screens. Skeleton screens give a sneak peek to the user as to what to expect and guides them to the point of interest on a page.

Executed correctly, a skeleton screen can trick the user into believing that the screen is loading faster.

Another technique that PWA's can implement is the use of Service Workers. Service Workers enable you to store and cache user data even in the absence of a working internet connection.

Konga, a leading Nigerian e-tailer, used this technique to enable access to their websites to users even when they did not have good connectivity.

Design for offline compatibility, and remember that while creating a PWA, there is only one correct opinion, that of the customer.

6. Make it discoverable

While designing PWA's, keep in mind that you should retain some of the features of a regular website, including making the PWA discoverable and SEO friendly.

Google requires Javascript rendering in order to see the content on your page, but this process uses up a lot of resources and time since it has to be parsed, compiled, and executed. Google indexes Javascript sites in two phases, fetching the server-side content in the first wave, and client-side rendering is done in the second wave.

We wrote a detailed blog stating the differences between client-side rendering and server-side rendering, which you can find here-

These challenges can be overcome by configuring your server to respond to requests of deep URLs with fully-rendered HTML.

You can also keep the following points in mind while making your PWA SEO-friendly.

Design each page so that Google can crawl the page independently, and is also available through a specific URL.
The initial indexing wave should only fetch the server-side rendered content.
Use server-side rendering whenever possible. If it is not possible to render server-side, use dynamic rendering using services like prerender.io.
Use canonical tags to specify the canonical URL of each page.
Avoid cloaking. Ensure that you serve the same content to users and search bots if using dynamic serving.
Make sure that the website is secure and is run entirely on HTTPS.
Make sure that the web pages load fast, preferably under 5 seconds.

7. Works with any input type

When using your PWA, users should be able to switch between a variety of input methods, be it keyboard, mouse, touch, or stylus. Input methods should not be dictated by screen size.

Enhancing experiences by allowing input-specific controls, such as pull-to-refresh, is also a good practice while designing a PWA.

If you have a particular event triggered by a hover, make sure the user can also activate the same by a click or a touch.

Image Credit

Make sure that you use the correct semantic elements(buttons, form controls, etc.) to support both touch and keyboard, and are not using non-semantic HTML.

Also, ensure that the keyboard does not obscure the user's message, which usually happens in certain PWAs in landscape view.

In all probability, the primary input method for a PWA will be the touchscreen, so build the PWA by denoting correct touchpoints.

8. Make the PWA more accessible

When creating a PWA, developers, and designers usually fall into the trap of over-complicating the application, leaving a lot to be desired by users of the native app.

Remember, a PWA delivers the best of both worlds, which is easy accessibility like the browser and a user interface resembling an app.

When we say "accessible," we mean that your web application is available to all the users, and anybody can operate it.

Image Credit

To give a more specific direction for companies to improve accessibility, the Web Accessibility Initiative defined a set of Web Content Accessibility Guidelines (WCAG).

You can find the detailed WCAG 2.0 guidelines here.

Then four pillars of WCAG are:

Perceivable: Can all your users perceive the content the way you want it to? For instance, a blind person may not be able to experience a visual feature, no matter how much effort you put into creating it.
Understandable: Are you clearly able to communicate the essence of your content? Do you answer the question the user was asking, or do you add to his confusion?
Operable: Is it easy to navigate through your content? Does your content easily guide your user to their query, or do they feel like they have been blindfolded in a maze?
Robust: Can your content be accessed via different browsers, and does it maintain its UX over different platforms, such as a mobile phone or tablet?

Being compliant to WCAG guidelines is not just to add a fancy footnote on your website, but a sensible business decision. Because being disabled-friendly gives you access to a market of about 35 million people, according to this report.

That is a lot of people that your PWA can reach out to, by just adding minor tweaks.

9. Load performance improvement

The performance of PWAs can greatly be enhanced by using the PRPL principle.

PRPL Stands for:

Push: Preload the most important resources. This is a fetch request that tells your browser to fetch a request as quickly as possible. This enables your PWA to prioritize resource loading.
Render: This is to specify the initial route or to improve First Paint, which is the time taken for the user to see First Meaningful Content. Server-side rendering of the HTML file also helps improve First Paint.
Pre- cache: If the server loads as much of your requested assets before the session begins, it dramatically enhances the user experience.
Lazy load: This is a technique in which the resources are delayed from loading until the moment they are required to be seen by the user. For instance, if you have an image on your web page that can only be seen when the user scrolls down, you can defer loading that image till the last moment.

For repeat users to your website, your PWA can make use of Service workers to fetch data directly from the cache. This means reducing the reliability on the server to provide assets, and allows your users to navigate through the PWA offline, as is the case of Konga described in point no. 5 (offline mode).

10. Use Google Lighthouse to validate your PWA

Google Lighthouse is an open-source website auditing tool launched by Google in early 2018. It uses a set of five parameters to rank a website on a scale of 0 to 100. PWA is one of the categories that Google Lighthouse uses to classify your website.

The PWA score also ranges from zero to hundred and is based on a baseline PWA checklist, which lists 14 requirements.

The major criteria that Lighthouse uses to judge your PWA include speed, responsive design, security, offline performance, caching, push notifications, indexing, and user experience, among others.

The Lighthouse performance score report tells you exactly which areas your PWAs need to improve upon, and which areas that are good to go. Redesigning your PWA based on Lighthouse reports means increased user engagement, speed, and, ultimately, more paying customers.

11. Avoid Scrolling Glitches

Designing a PWA involves thinking a lot from the customer's point of view, and this means multiple tests to test all possible ways the end-user will use the PWA.

Scrolling is a tricky gesture to implement in a PWA. Usually, when a website has infinite scroll or a large feed, it leads to annoying scrolling glitches.

Using a virtualized list that shows elements to users based on where they are scrolling at the moment will help solve this problem.

Image Credit

A good tip to remember while designing a PWA is never to let it scroll horizontally. Implementing skeleton screens will also help provide a seamless experience.

12. Be careful with Push Notifications.

Push notifications were initially envisaged as a method to keep our end customers up to date with our latest content/features. But as the developers and website owners got greedy, more and more websites started asking user's permission to send them push notifications, making them annoying.

But push notifications are a powerful medium to get your message across since it offers the flexibility to send content you want at your discretion.

Image Credit

A push notification can essentially replace any email that you send to a client, with a CTA that will link them back to your webpage.

Here are a few best practices when it comes to Push notifications:

Do not interrupt the visitor immediately after he starts using your PWA and ask for permission to send push notifications. Let the visitor use the PWA for a small amount of time and familiarize themselves with the kind of content you serve. Ask for permission when the visitor is halfway across your PWA so that you seem less intrusive. Taking them through a nurturing sequence is also a good idea.
Keep your notifications short. Make the most out of the first few words to hook your audience. You have between 35–42 characters to convince your audience to unlock their phone and check the message. Keep it short and concise, to be safe.
Segment your subscribers so that not all of them receive the same message. Personalize your push notification as much as possible to improve the Click Through Rate (CTR).

13. Aim for better UI

Remembering that your PWA should always resemble your native app, even though it runs on a browser, can greatly help improve the way your end-user interacts with your PWA.

Aiming for consistency in your visual elements in the first critical step in improving your PWA. Maintaining visual standards of your basic elements such as fonts and app icons, so that they look similar to the ones in your operating system, helps make a first good impression.

Whether you are running Windows, iOS, or Android, make sure the visual elements are similar to the ones the user is already familiar with. A fancy font may lead to lesser user engagement, even though it may look pleasing aesthetically.

Image Credit

Tappable areas are also tricky elements that your PWA needs to handle carefully. One hack for this is highlighting the tapped area with a colour/ instant start of page transition.

Being relatively new, clickable icons can confuse users while interacting with PWAs. To avoid this, make sure your user is easily able to grasp what your icon means.

Blue flashes to indicate that the user's tap has been recognized, and they now have to wait, also tend to distract them. A good UI practice is to avoid blue flashes.

14. Reduce friction

While designing your PWA, always keep a simple sentence in mind, " The more hoops the customers have to jump through, the greater are the chances of them walking away."

Reducing friction goes a long way in converting casual browsers on your PWA to paying customers.

Providing lightning speed loading time helps reduce this friction, but if the customer then has to go through a lengthy checkout process, then the chances are high that they will opt-out, bringing all your efforts to naught.

Do an audit of all your PWA pages regularly, to identify and eliminate spots of friction.

Image Credit

These spots include long and difficult processes, poor readability, unanswered questions, bad error validation, etc.

To overcome these, consider using solutions such as autofill, one- tap signup and integrated web payments, improving the UX, and answering their concerns about privacy and security.

15. Don't overwhelm users.

Our last tip to develop world-class PWA ties back to our first tip, which is to keep things as simple as possible while developing your PWA.

There is a concept in Psychology called "Decision Paralysis," which is a result of too many choices that a user has to make before getting to their result.

Research shows that if you have too many choices, you end up being less happy with your choice, as against a choice you make if you have fewer choices, to begin with.

If you want to learn more about this Paradox of Choice, check out this TED talk by Barry Schwartz.

Image Credit

In a fast-paced world with a host of options for everything under the sun, from insurance policies to a simple coffee at Starbucks (there are 80,000 options to choose from), the average user is bombarded with choices at every step of his day-to-day life.

When using your PWA, the users should be presented with the information they are looking for in the least possible time. Minimizing text, reducing the number of clickable buttons, and clearly articulating what the PWA aims to achieve, will all help tip the scales in your favour.

Remember, the user is spoilt for choice when it comes to the solution to his problem, and it is your job as a PWA designer to convert a casual browser to a paying customer.

For more information about PWAs and the development process in general, check out the SoluteLabs blog. Happy designing.

Top 10 Headless eCommerce Websites built on JAMstack

Prakash Donga — Tue, 12 May 2020 08:29:18 +0000

When we think of eCommerce, a few things immediately come to mind — Shopify, Magento, BigCommerce, WooCommerce, and maybe Squarespace and Wix. But these have been around for long and the eCommerce Industry is due for a revamp!

We need websites that are faster, secure, flexible, and just sexy!

Enter Headless eCommerce and JAMstack — The new kid on the block. Headless eCommerce promises the benefits of using traditional e-commerce platforms with the speed and agility of modern frontend frameworks such as React and Vue.

Today, the entire eCommerce industry is talking about headless e-commerce, and no wonder, JAMstack is often involved.

First, some history :)

A long time ago, in a land not so far away, there were websites built on static web pages. You created a simple HTML page, wrote the bare minimum code to make the page attractive, strung up a bunch of these pages together, and you were ready with a website.

But we wanted more than just simple pages, and so we built CSS, and then, when that was not enough, we built entire sites on PHP using Server-Side Rendering. Dynamic web pages became the norm and people slowly forgot the advantage that static pages had — Speed!

But like any good story, there were a small group of developers who believed that they could get the best of both worlds :)

And lo and behold, we have JAMstack!

What is JAMstack?

JAMstack is a radical new way to approach how one goes about building apps and websites. What is means is that you:

Pre-render and Build your site/app as much as you can beforehand
Deploy the same on CDNs rather than traditional servers and
Call the data needed dynamically through APIs!

JAMstack is a treat for developers since it offers better performance, higher security, and cheaper scaling.

JAM stands for 3 of the pillars on which JAMstack is built:

Javascript: The browser programming language that helps provide the interactive bits.
APIs: Reusable APIs that handle all the server-side functions or database actions.
Markup: This is a presentation layer of your website, usually a static site generator.

Since the pages are pre-rendered, there is a considerable reduction in the time it takes to load and navigate between webpages since our requests no longer have to go to and from a database.

Some of the most JAMStack friendly CDNs are Netlify, CloudFare, and Akamai. Less complicated development also translates to reduced costs.

This is why JAMstack is the perfect solution to build a headless e-commerce application.

Now the question may arise:

What is headless e-commerce?

When you separate the front end and back end of an application, you get headless e-commerce. The front end, or the “head,” which in most cases is the template or the theme — has been de-coupled and removed, leaving the backend separate.

Thus the front-end can be built with frameworks such as GatsbyJS, VueJS, ReactJS (not a framework), Angular, and more. The backend (APIs) can still be your traditional Magento, Wordpress, Shopify, BigCommerce, or modern API-based eCommerce tools such as elasticpath. Alternatively, we also suggest upcoming frameworks such as Saleor and Reaction Commerce.

If you do have a clear idea about the website you are planning to build, here is our quick guide which will help you build a successful product.

In the meantime, here is our pick of the top 10 e-commerce websites built on JAMstack:

1. Louis Vuitton

The Louis Vuitton apparel webpage is a great example of an e-commerce website built using JAMstack. The web page is divided into different categories, such as “Men,” “Women,” and “New.” Browsing through the pages is a breeze, and checkout can usually be done within three clicks.

Front-end Framework: VueJS
CDN: Akamai
Web Server: Apache

2. Easyship

Easyship is a shipping platform that can be used by e-commerce sites across the world. With 250 plus shipping partners, the company claims that it can provide up to 70% savings in shipping costs.

The Easyship website is a comprehensive project built using JAMstack, with multiple sections such as “Features,” “Customers,” “Pricing,” “Resources,” and a “Login” page. For new visitors to the site, there is a “Sign up” button as well on the homepage.

The site features a bunch of useful tools such as “Shipping Rates Calculator” and “Duty and Taxes Calculator,” all accessible from the “Resources” section in the home page.

The major technology stack is as follows:

Front End Framework: Node.js
CDN: Cloudflare
Web server: Google Cloud

3. Fishtripr

Fishtripr is a guide and booking platform for fishing experiences, which extensively uses the JAMstack for its website. The site is quite comprehensive, with different sections for “Fishing,” “Hosting,” and “Scouting.” Booking a fishing trip is easy, and once you specify details in a couple of forms, such as the duration of your trip, destination, and the number of people, you are good to go.

The site also offers potential guides a way to meet and host people looking for fishing experiences. The conversational form means that you fill in the details, and you are ready to host within a few minutes!

If you are an avid photographer and want to help spread the word about Fishtripr, you can head on over to the “Scouting” section, where Fishtripr gives you a chance to chronicle your fishing journey, while getting paid to do it.

The technology stack is as follows:

Front end framework: Express
CDN: Cloudflare
Payment platform: Stripe

4. Advensure

Advensure is an online reservation system for adventure activities and rentals, built entirely using JAMstack. The site lets you convert an activity or a tour into an adventure package, and then sell it to prospects all around the world.
This e-commerce website is divided into three sections called “Features,” “Built For,” and “Pricing.” The three cornerstones that the site specializes in are “Sell,” “Scale,” and “Serve.” Each cornerstone has a separate page dedicated to it, where the visitors are taken through the buyer journey, and the page explains how they will benefit from Advensure.

The “Built For” section is further divided into “Activities,” “Rentals,” “Tours,” and “Customized Solutions.” Each of these pages lists the various services that Advensure provides and how the buyer will only have to make a few decisions before inviting their first client.

The technology stack used is:

Front End Framework: Laravel
CDN: Cloudflare
Database integration: Segment

5. Koala mattress

Koala mattress is a website for an Australian company that also donates some of its proceedings to, well, helping Koalas! This PWA is built using the JAMstack. The Website has a neat, free-flowing design, where you either scroll down to see all their offerings or choose from one of the three sections on the top.

The three sections that the site is divided are the rooms you can place your Koala mattress in, namely, “Bedroom,” “Living Room,” or a combination from both these sections called “Bundles.” The checkout process is quite simple, and you can complete your transaction within four clicks.

The tech stack used is:

Front end: Node.js
Analytics: Quantcast
CDN: Amazon Cloudfront
Web server: Amazon Web services

6. Secrid

Secrid is a premium leather accessories maker whose e-commerce store is built using JAMstack.This Netherlands based company started in 1997, has a neat e-commerce store that caters to loyal customers all across the globe. There are two primary product groups, called “Wallets” and “Collections.” The website also has three supporting pages titled “About,” “Stores,” and “Service.”

The browsing experience is smooth, and the wallets can be bought online with a few clicks. There is also an option to choose your country based on your location, and the international website gives you information about the closest secrid store.

The tech stack used by the website is:

Front end framework: Node.js
Web server: Nginx

7. Ingmarson

This UK based cloth retailer has built a beautiful website using JAMstack. The offbeat web design has irregularly placed sections such as “Scarves,” “Men,” “Women,” and “Popular” scattered around the main page.

The shopping experience on the website is as simple as they come, and you can have an item in your shopping cart in a matter of two clicks.

The tech stack used by the website is:

Frontend framework: Gatsby
Web Server: Apache
Content Management system: Netlify

8. Teaquinox

As the quirky name suggests, Teaquinox is an e-commerce website that sells tea and is built using JAMstack. The website is quite informative and aims to educate the reader by providing detailed explanations about the various kinds of tea that are available on the site.

There are various categories of Tea on the website that you can browse, including “Black,” “Green,” “White,” “Matcha,” and “Herbal.” Clicking on each category leads you to a collection of sub-categories, such as “Chun Mee,” and “Buncha” for the Green Tea.

The checkout option is a bit complex, but once you get used to the interface, it flows smoothly.

The tech stack used by the site includes:

Front end framework: Bootstrap
Web server: Nginx

9. Peloton

Peloton is a NewYork based fitness company that primarily makes exercise bikes and treadmills. They have used JAMstack to build their website and their e-commerce shopping site. Their impressive website jumps at you with a red and black theme that has three distinct sections — “Bike,” “Tread,” and “App.”
Click on the “Bike” section, and you are guided to a page that has “Overview,” “Classes,” Reviews,” “Financing,” and “Accessories.” There is also a bright red button that nudges you gently towards the e-commerce site.

Shopping on Peleton is easy and intuitive, and you can choose one of the four packages they have to offer. Within two clicks, you are out of the shopping page and entering your card details.

The major tech stack used in the site are:

Frontend framework: React JS
CDN: Contentful
Web server: Netlify

10. Flamingo

Flamingo is a women’s grooming brand that has an impressive e-commerce presence thanks to JAMStack. The home page consists of three clear sections named “Shop All,” “About Us,” and “Wax Guide.”

The “Wax Guide” is an interesting page that has a visual guide to help you get through the waxing process. Quick and painless!

The “Shop All” page contains all the products that flamingo sells, and, within two clicks, you are entering your card details in the checkout section.

The major tech stack used on the website are:

Frontend Framework: ReactJS
CDN: Contentful
Web server: Amazon Web Services

I hope you found the list helpful to get a gist of what can be achieved with headless eCommerce. If you would love to get a site as fast as ours — get in touch :)

10 Common UX Mistakes to Avoid During Mobile App Development

Prakash Donga — Fri, 10 Apr 2020 10:17:55 +0000

Most common UX mistakes lead to poor user experience, which ultimately leads to product failure.

Don't believe me? Read on…

In March of 2011, Bill Nguyen and Peter Pham, both heavyweights in the Silicon Valley, decided to team up and create a photo-sharing app.

The idea was simple enough. If you were in the vicinity of a user with the app installed, called Color Labs, you could share photos with that user.

Although this sounds like an exciting idea and something that might have given Instagram a run for its money, the app failed, and by October 2012, they had to shut it down.

The reason: Poor user experience. The app was clunky, and the users had a difficult time trying to figure out which button did what. Couple this with privacy issues and the users chose to skip this app on the App store.

User experience can make or break your app. With an estimated 3.06 million apps on the Apple Store alone, getting the user to install your app is in itself a Herculean task.

Add to this the fact that the average smartphone user uses 30 apps every month, and your window of error is further narrowed down.

You need a great app idea, a marketplace ready for your idea, a monetization strategy to make the most of your app, and last, but certainly not the least, a killer User experience.

So without further ado, here are ten most common user experience (UX) mistakes to avoid while designing your mobile app.

UX Mistake #1. Overstuffing the app with features

There is an interesting concept in psychology called The Paradox of Choice, coined by the American psychologist Barry Schwartz. According to his book, The Paradox of Choice, Schwartz argues that the more choice that the consumer has for a product or a service, the less happy they are for the choice they end up making.

In other words, less is more. A case in point is RealPlayer. At one point in time in the early 2000s, RealPlayer was one of the most famous music players in the market.

But the app got bloated with a tonne of features such as burning CDs, audio recording, a music store among the others. Users were not too happy with the features, and the app ended up on PCWorld's list of "25 Worst Tech Products of All Time." Yikes.

At one point or another, you are set to reach a saturation point in your app where you can no longer fit any new features.

How do you explain the new functionalities to your customers?

What if the new features made some of the existing code buggy?

What about the additional resources needed to maintain the bloated app?

The answer to all these questions is a simple audit of your app.

Chalk out all the critical functionalities of your app in the initial stage and then keep improving these features, rather than adding new ones.

UX Mistake #2. Complex user interface

Ever used the Netflix app?

Of course, you have. While the user interface is pretty simple, many of the viewers have found a particularly nagging feature in the app.

When you hover over the thumbnail of a TV show or a film for even a split second, the app will auto-play a looped trailer or montage, meaning you have to endure a loud trailer even if you just want to read more about the show.

" A good user interface provides the correct information without compromising the quality of the content."

Just like the color codes and visual imagery used by a designer to convey a message, the UI of a mobile application should be intuitive to use the minimum number of steps to reach any point in an application.

The rule of thumb is: Every screen on the app should be a maximum of three touchpoints away. Too much text or a confusing flow will prompt the user to go elsewhere.

This is why user interfaces have to be extensively tested before the final product is pushed out. The customer should make decisions in the app on a subconscious level. A good starting point for an app that epitomizes simplicity is Uber.

Image from Uber

Select your destination on a map, select your ride, enter the source, and order the cab in less than 30 seconds. This should be the benchmark against which you should test your app.

UX Mistake #3. Ignoring app architecture

Common UX mistake designers and developers commit is to give the aesthetics of the app a lot more important than the flow and architecture of the app.

We highly recommend mapping out the user flow and the structure of the app before even getting into the wireframing stage.

Many developers ignore the UX and the necessary logic or navigation within the app, which can lead to apps that look great but are a pain to use.

So our recommendation is to take it slow. Sketch down the flow of the app before worrying about the minute details such as font size or color combination.

An app architecture of the dating app being developed by SoluteLabs

Once the app goes into the design stage, always keep this flow in mind so that you don't lose focus on the bigger picture.

UX Mistake #4. Bad onboarding / poor first impression

In the words of Harvey Specter from the hit TV show Suits,

"Get it through your head, first impressions last. You start behind the 8 balls, you'll never get in front"… "

Whether it's attending an interview, meeting a client for the first time, or using an app, the first few minutes of the user experience will define if your customer will keep the app or hit the "Delete" button.

Image source: Giphy

In some cases, a detailed yet upfront mobile app onboarding process is necessary to explain all the features of the app. Overdo this part, and you run the risk of boring the users and driving them away.

Some apps will confuse users if they are not instantly intuitive.

Keep in mind that when the users use the app for the first time, they don't know all the capabilities of the app. It is your responsibility as a UX designer to guide them through the app, making sure they use all the functionalities while not getting bogged down by everything the app can do.

What seems obvious to you as the UI/UX designer may not be the same for the newcomers, so always pay heed to how the app will behave when opened for the first time.

A proper beta testing will iron out most of the issues a user will face, coupled with input from real-life users, which will solve most of these starting problems.

UX Mistake #5. Considering UX only at the beginning

A lot of UX developers seem to forget that providing a good user experience is an ever-going process, which cannot be relegated to just the beginning of the app development process.

Here are a few basic questions that you need to answer throughout the app development process:

What do your users like and dislike?
What are the features they expect?
Is your app intuitive enough?
What are the features not used a lot by the users?

Answering a few basic questions like these and conducting a detailed competitive analysis while mobile app development helps solve a lot of UX design issues.

Collecting regular feedback after the deployment of the application makes you understand what capabilities your apps lack.

Image Credit

Apps like Snapchat, Dropbox, and Instagram are examples of big names iterating the app using real-world user feedback.

UX Mistake #6. Blindly copying the competition

As Steve Jobs once famously said, "We have always been shameless about stealing great ideas."

Apple did it with Clues to include its core functionality such as fertility and period prediction into its own Health app that comes pre-installed and FREE on every iPhone.

Image from Clues

Image from Apple's Health App

Imitation is the purest form of flattery, and you might be tempted to blindly copy your competitor's app to gain a foothold in the Top 10 Apps category.

But UX developers beware! Getting your app too close to the competition might put off the consumer.

Your users are always on the lookout for novelty, and a copycat app with similar features may actually harm your brand name.

Acknowledge the fact that every app needs a unique look and feel, and every product has different goals, and the user needs to be met.

A good UX is not something that one should keep as a far off goal that cannot be achieved, but rather a necessity of the app that cannot be compromised.

Sure, you can have a few features similar to the competition, or you may also steal a color combination that seems to be working, but in the end, your mobile app needs to have your custom signature.

UX Mistake #7. Overdoing push notifications and updates

Push notifications are a tricky minefield through which every UX designer should walkthrough. Too many notifications and you risk the users being irritated and leaving your app. Too few, and you risk the users completely forgetting about the app.

And it is not just the frequency of the notifications that is a tough cookie to crack. The notification's content also plays a big role in the user using or discarding your app.

Image Credit

Reminding users of a daily check-in or notifying them in case they have received a new message earns your app brownie points. But sending notifications about random news or updates that have no bearing to the user risks you being seen as a phisher.

Which brings us to another interesting part of any user experience, the updates. While you don't need to push out an update every week so that users get new features, you also cannot sit back and ignore the comments the users leave in the app store.

Even with updates, you need to tread a thin line where you cannot overdo it and also cannot afford to neglect it altogether.

UX Mistake #8. Ignoring user feedback

You have all heard of Search Engine Optimization. But have you heard of App Store Optimization (ASO)? This is a trick used by mobile developers who are continually trying to feature in the "Top Rated Apps" page of Google Play Store or Apple App store.

And one of the tricks of getting to the top? User feedback. That's right, multiple studies have shown that companies that listen to their customers rank higher on the App store.

Regularly gaining feedback from your audience will always benefit a UX designer. Encourage the people who download your app to rate it and regularly comment on the store, as it helps in ASO.

Beta test your app by sending out an ad for beta testers and using them instead of testing in house. Although beta testing can be time-consuming, it is better to have an app with a good UX in the long run rather than a poor app that everyone deletes immediately.

UX Mistake #9. Inconsistent user design

An often overlooked aspect of UX design is consistency. Designers like to experiment with fonts and color schemes to stand out, but that usually ends up confusing the customer even further.

Small things contribute to design consistency, such as properly formatted text and color schemes that are uniform throughout the app.

Image Credit

Human minds crave consistency. When your customers have expectations on where they can access a specific feature or how something will behave, it's best to deliver it as they want. Increasing a customer's cognitive load should be the one thing a good designer should avoid.

UX Mistake #10. Ignoring Whitespaces

Whitespaces are easy on the eyes. From a design perspective, whitespaces prevent the app from looking overloaded and messy.

When used correctly, whitespaces can transform the way the user perceives your app. A good designer should not only guide the users to the content but also make the message stand out.

With whitespaces, you can play with the text and font design, adjust alignment size according to the needs of the app, and experiment until the content flows smoothly on your device.

There you go. Ten UX mistakes that you can avoid while designing a mobile app. If you feel you have some more tips that will help UX designers and developers out there, do drop a comment below.

9 Design Agencies That Will Leave You in Awe ❤️

How to develop a website with 100% page speed? A step-by-step guide

Prakash Donga — Thu, 26 Mar 2020 11:18:21 +0000

"How to score a perfect 100% on Google PageSpeed Insights?"

One of the major concerns raised by the marketing teams of our clients and hence, we have come up with a step-by-step guide on-

"How to develop a website that scores 100% on Google PageSpeed Insights?"

Rather than investing more time on improving your website's page speed after it goes LIVE, let's develop a website with 100% score right from the start.

This step-by-step tutorial is for the website development teams or developers working to achieve 100/100 score on mobile as well as desktop for their companies or clients. Marketers can understand it too in layman's language.

Building beautiful websites has never been easier. You go to a website builder, pay a small amount to register your domain and hosting privileges, a few clicks here and there on how your website should look, and Bam! You are done.

But building a website which people would actually like to come back to again and again, well, that has been a challenge ever since the days of dial-up connections.

A lot of factors come into picture when you want people to come back to your website, including the content on your website, images, user experience, and value to the visitor. One of the defining factors is page speed, which is a part of the user experience.

Page speed is the time it takes for your webpage to load completely. It is a crucial factor when it comes to delivering great user experience, and back in 2018, Google officially announced that it would consider page speed as a factor in its rankings with the "Speed" update.

So what exactly makes page speed that important? Let's dig deeper.

The importance of Page speed

Having a slow-loading page can inversely affect your sales. Customers have shorter attention spans, and they don't like to wait for a slow page to load.

In fact, this study by Google showed that 53% of mobile users would go elsewhere if your page takes more than 3 seconds to load.

Losing customers over a slow loading page is not a happy prospect.

Page speed also plays a critical role in SEO, with Google making it official in 2018 that slower loading pages are penalized.

Slow page speed also means that search engines can crawl fewer pages using their allocated crawl budget, which will negatively impact your indexation.

Slower pages have a lower number of conversions, a high bounce rate, and, eventually, a lesser number of visitors to the website.

Slow page speed also has an impact on paid search if your company uses it as a key channel to drive visitors to your website. Poor site speed hurts your quality score.

The quality score determines how much you pay (cost per click) and your position on the Search Engine Results Page (SERPs). If you have a low-quality score, there are high chances that your ads may not show up on the first page of Google search results!!

Slow site speeds also harm Social media ads, with Facebook announcing in August 2017 an algorithm change that gave importance to page speed.

As you can see, page speed is a critical factor when it comes to ensuring a good user experience to your potential customers. So what exactly happens when you click on a website link and how can you increase your page speed.

What happens when you click on a webpage

This is where we start in our quest to find out how to optimize our website to have a good page speed. Here's the breakdown of what goes on behind the scenes when you click on a link in Google/ enter a name in a browser.

You enter the name in the browser, and the browser enters a DNS lookup mode.
Each website is mapped to an IP address that your computer recognizes, which, in the case of Google, is 8.8.4.4.
Once the IP address is obtained, we start making requests for the files that allow the browser to display the page.
These requests are in the form of headers and can include HTML files, images, CSS, Javascript, videos, etc.
The server decides which request handler to use and then begins to send the page content back in the response.
The browser starts rendering the page, requesting all the assets required to complete the page, like images or CSS files.
All the assets are not received at once, and the browser sends out additional requests until it gets all the resources it needs. It renders the page in tandem.
Once all the assets are obtained, the browser finishes rendering the page.

This is a very simplified version of what happens when you click on a webpage, but as you can see, there are not a lot of places where there could be potential bottlenecks to your page speed.

The possible places where you could face issues are when the browser requests for assets such as images, CSS files, or videos.

Also, a common question asked with regards to page speed is if Client Side Rendering (CSR) is better than Server-Side Rendering (SSR).

We have covered this particular issue in detail in our blog here-

Client-side Vs. Server-side Rendering: What to choose when? | by Karan Shah | Learn v/s Unlearn | SoluteLabs

Karan Shah ・ Jun 24, 2020 ・ 9 min read
blog.solutelabs.com

What makes a web page slow

Everyone loves speed when it comes to the internet. Faster load times, faster-buffering rates, faster download speeds, you name it, speed is an integral part of it.

When it comes to web pages, speed is again a deciding factor. According to this report, one second delay in your web page reduces page views by 11%.

Combine this with the fact that 53% of mobile users abandon a website if it doesn't load within three seconds.

Top 5 factors to ensure a speedy website

So what are the deciding factors when it comes to ensuring a speedy website? We list down a few that play the most important role:

Shared Servers: When you click a website, the browser initially makes a request to a server, asking it to serve up the various elements that make up your web page - images, text, videos, etc. A cheap web hosting service hosts your web page on a shared server, which means essentially you are sharing your web resources with a lot of other websites. This has proven to increase page load time significantly, and deliver an inferior user experience.

The solution: If you consider a free web hosting service for a business that is going to scale up rapidly, it may be time to dump the free service and consider a host that gives you dedicated servers.

Heavy images: Images are a tricky part for any browser to load, and the bigger the images are, the harder it becomes for the browser to load them. Having a large volume of unoptimized images is going to slow down your webpage, regardless of your connection speed or good servers. Another important factor is the image format. JPEG images have been found to load much faster than GIF/PNG.

The solution: Optimize images, use JPEG instead of PNG and make sure your image is smaller than 1 mb.

Problems with Javascript: Javascript is the magic that makes your webpage interactive and dynamic, and without it, your web page will be very dull indeed. But un-optimized JS code can negatively affect your page speed. This is because when your webpage loads, it has to first process any Javascript files it encounters. This results in what is called 'render- blocking Javascript' aka Javascript that prevents the webpage from loading fast.

The solution: Audit your Javascript code and use only what your webpage really needs. Defer Javascript loading until the rest of the webpage is visible to the user.

Not using Caching: Caching is a technique where you store frequently used data points in 'cached memory.' The next request the server receives for the same item is retrieved from the cached memory, thus saving time.

The solution: Use caching on a bunch of different elements including HTTP, Images, and Database queries.

Too many Ads / Too much Flash content: With each additional ad, there is an increase in the HTTP request, which requires additional processing time. This means extra strain on the user's browser as well as your server, which drastically slows down the page load time. Flash content has also been found to be bulky and slowing download time. Reducing the size of your Flash files or eliminating them is bound to give your page speed a huge boost.

The solution: Use ads sparingly, especially if they take up a lot of server resources such as video ads or image-heavy display ads. Instead of flash, try using an HTML5 replacement.

Although we have given the solution to most of these common web page follies that people tend to commit, here are some additional ways you can boost page speed.

4 [+ 2 BONUS] tips to boost your page speed

1. Use a Content Delivery Network (CDN):

A Content Delivery Network (CDN) consists of several servers that are placed at strategic geographic locations. CDN's are designed to reduce a website's latency. I.e., time taken to process a user's request to view your site. CDN's store a cached version of its content across the planet called PoPs (Points of Presence), minimizing the physical distance between the visitors and your site's server.

For instance, if you are viewing an American travel website while sitting in London, the requests will be handled by a local PoP, preventing the request from travelling across the Atlantic. CDN's also provide additional benefits such as reduced bandwidth consumption, ability to handle high volume traffic, and helping you maintain load balance.

2. Remove excessive Database Overhead

Database Overheads are usually items that are clogging up your database, including items such as comments in the spam queue, trashed items such as posts and images, and unapproved comments that are stored in your CMS.

Getting rid of this garbage data helps website hosting services to quickly retrieve items requested by the user with minimum processing cycles. Most web hosts allow you to access the database management platform phpMyAdmin via your hosting account.

3. Minify CSS, JavaScript and HTML

If you want to speed up your webpage, in addition to minimizing your web content like images, you also need to reduce the number of client-server requests. Minifying and squishing all unnecessary and compressible code lines is a beginner's step in this direction.

Minification comes in real handy for inline JavaScript and external files not cached. To achieve optimum page speed, Google recommends minifying all JavaScript files over 4096 bits of size.

Writing clean code utilizing all the coding space available, deleting extra spaces, indentation, and line spaces while maintaining the readability of the code reduces the overall size of the website core and front-end files.

The other benefits of minification of HTML, CSS, and JavaScript files include reduced network latency, fewer HTML requests, enhanced compression, faster browser downloading, and thus increased page speed.

4. Use minimalistic framework

A good frontend framework can help you avoid a lot of amateur frontend optimization mistakes. A few larger frameworks come with a tonne of additional features, but your website may not need them all. Imagine your framework like an empty plot of land that you want to convert into a beautiful garden.

You need to trim the grass and plant the saplings at predefined places, but you can't let the garden be overrun with weed and unnecessary plants. Similarly, it is your responsibility not to let the framework be ruined by redundant codes, excessive HTTP requests, and large images.

2 BONUS Tips

PRO Tip 1: Get rid of the backend server

In addition to the tips mentioned above, here are a couple of Pro tips that we at SoluteLabs have figured out building web pages.

The first tip is to throw out the backend server. Now, by throwing out, we don't mean completely avoiding the backend, but a workaround that makes relying on the backend to deliver all of your content a thing of the past.

The backend is the part of your webpage that runs on a server and is written in Node.js/Express, Java, or .NET. The backend fetches HTML data dynamically after every request.

When the backend makes requests to APIs, databases to fetch data that should be inserted into the HTML, there are high chances of bugs creeping in at these integration points. A slow database, a broken API, network issues are just some of the things that can go wrong at the backend.

Enter JAM stack. JAM stands for JavaScript, APIs, and Markup. It is a type of frontend architecture where instead of rendering the HTML after every request for every user, you build the HTML once and then serve your users static HTML.

You can host your static HTML, JavaScript, and CSS files on AWS S3, Netlify, or other providers that let you serve static files.

If you cannot run your site just using static web pages, there are a lot of ways you can still implement JAM stack techniques. The first option is to split your website into JAM stack part and server-based part.

Another technique is to use client-side APIs to fetch the data.

PRO Tip 2: Move all static content to a CDN

We have discussed the advantages of CDNs in an earlier part of this blog. A CDN is a group of geographically distributed servers that help reduce the load on your original server using Points of Presence (POP).

When you are nearing bandwidth capacity on your servers, offloading static assets like videos, images, JavaScript, and CSS files will reduce your servers' bandwidth usage.

CDNs are optimized to serve static content, and edge CDN servers will serve client requests to this static content.

CDNs will also come in handy if a small portion of your traffic comes from a distant geographical area, a CDN can reduce latency by caching these static assets on edge servers closer to your end-user.

There you go. Tips and tricks to help achieve 100% page speed.

Implement these with the help of your website development team and if you don't have one, let our experts do it for you.

SoluteLabs website scores 100/100 on mobile as well as desktop across most of the browsers, devices, and platforms. Check out now on Google Page Speed Insights. You're lucky if you can see it.

State of Progressive Web Applications in 2020.

Prakash Donga — Fri, 13 Mar 2020 06:13:45 +0000

As we move into 2020, a host of new technologies are creating waves, Progressive Web Apps (PWAs), that have been "officially" around for more than 5 years now, are slowly gaining access to more and more mobile screens.

PWA seems to be trending among the state of mobile app development in 2020.

What is a PWA? How did they come into existence? How do they work? Will they eventually kill the native apps?

In this article, we try to find the answer to all these questions, while telling you a few success stories of companies that have ported to PWA.

In technical terms, a PWA is a type of web application that is a result of unique cross-platform app development methodology, delivering web pages that are optimized for the mobile, that you can install on your phone through your browser.

In simple terms, Progressive Web Apps give you the feel of a native application while you are browsing the web on your mobile, without actually installing the application on your mobile phone.

PWAs are the reason why certain websites, like Alibaba, the world's largest B2B trading platform, offer a seamless browsing experience on mobile.

In fact, after switching over to a PWA, Alibaba's mobile conversions increased by 76% and engagement grew by 4X!!

So how did it all begin? Let's start with a little history.

History of PWA
Benefits of PWA
Successful PWA stories
What makes PWA tick? How PWAs work
Will PWAs kill native apps? PWAs in 2020 and beyond

History of PWAs

Although Google officially introduced the term Progressive Web Applications as a new standard in web development during Google's IO conference in 2016, the concept can initially be attributed to Steve Jobs.

During the historic Apple iPhone launch of 2007, Jobs predicted that developers can build amazing web experiences using Web 2.0 and Ajax that look exactly like an application on iPhones.

But a year later, Apple introduced the App Store, and when Google also jumped into the app race with the Play store, the era of native apps dominating the mobile internet world began. These apps were fast, responsive, and ensured that the user had the best experience when looking for something online.

The concept of PWAs went into cold storage for a few years, before 2 Google Engineers, Alex Russel and Frances Berriman, observed a new class of websites that were delivering a much better UX than the traditional web sites.

They called these web applications "Progressive Web Applications" (PWAs for short) and Alex Russel called them " Responsive, connectivity - independent, app-like, fresh, safe, discoverable,re-engageable, installable, linkable web-experiences."

PWAs were initially supported by Android, Chrome OS, and Windows, and Apple announced support to PWA technology with the introduction of "Support Workers" in 2018.

Benefits of Progressive Web Apps

The reason why PWAs have become all the rage can be attributed to the following key features of PWA:

Short or Near instantaneous loading time: With PWAs, several elements of the web page are cached the first time you open it, meaning the loading time for a PWA is much lesser than a mobile-optimized website. In addition, PWAs don't need the processing power or the storage of a native app, which means their interactive elements will respond immediately to clicks and other user gestures.
Functions with limited connectivity: For people who are still in the developing parts of the world such as the Middle East or Africa, Internet connectivity is a huge problem. But PWAs "Service Workers," which are basically lines of Javascript code that enable it to have instant access to cached resources, means you can continue your browsing experience even when the network is slow, sketchy.
Better User Experience: PWAs try and imitate the native app, which means they can provide similar functionalities as an app but with lesser resources. When you combine this with speed and the ability to deliver a good UX over slower connections, and users are bound to come back to PWAs.
Discoverability: PWAs exist on the web, just like any other website, and they can easily be found via a search engine or a social share. Since you don't need to go to a native app store to find, authenticate and install the application, it makes PWAs easier to integrate with your content and social strategies.
Easier Updates: Since a PWA is not like a regular native app that requires you to manually install an update via the app store, updating a PWA is much easier and updates can be rolled out even without disturbing the user.

Other than these, PWAs also comes with a bunch of other benefits, which include the ability to send out push notifications, say to promote a new blog post that you just published. The smaller size of the PWA along with the faster installation process also means the marketers have a greater chance of successful onboarding (from website to the app), and decreased Cost of User Acquisition (CAC).

Successful PWA stories

A lot of companies have switched over to PWA to enhance user engagement, including:

Twitter: Twitter launched Twitter Lite, a PWA in 2017, which helped them connect with mobile users more deeply while consuming fewer data. The PWA relies on cached data and optimized images, and the Twitter lite PWA is just 600KB, compared to the 23.5 MB size of the native app available on the Play store.

Tinder: The now-infamous dating app also launched their PWA in 2017, and found that there was a higher user interaction with the PWA over the native app, with users spending more time messaging on the web application compared to the native app, along with increased session lengths and purchases in par with the native Tinder app.

Lilly Pulitzer: This resort- wear brand has a customer base that is always on the move, so they needed their mobile website to provide a smooth experience. They invested in an eCommerce PWA, and within a year, saw an 80% boost in its traffic and a 33% increase in conversions.

Trivago: The German-based hotel search engine, one of the largest in the business, wanted to be at the forefront when it came to their mobile website and implemented a PWA in a phased manner to make use of the speed and use of lesser resources. Today, Trivago's PWA powered website is available in 33 languages, across 55 countries, and the company has seen. User Engagement increased by more than 150%.

The list of successful PWA adoptions goes on and, and includes big names such as Staples.com, Alibaba, Starbucks, and eBay.

What makes PWA's tick? How PWAs work

PWAs use a quirky architecture consisting of four pillars, which work in tandem to provide the native app-like user experience. These four are:

Service Worker: When you visit a PWA powered website for the first time, the Service Worker shifts gears, downloading all the content in the background. With the content already cached on the device, the site loads much faster. Service Workers also enable websites to send you push notifications.
Web Manifest: The web app manifest gives you information about the application(name, author, icon, and description) in a JSON text file. The web manifest makes the installation of web applications to the home screen possible, meaning faster access and a better UX.
HTTPS: One of the prerequisites of a Service Worker is that they make websites available over Https, meaning the connection is secure.
Icon: The display end of the PWA that the user will be able to see once he installs the application.

Will PWAs replace Native apps? PWAs in 2020 and beyond

The jury is still out on this one. While a PWA does provide faster load times, easier updates and better user experience in general, PWAs are still in their nascent stage.

iOS still does not support all the PWA features mentioned in this article, since Apple considers PWA to be a "Googler term."

Features such as push notifications, background sync, and web manifest file are still not supported on the Safari browser.

But, according to this article, Apple is slowly encouraging its users to move away from the native App store and create web applications instead, so we may have more and more PWAs that are iOS compliant in the future.

As technology improves and heavyweights such as Google put more and more muscle behind PWAs, it is highly possible that PWAs will replace native apps in the coming decade.

Share your thoughts about how the future of Progressive Web Apps (PWAs) look like.

QA Vs Developer: Whose responsibility is to do app testing?

Prakash Donga — Wed, 11 Mar 2020 10:57:56 +0000

What happens if you don't know whose responsibility is to do mobile app testing? QA or Developer.

Consider this scenario:

You send a developer, QA, and the customer on a boat that your team had built. What happens if the boat suddenly starts taking in water in the middle of the river?

The developer points his finger at the QA and says it was his fault that he never spotted the leak.
The QA looks at the developer telling him he built a shitty boat in the first place.
The customer has his head wrapped in his hands, knowing for certain that he is going to drown.

This is not some warped way of looking at App development these days. In this age of Agile, where iterations are made on the fly, and the code is constantly evolving (thanks to changing customer's needs), it is next to impossible to deliver a production-ready application that is error-free.

In fact, according to this research by Coralogix, a developer creates 70 bugs per 1000 lines of code.

So the importance of testing the code, be it Unit Testing, Behaviour Driven Development (BDD) or Exploratory Testing, is paramount.

But whose baby is testing anyways?

Isn't QA responsible for catching the bugs, since that is their job?

Aren't developers supposed to run at least a Unit Test on their code, to make everyone's life easier?

In this article, we try to answer these questions, trying to put to rest the age-old debate between QA and Development - whose line is it anyway?

Let's identify whose job is to do mobile app testing- QA vs Developer-

QA-based App testing - The "doers" approach

One of the fundamental qualities of a Tester is that he or she " Thinks different."

The mantra for any testing team should be the now-famous Facebook motto, "Move fast and break things."

A tester can look at the code from different angles, use it in ways that the developer would never have imagined, and put the application through its paces.

That's why we like to call it the "doers" approach.

While testing might seem a repetitive and time-consuming job, in reality, the testing requires a whole different level of skill sets that a developer generally lacks.

According to Nataliya Hordiy, a QA analyst at LYONSCG -

Testers are disciplined, like repetition, and have a broader knowledge of the application's regression history than any developer.

What makes a tester invaluable is the way they quickly grasp the functionalities of an application, and then try and find a way to break it. Testers can be compared to little kids who have been handed a set of LEGO toys.

We have thousands of ways to put together those LEGO blocks. Similarly, customers might have thousands of ways to use the app. So, the testers have to identify each way the customer might want to use the app.

Developers might consider testing as an "added management hassle." Hence, having good QA teams for larger applications and a single tester per team can save thousands of man-hours and dollars. This way you may avoid sticky issues when the code goes into production.

Testing also helps in providing a rich depository of knowledge in the form of documentation that can be used to guide customers and newer recruits. Developers can refer to this documentation and learn how the application performs as a whole.

In summary, testing helps the team to get a helicopter's view of the application, and having a good tester in your team is as big an asset as having a really talented developer.

Developer-based App testing - The "thinkers" approach

While it may not be possible to find a great developer like Bertram Gilfoyle from the hit HBO show Silicon Valley, there is a huge number of quality developers out there.

But do these developers also don the hat of testers, if needed, and perform a minimum automated Unit tests on their code? The jury is still out.

On the one hand, most of the developers feel that testing is repetitive and they can invest that time in building new features for the app instead. But there is also a school of developers who feel that their code is perfect and would be bug-free.

Developers often take what we call the "thinkers" approach. They know that they are building an application. Also, they know how their code is supposed to function.

And, they may miss out on whether their code might mess up the other functions written by other developers when it goes into production.

In other words, developers are good at thinking up solutions to problems and then converting it into code. Still, they don't want to be bothered if the problem they solved aligns with the bigger picture, which is the entire application working smoothly.

But, like exceptions to every group, there is still a small army of developers who feel that the code they ship should be perfect. They are constantly trying to avoid painful emails from the QA team by using coded tests to see if a new fix they just wrote breaks existing code.

These developers see their code as a piece of art. They are easily put off when they find lengthy bug reports from the testing team, or worse, customers complaining about the app crashing when they use a feature that was built by the said developer.

So whose line is it anyway?

Now coming to answering this big question - who should take the blame when the code breaks?

In our opinion, every line of code, and every piece of software that you put out, there is a team effort. There should be no name-calling and finger-pointing when something doesn't work according to the way it was supposed to.

A developer should test the code that he or she writes since he/she knows it better than anyone else. Writing test cases and carrying out repetitive tests should not be seen as a waste of time since a poorly written piece of code can play havoc when it goes into production.

A software tester should look at the application as a whole, and report errors that may arise in the customer workflow that the developers may have missed.

Testing should be a shared responsibility and should be seen as the natural progression from development, rather than an add-on responsibility.

A good developer knows the basics of testing and can do some of the things that a tester does. In the same vein, a good tester knows the basics of development, and the pain points that a developer faces.

Any points that you feel we have missed? Do write to us and, if it resonates with us, we will include it in the article.