Modern Software Architectures: Building Solutions for Web, Cloud, and Mobile
30
Modern Software Architecture BUILDING SOLUTIONS FOR WEB, CLOUD, AND MOBILE
-
Upload
dan-mohl -
Category
Technology
-
view
5.353 -
download
2
Transcript of Modern Software Architectures: Building Solutions for Web, Cloud, and Mobile
Modern Software ArchitectureBUILDING SOLUTIONS FOR WEB, CLOUD, AND MOBILE
Who is this guy?
AgendaWhy should we change?Trends in the IndustryArchitecting for the WebArchitecting for the CloudArchitecting for MobileWrapping it Up
Why should we change?
Trends in the Industry
Moving to the clientBack to the metalHorizontal ScalingSchema-less Data StoresUser Centric Solutions
Architecting for the WebNo more WebForms – Reduce leaky abstractionsSeparation of ConcernsDesign Patterns – Some new, some oldSingle Page Applications
Single Page Applications
Single Page Applications - Layers
Views (templates - template engines such as Knockout, Handlebars, and Mustache)
JavaScript Models
Collections, Controllers, or ViewModelsRouter (Sammy.js, Backbone.js, custom)
Controllers
Repositories Models
Single Page Applications – MV*/C
View
Model
Controller
Single Page Applications – MVVM
View
ViewModel
Model
Single Page Applications – MVVM
A Few JavaScript Patterns
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 || {};
Self-executing Anonymous Functions
(function( $ ) { var myVar, myFunc; myVar = 1; myFunc = function( val ) { return val + myVar; }; console.log( myFunc(2) ); })( jQuery );
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 );
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
Architecting for the Cloud
Competing Consumer
Image from this Windows Azure Tutorial
CQRS
Image from this MSDN Magazine Article
From http://sverrehundeide.blogspot.com/2010/02/persistence-with-command-and-query.html
Architecting for Mobile
Faster and smarter
Modern HTTP Services
Diagram from ofps.oreilly.com
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
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
Wrapping it UpUser FocusedMovement to JavaScript and the client (Single Page Apps)Reduce leaky abstractionsUse Modern HTTP ServicesBuild both Responsive Web sites and native mobile appsAdd NoSQL to the mixReduce payload sizeFunctional First (F#, Scala)
