Category Archives: Front End

Modern Client UI Development with Java backend

Yeoman + Bower + Grunt is a very powerful stack of developing web UI. It has all the features, like Minify, Uglify and Unit Test. However, it is a pure HTML and JS platform, in most enterprise applications,  it will stick to a Java Backend, may be in a form of Restful Service.

During development, we may need to proxy to with grunt-connect-proxy. I would post a working gruntfile.js section here for reference. The livereload options and livereload proxies are modified.

We don’t need to import the NPM task in grunt, as the pre-configured grunt file will import all the tasks from package.json

 

connect: {
  options: {
    port: 9000,
    open: true,
    livereload: 35729,
    // Change this to '0.0.0.0' to access the server from outside
    hostname: 'localhost'
  },
  livereload: {
    options: {
      middleware: function(connect) {
        /*return [
          connect.static('.tmp'),
          connect().use('/bower_components', connect.static('./bower_components')),
          connect.static(config.app)
        ];*/
        var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];
        middlewares.push(connect.static('.tmp'));
        middlewares.push(connect().use('/bower_components', connect.static('./bower_components')));
        middlewares.push(connect.static(config.app));
        return middlewares;
      }
    },
    proxies: [{
      context: '/api',
      host: 'localhost',
      port: 8080,
      https: false,
      xforward: false,
      ws: true,
      rewrite: {
        '^/api': '/oms-core/api'
      }
    }]
  },
  test: {
    options: {
      open: false,
      port: 9001,
      middleware: function(connect) {
        return [
          connect.static('.tmp'),
          connect.static('test'),
          connect().use('/bower_components', connect.static('./bower_components')),
          connect.static(config.app)
        ];
      }
    }
  },
  dist: {
    options: {
      base: '<%= config.dist %>',
      livereload: false
    }
  }
},

Browser Specific HTML

In the HTML5 world, Browsers, no matter IE, Firefox or Chrome share the same HTML parsing mechanism, the world is so wonderful.

However, if you still need to support the cursed IE8, IE9 or even older Internet Explorer, you may need to import or load different CSS, JS or even HTML code, you will need the following code to handle it


<!-- [if lt IE 7 ]> I am IE6 <![endif]-->
<!-- [if IE 7 ]> I am IE 7 <![endif]-->
<!-- [if IE 8 ]> I am IE 8 <![endif]-->
<!-- [if IE 9 ]> I am IE 9 <![endif]-->
<!-- [if (gt IE 9)|!(IE)]><!--> I am IE10 / IE 11 or Chrome / Firefox <!--<![endif]-->

Please be aware that there are <!–> after the first tag and <!– before the 2nd tag for the Chrome and Firefox selector. It won’t work if you miss that