Isomorphic JavaScript Mobile Apps

The method of delivering content to a browser has continued to evolve over the years. In the early days, every page was a full payload. If you clicked a link, you got a new page. If you hit the back button, you were delivered a new full page.

With the advent of AJAX (Asynchronous JavaScript and XML), web pages started to become more interactive without full page loads. Form submissions are the perfect example: a user fills out a form, hits the submit button, a spinner shows that something is happening, and finally the page displays a success/fail message. Previously, a user would click Submit on the form, that would perform an HTTP POST of the form data to the server, which would return a new page showing success or fail. This new AJAX method felt slicker and more “app-like”. This was only the beginning…

Read more

Part 4: Ionic & LoopBack Frameworks – Testing with Travis

In the first three articles in this series, you built a simple mobile app and server using the Ionic Framework and StrongLoop LoopBack. In this article, you’ll learn about one key advantage of building mobile apps with Ionic: access to the JavaScript testing ecosystem. Testing native apps is hard. TravisCI has beta support for Android builds, and setting up iOS testing on Travis is a nightmarish tangle of accounts and certificates. Since your Ionic app is just JavaScript, however, you can test your AngularJS code in a browser. In this article, you’ll use karma and PhantomJS to test the directives in your mobile app.

Read more

Part 3: Ionic & LoopBack Frameworks – Building the Ionic App

In the first two articles in this series, you built a REST API using StrongLoop LoopBack and several AngularJS directives that use your API via the LoopBack AngularJS SDK. With these two components, you’ve done most of the work of building a hybrid mobile app using the Ionic framework. The Ionic framework is based on AngularJS, and, thanks to AngularJS’ flexibility, you’ll be able to use the timer  and timeList directives in your mobile app without any changes.

Your Ionic mobile app will live in a separate GitHub repo. Keeping your Ionic mobile app in the same repo as your API server is possible, but cumbersome. Using a separate repo, though, makes it necessary for you to package your directives in a way that makes them easy to install using bower. The first step in this article will be to compile your directive HTML into JavaScript, so you can include your directives and their corresponding HTML with a couple script tags.

Read more

Part 1: Ionic & LoopBack Frameworks – Building a REST API

I have a confession: I hate native mobile development. Most of the reason why I started working with NodeJS was my struggles with managing mobile app development for a small startup in 2012. Back then, native mobile development struggled with painfully slow feedback – to see the results of your work in action, you need to start a server, re-compile, wait for the app to load, and click around in a simulator.

Code sharing was also a lost cause. In my experience, it’s hard to get code right once. When your server is in Ruby, your iOS app is in Objective-C, your Android app is in Java, and your web client is in JavaScript, you end up maintaining 4 separate implementations of the same code in 4 different languages. Even worse, each implementation is bound to have its own bugs, quirks, and performance issues.

Now, with StrongLoop LoopBack and the Ionic framework, you can quickly build out a server and a corresponding mobile app using only JavaScript. LoopBack enables you to quickly build up a REST API from your command line. Ionic enables you to build “hybrid” mobile apps, that is, mobile apps that work by launching a browser and executing JavaScript.

In this series of articles, you’ll see how you can build a server using LoopBack. Then you’ll use LoopBack’s AngularJS SDK to create AngularJS components which you will use to create an Ionic framework hybrid mobile app. There will be 4 articles in this series:

  1. Building a LoopBack REST API
  2. Building AngularJS Directives with the LoopBack AngularJS SDK
  3. Using AngularJS Directives in Ionic Framework Mobile Apps
  4. Testing Your Mobile App in Travis

You’ll be building a simple stopwatch application. Users of the app will be able to log in with Facebook, track times, and save their times to the server. Let’s get started!

Getting Started with LoopBack

StrongLoop LoopBack is a tool for rapidly generating NodeJS REST API’s. LoopBack also has a powerful AngularJS SDK that enables you to generate AngularJS clients for your REST API’s. Since the Ionic framework is based on AngularJS, the LoopBack AngularJS SDK makes building a mobile app even easier. You’ll learn more about the AngularJS SDK in the next article. In this article, you’ll use LoopBack to create a REST API with Facebook login. You can find the complete stopwatch server on GitHub

The first step is to install the strongloop npm module using npm install strongloop -g. The strongloop module gives you the slc executable. Run slc loopback to start a new application – you should see the below output in your terminal. Call your application stopwatch-server-example.

LoopBack will create a directory called stopwatch-server-example. The stopwatch-server-example directory’s code will look like this once LoopBack is done.

Read more

Introducing the Xamarin SDK for LoopBack

When we started the open source LoopBack project two years ago, we knew that its use would be fueled by the needs of mobile solutions. We were a very small team and only able to develop for iOS, Android, and AngularJS. Although we were keenly interested in the meteoric rise of Xamarin as a cross-platform solution, we just didn’t have the resources to do anything about it.

But then we got lucky. Really, really lucky.

Introducing PerfectedTech

I’d like to introduce PerfectedTech, StrongLoop’s premier mobile consultancy partner.

PerfectedTech is a boutique software development agency with an R&D office in Jerusalem. They are a highly successful firm due to their technical excellence, great sense of style, and solid delivery of mobile and web app solutions. Unlike many development agencies, PerfectedTech has chosen to focus only on a few powerful technologies: Xamarin on the front end and Node.js / LoopBack on the backend. From their in-house built tools, including the Xamarin SDK, they have managed to cut traditional development time by 33% to 50% for all full stack projects, dramatically challenging industry norms. Their vision is the same as StrongLoop: to create solutions that make development effortless, yet powerful.

They are well-versed in many technology solutions. As a result, they quickly saw the potential of combining Xamarin and LoopBack, and invested their own time and resources to develop the Xamarin SDK for LoopBack. Applying real-life use cases, understanding constraints, and applying best practices, they engineered a battle-proven SDK that they leverage in all their mobile projects. We’re grateful that they have agreed to contribute it back to the LoopBack and Node communities as an open source module under the MIT-license like the rest of our SDKs. Moving forward, they’ll continue to add value to the SDK and guide community contributions. The SDK will help bring two wonderful technologies, Xamarin and Loopback, closer together.

LoopBack Xamarin SDK

The Xamarin SDK is similar to the AngularJS SDK: You start with a LoopBack backend application with models and APIs. Then you run the SDK CLI tool against the LoopBack project to generate a dynamically-built library in either C# or DLL form with strong type objects. Auto-generated strong type objects are enough to make any developer smile. You can then include them in your Xamarin project and/or solution to get seamless access to your models and remote logic as native Xamarin objects. As you evolve your backend, you can dynamically and continuously run the SDK to update the library as needed while significantly reducing the time required for integration.

For more information, see the LoopBack Xamarin SDK documentation. Check out this code snippet from dynamically-generated XamarinSDKGenerator.dll for the Todo Example app generated from LoopBack models using the lb-xm tool.

Read more