1. Modern Software
Architecture
BUILDING SOLUTIONS FOR WEB, CLOUD, AND MOBILE

2. Who is this guy?
Daniel Mohl
danmohl@gmail.com
www.twitter.com/dmohl
blog.danielmohl.com

3. Who is this guy?

4. Agenda
Why should we change?
Trends in the Industry
Architecting for the Web
Architecting for the Cloud
Architecting for Mobile
Wrapping it Up

5. Why should we change?

6. Trends in the Industry
Moving to the client
Back to the metal
Horizontal Scaling
Schema-less Data Stores
User Centric Solutions

7. Architecting for the Web
No more WebForms – Reduce leaky abstractions
Separation of Concerns
Design Patterns – Some new, some old
Single Page Applications

8. Single Page Applications

9. Single Page Applications - Layers

10. Single Page Applications – MV*/C
Model
View Controller

11. Single Page Applications – MVVM
View
ViewModel
Model

12. Single Page Applications – MVVM

13. A Few JavaScript Patterns

14. Nested Namespace Pattern
Addy Osmani's Book - Learning JavaScript Design Patterns
var myApp = myApp || {};
myApp.routers = myApp.routers || {};
myApp.model = myApp.model || {};
myApp.model.special = myApp.model.special || {};

15. Self-executing Anonymous Functions
(function( $ ) {
var myVar, myFunc;
myVar = 1;
myFunc = function( val ) {
return val + myVar;
};
console.log( myFunc(2) );
})( jQuery );

16. Revealing Module Pattern
(function( pub, $ ) {
var myPrivateFunc = function(val) {
return val * 100;
};
pub.myFunc = function( val1 ) {
return val1 + myPrivateFunc (val1);
};
})( window.myApp.myMod = window.myApp.myMod || {}, jQuery );
window.myApp.myMod.myFunc( 2 );

17. Other Patterns We Know and Love
 Messaging Patterns like Pub/Sub using AmplifyJS and PostalJS
 Observer pattern – $.trigger and $.on
 Façade - Seen a lot in jQuery – like $.get(…)
 Strategy and Command (inherit due to functional nature of JS)
 Iterator pattern - $.each
 Map/Reduce - _.map and _.reduce
 Memoize - _.memoize

18. Architecting for the Cloud

19. Competing Consumer
Image from this Windows Azure Tutorial

20. CQRS
Image from this MSDN Magazine Article

21. From http://sverrehundeide.blogspot.com/2010/02/persistence-with-command-and-query.html

22. MapReduce Pattern
http://Image from this Wikipedia page

23. Architecting for Mobile

24. Faster and smarter

25. Modern HTTP Services
Diagram from ofps.oreilly.com

26. NoSQL
Diagram from bllllog.zenika.com

27. Web vs. Native
Web:
- jQuery Mobile, Sencha Touch, etc.
- HTML5 and CSS3 (offline storage, input tags, improved animations, Media Queries)
- Write once, deploy many
- Responsive Design helpers like Twitter Bootstrap and Foundation 3

28. Web vs. Native
Native:
- Faster and richer experience
- Better offline support (but still have to manage data access)
- Device hardware access (camera, GPS, accelerometer, flash, etc.)
- Seems to be preferred by consumers (look at Facebook for an example)
- Easier access
PhoneGap and others help provide a bridge

29. Wrapping it Up
User Focused
Movement to JavaScript and the client (Single Page Apps)
Reduce leaky abstractions
Use Modern HTTP Services
Build both Responsive Web sites and native mobile apps
Add NoSQL to the mix
Reduce payload size
Functional First (F#, Scala)

30. My Contact Information
Daniel Mohl
danmohl@gmail.com
www.twitter.com/dmohl
blog.danielmohl.com