Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Architectural Considerations
For Complex Mobile And Web
Applications
Vivek Jain
Application Developer
Twitter: @vivekjain1...
•Implementation Strategy
•Keeping Client-side Light
2
Implementation
Strategy
3
Experience
4
Experience
4
Reach
5
Reach
5
Reach
5
Reach
5
Product or Channel
6
Product or Channel
6
Product or Channel
6
Product or Channel
6
Ultimate Goal
7
UserExperience
Line of deployment
Awesome apps
Ultimate Goal
7
UserExperience
Line of deployment
Awesome apps
The Laser Strategy
8
UserExperience
Line of deployment
Awesome apps
The Laser Strategy
8
UserExperience
Line of deployment
Awesome apps
The Laser Strategy
8
UserExperience
Line of deployment
Awesome apps
The Laser Strategy
8
UserExperience
Line of deployment
Awesome apps
The Cover-your-bases Strategy
9
UserExperience
Line of deployment
Awesome apps
The Cover-your-bases Strategy
9
UserExperience
Line of deployment
Awesome apps
The Cover-your-bases Strategy
10
UserExperience
Line of deployment
Awesome apps
11
Native Vs Web
11
Native Web
Native Vs Web
11
Affordability
Native Web
Native Vs Web
11
Affordability
User Experience
Native Web
Native Vs Web
11
Affordability
User Experience
Native Web
PhoneGap
Xamarin
Calatrava
Hybrid
Titanium
Native Vs Web
Keeping
Client-side Light
12
13
Client-side Logic
13
"name": {

"first": "Amitabh",

"last": "Bachchan"

}
Client-side Logic
13
"name": {

"first": "Amitabh",

"last": "Bachchan"

}
fullName = "#{name.first} #{name.last}"
Client-side Logic
14
Change in Requirement
14
"name": {

"first": "Amitabh",

"middle": "Harivansh",

"last": "Bachchan"

}
Change in Requirement
14
"name": {

"first": "Amitabh",

"middle": "Harivansh",

"last": "Bachchan"

}
fullName = "#{name.first} #{name.middle} ...
15
Light Client
15
"name": {

"first": "Amitabh",

"middle": "Harivansh",

"last": “Bachchan",

"full": “Amitabh Harivansh Bachchan"

}
Li...
15
"name": {

"first": "Amitabh",

"middle": "Harivansh",

"last": “Bachchan",

"full": “Amitabh Harivansh Bachchan"

}
fu...
Benefits
16
Benefits
• Less duplication of code
16
Benefits
• Less duplication of code
• Easier to fix defects
16
Benefits
• Less duplication of code
• Easier to fix defects
• Some changes without app release
16
API Best Practices
17
Consistent Interface
18
Consistent Interface
• Consistent Format
18
Consistent Interface
• Consistent Format
• Back-end Systems/Database Agnostic
18
Consistent Interface
• Consistent Format
• Back-end Systems/Database Agnostic
• Standard Architecture (REST)
18
Aggregate
19
"id": 1234,

"type": "savings"
"id": 1234,

"balance": 100.23
Aggregate
19
"id": 1234,

"type": "savings"
"id": 1234,

"balance": 100.23
"id": 1234,

"type": "savings",

"balance": 100...
Optimize
20
"id": 1234,

"type": "savings”,
“branch_id": 75,
“customer_id”: 20757
Optimize
20
"id": 1234,

"type": "savings”,
“branch_id": 75,
“customer_id”: 20757
"id": 1234,

