Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca OVERVIEW Nick will discuss how AngularJS can be used to build omnichannel applications that leverage one codebase for all applications platforms – web, mobile, and packaged iOS and Android apps. The result? Faster time to market, better product/market fit, a better user experience, and drastically lower costs. INTENDED AUDIENCE Developers, designers and managers who need to deliver lean agile solutions across web, mobile web, and packaged mobile apps. Nick Van Weerdenburg Nick is the founder of rangle.io and leads rangle.io’s business development, consulting, and enterprise architecture activities. He’s a firm believer in the thin-server, full-JavaScript stack, and actively evanglizes this across the Toronto tech community.

1. OmniChannel
Application
Strategies
HowAngularJSand SPA
ChangeThe Game
___________________
Nick Van Weerdenburg
Founder/CEO rangle.io
http://rangle.io

3. Internet
DevelopmentHasA
Problem

4. There are
too many
versions
to build
Web
MobileWeb
Apps (iOS,Android,Windows
Phone,Windows 8, Blackberry,
TVs)
???

5. It'stoo expensive

6. And ittakestoo long

7. How manyprogramming
languagesto deliver one project?
» PHP, Ruby, Python, Java
» JavaScript (Node.js)
» Objective-C
» Java
» ?

8. TCO of Code?

9. 4X...

10. ...The costof development

11. Your $100K developmentcost=
$400Klifetimesupportcostnotincluding opportunitylosses duetowaterfall

12. 4 code bases in 4
languageswith 4
teams requires
waterfall
development

13. You need one codebase to be lean

14. Trends in 2013

15. Mobile Domination
1.Mobile First Ecosystem Dominates
2.AngularJS hits maturity
3.HTML5 > 90% coverage of users
4.MVC + HTML5 = real architecture for web apps

16. REALARCHITECTURE

17. LOWCOUPLING

18. HIGH COHESION

21. SPA Layered
Architecture
Styling- CSS
Structure- HTML
Behaviour-JavaScript
Data- RESTAPI
Dependencies are limited to
adjacent layers, with
Structure and Styling being
largely independent of Data.

22. HOW TO BUILD AN
OMNICHANNEL
APPLICATION
It’s Easy! UseAngularJS.

23. Thebeautiful,open
sourceframeworkfor
developinghybrid
mobileappswithHTML5.
ionicframework.com

29. Client-Side
Architecture
is the Critical
Piece
It's aboutAngularJS NOT
the MEAN stack

35. AngularJS Enables OmniChannel

36. The Business Case Demands OmniChannel

37. Other Business Options?

38. Serve one market?

39. Notan Option

40. 1) competition

41. 2) customer
acquisition
channels

42. If B2B, web, or mobile customer acquisition needs
Youaredoing...
web +
mobileweb +
mobileapps

43. Mobile is Eating the World
http://ben-evans.com

49. The Business Case forAngularJSand Omnichannel

50. TIMEAND 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.

51. Timeto Market>> Costto Market

52. MarketFit >> Costto Market

53. STRATEGYBEFORETACTICS
» 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 MayDemand HTML5

54. DeterminingYour
Platform Strategy

55. WHATTO CONSIDER?
» mobile only?
» web site as important as mobile?
» mobile web important (no install barrier, easy
hyperlinking, occasional use)?
customer channel- appstore or other?

56. Customer
Acquisition

57. 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?

58. Think Content
Howisyour contentfound?
» App Store
» Media Coverage
» Search
» Links from Social Media
» Email

59. OK. BUTWHATEXACTLYIS OMNICHANNEL?

60. ONE CODEBASE TO RULE THEM ALL!
Asingleapplication forall channels:
>>Web
>> MobileWeb
>> iOSApp,AndroidApp,Windows
Phone,Windows 8,TV, etc.

61. HTML5Applications!
» 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

62. WHY
OMNICHANNEL?
>> Getthe RIGHTappto marketin 1/2the
time,at1/4the cost.
>> Respondto metricsand market
condition in hours instead ofmonths.

63. WHY NOT OMNICHANNEL?
Notas goodas native?
Not for long!

64. They used to say “Not as good as desktop”
OmniChanneland
HTML5are disruptive
technologiesthatget
better ever month

65. BEST PRACTICES

66. SkinnyControllers
angular.module('plannerApp.controllers')
.controller('ChartCtrl',
['$scope', 'activities', '$log',
'user','filters','$q',
function ($scope, activities,
$log, user, filters, $q) {
...
}]);

67. Controller Checkist
1.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 )

68. WRAPUP

69. ResponsiveWeb + PhoneGapTips
» 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!

70. OMNICHANNELSUMMARY
» 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

71. NickVanWeerdenburg
CEO/Founder ofrangle.io
@n1cholasv
Email: nick@rangle.io
http://rangle.io
Twitter: @rangleio
Blog: http://rangle.io/blog
Subscribeto our newsletter on our site!