InRhythm

Your partners in accelerated digital transformation

InRhythm

Neumorphism is Here

This weekend I updated all of my systems to the latest and greatest macOS: Big Sur. Phones, tablets, desktops, and laptops all had the Apple white loading bar at the same time Saturday evening. My hopes were not that high. Honestly, I have fallen out of step with Apple in the last few years. As a former Apple consultant and Apple Kool-Aid drinker for most of my life, the shine has effectively worn off. I even *gasp* moved on to a Samsung phone … for a while.

I have come back around for various reasons, and this is the first major upgrade I have had to walk all of my devices through in a while so I was paying attention more than normal. What shocked me is the subtle move to Neumorphism throughout all my devices, and I have to say I love it!

Old Messages icon

Messages icon in Big Sur

For those of you who are unfamiliar with the term, Neumorphism is the step-child of Skeuomorphism. You know what skeuomorphism is: it’s the design methodology where you design something to look like a real-world object. This was popular in the early days of the web (and for the most part it was awful) and eventually settled down into music-based applications. Tons of 3D dials and amps that actually look and operate like amps. However, the rest of the design world moved on to a more Jony Ivy “flat design” look and feel:

What is cool about Neumorphism is that it combines the best features of both flat and Skeuomorphism. Items feel like they live in a 3D world, but the effect is created by small cues that essentially trick the eye into seeing form and structure where there is none. Colors and gradients are no longer in your face shouting for your attention but are used to create a look and feel that is ultra-modern yet soft, like something you want to touch.

I am a fan. As much as I loved the flat design of the post-iOS7 world, I am growing tired of it. I am looking for technology to start feeling like it is growing and changing, being unexpected. For the first time in many years, I am pleasantly surprised.

How Customized Usability Testing Benefits You and Your User

Software development is all about accurately capturing what the user wants. More accuracy is always better, of course. But what if you could have more accuracy while also saving costs? Why wouldn’t you want that?

Traditional software development was to actually write the software, get your users to test it, have their inevitable change requests come in, change your software, test again, etc. It’s more labor intensive that way (thus more costly), but more importantly it’s less accurate, though that might seem counterintuitive. When you deliver something the user does not want, you did not accurately give them their desired solution. By accurately capturing what the user wants earlier in the process, developers can more accurately engineer the solution later.

For example, let’s say you are mocking up new screens in wireframes on Figma. It’s much easier to change a wireframe than to change code, and for the user it’s basically the same thing. They see the UI changes, get to make their change requests, and you get to implement those change requests in Figma, not in code. 

But usability testing takes this a step further. By using mood boards you can get on the same page as your user early in the dev process.  Using rapid prototyping lets you quickly iterate through various ideas in the early, cheaper stages of the project. And then wireframing, whether you are using Figma, Sketch or XD files, lets your users see how the app will appear. All of this can be done during the early, cheaper stages, and why wouldn’t you take advantage of that with the great tools we now have? Usability testing gives you more accuracy at a lower cost. Can’t beat that!

Creating Robust Test Automation for Microservices

Any and all projects that a software engineer joins will come in one of two forms: greenfield or legacy codebases. In the majority of cases, projects will fall into the realm of the legacy repositories. As a software engineer, it is our responsibility to be able to strategically navigate our way through either type of project by looking objectively at the opportunities to improve the code base, lower the cognitive load for software engineering and make a determination to advise on better design strategies. But, chances are, there is a problem. Before architecture or design refactors can be taken its best to take a pulse on the health of your platform End to End (E2E). The reason being, lurking in a new or existing platform is likely a common ailment of a modern microservices approach – the inability to test the platform E2E across microservices that are, by design, commonly engineered by different teams over time.

I recently worked on a greenfield platform and nearly 6 months into the project, one of the most critical parts of the project had fallen several months behind from a quality assurance perspective. It was no longer possible for QA to catch up, nor was it possible for QA to engineer and execute E2E testing to complete common user journeys throughout the enterprise system. To solve this conundrum, E2E data generation tools needed to be created so that the QA team could keep upbuilding and testing every scenario and edge case. As I see it, there are three main requirements for an E2E account and data generation tool. The tool should:

1) Create test accounts with mock data for each microservice

2) Link those accounts between up and downs stream microservices

3) Provide easy to access APIs that are self-documenting 

Using a tool like Swagger, QA can use the API description for REST API, i.e. OpenAPI Specification (formerly Swagger Specification) to view the available endpoints and operations to create accounts, generate test data, authenticate, authorize and “connect the microservices”.

