My presentation from CloudBrew in Belgium

1. Building a scalable web application by combining
modern front-end stuff and Azure services
Chris Klug
@ZeroKoll
http://chris.59north.com
chris@59north.com

2. Who am I?

3. I

4. ”We need some help to build a more
scalable solution than what we got”
- client

5. x 500.000

6. The application

7. Teachers Students Admin Gov AuthN
& Data

8. Challenge 1:
Authentication

9. Teachers
Students
Admin
Gov AuthN
?
Gov 2
Gov 3
Gov 4

10. Teachers
Students
Admin
STS Gov AuthN
WS-Federation
Custom Protocol

11. Challenge 2:
Data storage

12. SQL
admin.xyz.com teacher.xyz.com student.xyz.com

13. Ehhh…no…

14. Master Shard 1 Shard 2 Shard n
admin teacher student

15. Sub challenge 1:
Cross-shard queries

16. Azure Search Shards
teacher

17. SQL vs Storage

18. Master Shard Blob Storage
Search
admin teacher student

19. Master Shard Shard Master
Search
admin teacher student

20. = +
Service Bus Worker Roles

21. 1. Make Change
teacher
5. Transform Data
to JSON

22. Challenge 3:
The curveball

23. ”You know how we said we wanted to
host the solution in Azure…well…”
- client

25. ”Our own private cloud is being built as
we speak, and it uses Azure Pack, so
we’re all good!”
- client

26. Look ma, two ducks!!!

27. +
Master Shard Shard Master
Client’s Datacenter
Azure
admin teacher student

28. Azure Pack
Worker Roles ≠ Microsoft Azure
Worker Roles

29. +
Master Shard Shard Master
Client’s Datacenter
Azure
admin teacher student

30. Challenge 4:
Application structure

31. HTML, CSS, JS (AngularJS)
MVC Web Api
Domain
NHibernate
SQL

32. HTML, CSS, JS (AngularJS)
MVC Web Api Blob Storage
Unicorns

33. Sub challenge 1:
Bootstrapping the SPA

34. // In header of SPA HTML page
var app = {};
app.configuration = {
myServiceProviderConfig: {
value:’key’
}
};
// In module registration JavaScript file
angular.module(’myModule’,[’myOtherModule’])
.provider(’myService’, function() {
// implementation
})
.config([’myServiceProvider’,function(myServiceProvider) {
myServiceProvider.configure(app.configuration.myServiceProviderConfig);
}]);

35. Sub challenge 2:
Handling SAS for storage

36. angular.module(’appModule’,[])
.service(’http’, [’$http’, function($http) {
// ”override” implementation to add and refresh SAS to requests
return {
get: function(path) {
var sas = getSas(); // cached or refreshed from server
var url = _baseUrl + path + ’?’ + sas;
return $http.get(url);
}
// more functions
};
}]);

37. angular.module(’clientModule’,[])
.service(’courseRepo’, [’http’, function(http)
{
return {
getCourseById: function(id) {
return http.get(’/course/’ + id);
}
// more functions
};
}]);

38. Challenge 5:
Front-end build pipeline

39. LESS CSS Bundle Minify
JS Test Bundle Minify

40. ”That can be done using a custom
build task in our TFS build pipeline!”
- me

42. Sub challenge 1:
Development vs Production

43. Development
• Individual
JavaScript
files
• LESS +
less.js
UAT (Test)
• Bundled &
minified
JavaScripts
• Bundled &
minified
CSS
Production
• Bundled &
minified
JavaScripts
from CDN
• Bundled &
minified
CSS from
CDN

44. public static void RegisterBundles(BundleCollection bundles)
{
var scripts = new ScriptBundle("~/scripts", ResolveCdnPath("/scripts.min.js"));
scripts.IncludeDirectory("/scripts", "*.js");
bundles.Add(scripts);
var styles = new Bundle(”~/styles” , ResolveCdnPath("/styles.min.css"));
styles.IncludeDirectory("/styles"), "*.less");
bundles.Add(styles);
}
protected string ResolveCdnPath(string path)
{
if (!settings.UseCdn) return path;
return string.Format(”{0}{1}?v={2}", settings.CdnBaseUrl, path, settings.CdnFileVersion);
}

45. Bonus Challenge:
“The Overlay”

46. Youtube.com
MySite.se
Homework.nu

47. Sub challenge 1:
Http vs Https

48. Sub challenge 2:
Cookies over Http

49. Sub challenge 3:
Hosting

50. Did we overdo it?
”It's not how far you go, it's how go you far ”

51. Thank you for listening!
Chris Klug
@ZeroKoll
http://chris.59north.com
chris@59north.com