"type": "savings”,
“custome...
Expand, then Contract
21
Expand, then Contract
21
"name": {

"first": "Amitabh",

"last": "Bachchan"

}
Expand, then Contract
21
"name": {

"first": "Amitabh",

"last": "Bachchan"

}
"name": {

"first": "Amitabh",

"last": "Ba...
Expand, then Contract
21
"name": {

"first": "Amitabh",

"last": "Bachchan"

}
"name": {

"first": "Amitabh",

"last": "Ba...
Who owns APIs?
22
Poly-skilled teams
23
Poly-skilled teams
• Client + Server side skills
23
Poly-skilled teams
• Client + Server side skills
• Empowered to make changes in any layer
23
Poly-skilled teams
• Client + Server side skills
• Empowered to make changes in any layer
• Ideal for small organizations
...
Work with API team
24
Work with API team
• Request changes
24
Work with API team
• Request changes
• Communication channel with back-end teams
24
Work with API team
• Request changes
• Communication channel with back-end teams
• Ideal for mid-size organizations
24
Mobile Facade
25
Mobile Facade
• Middle-layer seen by apps
25
Mobile Facade
• Middle-layer seen by apps
• Minimal logic to support apps (avoid business
logic)
25
Mobile Facade
• Middle-layer seen by apps
• Minimal logic to support apps (avoid business
logic)
• Aggregate and Optimize ...
Mobile Facade
• Middle-layer seen by apps
• Minimal logic to support apps (avoid business
logic)
• Aggregate and Optimize ...
References
• http://martinfowler.com/articles/mobileImplStrategy.html
• http://blog.vivekjain.in/
26
Thank You!
@vivekjain10
vivek.jain@thoughtworks.com
27
Upcoming SlideShare
Loading in …5
×

Architectural Considerations For Complex Mobile And Web Applications

1,105 views

Published on



As devices used by our customers are becoming powerful, we are driven to write applications which provide a rich experience. Thus, mobile and web applications today are much more complex compared to what we might have imagined in the Web 1.0 days. Some of this complexity is legitimate, but we end up adding logic on the client-side which can easily be shifted to the servers.

This talk will focus on the architectural considerations to keep as much of the complexity as possible on the server-side. This talk will focus on design considerations while building APIs to service applications running on multiple platforms.

The presenter will share his experience of building APIs servings multiple platforms (iPhone, Android and Web). Certain non-technical aspects will also be highlighted. Target audience are developers and architects who influence development of complex mobile and web applications.

Session at the IndicThreads.com Confence held in Pune, India on 27-28 Feb 2015

http://www.indicthreads.com
http://pune15.indicthreads.com

Published in: Software
  • Be the first to comment

Architectural Considerations For Complex Mobile And Web Applications

  1. 1. Architectural Considerations For Complex Mobile And Web Applications Vivek Jain Application Developer Twitter: @vivekjain10 Feb 2015, Pune
  2. 2. •Implementation Strategy •Keeping Client-side Light 2
  3. 3. Implementation Strategy 3
  4. 4. Experience 4
  5. 5. Experience 4
  6. 6. Reach 5
  7. 7. Reach 5
  8. 8. Reach 5
  9. 9. Reach 5
  10. 10. Product or Channel 6
  11. 11. Product or Channel 6
  12. 12. Product or Channel 6
  13. 13. Product or Channel 6
  14. 14. Ultimate Goal 7 UserExperience Line of deployment Awesome apps
  15. 15. Ultimate Goal 7 UserExperience Line of deployment Awesome apps
  16. 16. The Laser Strategy 8 UserExperience Line of deployment Awesome apps
  17. 17. The Laser Strategy 8 UserExperience Line of deployment Awesome apps
  18. 18. The Laser Strategy 8 UserExperience Line of deployment Awesome apps
  19. 19. The Laser Strategy 8 UserExperience Line of deployment Awesome apps
  20. 20. The Cover-your-bases Strategy 9 UserExperience Line of deployment Awesome apps
  21. 21. The Cover-your-bases Strategy 9 UserExperience Line of deployment Awesome apps
  22. 22. The Cover-your-bases Strategy 10 UserExperience Line of deployment Awesome apps
  23. 23. 11 Native Vs Web
  24. 24. 11 Native Web Native Vs Web
  25. 25. 11 Affordability Native Web Native Vs Web
  26. 26. 11 Affordability User Experience Native Web Native Vs Web
  27. 27. 11 Affordability User Experience Native Web PhoneGap Xamarin Calatrava Hybrid Titanium Native Vs Web
  28. 28. Keeping Client-side Light 12
  29. 29. 13 Client-side Logic
  30. 30. 13 "name": {
 "first": "Amitabh",
 "last": "Bachchan"
 } Client-side Logic
  31. 31. 13 "name": {
 "first": "Amitabh",
 "last": "Bachchan"
 } fullName = "#{name.first} #{name.last}" Client-side Logic
  32. 32. 14 Change in Requirement
  33. 33. 14 "name": {
 "first": "Amitabh",
 "middle": "Harivansh",
 "last": "Bachchan"
 } Change in Requirement
  34. 34. 14 "name": {
 "first": "Amitabh",
 "middle": "Harivansh",
 "last": "Bachchan"
 } fullName = "#{name.first} #{name.middle} #{name.last}" Change in Requirement
  35. 35. 15 Light Client
  36. 36. 15 "name": {
 "first": "Amitabh",
 "middle": "Harivansh",
 "last": “Bachchan",
 "full": “Amitabh Harivansh Bachchan"
 } Light Client
  37. 37. 15 "name": {
 "first": "Amitabh",
 "middle": "Harivansh",
 "last": “Bachchan",
 "full": “Amitabh Harivansh Bachchan"
 } fullName = name.full Light Client
  38. 38. Benefits 16
  39. 39. Benefits • Less duplication of code 16
  40. 40. Benefits • Less duplication of code • Easier to fix defects 16
  41. 41. Benefits • Less duplication of code • Easier to fix defects • Some changes without app release 16
  42. 42. API Best Practices 17
  43. 43. Consistent Interface 18
  44. 44. Consistent Interface • Consistent Format 18
  45. 45. Consistent Interface • Consistent Format • Back-end Systems/Database Agnostic 18
  46. 46. Consistent Interface • Consistent Format • Back-end Systems/Database Agnostic • Standard Architecture (REST) 18
  47. 47. Aggregate 19 "id": 1234,
 "type": "savings" "id": 1234,
 "balance": 100.23
  48. 48. Aggregate 19 "id": 1234,
 "type": "savings" "id": 1234,
 "balance": 100.23 "id": 1234,
 "type": "savings",
 "balance": 100.23
  49. 49. Optimize 20 "id": 1234,
 "type": "savings”, “branch_id": 75, “customer_id”: 20757
  50. 50. Optimize 20 "id": 1234,
 "type": "savings”, “branch_id": 75, “customer_id”: 20757 "id": 1234,
 "type": "savings”, “customer_id”: 20757
  51. 51. Expand, then Contract 21
  52. 52. Expand, then Contract 21 "name": {
 "first": "Amitabh",
 "last": "Bachchan"
 }
  53. 53. Expand, then Contract 21 "name": {
 "first": "Amitabh",
 "last": "Bachchan"
 } "name": {
 "first": "Amitabh",
 "last": "Bachchan",
 "full": “Amitabh Bachchan"
 }
  54. 54. Expand, then Contract 21 "name": {
 "first": "Amitabh",
 "last": "Bachchan"
 } "name": {
 "first": "Amitabh",
 "last": "Bachchan",
 "full": “Amitabh Bachchan"
 } "name": {
 "full": “Amitabh Bachchan"
 }
  55. 55. Who owns APIs? 22
  56. 56. Poly-skilled teams 23
  57. 57. Poly-skilled teams • Client + Server side skills 23
  58. 58. Poly-skilled teams • Client + Server side skills • Empowered to make changes in any layer 23
  59. 59. Poly-skilled teams • Client + Server side skills • Empowered to make changes in any layer • Ideal for small organizations 23
  60. 60. Work with API team 24
  61. 61. Work with API team • Request changes 24
  62. 62. Work with API team • Request changes • Communication channel with back-end teams 24
  63. 63. Work with API team • Request changes • Communication channel with back-end teams • Ideal for mid-size organizations 24
  64. 64. Mobile Facade 25
  65. 65. Mobile Facade • Middle-layer seen by apps 25
  66. 66. Mobile Facade • Middle-layer seen by apps • Minimal logic to support apps (avoid business logic) 25
  67. 67. Mobile Facade • Middle-layer seen by apps • Minimal logic to support apps (avoid business logic) • Aggregate and Optimize Response 25
  68. 68. Mobile Facade • Middle-layer seen by apps • Minimal logic to support apps (avoid business logic) • Aggregate and Optimize Response • Ideal for large organizations 25
  69. 69. References • http://martinfowler.com/articles/mobileImplStrategy.html • http://blog.vivekjain.in/ 26
  70. 70. Thank You! @vivekjain10 vivek.jain@thoughtworks.com 27

×