Launch your Ionic development in 2019 with Lattice

November 22, 2018

If you’ve built a production Ionic app from scratch you’ll know all too well the significant amount of software engineering time that goes into integrating all the libraries, SDK’s, plugins, services, build processes etc to produce a functioning app. And then never ending ongoing work keeping the dependencies up to date. When new versions of

For the last few years we’ve offered a complete Ionic & App Engine starter project focused on social apps. Over time we’ve updated the codebase from Ionic v1 betas to the latest v3 along with the backend from the hosted Parse to the Parse framework running on the Google App Engine.

Shortly we’ll be launching our new Ionic 4 and Firebase/GCP based starter app called Lattice to help accelerate your app development.

The big focus for the initial release is providing a solid foundation for good development practices. This mean having multi-environment support throughout the code-base to support DevOps and GitOps practices, and integrating with GitLab and Google Cloud Platform to utilize the build and monitoring services they provide.

They say great minds think alike and over the last month the Ionic team launched their updated AppFlow service with a focus on DevOps, and Enterprise Engine to take the hassle out of dependencies and integrations. While there is some overlap we will be providing support for integrating with the AppFlow services which offers unique features such as the Live app deploys

DevOps is a hot topic in the software industry at the moment, and for good reason. Teams incorporating these practices are more productive, providing more value to the business and end users.

Companies with high performing teams are twice as likely to exceed: 1. profitability, productivity, market share 2. effectiveness and efficiency 3. customer satisfaction ratings 4. achievement of mission goals

So what is it exactly? Here’s the description of DevOps from the Microsoft website:

“DevOps is the union of people, process, and products to enable continuous delivery of value to our end users. The contraction of “Dev” and “Ops” refers to replacing siloed Development and Operations to create multidisciplinary teams that now work together with shared and efficient practices and tools. Essential DevOps practices include agile planning, continuous integration, continuous delivery, and monitoring of applications.

When you adopt DevOps practices, you shorten your cycle time by working in smaller batches, using more automation, hardening your release pipeline, improving your telemetry, and deploying more frequently.”

DevOps is a force enabler, putting the automation and process in place that allow your whole team, including less experienced developers, to be more effective. The processes in place increase the rate of features into production and also decreases the impact of issues that occur in production.

Continuous integration

A cornerstone of any good software development process, even before DevOps was a thing, is having a continuous integration (CI) build.

Lattice comes with integration with the GitLab CI service, so every commit builds and tests the code, including running end-to-end integration tests on a dedicated CI environment and even building the Android .apk file.

Multi-environment support

Multiple, disposable, and re-creatable environments that are accessible around the globe are a must have for application lifecycle management.
- https://cloud.google.com/solutions/devops/

A proper DevOps friendly build/deploy pipeline requires multiple environments, development, CI, QA, production etc. But all your usual Ionic, Firebase and App Engine starter projects only support a single environment/project configuration. Lattice comes with the scripts, code and configuration to support multiple environments with the native app/web/PWA builds, Firebase (push, functions, storage, real-time database and Firestore etc) and Google App Engine project, all configured from a single master configuration file.

For example in the app project you can run npm run serve-dev to build and develop the app (the equivalent to running ionic serve) for your development environment, or npm run serve-prod to have it pointing to your production backend, using URL’s, API tokens and ids etc for that environment.

Similarly for the Firebase and App Engine projects there are npm scripts for performing the build, test and deploy operations for each environment.

GitOps & Native Builds

The continuous integration support takes things one step further with the ability to manage releases and app store build submissions from named Git branches.

Merge a commit to the branch named android and it’ll be submitted to the Play store (as a beta release by default).

While the GitLab CI runner can’t perform a native iOS build, we have provided a script which is a single command to build and publish an iOS build to the app store.

For the backend code once a new commit to Git has passed its unit and integration tests, merge it to the branch named production. This will to have the server-side components (App Engine, Cloud functions and Firestore configuration) deployed to production, including a build of the web/PWA app.

Need to rollback the server release in a hurry? Simply apply a reverse commit in Git on the production branch and push it.


Error Reporting

Lattice even comes out of the box with some of the features you’ll find Ionic AppFlow (formerly Ionic Pro), but with no limits or restrictions on usage.

First is the app error reporting service, similar to the Ionic Pro app monitoring service. This submits any errors that are logged in the app to the Google Cloud Stackdriver service, which handles logging and error reporting. This means you only have a single service you need to check for your server and app error logs, reducing your operational overhead.

The Stackdriver service provides some extremely useful features, such as emailing you the first time a new error occurs. This is handy when you’ve pushed a new build to production where an issue has slipped through testing. Instead of having to wait for when you next check the logs, or if you’re lucky for a customer to let you know, you can be notified as soon as a new error is occurring.

Here’s an example of an email notification from when we were testing moving from the App Engine flex environment to the standard environment.

stackdriver email notification
Clicking through gives you this detailed report on that particular re-occurring error.

stackdriver email notification
A second is to providing a way to link an issue in your issue tracker to the production issue in Stackdriver, closing the loop in the development cycle from production back to your source code.
stackdriver email notification

stackdriver email notification
This is what DevOps is all about, having the right tooling and monitoring/analytics integrated so you can quickly iterate and evolve, knowing you have the tools and process in place to quickly fix any issues when the do arise.

So what could be holding you back from getting some DevOps talent onto your project? The Ionic blog post about DevOps said:

“To add fuel to the fire, all these new “unintentional software companies” are finding themselves competing for the same prized resource: Developers. A recent study conducted by Stripe reports that access to developers is a bigger threat to success than access to capital.

More than that, DevOps engineers are becoming increasingly sought after and are still quite expensive, resulting in them being few and far between.”

Experienced freelance senior developers that can develop high quality architecture and infrastructure code can cost $100/hour and up, which quickly gets expensive. But the Lattice source code gives you the code and documentation to get started properly at a tiny fraction of what it would cost to develop from scratch.

The code for the multi-project support and continuous integration builds has been developed and refined over the last few years in our Cloneder starter project which uses Ionic 3 and the Parse framework running on Google App Engine. This code has been the basis for apps such as “Just A Baby” which has been featured on Fox News, by Whoopi Goldberg on The View and many more.

We’re taking all this experience and channelling it into a new premium production-grade Ionic 4 and GCP/Firebase starter project with lots of core functionality used across many types of apps. If you’ve built and maintained an Ionic app you’ll know how much work it is. First to integrate all the plugins, libraries, frameworks and SDK’s, and then dealing with various issues as you try to upgrade to the latest versions. And then time to develop all those little nice-to-have’s which save you even more time in the long run.

How many hours would you save having a working, continuously tested app with DevOps practices built-in to start from?

Engage the Ion drive and launch your next app with Lattice in 2019!