From web sitesto web appsto mobile apps

An interesting journey

The past: Web sites

Today: Web apps

Today: Web apps

● Single page applications● Communication via API● "Backend as a service"● Client side MV*-Frameworks● Templates rendered on the client● Data on the wire

Going mobile

With web technologies

Pick one

First fundamental question:

HTML / CSS / JSvs.

Pure JavaScript

Pick one

First fundamental decision:

HTML / CSS / JSvs.

Pure JavaScript

A tough choice● Javascript MV* Libraries / Frameworks

○ Backbone○ Ember○ Knockout○ Angular

● UI Frameworks○ Lungo○ Kendo○ jQTouch○ jQuery mobile

● Deployment frameworks○ PhoneGap○ Sencha○ Calatrava○ The M-Project

A tough choice● Javascript MV* Libraries / Frameworks

○ Backbone○ Ember○ Knockout○ Angular

● UI Frameworks○ Lungo○ Kendo○ jQTouch○ jQuery mobile

● Deployment frameworks○ PhoneGap○ Sencha○ Calatrava○ The M-Project

Problems with picking the right mix

● overlap between the three:○ multiple frameworks trying to be clever○ e.g. Calatrava: Deployment & UI○ e.g. Kendo: MVVM & UI

● finding good combinations:○ Knockout & Lungo○ Knockout & Kendo○ Angular & iUI○ Angular & Lungo

Our stack

Rails-APIAngular JS

LungoPhoneGap

Our stack

Rails-APIAngular JS

Lungo-Angular-BridgeLungo

PhoneGap

What's the bridge?

Lungo Angular

Routing

Two choices:

● I want the Lungo routing○ The Angular-Lungo-Adapter is for you

● I want the Angular routing○ There is nothing for that

Two choices:

● I want the Lungo routing○ The Angular-Lungo-Adapter is for you

● I want the Angular routing○ There was nothing for that

Centralway proudly presents...

Lungo-Angular-BridgeBatteries included!

https://github.com/centralway/lungo-angular-bridge

● Allows to use Lungo fancyness together with Angular awesomeness

● Use Angular routes but leverage Lungo transitions

● Comes with a set of examples● Extends Angular with the lab-view directive

LAB - Lungo Angular Bridge

Batteries included - get going!

Demo time!Fasten your seatbelts

Experiences & Learnings from us

Things you may hear

● "But it's soo slooooow"

● "What if you need something native?"

● "How does deployment work?"

● "But it won't look&feel native!"

Things you may say

● "But it's soo slooooow"

● "What if you need something native?"

● "How does deployment work?"

● "But it won't look&feel native!"

○ Only in a few cases, e.g. SVG on iPhone 4

○ You can do that >> Phonegap Plugins

○ Either manually or via App Stores

○ This depends solely on the UI Framework used - e.g. Lungo makes it feel native

In the trenches

The pitfalls of mobile development

<iframe src="http://example.com"></iframe>

<a href="http://somesite.com" target="_blank">Open</a>

What will happen?● Android

○ iframe loads in the page○ link opens a browser window

● iOS○ "stay-in-webview=false" (default)

■ iframe opens a new browser window■ link opens a new browser window

○ "stay-in-webview=true"■ iframe opens in the page■ link opens in the page

Round 1: iframes vs. iOS

Round 1: iframes vs. iOS

● 4 possible solutionsa. using "access" rule in Config.xmlb. using "InApp-Browser" (window.open)c. specify target="_self" for iframed. using ChildBrowser plugin

Round 1: iframe vs. iOS

● 4 possible solutionsa. using "access" rule in Config.xmlb. using "InApp-Browser" (window.open)c. specify target="_self" for iframed. using ChildBrowser plugin

Round 2: "HTML5 routing"$locationProvider.html5Mode(true);

Round 2: "HTML5 routing"$locationProvider.html5Mode(false);

● HTML 5 routing not supported properly○ weird behaviour○ non-routing relating things go wrong○ no error messages / warnings

● Setting to "false" uses "#/..."-style routing instead of "real" routing ("/...")

General conclusions

● PhoneGap plugins <3○ when it doesn't exist in PhoneGap○ when it is too slow in HTML / CSS / JS

● Active communities & many resources● Web is a powerful platform

Wrap-up

● Mobile is on the rise● Web technologies rock!● Find the right mix of Frameworks for your

needs is hard● Be aware of potential pitfalls● Leverage the active communities to work

around problems