DEV Community: Bojan Gvozderac

Why Your Business Needs a Progressive Web App

Bojan Gvozderac — Thu, 28 Jun 2018 14:39:48 +0000

You ever look at a web site and think: "Everything is either a potato or not a potato…" and more ( or less? ) importantly: "This web site would be great as an app!"? If you did, you're not alone, buddy boy!

Some very cool folks over at Internet HQ ( don't fact check this just blindly believe that it exists ) that govern how the internet behaves agree with you ( the potato thing AND the web site as an app thing! WOW! Look at you go! ).
They introduced a concept called Progressive Web App - PWA, for short.

It's called Progressive Web App because it progressively gets better as you use it

PWA = Progressive Web Awesome!
There are a couple of key things that'll make you want to rock out with PWAs

Offline Mode

Imagine this scenario.
You're on a news site and just finished reading an article, at some point in time later you want to reread that same article or show it to somebody else but there's a catch!

You don't have internet access!

If the article you want to read is on a non-PWA site you're EFFED and getting a big fat serving of "No internet connection" screen buuuuuut if the article is on a PWA site you'll be reading your article just fine.

What PWAs can do is save the web pages you've visited and make them available even when you don't have internet access.
To me this is a game changer, it mitigates every web site's greatest weakness and, in some cases, completely nullifies it!

Push Notifications

Lets take a look at another scenario.

You own an e-commerce site and looking at your web site analytics reports you came to the conclusion that a lot of your visitors come to your online store, look at items, think about buying something, maybe even go through some of the purchase process and then just leave never to be seen again.

What PWAs can do for you is send push notifications that feel natural and look native to the device your visitors are using - even if the browser isn't open on their device - to let them know that the item they've been looking at earlier is, for example, discounted and with the click of a button can place them back in the purchase process where they've left off.

The takeaway is clear.
Having a PWA site is like having a sales person working around the clock on bringing you new customers or re-engaging with old ones, letting them know you still value their business.

A really good example is Jumia. There's a link later in the blog, make sure you check it out.

Web Share

In this scenario…

I'm kidding! No scenario for this one. Phew!

Kidding aside, the ability to share content between apps and platforms in the modern world is absolutely necessary.

Web share invokes the devices native share functionality, this means that any app or platform that has allowed sharing on it PWAs will be able to share content with that app or platform.

I lied we're gonna go through a scenario

Say you own a business and sharing content is a key part of your online marketing strategy.
When you first hired a web development studio they integrated Facebook and Twitter sharing and that was perfect at the time but later on your business has grown and expanded to, lets say, China. Nice!

Now you need to integrate sharing on WeChat. In order for you web development team to integrate WeChat they need to read the developer documentation ( which may or may not be translated to a language your developers are comfortable with ), next they need to write the code, after that they need to test if the new code works and also that it doesn't break any of the old functionality.

All of this work costs money - hundreds if not thousands of dollars that could have gone somewhere else like marketing for your product.

With PWAs all of this avoided because writing one sharing functionality covers all relevant platforms for your web app visitors.
Share away my wayward son!

Cuts Costs

In most cases businesses don't need anything more than a web site to be present and relevant online but in other cases they need a small part of functionality that is reserved only for native devices.

This forced businesses to invest in costly native apps for both Android and iOS which can cost anywhere between $20 000 and $120 000.

PWAs want to solve this by making web sites more like native apps and extending their functionality with device native features, as a result it cuts costs significantly because companies now have to develop only for one platform instead of three.

Thanks PWA!

Progressive Web Apps turn a boring old web site that's just THERE to an indispensable tool for converting visitors to clients

Success Stories
Still not convinced that PWAs are the sauce of awesome? Fine, lets ask these upstanding businesses:

AliExpress ( LINK )
Aliexpress is a popular e-commerce site that lets you order items directly from China.

After migrating their site to PWA these are the results they saw:

104% for new users across all browsers; 82% increase in iOS conversion rate
2X more pages visited per session per user across all browsers
74% increase in time spent per session across all browsers

Jumia ( LINK )

Jumia is a leading e-commerce site in Africa. I'm gonna highlight the challenge that they faced ( taken from the LINK above )

Nearly a quarter of shopping carts were abandoned on Jumia's mobile site every day.
To counter this, they reminded customers via email to complete their purchases. But getting people to provide their email addresses is challenging, and email open rates are low. With over 65% of their web traffic on mobile browsers, Jumia looked to progressive web app technologies like Push Notifications to solve their problem and re-engage mobile users who had abandoned carts.

What PWA did for them:

38% Open rate
9X more conversion on previously abandoned carts from web push users
7.85% conversion rate on previously abandoned carts from web push users, vs. 4.5% for native app

Twitter ( LINK )
C'mon… I'm not gonna explain Twitter to you, you know what it is.

Twitters PWA became the default web experience on mobile devices in April 2017.

Note from the Engineering Lead:
Twitter Lite is now the fastest, least expensive, and most reliable way to use Twitter.
The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android.

Results:

65% increase in pages per session
75% increase in Tweets sent
20% decrease in bounce rate

You Want a Piece of This?!
So you saw the greatness of PWA and want to get in on the action.
You could spend months learning the necessary technology and how to write PWA code or you could head on over to jsguru.io and let us do all the heavy lifting for you.

Before you go…
If you enjoyed reading this post please share it. You should check out our other publications, you might like them too! We write from time to time about software development, tips and tricks, and how to become a better developer and business person in general. Join us on the journey of constant improvement!

Originally published at jsguru.io.

Restpollo - React Fetch Component

Bojan Gvozderac — Thu, 14 Jun 2018 10:21:03 +0000

DISCLAIMER: Restpollo isn't an official Apollo project. They did such a good job with React Apollo that it inspired me to create a simplified version for communicating with a REST API using React components and function as children pattern.

I don't hide the fact that I'm a HUGE fan of React ( LINK ), GraphQL ( LINK ), Apollo ( LINK ) and Apollo's React components ( LINK ).
When Apollo React rolled out version 2.1 they introduced components for querying, mutating and subscribing to a GraphQL backend… this blew me away!
Here's an example ( taken from Apollo React documentation - LINK ):

<Query query={GET_DOGS}>
  {({ loading, error, data }) => {
    if (error) return <Error />
    if (loading || !data) return <Fetching />

    return <DogList dogs={data.dogs} />
  }}
</Query>

Let's go over the code above in detail.

Query

<Query> is a React Apollo component that takes in a GraphQL query as a prop and then starts to work it's magic.
It goes to the GraphQL backend and fetches the data we've requested ( defined in GET_DOGS in our example ), it also handles a couple of common states along the way:
loading - the request is sent but we haven't received a response yet
error - something went wrong trying to retrieve data
data - fetch data succeeded!

The cool part

The really cool part about <Query> ( and other Apollo React components ) is how it handles rendering the UI with function as children pattern ( LINK ).
This means you get all of the yummy Apollo React functionality without it assuming how you want to render your data! Awesome!

REST meets Apollo

Because I had so much fun with Apollo's React components I thought how great it would be if something like Apollo React existed for communicating with a REST API.
After an EXHAUSTING research session ( googled "apollo rest" and saw that the first result wasn't what I wanted ), I decided to build my own Apolloesque React components for REST API's!

Is it derivative? Yes. Will I get sued by Apollo? Also yes but I'm hoping they think I'm cute and don't take legal actions <fingers crossed>

What's in the box?

The hero of our story is <Fetch> which takes in 2 props 'url' and 'fetchOptions' and does it's magic will allowing you to write your own render logic using function as children, just like Apollo React.
The sidekicks to our hero are <Get>, <Post>, <Put> and <Delete> which are nothing more than syntactic sugar on top of <Fetch> that have defaults defined for common REST actions.
And now the goodies!
Examples site link - This is where you can see how the components work with some simple layout and styling
Github link - If you want to check out the code this is the link for you <finger point emoji>
npm link - c'mon you know what this is

The "Be my friend section"

If you liked this post and want to be friends with me, ya know, chat online or grab a beer or go on a life changing adventure that will bond us for the rest of our lives, you can find me on here:
Github
Linkedin
Medium
Twitter

React image lazy load component Revisited

Bojan Gvozderac — Thu, 24 May 2018 08:06:31 +0000

A long a$$ time ago I created a simple React component that would lazily load an image and while it’s busy loading an image it would show a placeholder and wrote a tutorial how I did it. It is inspired by Polymer’s iron-image and a neat little trick how to transition from placeholder to loaded image.

The Magic
While playing around with Polymer (shameless LINK to another article I wrote) I learned that you can make a pretty cool “Blur Up” animation by taking the image you want to show, scaling it down to 1% of its width and height, using that as the placeholder and when the original size image is done loading you fade it in over the placeholder.

This creates an effect that looks like a blurred image hinting what it’s supposed to show suddenly sharpening to reveal the original image.

Sweet!
The Reaction
He he… see what I did there? The title is The Reaction and we’re talking about a React component! …I’m sorry you had to read that.
When I released my component into the wild I thought it wouldn’t be interesting to a lot of people since it’s a relatively basic component but to my surprise the interest for my component started growing and growing.

Thanks React community! Appreciate it!
The article I wrote keeps getting views and claps and according to medium statistics the activity is coming mostly from google search!

It made me really happy that I found a topic that continues to interest the React dev community and that I offered a possible solution to a problem as well as shared some of my knowledge.

The Realization
Looking at everything that’s happening something dawned on me…

While the article explaining the concept behind image lazy load and the neat trick I learned from Polymer is cool, the component it self sucked big time.

That’s why I decided to rework the component and publish it on npm as a library!

The Good Stuff
If you’re lookin’ for that sweet sweet component to use in your sweet sweet project then head on over to sweet sweet npm and install it (sweet sweet LINK)

If you’re looking for the Github page you can find it here (LINK)

Originally published at jsguru.io.