Graduates throwing hats silhouettes

UDACITY’S FEND HIGHLIGHTS: KEEPING UP WITH THE TRENDS IN WEB DEVELOPMENT – PART I

We have reported earlier this year that we were a part of the first phase of this Scholarship. Well, guess what? We made it! We were given an opportunity to participate in full Front End Web Development Nanodegree program by Udacity. And we used it! Nowadays, we are ecstatic to report, we are able to humbly brag about our finished Nanodegree with the certificate in hand.

Nanodegree - Udacity's certificate

Udacity Nanodegree® Program is a unique online educational offering designed to bridge the gap between learning and career goals. Their main mission is to provide a learning experience for every student – no matter their background, give them a foundation in desired skills and prepare for the job market. Specifically, Front End Web Developer Nanodegree (FEND) is designed to bring a total newbie from zero to hero in Web Development. In order to do so, the curriculum teaches a wide range of skills –  from the very basics to the cutting edge technologies which are today’s industry standard. It takes their students on a journey – explaining the theory and then letting them create and experiment with their own projects. Completing all the projects is a requirement to complete the Nanodegree.

With this article, we would like to reflect on the process and share our main takeaways from this experience. There are two major highlights from the course we wanted to talk about because they reflect recent trends in web development, are relatively new and we are very excited to utilize them in our upcoming projects. These are Progressive Web Applications and React.js library.

In the first part of this two-piece article we’d like to focus on front-end applications; especially Progressive Web Applications which are one of the hottest trends in web development at this moment. Two infographics included!

 

PART I: Progressive Web Applications

Progressive Web Apps Cover image

The first highlight of the course was creating and testing some of our own single page applications. Web applications are slowly but surely replacing the old desktop applications. There are several reasons why: they offer seamless and smooth user experience, are easier to maintain and, last but not least, they work well across most of the devices. There are two main design patterns for web apps: multi-page application (MPA) and single-page application (SPA).

Multi-page applications are the traditional web applications that reload the entire page and display the new one when a user interacts with the web app. This means each time when a data is exchanged back and forth, a new page is requested from the server to display in the web browser, which affects the speed of the site and makes for poorer user experience.

Single Page Applications (SPA)s are the apps that have only one page, and the contents change dynamically within the same page when the user interacts with it. One of the best examples of an SPA is Gmail. Gmail doesn’t load the entire pages from a server, but it dynamically updates the current page. After clicking on „compose“ button, the browser remains on the same page without loading the whole content from a different webpage.

To learn more about the features and differences between MPAs and SPAs, we compiled an infographic.

Download SPAs vs MPAs Infographic here

 

PROGRESSIVE WEB APPLICATIONS

The next step in the direction of smoother and faster user experience are Progressive Web Applications (PWA)s. Progressive Web App is a web application that uses modern technologies to deliver a native app-like experience. This is a relatively recent classification by Google which states:

Progressive Web Applications are user experiences that have the reach of the web, and are reliable, engaging and fast!

Progressive web app (PWA) is both a general term for a new philosophy toward building websites and a specific term with an established set of three explicit, testable, baseline requirements.

As a general term, the PWA approach is characterized by striving to satisfy the following set of attributes:

Progressive web applications advantages: progressive, offline experience, fast, secure, responsive, linkable, app-like, can be added to home screen, allow push notifications, up-to-date, discoverable

As a specific term, websites can be tested against the following three baseline criteria to qualify as a PWA:

  • It must run under HTTPS.
  • It must include a Web App Manifest.
  • It must implement a service worker.

The general set of attributes was first explicitly specified by Alex Russell and Frances Berriman, and the set of three basic requirements can also be attributed to Alex Russell.

Why Progressive Web Applications? Mobile apps are not part of the web. We use 4x as many websites as mobile apps. Mobile apps take too many steps to access which drives users away. On the other hand, websites are not friendly enough, so 87% of mobile internet time is spent in native apps.

Advantages of PWAs

Progressive Web Applications mimic all that is positive with native mobile apps: offline experience, push notifications, they are fast, efficient and easily accessible. Not only that, but there is one pretty big upside: they have the reach of the web. This means they are not limited to devices with a certain type of operating system. Rather, they are available in a browser or even from user’s home screen. No app store required.

 

Reliable: PWAs offer offline experience

When launched from the user’s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state. A service worker is a script which client’s browser runs in the background. It is separate from a webpage and offers possibilities to serve the user with content independently of webpage or user interaction. It puts the developer in control of the cache and how to respond to resource requests. By pre-caching key resources, the developer is now able to eliminate the dependence on the network, serving content while waiting for the server to respond. This ensures that no matter the quality of the network connection, the user isn’t condemned to a blank page while waiting for content to load (server’s response). Instead, we can now serve users pre-cached content, which will keep them entertained until the new content loads, thus minimizing website’s bounce rate.

