Front-End Development in an Internet of Things World

Share this article

Front-End Development in an Internet of Things World
IoTWeek_Gray

It’s IoT Week at SitePoint! All week we’re publishing articles focused on the intersection of the internet and the physical world, so keep checking the IoT tag for the latest updates.

The world wide web has continuously developed and morphed throughout its 27-year history. How we display and style content has gone through various phases throughout this time, the most recent of which was the emergence of a responsive web — one web that adapts to fit multiple browsers and device sizes. When it comes to a web with an ever growing number of “Internet of Things” (IoT) devices such as Raspberry Pis, smartwatches, personal assistants that work solely via voice, and so much more — the potential of the responsive web is going to be tested.

The IoT means even more varied devices out there in the wild that could potentially try to load content from the web. We need to ensure that the web remains as accessible and usable to those devices if we are to avoid another big segmentation like we had in the early battles between mobile and desktop. The last thing we want is one web designed for the IoT and one for the mobile and desktop web.

What IoT Devices Might Display The Web?

A lot of developers don’t quite realise the potentially broad number of devices that are likely to try to display web content to people in the future.

Computing Devices With Small Displays

Raspberry Pi Screen from Adafruit
A 2.8″ Touchscreen for Raspberry Pi from Adafruit

Devices such as Raspberry Pis with tiny screens from 2.4″ and higher have Wi-Fi, ethernet and even 3G/4G connections, giving them plenty of potential for displaying web content. This content may come in the form of web pages from the world wide web, or it may come in the form of local web pages for embedded device manuals, web-based device control pages and local dashboard style web page displays.

Smartwatches

The Android Wear web browser from appfour
appfour’s Android Wear Web Browser

Smartwatches can have even smaller displays, with a whole range of different color ranges and screen resolutions. While the Apple Watch doesn’t have a web browser yet, Android has a Web Browser for Android Wear by Appfour and there’s every possibility that over time more smartwatch web browsers may be on the horizon (assuming someone cracks how to design the app in a way that’s easy to use!). At the very least, if the web is to be truly responsive and accessible everywhere, we should be ready for this possibility. What happens if in the future someone is reading an email on their smartwatch and they click a web link? A simple web browser client on a powerful smartwatch isn’t too farfetched.

Personal Assistants Over Voice

Amazon Echo
The Amazon Echo (Image Source: Amazon)

One new trend in computing is the smart voice assistant, such as Apple’s Siri, Amazon Echo’s Alexa, Google Now and Microsoft Cortana. These assistants’ role in the home will be to turn lights on and off, set alarms, adjust the thermostat temperature and so on. These services also respond to voice commands and questions with data they retrieve from various places online — usually this involves pairing each company’s databases of information with the details it can get about the person using the service itself. For those interested in the area, I’ve covered how to get started building your own simple artificial intelligence assistants here at SitePoint in the past, including a piece on Five Simple Ways to Build Artificial Intelligence in 2016 and a series on How to Build Your Own AI Assistant Using Api.ai.

Over time, with improvements in artificial intelligence and machine learning, these assistants just might scour the web for information and read it back to us.

To allow this to be possible, the web needs to be accessible to bots who will plan on reading the information out, rather than displaying it visually. Ideally, web pages should already be structured to suit this for screen readers, however adoption of accessible markup is often an after thought today. The emergence of personal assistant AI services just might help change that.

Entirely New Displays

The computer displays of the future, when it comes to the Internet of Things, could include a range of new and pretty fantastic possibilities. Think about devices like smart mirrors, smart windows, smart car dashboards — these will occur just casually throughout our lives, but how nicely will the web display on them? A whole range of new design decisions arise — to display content on a mirror/window, you might need to have more contrast between colors. Mirror/window displays could have a limited color range which web developers will need to account for? It’s going to be a whole new (and exciting) world.

Mercedes Benz Dashboard Prototype
A Mercedes Benz dashboard prototype (Image Credit: Mercedes Benz)

Future Proofing Our CSS and Markup

There are a few key areas which I think web developers will need to pay close attention to in the future, if we are to have a web that plays nicely with new technology.

Truly Responsive CSS