By creating tools for E2E testing, our QA team was able to eliminate the hassle of trying to figure out which upstream and downstream microservices needed to be called to ensure that the required accounts and data were available and set up properly to ensure a successful test of all scenarios i.e. based upon the variety of different data types, user permissions, user information and also covering the negative test cases. The QA team was able to catch up and write their entire suite of test scenarios generating the matching accounts and data to satisfy those requirements. The net result of having built an E2E test generation tool was automated tests could be produced exponentially quicker and the tests themselves are more resilient to failure. 

Even though the microservices pattern continues to gain traction, developing E2E testing tools that generate accounts and test data across an enterprise platform will likely still remain a pain point. That having been said, the purpose of this article is to raise awareness. Software Engineering Leadership has an opportunity to step up and ensure that the enterprise system that they look after is healthy E2E. I can’t think of a better way to maintain a healthy system than to ensure accounts and data in the lower environments actually work and unblock testing end-to-end. 

James Woods, Web Engineering Practice Lead

The Importance of Placing Individuals Above Processes and Tools

Empathy should be regarded as a super-power. Not enough people have it and the workplace – indeed, the entire world – would be a better place if more people did have it. When you have project deadlines or you’re in the midst of an intense all-hands scrum, it’s easy to forget about the people factor. That is, there are people working with you and for you who are missing celebrations, concerts or the opportunity to just chill out at home because their effort is critical to your product development effort.

But you’re on a tight timeline. You have key deliverables. Your client has worked backwards from the launch and expects that you will deliver a bug-free software solution by the date circled on the calendar. As the Practice Lead, you may be luckier than most in your role if you have a dedicated team cranked up on caffeine and working late into the evening – every evening, in fact. This is great for deadlines but it can have far-reaching negative consequences if this pace is expected to  be sustained.

The Agile Value #1 requires that we value individuals and interactions over processes and tools. Yet you’re conflicted. Project deadlines and deliverables are what they are and you’ve explained them to your team. Missing a due date and delaying a launch is not going to happen on your watch. Processes for coding, testing, documenting must happen as prescribed, regardless of the yeoman’s effort required to get it done. Your team understands this, right? Surely you told each team member that they were doing great work when you met last year for their performance review?

Maybe they do. Or maybe they don’t. Agile product development places enormous demands on the people doing the work. Both the team members and their practice leads have to grapple with the relentless pressure and the temptation to skip part of the process to move things along faster. 

When you’re building high velocity teams, you need to make daily investments in your people, processes and infrastructure. Take any and every opportunity to express empathy, understanding and gratitude for the work that your team, and each individual on your team, is doing. Expressing appreciation once per year during a performance review will likely end up becoming a one-and-done experience because that employee likely won’t be around this time next year.

There are simple ways to bolster your team’s productivity and motivate them to stay on track with respect to processes. The easiest way is to say, “Thank you.” If you want a high velocity team who is loyal, dedicated to the needs of your customers and proud of the work they do, then say what you mean and mean what you say. Be sincere. 

To help ensure that your agile engineers remain “your” agile engineers, go one step further and acknowledge the efforts of individuals in front of others. People are human and their efforts, sacrifices and basic needs must be openly acknowledged. As software engineers in a hot market, we have the flexibility to go wherever we like towards the goal of being part of a community that values our membership. Agile leaders must reinforce appreciation of these “extra efforts” through grace, gratitude and occasionally, through special dispensation. Catering dinner (that’s not pizza) for the team every once in a while is a good expression of gratitude. This is how to build trust and long-term relationships, as well as high velocity, agile teams. 

Staying strong on execution and adhering to process is critical for success. Acknowledging the personal efforts that it took to enable that success must be acknowledged. Remember, as per agile Value #1 –  if you put people first, ahead of processes and tools, you will have created a space that fosters a high performing team’s success.

The Magic of Service Workers

When we think about building modern web applications, we think about being online, about updating users with the latest news and offers. We think about flashy, and attractive animations. In the process of building a web application we often forget that the reality can be dramatically different. We are so busy focusing on the design, content, digital marketing that we forget one of the most important parts of keeping the website running – the users. In reality our users are located in various parts of the globe. They could be offline, or browsing on an old device using often flaky connection, or simply have limited data. How can we make sure that everyone has relatively the same experience using our product, no matter in what conditions they are using it?

