Web architecture
&
Javascript dev
THERE IS NOTHING LIKE WEB ARCHITECTURE
- Applications are too different to have "one size fits all"
- Public web apps (twitter, flickr, facebook, ...)
- Enterprise web apps (salesforce, erp, cms, ...)
- Backends As a Service
- ...
- Architecture is the result of an ermergent process
IT USUALLY STARTS SIMPLE
http://www.woodger.ca/images/harchgen.gif
And can rapidly become complicated
http://home.att.ne.jp/sigma/satoh/diary/images/facebook-architecture.png
Public web apps
- few business rules, few concepts
- massive data volume (petabytes)
- few tables in database (when there is one !)
- but distributed on lots of servers (data sharding)
- 100 000+ queries / second
- 99% read / 1% write
- lots of caching
- denormalized data
- lots of operations during write to optimize reads
Enterprise web apps
- lots of business rules, lots of concepts
- small data volume (gigabytes)
- hundreds tables, thousands queries
- but usually fits on one server / enterprise
- 1000 requests / second
- 70% read / 30% write
- caching only constant data
- nearly normalized data
COMMON POINTS
- Separating backend and frontend
- backend = STATELESS business logic
- frontend = GUI (usually in HTML5 / javascript)
- Decoupling as much as possible
- ex : twitter : user api / tweet input / tweet distribution / ...
- ex : spotify : music streaming / playlists / friends / ...
- ex : SAP : purchasing / accounting / ...
- Layered as much as possible each "services"
- controller -> business logic -> data access & caching
- inter services communication via event bus or queue
COMMON POINTS
- High engineering complexity
- Facebook has modified UDP in linux kernel !
- Twitter is able to deliver a tweet to 35M in 5 minutes !
- SAP is running most of the big companies, each with custom workflows in 50K tables and with a custom business intelligence !
- Salesforce is dealing with LDAP, XLS, Fulltext search, caldav, business intelligence and god knows what else ...
FRONTEND IN HTML5
- ADVANTAGES OF HTML5
- Compatible with lots of platforms
- Lots of developers available
- Lots of frameworks available
- XHR (AJAX) built-in
- More Javascript than HTML
- HTML is used as a template
- JS is used to drive the view logic
JAVASCRIPT DEVELOPMENT
- Javascript in 2013 is not the same as Javascript in 2000
- Object oriented
- Browser agnostic
- Server-side Javascript !
- Best known is jQuery
- $("#myul .user").remove() -> delete all the elements with class=="user"
- $.get("users.json").success(function(users) {
users.foreach(function(u) {
$("<li class="user">{name}</li>").tpl(u).appendTo("#myul")
}
}); -> call the server and refresh a list in the page
JAVASCRIPT DEVELOPMENT
- But jQuery is old and now we can do simpler (angular.js) : auto-refresh of HTML after successfull XHR
<ul ng-controller="TodoCtrl">
<li ng-repeat="todo in todos">{{todo.label}}</li>
</ul>
function TodoCtrl($scope, $http) {
$http.get("todos.json").then(function(todos){
$scope.todos = todos;
});
}
Javascript development
- And the future will look like :
function TodoCtrl($scope, $http) {
assign($scope, 'todos').with($http.get("todos.json"));
}
- Or directly into the GUI :
<ul ng-controller="AjaxCtrl('todos.json', 'todos')">
<li ng-repeat="todo in todos">{{todo.label}}</li>
</ul>
JAVASCRIPT DEVELOPMENT
-
And even type safe :
class Todo(label: String) {};
object Todos with Http {
def list : Promise<List<Todo>> = http.get("todos.json")
}
<ul>
repeatFor Todos.list() as todo
<li> todo.label </li>
<ul>
IF YOU ARE INTERESTED BY MORE
I can propose 2 coding dojos around
-
backend in java webservices in JSON
- frontend with ... (I do not know yet ;) )
web architecture & javascript dev
By Christophe Blin