Web pages will need to adapt and be relatively readable on tiny displays. Detecting incredibly small display resolutions is likely to be the key here from a CSS perspective. Will the CSS approach to a tiny display be similar to a mobile site? Or will we need to create new rules and standards that help display text in a larger font? New standards for restructuring layout for tiny screens using techniques like flexbox? New standards for styling menus on a tiny display? Only time will tell but a few select web developers are likely to end up pioneering this effort and it will be fascinating to see what the community comes up with.

The <picture> Element

The picture element allows us to specify multiple images to display depending on the resolution and device type. The final version of this spec will be key to ensuring a smoothly running web when loading pages on what might be rather low powered devices on slower connections, and on devices with very small resolutions that may not cope with displaying large images.

JavaScript Reliance Is Dangerous

When looking at lower powered devices and personal assistant devices that will read out web page content, they may not necessarily run JavaScript or be able to handle it to the same extent as a smartphone or desktop tablet. If your website relies on JavaScript to pull in its data without any fallbacks, newer IoT devices might struggle to access it. Ensuring the web works without JavaScript is still a worthwhile endeavor!

WAI-ARIA and Other Accessibility Techniques

Techniques already in place to make the web accessible for those with disabilities will also make the web accessible for artificial intelligence, personal assistants and other voice-based technologies. Building websites with WAI-ARIA and other accessibility techniques in mind from the start today could help lessen the amount of rework in future. It’s also incredibly useful for those with disabilities today and is good practice nonetheless. We’ve covered this in some detail over at How to Use ARIA Effectively with HTML5 and Avoiding Redundancy with WAI-ARIA in HTML Pages.

Color and Design Choices

Mirror and window based displays are likely to need high contrast between colors in your design to ensure it is legible against the more varied background of a bathroom scene, a sky or other room… etc.

Displays such as smart mirrors may display content similar to “high contrast mode” on current day operating systems, the mode which inverts the colors of your screen and turns up the contrast. In order to display on such a different style of display, smart mirrors may need to adopt a similar technique. If your web designs are built to display well in high contrast mode and have strong contrast between colors in your theme, this shouldn’t be too much of an issue.

SitePoint on a Smart Mirror
My artist’s impression of a high contrast SitePoint on Max Braun’s concept smart mirror

DOM Complexity

While desktop PCs and smartwatches are able to handle complicated DOM structures with lots of nested elements and CSS transitions, it’s entirely likely that IoT devices and wearables will struggle with these. Keeping a clean structure with your DOM elements might be more important than ever for performance on new devices.

Testing Is Going To Get Tough

It’s already pretty difficult to test your website on the range of smartphones, tablets, smart TVs and desktop OSes out there — as the Internet of Things and other technological advances continue (virtual and augmented reality are coming too!), it’s going to become increasingly difficult to test thoroughly on absolutely everything. Adopting web standards, accessibility standards and the ideas mentioned above should help make web designs as accessible as possible.

A level of foresight will be a necessary skill for professional web developers in the coming decade as they will need to envision how web designs will adjust and display on a range of devices without having physical access to test each one. Hopefully, emulators and automated tests will help out a little bit too.

The Omnipresent API

A responsive web will not be the only web-based source of information for the Internet of Things. The responsive web will have a companion that is just as important and is something I’ve discussed before — the Omnipresent API. This will be the server-side equivalent for the web that should enable fast iterations and adaptations for emerging technology in areas where web browsers themselves cannot reach. An omnipresent API is one that provides access to functionality and data from an application/service in a platform-agnostic way. A lack of omnipresent APIs, combined with a responsive web that cannot adapt fast enough, will lead to huge segmentation with every new piece of emerging technology.

It is crucial for both to co-exist. Our responsive web should be populated by content from omnipresent APIs that can then be adapted to work across the technology spectrum. Devices without a web browser should have apps that populate their content from an omnipresent API. Once a device has access to a web browser, that content should also be accessible via the responsive web. For more information on omnipresent APIs, have a read of my piece on The Era of the Omnipresent API.

Conclusion