What is a service worker?

If you heard of PWAs, you also heard of service workers, but what are they, how do they work, and what does it have to with anything?

A service worker is a JavaScript execution context that has its own event loop and node document dependency. In simpler terms, service workers are simply event driven JavaScript scripts running on their own thread in the background, separate from the browser.  They don’t have access to the DOM and they are not attached to a single page, like regular JavaScript files. Their main role is to handle events fired by the browser, or your webpage, and intercept network requests.

You can think of it as a gatekeeper for your network requests. Service workers have a total control over every request made from a website. Since they run in the background, they don’t need the webpage to be open. That gives them ability to listen and respond to events such as push messages sent from the server to the browser.   

How does a service worker work?

As we said before, service workers are based on JavaScript. Now, how do they do all that magic? Why would you want to add more code to your project? Why can’t you just use regular JavaScript file? Let’s consider two scenarios – a website with and without a service worker.

Scenario no. 1 – without service worker

You go to a website. Your browser makes a request to the server. The server responds with index.html file. Your browser parses through that file and makes additional requests to the server for the remaining files necessary to render the page. After the page is rendered you can enjoy using the website. You close the tab. What happens when you come back to that page? The process starts all over again. Now imagine that in the middle of that process you lost the connection. Bad news, once the connection is back the process will start all over again. Simply said, every time the connection is lost, the page is gone. If you don’t have access to the server, you simply don’t have access to anything.

Scenario no.2 – with service worker

You go to the website. Your browser makes a request to the server. The server responds with index.html file. Your browser parses through that file and finds service worker. The service worker is being downloaded, installed, and activated. Your browser continues making requests as usual, then renders the page. You use the page, and as usual, leave the page at some point. The process doesn’t seem any different, until you come back to that page. The logic behind service workers kicks in after it was installed and activated. With that being said, service worker won’t work until you return to the page after initial installation. From that point service worker will handle all coming and going requests. In the case that you lost connection, the page can still be loaded from the cache. The true power of service workers is ability to run in the background. This means that even if you leave the page, service worker will make sure that the content gets updated, and when you return, it’s ready to be loaded immediately. Imagine working all day and not using your precious phone. After work you get on the train, the connection is lost immediately and you can’t access any social media. Aha! Here comes a surprise. Your best friend service worker was busy all day preloading all new content for you. Now you can open your favorite page and be updated on what your friends ate for a dinner. How awesome, right?

Security concerns

What about malicious code running in the background of your phone hijacking all requests, you may ask?

With great power comes great responsibility. Using service worker, you can easily hijack connections, modify them, and fabricate responses. To prevent these malicious activities service workers can only be registered over a secure connection. You don’t need to worry about it during development process – localhost is considered to be secured. However, you definitely have to take care of the SSL certificates once your web app goes live. You can opt for paid or unpaid certificate. Should you decide to save some money on that step Let’s Encrypt is a free, automated, and open certificate authority.

Service worker lifecycle

Since service worker runs in the background, it has a separate lifecycle from the web page.  Let’s have a look at its cycles.

Registration

In order to use its abilities, service worker has to be registered first. You should be aware that service workers are fairly new technology, and they are not yet supported by all the browsers. According to caniuse.com the browsers that are currently not supporting service workers are: IE and IE Mobile, older versions of Edge and Firefox, Opera Mini, and Android Browser. Hence, before we register service worker, we should check if the browser that is currently used by our user supports service workers. In the case that service workers are not supported, JavaScript code will skip service workers, and continue running. If the browser supports service workers, and the page never had a service worker before, or the current service worker had been updated, the browser needs to fetch a new service worker, register and install it. Service workers don’t require user’s permission in order to be used. The user won’t be even notified of their existence.

Figure 1 main.js

Installation and caching

After the registration of a service worker is completed, it triggers installation process. This is a perfect time to pre-cache all of the resources needed for the shell of our app.


Figure 2 sw.js

Activation

Once the service worker has been installed it’s then activated. The service worker will now control all pages under its scope. You may now ask: what happens when after some time our cache gets outdated? The browser doesn’t know which cache we are going to use, but storing all outdated caches takes a lot of space. The activation process seems to be a great place to solve this issue.

Fetch and updating cache

After the service worker was activated, it can now control events such as fetch, message, and push events which occur whenever network request or message is sent from the page.

Termination

In order to save memory, the browser can terminate the service worker.  It will be restarted as needed.

