Coding in Web Client

Coding with Javascript

---

be aware of toFixed function

be aware of this

• need provide changing scope function

Test

    function test() {
      console.debug(this)
    }
    
    function test_class_A() {
      this.test = test;
    }
    
    function test_class_B() {
      this.test = test;
    }
    
    var cls1 = new test_class_A(),
      cls2 = new test_class_B();
    cls1.test() // output: test_class_A
    cls2.test() // output: test_class_B

prefer doing calculations on Server

• js regards number as float
• js store float according to IEEE 754-2008
  • 0.1 + 0.2 = 0.30000000000000004
• use lib like BigDecimal.js

extend javascript native functions

• try Underscore.js

authentication and authorization

• do validate both on Server - java and Client - javascript

cache solution

• what should be cached
  • supporting data
  • profile
  • ...
• do cache on Server (use memory) not on Browser
• when / how to update cache

compress and cache statics resources

• including image | css | javascript
• use browser cache
  • check version before loading application resources
  • load css | javascript by javascript
  • support multiple browsers

load by module / lazy loading

• requirejs / seajs

define namespace

• short action.common action.module is much better than com.action.web.common

build common utilities

• everyone can add utility but need to be reviewed before pushing code

build page by Components

• everyone can add components but review also needed

build common ui components with business first

• everyone can add common ui components but review also needed
• common ui components is one of the components
  • office select combo
  • ...

construct page by Components not by Templates and Logic

• reuse components by configurations
• layout page by HTML and fill each div with components

how to load User Context

decouple between pages and modules

• just like what CAB does
• use event to create and add views
• use global event bus

design navigation first

define global constants

do all AJAX request by common utility

maintain API documents

do unit tests

• testharness.js

<script src="./resources/testharness.js"></script> <br />
<script src="./resources/testharnessreport.js"></script>

    test(function() {
      var request = window.indexedDB.open("TestDB")
      var resp = window.indexedDB.deleteDatabase('TestDB')
      assert_not_null(resp)
    }, 'test delete db')
    
    test(function() {
      var req = window.indexedDB.open("TestDB")
      assert_not_null(req)
      req.onerror = function(event) {
        assert_unreached('open error', event.target.errorCode)
      }
      req.onsuccess = function(event) {
        assert_not_null(req.result)
      }
    }, 'open db with callbacks')

---

  /* set divX background to white when the buttonX is clicked */
  var divX = $('#divX')        // var divX = Ext.getCmp('divX')
  var buttonX = $('#buttonX')  // var buttonX = Ext.getCmp('buttonX')
  
  buttonX.click(function(){    // buttonX.on('click',function(){
    updateBackground();      //   updateBackground();
  })                           // })
  
  function updateBackground() {
    divX.setBackground('#fff')
  }

changed to

    /* set divX background to white when the buttonX is clicked */
    var divX = $('#divX')        // var divX = Ext.getCmp('divX')
    var buttonX = $('#buttonX')  // var buttonX = Ext.getCmp('buttonX')
    
    buttonX.click(function(){     // buttonX.on('click',function(){
      updateBackground(divX);   //  updateBackground(divX);
    })                            // })
    
    function updateBackground(divX) {
      divX.setBackground('#fff')
    }

test could be

    test(function() {
      var div = $('<div></div>')
      updateBackground(div)
      assertEqual(div.getStyle().getBackground(), '#fff')
    }, 'test set background')

more references

• Superhero.js
• devdocs.io