Omnichannel Applications with AngularJS
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Omnichannel Applications with AngularJS

  • 1,016 views
Uploaded on

Presented on June 07 2014 at FITC Spotlight:AngularJS ...

Presented on June 07 2014 at FITC Spotlight:AngularJS
more info at www.FITC.ca

Omnichannel Applications with AngularJS
with Nick Van Weerdenburg

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.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,016
On Slideshare
1,011
From Embeds
5
Number of Embeds
1

Actions

Shares
Downloads
571
Comments
0
Likes
8

Embeds 5

http://www.slideee.com 5

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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