Scope

When the service worker is registered, it will only handle requests within its scope. What it really means is that your service worker will only have a power over the scope that it is placed in. If you place the service worker in root folder, that service worker will be in control of all other pages. However, if your service worker is placed in a particular folder, it will then have control over that folder only.

What you should also remember is that any page can register a service worker, there are no limits to the amount of service workers, but once they are installed, they will be there forever, or until they are manually unregistered by the user.

Caching strategies

There are a handful of useful cache strategies, but choosing the right one always depends on the needs of your application. Let’s have an overview of a few of most common strategies.

Cache first, then network – if the request matches the cache entry, otherwise try to fetch the resource from the network. This is a great strategy for storing commonly used files such as components. However, you should be careful when using this strategy for the application data or resources that change often – you may get old data.

Network first, then cache – using this method you will try to fetch the resources from the network. If the network request is unsuccessful, the browser will try to fetch the resource from the cache. This is a good method to use for the apps containing a lot of fresh data, such as social media platforms, game leaderboards, or articles. This method guarantees that the network request for freshest data will be attempted, however it is unsuccessful, you will still see the old data. The major flaw of this strategy is that when the user has a slow or intermittent connection, they will have to wait either until the data gets loaded from the server, or until the request times out.

Cache only – using this method, your browser will try to resolve the request from the cache. If the resources are unavailable, the request fails. This is a great option for making sure that no network request is made, for example when you turn on save battery mode on your device.

Cache then network – this strategy is ideal for data that updates frequently or when it’s important to get the data on the screen as fast as possible.  Using this method, you would make two parallel requests – one to the network and one to the cache, then display the cached version first, and update the UI once network response arrives, unless the network data returns before the cache.

Progressive enhancement

Service Workers are a new technology, currently supported by Chrome, Firefox, Opera, and Samsung Internet (coming up in Edge and Safari). What happens if the browser that you are using doesn’t support them? The browser will simply ignore the part of code responsible for Service Worker and default to its natural behavior. Simply said, you won’t benefit from Service Worker, but it won’t break anything as well.

Push Notifications

What are push notifications?

Push notifications are messages that are ‘pushed’ from the server user’s device. They allow us to communicate with the users even if the browser is closed. The ability to reach out to users at any time gives us a is incredibly powerful way to engage with the user, bring them back to the application.

Structure

Push notifications consist of two building blocks: the Notifications API, and the Push API. The first one lets us to display the messages to the user, while the latter is responsible for handling the Push Messages received from the server, even when the app is closed. The Notification and Push API’s are built on top of the service worker API, which responds to push message events in the background and links them to the application.

Push API

Push messages meant to become notifications are sent from a server directly to the push service, and contain the information necessary for the push service to send it to the right client and wake up the correct service worker. This process happens even when the browser is closed and the service worker is deactivated. When the service worker receives the message, it wakes up to display the message and then deactivates again. However, if the user decides to interact with the notifications service worker wakes up again, this time to handle that user’s interaction.

Notifications API

This API is solely responsible for displaying the notifications to the user. This API uses the same mechanisms as native apps, giving the notifications a completely native look and feel.

Permission

Before the notifications can be displayed, the applications need to prompt the user with permission request. The user’s response is the stored along with the app, so when the user comes back, the window does not pop up again with the same request.

Background Sync

Background synchronization is a relatively new but very important feature, as it allows you to synchronize the data even if the user is offline. Let’s imagine, that the user started filling out the form while online. By the time the form was ready to be sent, the user was already offline. How frustrating it really is when at the end of filling out form you can’t save them, all the data is gone and you have to start over when the connection is back? Thankfully using background synchronization allows us to proceed with sending the data to the server. How does it work? You would probably think that we simply send the request, that request is stored in the cache until the connection is back, right? Unfortunately, you can’t cache ‘POST’ requests. So how do we do it then? We need to register sync tasks, in other words we need to tell the service worker that there are some tasks that require to be taken care of when the connection is back. But where is that data that we want to send stored in the meantime? IndexedDB is the best place to store the data requested to be sent. When the connectivity is reestablished the sync event fires, and the service worker executes all tasks it has stored. The beauty of this feature is that user doesn’t have to have the browser open – everything happens in the background!

Summary

Service workers possibilities are countless, and this article only touches on a few of them, but be sure that mastering your service worker skills and caching techniques will make your web apps reliable, fast and engaging whether your users are offline, online or using flaky connection.