Omnichannel Applications with AngularJS

2,183 views

Published on

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.

Published in: Internet, Education

Omnichannel Applications with AngularJS

  1. 1. OmniChannel Application Strategies HowAngularJSand SPA ChangeThe Game ___________________ Nick Van Weerdenburg Founder/CEO rangle.io http://rangle.io
  2. 2. Internet DevelopmentHasA Problem
  3. 3. There are too many versions to build Web MobileWeb Apps (iOS,Android,Windows Phone,Windows 8, Blackberry, TVs) ???
  4. 4. It'stoo expensive
  5. 5. And ittakestoo long
  6. 6. How manyprogramming languagesto deliver one project? » PHP, Ruby, Python, Java » JavaScript (Node.js) » Objective-C » Java » ?
  7. 7. TCO of Code?
  8. 8. 4X...
  9. 9. ...The costof development
  10. 10. Your $100K developmentcost= $400Klifetimesupportcostnotincluding opportunitylosses duetowaterfall
  11. 11. 4 code bases in 4 languageswith 4 teams requires waterfall development
  12. 12. You need one codebase to be lean
  13. 13. Trends in 2013
  14. 14. 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
  15. 15. REALARCHITECTURE
  16. 16. LOWCOUPLING
  17. 17. HIGH COHESION
  18. 18. 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.
  19. 19. HOW TO BUILD AN OMNICHANNEL APPLICATION It’s Easy! UseAngularJS.
  20. 20. Thebeautiful,open sourceframeworkfor developinghybrid mobileappswithHTML5. ionicframework.com
  21. 21. Client-Side Architecture is the Critical Piece It's aboutAngularJS NOT the MEAN stack
  22. 22. AngularJS Enables OmniChannel
  23. 23. The Business Case Demands OmniChannel
  24. 24. Other Business Options?
  25. 25. Serve one market?
  26. 26. Notan Option
  27. 27. 1) competition
  28. 28. 2) customer acquisition channels
  29. 29. If B2B, web, or mobile customer acquisition needs Youaredoing... web + mobileweb + mobileapps
  30. 30. Mobile is Eating the World http://ben-evans.com
  31. 31. The Business Case forAngularJSand Omnichannel
  32. 32. 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.
  33. 33. Timeto Market>> Costto Market
  34. 34. MarketFit >> Costto Market
  35. 35. 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
  36. 36. DeterminingYour Platform Strategy
  37. 37. 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?
  38. 38. Customer Acquisition
  39. 39. 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?
  40. 40. Think Content Howisyour contentfound? » App Store » Media Coverage » Search » Links from Social Media » Email
  41. 41. OK. BUTWHATEXACTLYIS OMNICHANNEL?
  42. 42. ONE CODEBASE TO RULE THEM ALL! Asingleapplication forall channels: >>Web >> MobileWeb >> iOSApp,AndroidApp,Windows Phone,Windows 8,TV, etc.
  43. 43. 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
  44. 44. WHY OMNICHANNEL? >> Getthe RIGHTappto marketin 1/2the time,at1/4the cost. >> Respondto metricsand market condition in hours instead ofmonths.
  45. 45. WHY NOT OMNICHANNEL? Notas goodas native? Not for long!
  46. 46. They used to say “Not as good as desktop” OmniChanneland HTML5are disruptive technologiesthatget better ever month
  47. 47. BEST PRACTICES
  48. 48. SkinnyControllers angular.module('plannerApp.controllers') .controller('ChartCtrl', ['$scope', 'activities', '$log', 'user','filters','$q', function ($scope, activities, $log, user, filters, $q) { ... }]);
  49. 49. 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 )
  50. 50. WRAPUP
  51. 51. 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!
  52. 52. 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
  53. 53. 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!

×