Fast: performance matters

Sites and apps are richer in functionality than ever before. As a consequence, they have become more demanding of network and device resources. On top of that, developing for the web means developing across a variety of network conditions and devices, while trying to maintain a high level of performance.

With PWAs it’s possible to optimize the performance of the webpage by carefully planning:

  • What resources we serve to our users – refactoring all the unnecessary code and keeping the libraries lightweight.
  • How we send them – because delivery is vital to building fast user experience.  Migrating to HTTP/2using resource prioritization,  and splitting code in webpack can go a long way
  • and finally how much data we send – from minifying scripts to optimizing graphics assets – the full list of tips for optimization can be found here.

Performance plays a significant role in the success of any online venture, as high performing sites engage and retain users while poorly performing ones tend to shoo users away. Case in point:
Pinterest, which rebuilt their pages for performance realizing a 40% reduction in perceived wait times, thus increasing both search engine traffic and sign-ups by 15%. On the other hand, the BBC found they lost an additional 10% of users for every additional second their site took to load. To sum it up: fast loading website can give a business significant advantage at online market.

 

Engaging: Feels like a natural app on the device, with an immersive user experience

Progressive Web Applications are installable and live on the user’s home screen, without the need for an app store. They offer an immersive full-screen experience with help from a web app manifest file and can even re-engage users with web push notifications.

  • The Web App Manifest allows the developer to control how the app appears and how it’s launched. One can specify home screen icons, the page to load when the app is launched, screen orientation, and even whether or not to show the browser chrome.
  • Web push notifications allow users to opt-in to timely updates from sites they follow and allow to effectively re-engage them with customized, relevant content. Push is based on service workers which operate in the background. This means the only time code is run for a push notification is when the user interacts with a notification by clicking it or closing it.

 

Comparison between progressive web applications, websites and native mobile apps

In short, Progressive Web Apps are experiences that combine the best of the web and the best of apps. They use service workers, HTTPS, a manifest file and an app shell architecture to deliver native app experiences to web applications.

 

But how does one know if their page fits PWA criteria? To aid developers in navigating all those new features and satisfy the criteria for PWAs, there is Lighthouse – an open-source, automated tool for improving the quality of web pages. It can be run against any web page and it offers audits for key features of a PWA: performance, accessibility, best practices of progressive web apps and many more. This is a super useful tool for assessment on where your app stands according to PWA standards!

Steps to upgrade to Progressive Web Application: serve site with HTTPS, use Web App Manifest, use service workers

Accessibility (A11Y)

An important segment of developing for the current web (especially PWAs) is making the websites accessible to all the users, above all – to those with impairments. As we focus on moving to Progressive Web Applications and an Offline First approach to application development, it is imperative that we don’t leave accessibility behind.

Aforementioned Lighthouse has a whole section specifically dedicated to accessibility testing, which tests to ensure that the app is accessible to people with impairments. Lighthouse has many extensive categories for accessibility. It measures color contrast on the page for people with visual impairments to ensure that background and foreground colors have sufficient contrast ratio. It ensures pages contain proper meta tags for people who require assistive technologies like screen readers. The tool also checks to ensure various ARIA Attributes are following best practices.

Not only it enlarges your potential user reach, but also, by following the best practices of A11Y we are providing best possible user experience to people without impairments too.

 

In conclusion, why we decided that this piece of information is important enough to share it with our readers? PWAs are apps delivered through the web – as opposed to native apps, packaged and deployed through stores. In words of Alex Russell: „they’re just websites that took all the right vitamins.“

As with every technology; early adopters have some advantages.  Soon everyone will be talking about how they need to make a Progressive Web App. The benefits are obvious and the incentives will grow. But as more companies start building PWAs, it will become harder to get noticed.

To support the claim that this is not only the future of the web but could also become the future of app development here is a fun fact: Progressive Web Apps will be in app stores. Microsoft is talking about adding them to their store. They will probably end up in the Chrome store eventually. But the beauty of it is that they are everywhere – available in the browser, on the home screen and soon in the app stores! For a business, this means an expanded reach to a lot of potential customers. With Progressive Web Apps, businesses are maximizing their market while providing the best possible experience to their users. Why not start now?

 

All the information from the above article we compiled into an infographic on Progressive Web Applications. You can download it as .pdf below.

Download PWA Infographic.

 

In the second part of this article, we will discuss React.js – an increasingly popular JavaScript library for building user interfaces and a valuable tool for building PWAs.

Continue reading

 


References:

Share your thoughts