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 
    1. backend in java webservices in JSON
    2. frontend with ... (I do not know yet ;) )
    Made with Slides.com