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