OmniChannel Application StrategiesHow AngularJS and SPA Change The Game___________________Nick Van WeerdenburgFounder/CEO rangle.iohttp://rangle.io

Internet Development Has A Problem

There are too many versions to buildWeb

Mobile Web

Apps (iOS, Android, Windows Phone, Windows 8, Blackberry, TVs)

???

It's too expensive

And it takes too long

How many programming languages to deliver one project?» PHP, Ruby, Python, Java

» JavaScript (Node.js)

» Objective-C

» Java

» ?

TCO of Code?

4X...

...The cost of development

Your $100K development cost=

$400K lifetime support costnot including opportunity losses due to waterfall

4 code bases in 4 languages with 4 teams requires waterfall development

You need one codebase to be lean

Trends in 2013

Mobile Domination1.Mobile First Ecosystem Dominates

2.AngularJS hits maturity

3.HTML5 > 90% coverage of users

4.MVC + HTML5 = real architecture for web apps

REAL ARCHITECTURE

LOW COUPLING

HIGH COHESION

SPA Layered Architecture

Styling- CSS

Structure- HTML

Behaviour- JavaScript

Data- REST API

Dependencies are limited to adjacent layers, with Structure and Styling being largely independent of Data.

HOW TO BUILD AN OMNICHANNEL APPLICATIONIt’s Easy! Use AngularJS.

The beautiful, open source framework for developing hybrid mobile apps with HTML5.ionicframework.com

Client-Side Architecture is the Critical PieceIt's about AngularJS NOT the MEAN stack

AngularJS Enables OmniChannel

The Business Case Demands OmniChannel

Other Business Options?

Serve one market?

Not an Option

1) competition

2) customer acquisition channels

If B2B, web, or mobile customer acquisition needs

You are doing...web +mobile web +mobile apps

Mobile is Eating the World

http://ben-evans.com

The Business Case for AngularJS and Omnichannel

TIME AND MARKET-FIT?» Developing 4 apps requires a waterfall development

approach (complete specs built to spec)

» Market feedback needs to go into 4 codebases

» Many companies get stuck when they can’t find developers

» If you miss the mark, your cost is x2 (8X more expensive)

» You are late to market with a poor fit since you had to use waterfall.

» 4 development teams = varying quality

Time to Market >> Cost to Market

Market Fit >> Cost to Market

STRATEGY BEFORE TACTICS» Before debating native vs. HTML 5 mobile, figure

out your strategy!

» Do you need agile? Frequent delivery for rapid feedback?

» Do you NEED multiple apps?

» How important is mobile web vs. app UX?

Your MVP May Demand HTML5

Determining Your Platform Strategy

WHAT TO CONSIDER?» mobile only?

» web site as important as mobile?

» mobile web important (no install barrier, easy hyperlinking, occasional use)?

customer channel- app store or other?

Customer Acquisition

ACQUISITION CHANNELS» App Store + App PR Channels (reviews, bloggers,

etc)

» Social Media

» Email

» Web Applications

» Desktop Applications## Multitouch marketing- how many touches to convert to an app user?

Think ContentHow is your content found?

» App Store

» Media Coverage

» Search

» Links from Social Media

» Email

OK. BUT WHAT EXACTLY IS OMNICHANNEL?

ONE CODEBASE TO RULE THEM ALL!

A single application for all channels:

>> Web

>> Mobile Web

>> iOS App, Android App, Windows Phone, Windows 8, TV, etc.

HTML 5 Applications!» HTML 5 + JavaScript

» MVC JavaScript Frameworks: AnglarJS, Backbone, …

» Modern CSS Frameworks: Bootstrap, Foundation, Topcoat.io, Ionic

» Thin-servers behind a REST API

» Packaging for app stores with PhoneGap/Cordova or similar

WHY OMNICHANNEL?>> Get the RIGHT app to market in 1/2 the time, at 1/4 the cost.

>> Respond to metrics and market condition in hours instead of months.

WHY NOT OMNICHANNEL?

Not as good as native?

Not for long!

They used to say “Not as good as desktop”

OmniChannel and HTML5 are disruptive technologies that get better ever month

BEST PRACTICES

Skinny Controllersangular.module('plannerApp.controllers') .controller('ChartCtrl',

['$scope', 'activities', '$log', 'user','filters','$q',

function ($scope, activities, $log, user, filters, $q) { ... }]);

Controller Checkist1.No $http/$resource in controllers - use services

2.No DOM manipulation - use directives

3.Few business rules - use services

4.Single Responsibility, short

5.One controller per file

6.Tests!!! (testable = modular = reusable )

WRAPUP

Responsive Web + PhoneGap Tips» Plan your directory structure early

» Build for PhoneGap early

» Leverage Gulp/Grunt and other build tools

» Automate tests and deployment

» Use a MVC framework to separate logic from presentation

» Find a good mobile lab to leverage

» QA early and often!

OMNICHANNEL SUMMARY» 1/2 the time, 1/4 the development cost (not even

considering TCO)

» agile vs. waterfall processes

» more available developers

» front-end developers essential

» compounding benefits when responding to feedback- i.e. the benefits of Agile development and continuous deployment

Nick Van WeerdenburgCEO/Founder of rangle.io

@n1cholasvEmail: nick@rangle.io

http://rangle.io

Twitter: @rangleioBlog: http://rangle.io/blog

Subscribe to our newsletter on our site!