Are you an embedded systems engineer looking to get into web development? The fields of embedded systems development and web development have shared little overlap. However, all signs point to increasing convergence between the two.
After all, embedded systems traditionally haven’t been the easiest when it comes to user interaction. With the explosion of IoT devices and their ubiquity in every-day life, though, users are demanding better, more user-friendly interfaces. Oftentimes, this will be provided as a web interface or application hosted by the device itself.
In this article, we’re going to help grease the wheels for those looking to spruce up their embedded applications by shipping them with improved user experiences (sometimes even served up as webpages). We’ll cover some web technologies that are frequently employed by web developers. We’ll also briefly review some front-end frameworks that are well-suited for the constrained environments often encountered when developing for embedded systems and IoT devices. Finally, we’ll take a look at some of the tools used by web developers when it’s time to get into the weeds and figure out why your web application isn’t behaving.
Brace Yourself
As with learning anything new, transitioning from old-school, hardcore embedded systems development to web development presents some hurdles that you’ll have to face.
First, embedded systems typically have constrained operating environments. This means that many of the technologies used to build modern, web-based applications are poor fits for devices that restrict processing power, memory, and available RAM.
However, even if embedded systems provided unlimited resources, you’re going to have to become comfortable moving away from the hardware. Web development is a fully realized technical field, complete with its own standards and ideologies. Diving in from the perspective of an embedded systems engineer is more involved than merely learning the latest JavaScript or CSS tricks.
(The analogous challenge for a web developer getting into embedded systems would be to learn to work with a device that also acts as a web server. This is the case with just about any NetBurner device.)
Ready to get started? Read on!
Frameworks
Web development frameworks are the tools and libraries that make it easier for you to code in a specific language or implement a particular application. The downside is that you start your app in the hole (at least when it comes to app size), and you haven’t implemented anything yet.
So, what’s a developer to do?
Enter lightweight frameworks. These allow you to leverage the power of a framework without increasing the bloat of your app. At least, not as much. There are definitely other tradeoffs that you need to consider, such as not as much built into the framework by default. However, such is life if you are looking for something both light and speedy.
The following are some frameworks you might consider when developing web apps for embedded systems. Some are “normal” options that happen to be light enough that they’re viable candidates for embedded systems. Others are specialty frameworks designed to work well on embedded systems from the get-go.
EmbedJS
EmbedJS is more of a plugin and less of a framework. That said, if you are looking for something simple to help you embed things like code, emojis, maps, media, services, or tweets, you should be considering EmbedJS. It only loads what is required, can be used for both server- and client-side purposes, and can be customized with just a few lines of code.
Flutter
Created by Google, Flutter is an open-source UI toolkit to help you build apps for a variety of devices and platforms while using only one codebase. Google itself uses Flutter for some of the user experiences that ship with its Home Hub, and the company hopes to see it used more on embedded devices. Developers write Flutter apps in Dart (a language created by Google) but can then compile them to JavaScript.
Responsive
Responsive brands itself as the developers’ framework. Its highlights include an emphasis on accessibility (e.g., each component and plugin is accessible to screen readers and keyboards). It also has built-in right-to-left support for those apps geared toward an international audience. Notably, it is built on top of Sass and jQuery. Despite all of these features, the combined output of Responsive’s CSS and JavaScript is 20.3 KB after you’ve minified and zipped your files.
Frameworks Available via CDN
For those who want a more robust framework than the miniature ones listed, consider looking for those that can be served to users via a content delivery network (CDN). A CDN allows you to use these frameworks in your code without having to rely on the system resources to house these files. The catch with this option, obviously, is that the network on which you are working must be internet-connected. Nevertheless, internet connectivity opens up a lot of doors and you can use things like Twitter’s Bootstrap, Facebook’s React, or Google’s Angular for the front-end of your webpages.
MicroJS.com
We want to be clear that MicroJS.com isn’t a framework, but a way to find lightweight frameworks and libraries. MicroJS.com defines a micro-framework as one that contains no more than 5,000 lines of code and does one thing (and only one thing) well. The site maintains a list of rules that qualifying frameworks must abide by before they are included. If you are looking for assistance with specific tasks, consider searching through the MicroJS.com directory.
Browser-Based Tools
One of the most frequently used sets of tools during web development and debugging are those that are built into the web browser of your choice. Google ships the Chrome Developer Tools (currently the leader in terms of the number of users), while Mozilla offers the Firefox Developer Tools and the Web Developer extension. Rounding out the most frequently used options are Apple’s Safari Developer Tools and Microsoft Internet Explorer’s Web Edge Developer Toolbar
How Developer Tools Can Help You
To show how useful developer tools can be for you, let’s take a closer look at what Chrome offers. Chrome Developer Tools comes standard, so all you have to do is launch it using one of the following methods:
- If you are looking at a web page, you can right-click on an element and click Inspect in the pop-up dialog that appears
- Pressing Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS)
- Pressing Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to open the Console panel
In general, your two most-frequently-used tabs during development and troubleshooting will likely be Elements and Console. The Elements tab allows you to view and modify the HTML and CSS used to generate the page. The Console tab allows you to review logs (or any output generated by your JavaScript code). You can also run JavaScript using the Console.
So Many Tabs
When getting started, you may find these tools to be a bit much. However, as your app grows and you need to optimize and improve it, these tabs contain incredibly useful features. We recommend reviewing the Chrome DevTools documentation for additional information. A brief overview of each tab is provided below:
- Sources: helps you run and debug your JavaScript code, as well as save changes made in DevTools, so they persist when you reload the page
- Network: lets you view and debug network activity
- Performance: shows how long it takes your app to load and its runtime performance
- Memory: shows you memory usage so you can track down any memory leaks
- Application: allows you to view the resources loaded, including databases, local/session storage, cookies, caches, and more
- Security: provides information about mixed content issues, certificate issues, and more
- Audits: allows you to run Lighthouse, which audits for things like performance, accessibility, SEO, and so on
- AdBlock: filters ads
The Right Set of Developer Tools for You
There are certainly variations in the features and functionality that get shipped with each set of browser-based development tools. However, you can expect, in general, the ability to access and inspect your source files, change and modify the files while examining the results of such changes in real time. These features are great for testing usability, accessibility, and the like.
In the end, you probably have one that you know and love already. If not, the choice you make doesn’t really matter since they all have most of the essential functionality you’d need. However, if you need help, Chrome and Firefox are the most popular options. Both have a robust digital community ready and willing to help if you get stuck or don’t know how to do something.
Other Helpful Tools and Techniques
The following are some of our favorite tools and techniques for embedded development, web development, and some mixture of both.
Postman
A fair amount of the work you do will likely involve calling an API and making sure that the hardware behaves a certain way based on the response of the API. Postman bills itself as a collaborative platform for API development. However, its bread-and-butter is storing API calls, making it easy to change them, allowing you to send them out, and receive and parse the responses. This is really what makes it helpful for you. With Postman, you can remove all of the noise involved with development and focus strictly on communicating with the APIs for your project.
Minification
Minification is the process of stripping out everything that doesn’t affect processing from your code and, in some cases, renaming elements in the code to smaller values. There are few places where this is more important than a resource-constrained environment. For quick and/or simple jobs, Andrew Chilton offers tools for both CSS and JavaScript. For larger jobs, Smaller handles your HTML, CSS, and JavaScript files directly. Finally, we want to mention Dojo Toolkit, one of the most robust JavaScript development toolkits that also features minification tools.
Visual Studio Code
If you’re not already using our homespun IDE, NBEclipse, Visual Studio Code is one of the most commonly-used IDEs around (and for good reason). It supports most major version control systems, includes robust debugging tools, syntax highlighting, intelligent code completion, snippets, and more. The most significant upside to Visual Studio Code, however, is its ability to be customized. For example, you can add extensions that support the workflow you plan to use.
Wrapping Up
There are substantial differences between the fields of embedded systems development and web development. However, the increasing ubiquity of technology like IoT devices means that such items must ship with better user interfaces that are easier to access. To that end, it is the responsibility of embedded systems engineers to keep up, adapting their skill set so that they’re capable of working with all facets of today’s embedded systems.
In this article, we covered some of the most commonly used web development technologies, including frameworks that are well-suited for embedded systems. We also reviewed some aids for debugging, and other tools and techniques we find indispensable when developing for small systems.
1 thought on “A Tale of Two Technologies: Web Development for Embedded Systems Engineers”
Great articles thanks for sharing this