Join us for Code @ Think 2019 | San Francisco | February 12 – 15 Register now Limited availability
Article
By Kevin Ready | Published October 18, 2018 - Updated October 18, 2018
Mobile Development
This article explores the features of full-stack mobile development environments and covers several core native and hybrid mobile alternatives and the factors that influence the selection of each platform.
First, let’s agree on language. The term full stack conjures up an image of a singular, multidimensional chameleon of an individual with as much ability on the graphic side as the system administrator and database engineer. In some exceptional cases, this individual might be what is sought. More often than not, though, full stack refers to those who have familiarity with and desire to keep current with business logic and processes of frontend frameworks, backend databases and services, and automating application and data creation, editing, and provisioning. It is less the ability to craft and edit media as it is to make it presentable and interactive.
Full-stack mobile app development lies at the nexus of content and technology. Billions of people worldwide now use smart phones and tablets, which form the client side of the full-stack app. The server side is often a distributed collection of microservices, authenticating servers, and CDN assets that are compiled at runtime each time an application is opened. Between the two lies the processes that connect them, including testing, continuous integration and continuous deployment, scaling and containerization, and proprietary device requirements.
Devices are driving the way that media is delivered and consumed. In many cases, people are more likely to watch, read, or listen to news and entertainment on a handheld device than traditional television and radio. Televisions themselves form a device target for developers.
As a nexus of technology, mobile devices drive competing paradigms championed by such behemoths as Apple, Google, Facebook, and Microsoft®. Each of these giants has vested interest in the battles for device audiences. While Apple and Google are the two brand stewards of iOS and Android, respectively, React Native and Xamarin are products by the latter two that you can use to author apps that are increasingly native in design and function. Tech companies are heavily waging on this market to continue growing, and they are actively seeking the best and the brightest to buy into their vision of how to best service it.
To be a full-stack mobile developer, you need to have an understanding, or vision, of the big picture in app development. This includes:
If I had to choose the most desirable trait for a full-stack developer to have, it would be the ability to lead the project and effectively communicate understandable processes. Full-stack developers must set up repositories, project management tools like Jira, communication apps like Slack, and they must be familiar with diverse client frameworks, databases, APIs, and microservices. Ultimately, they must be able to support and influence project management decisions. Full-stack developers share many traits with the architect or project manager of an application in addition to client and server stack abilities.
Broadly, the client side can be broken down into native and hybrid silos. Generally, when you need higher performance, you want to be as native as possible. The benefits from hybrid development often come from using familiar web tools and constructs. The choice for developers is usually between learning and using a language, such as Swift or Kotlin, or going with something that is similar to what they already know, like JavaScript and CSS. Another benefit of hybrid development is the potential to use one root set of components and styling for multiple devices. Each device has its unique qualities in look and feel, but these can come from a single source, unlike native apps.
Mobile app development at the server is in large part similar to desktop or web server app development. Exceptions include the limited way that new applications are installed on a device (that is, the Apple Store or Google Play), server-side functions that are tied to a single operating system, and nuanced ways that device apps can be updated using a specific service, such as Meteor or Ionic. Similarities include the way that data is interacted with through API calls, updating content through version control, and ensuring scalability and persistence. Throughout the project, full-stack developers often research how to best balance the load of processing, caching, and other tasks across microservice layers that make up the server side of the app.
Full-stack mobile app developers likely need to ensure that their production environment provides the following features. These might be considered as more the realm of the full-stack developer over backend or frontend concerns.
Choosing the right mix of tools for building a mobile app depends on a number of criteria, including:
The degree to which competing needs factor into software choices varies for a number of reasons, including time, budget, and demographic targets. There is often no single best answer, but there are reasons why some make more sense than others for specific applications and their intended audiences. Table 1 presents six popular tools for mobile app development.
At first glance, you can already determine that if you are including an iOS target, you need to have an Apple ID and associated account and XCode installed. For Android, although it is not clear here, device simulators are most easily accessible through Android Studio. This generally indicates that the fastest apps are written with the Apple or Google-backed software. The larger benefit for the other four come from integrating common code into native apps, which means that web developers lose less time due to learning curves during production.
Integrated Development Environments (IDEs) have been around longer than the internet. The Command Line Interface (CLI), while older than IDEs, has been experiencing a rebirth through open source embracing the CLI as the most typical way that apps are created today. Mobile apps introduced the concept of a wrapper technology: something that we know from the web like a plug-in on a page that communicates with the browser wrapper around it.
For example, when you build an application in React, it goes through a transpiling before it is published. During that process, the code is converted into something that works in all target devices and browsers as defined within a webpack configuration file. If you put this inside of a wrapping technology for a device, it involves something similar to applying the transpiling performed by Babel or Typescript on the entirety of the client application. A wrapper is the shell that communicates with the system outside of itself (its parent) as well as with its child.
Several of the reviewed software include IDEs, versioning, deployment, and CLI companion software; others require a wrapping technology to author mobile apps. Ionic, for example, is generally written within a Cordova wrapper, and Xamarin and React can be as well. Singularly important is XCode on the Mac for iOS authoring. It is the only must-have among the software to develop native apps for Apple devices. Apache Cordova stands out for its export to browser content. For those wanting to have a single codebase for mobile web and device applications, Apache Cordova remains in the front row of choices for targeting the most platforms. See Table 2 for the comparison of IDE, CLI, OS, and languages for each of the mobile development frameworks.
At the time of this writing (late 2018), Swift 4 is the current and most popular language for XCode iOS apps. For Android Studio, Kotlin is increasingly the language of choice over Java. Of the four remaining, Xamarin stands alone in the C# and .net universe, while the others are closer to hybrid development platforms. Ionic was built from an Angular root, React Native from a React root, and Apache Cordova is that open source agnostic center of all things hybrid. It is the closest to a Swiss army knife in the group that can convert most any web content to platform-specific applications.
Keeping an open source application stable with a large number of dependencies can be daunting. For many, yarn has replaced npm as the most used package manager for handling them. Both now produce .lock files that include version numbers of dependencies. The .lock file associates specific versions of libraries with a project, giving confidence that a project will be able to recompile at a future point after one or more dependencies might no longer be supported by one or more library partners.
npm
Online examples often use a mix of technologies, and it is not always easy to find preexisting stacks that give you exactly what you are seeking. StackShare and other sites let you see what others are using, compare usage, and seek as close a mix to your tech stack as possible. Whenever you find something close to what you are looking for, check the dates of the libraries and make sure that you are using the most current versions possible. This could require you to edit a stack that already exists but might be out of date.
Among the factors to consider when selecting the right software for mobile app development is the size of the developer and contributor communities. How much mindshare does a technology capture? How available is support, and does it cost to access or use it? While a technology might claim a great deal of support in a given moment, how has it performed over time against competitors?
Angular was the most important framework to know five years ago. Today, Angular appears in its Ionic derivative form and can be included in an Apache Cordova wrapped app. For all the features that Xamarin offers, its core product is based on Microsoft languages that many developers still seek and just as many developers avoid. React and React Native are the most popular of the client-side frameworks today, but this has been a historically finicky market that has been known to change, sometimes often and quickly.
Figure 1 is from stackshare.io, a site that you can use to compare technology stacks on a number of axes and was captured in May 2018. You can use stackshare.io to help you make the decision as to which mobile development framework is right for your solution.
Lastly, Microsoft, Google, and Apple have developer conferences each year, where they announce new products and present product roadmaps. In 2018, AI, XR, and IoT features for mobile apps were announced. The short story is that in mobile development, things do not stay constant for long, so always make sure that your information is current by doing searches throughout the development process.
To help you learn the design principles and development practices of full-stack mobile app development, the other tutorials in this series help you build a run-tracking app. Each of the tutorials in this series uses one of the native or hybrid frameworks to build this run-tracking app. Its full-stack features are visible by presenting state in the browser, by enabling its state to be sent to the cloud, and by viewing the various conditions of its state over time. For this app, the state is a measured run.
The run-tracking app that you create:
This article provided an overview of some of the most popular tools (in 2018) for developing full-stack mobile apps. I touched on some of the core concepts, considerations, dependencies, and ecosystems, while leaving the heavy lifting to upcoming articles and tutorials.
Mixing ecosystems and dependencies or tools and technologies in a way that you are most productive and fully enabled is a never-ending process. What is true today will invariably be out of date in the near future. Full-stack mobile developers embrace change, as it is the only constant that is always true.
Before diving into developing full-stack mobile apps with the core tools discussed in this article, the next article goes over the mobile design considerations that you can apply regardless of the choice you make.
Get the Code »
Apache CordovaDatabases+
Back to top