OmniChannel Application Strategies How AngularJS and SPA Change The Game ___________________ Nick Van Weerdenburg Founder/CEO rangle.io http://rangle.io
May 06, 2015
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
» 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
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: [email protected]
http://rangle.io
Twitter: @rangleioBlog: http://rangle.io/blog
Subscribe to our newsletter on our site!