Front-end development practices on the web do not need to adapt in these ways to suit the Internet of Things and other evolutions in technology. However, I believe that if they do not, the web will become segmented into something used only on desktop and occasionally on mobile, just as the true potential of a responsive web was hampered by the prevalence of mobile apps. If the web does not adapt, we may instead see segmentation as wearable apps, IoT apps, Alexa apps and so on become their own silos — rather than sharing the common ecosystem of the web.

What do you think about the future of front-end development and the web in the face of emerging technology like the Internet of Things? Let me know in the comments below, or get in touch with me on Twitter at @thatpatrickguy.

Frequently Asked Questions about the Future of the Web in an Internet of Things World

What is the Internet of Things (IoT) and how does it impact the future of the web?

The Internet of Things (IoT) refers to the network of physical devices, vehicles, home appliances, and other items embedded with sensors, software, and network connectivity, which enables these objects to connect and exchange data. This technology is rapidly changing the landscape of the internet. With IoT, the web is no longer just a platform for connecting computers and people, but it’s evolving into a space where everything from your fridge to your car can be connected and communicate data. This shift is expected to bring about significant changes in how we interact with the web, including more personalized experiences, increased efficiency, and new business models.

How does IoT affect customer service?

IoT has the potential to revolutionize customer service. With connected devices, businesses can proactively address issues, even before the customer becomes aware of them. For instance, a smart car could alert the manufacturer about a mechanical issue, and the manufacturer could reach out to the customer to schedule a repair. This proactive approach can significantly enhance customer satisfaction and loyalty.

What are IoT displays and how do they work?

IoT displays are screens that can connect to the internet and display data from various sources. They can be used in a variety of settings, from digital signage in public spaces to information displays in smart homes. These displays can show real-time data, such as weather updates, traffic information, or personalized content based on user preferences.

How does IoT support businesses?

IoT can provide businesses with valuable insights into customer behavior, operational efficiency, and market trends. By analyzing data from connected devices, businesses can make more informed decisions, improve their products or services, and enhance their customer experience. Additionally, IoT can enable new business models, such as subscription-based services or pay-per-use models.

What is the role of digital signage in an IoT world?

Digital signage plays a crucial role in an IoT world. It can display dynamic content based on real-time data from connected devices, making it a powerful tool for communication and engagement. For instance, a digital sign in a retail store could display personalized promotions based on a customer’s shopping history or preferences. This can enhance the customer experience and drive sales.

How does IoT impact data security?

While IoT brings numerous benefits, it also presents new challenges in terms of data security. As more devices connect to the internet, the potential for data breaches increases. Therefore, it’s crucial for businesses and individuals to implement robust security measures to protect their data in an IoT world.

How can IoT improve efficiency?

IoT can significantly improve efficiency in various sectors. For instance, in manufacturing, IoT can enable real-time monitoring of equipment, leading to timely maintenance and reduced downtime. In agriculture, IoT can enable precision farming, leading to increased crop yields and reduced waste.

What is the role of IoT in smart homes?

In smart homes, IoT can enable a range of functionalities, from controlling lighting and temperature to monitoring security. By connecting various home appliances and systems to the internet, homeowners can control and monitor their homes remotely, leading to increased convenience and energy efficiency.

How does IoT impact the healthcare sector?

IoT has the potential to revolutionize healthcare. With connected devices, healthcare providers can monitor patients’ health in real-time, leading to timely intervention and improved outcomes. Additionally, IoT can enable remote patient monitoring, reducing the need for hospital visits and making healthcare more accessible.

What is the future of IoT?

The future of IoT is expected to be characterized by increased connectivity, with billions of devices connecting to the internet. This is likely to bring about significant changes in various sectors, from healthcare to manufacturing. Additionally, advancements in technologies such as artificial intelligence and machine learning are expected to further enhance the capabilities of IoT, leading to more intelligent and autonomous systems.

Patrick CatanzaritiPatrick Catanzariti
View Author

PatCat is the founder of Dev Diner, a site that explores developing for emerging tech such as virtual and augmented reality, the Internet of Things, artificial intelligence and wearables. He is a SitePoint contributing editor for emerging tech, an instructor at SitePoint Premium and O'Reilly, a Meta Pioneer and freelance developer who loves every opportunity to tinker with something new in a tech demo.

augmented realityEmerging TechInternet-of-Thingsiotpatrickcsmartwatcheswearables
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form