JSB({
    $name: 'Foo',
    
    myField: 123,

    myMethod: function(){
        return this.myField;
    }
};

JSB.lookup('Foo', function(FooClass){
	var foo = new FooClass();
	foo.myMethod();
    foo.myField = ', World!';
	foo.hello('Hello');
});

{
    $name: 'MyBean',
    
    myField: 123,
    
    myMethod: function(){
        return this.myField;
    }    
}

{
    /** пакет и имя бина */
    $name: 'my.examples.Foo',
    
    /** бин может наследовать свойства и методы родительского */
    $parent: 'my.examples.FooParent',
     
    /** бин может импортировать другие бины (например, для создания экземпляров), 
    ссылки на классы импортированных бинов будут интегрированы в методы как локальные переменные через встроенное замыкание*/
    $require: {MyWorld: 'my.examples.MyWorld'},

    /** методы из общей секции могут использоваться (копируются) в $client и $server*/
    formatMessageText: function(data){
        var text = '';
        for (let p in data) if (data.hasOwnProperty(p)) {
            text += p + ' = ' + data[p] + '\n';
        }
        return text;
    },

    /** секция клиентского кода (исполняется в браузере, в контексте Web страницы)*/
    $client: {
        $constructor: function(){
            this.scheduleTimestampMessage();
        },

		scheduleTimestampMessage: function(){
			window.setInterval(function(){
                /** асинхронный вызов метода из "противоположной секции" осуществляется
                через адаптер, получаемый путем вызова метода remote() у бина.
                */
                $this.remote().getTimestamp(function(result, error){                    					/** результат вызова удаленного метода будет возвращен в коллбэк */
                    
                    /** для удобства в scope всех методов автоматически добавляется
                    	локальная переменная $this равная this при вызове метода бина
                    	(избавляет от  `var self = this`) */
                    if (!error) {
                        var data = {timestamp: result};
                        alert($this.formatMessageText(data));
                    }
                });                
            }, 1000);
		}
    },

    /** секция серверного кода (исполняется на сервере)*/
    $server: {
        /** В серверной секции поддерживается импорт классов и методов Java*/
        $require: {System: 'java:java.lang.System'},
            
        /** Серверный конструктор вызывается при порождении серверной части экземпляра бина */
        $constructor: function(){
            /** создание экземпляра импортированного бина, см `$require` */
            this.myWorld = new MyWorld();                        
        },
        
        /** методы, объявленные в серверной секции могут вызываться с клиента и наоборот */
        getTimestamp: function (){
            return 0 + this.getSystemTimestamp(); // '0 + ' - Java Int -> JS integer
        },
        
        getSystemTimestamp: function() {
            /** Вызываем метод класса Java из пакета java.lang.System для получения
             	текущего времени */
            return System.currentTimeMillis();
        }
    }    
}

{
	$name: 'my.examples.MyWebControl',

	/** Унаследуем наш компонент от бина Control из библиотеки JSB.Widgets */
	$parent: 'JSB.Widgets.Control', 

	/** Наш компонент будет использовать ComboBox из библиотеки JSB.Widgets */	
	$require: ['JSB.Widgets.ComboBox'],

	/** Клиентская секция (код будет выполняться в браузере) */
	$client: {
		$constructor: function(opts){
			$base(opts); // Вызываем родительский конструктор
			
			/** Загружаем стили (путь задается относительно места расположения 
			файла с текущим бином) */
			$jsb.loadCss('myWebControl.css');

			/** Создадим экземпляр бина ComboBox из библиотеки JSB.Widgets */
			var cb = new ComboBox({
				cssClass: 'myCombo',
				dropDown: true,
				items: [{
					key: 'first',
					element: 'Первый'
				},{
					key: 'second',
					element: 'Второй'
				},{ 
					key: 'third',
					element: '<div class="cool">Третий</div>'
				}],

				/* инициализируем комбо значением, переданным через параметр 
				конструктора */
				value: opts.initialValue,
				
				onChange: function(key, obj){
					$this.updateMyData();
				}
			});
			
			/** Добавим ComboBox в DOM элемент нашего компонента */
			this.append(cb); 

			/** Создадим DOM элемент для помещения туда данных с сервера */
			this.append($('<div class="myContainer"></div>'));
			
			/** Загрузим/обновим данные с сервера и выведем их */
			this.updateMyData();
		},

		updateMyData: function(){
			/** Получим текущее значение из комбо-бокса */
			var cbVal = this.find('.myCombo').jsb().getData();
			
			/** Вызываем серверную функцию для получения данных с сервера.
			Первым аргументом передаем значение из комбо, а вторым - колбэк 
			функцию, которая будет вызвана сразу как только серверный метод 
			вернет данные */
			this.server().loadMyData(cbVal, function(res){
				$this.drawData(res); // отрисуем данные
			});
            /** Для удаленного вызова серверного кода можно также использовать
            	функцию remote(), которая осуществляет удаленный вызов на 
            	противоположной стороне. Но если мы знаем, что вызывающий метод
                находится на стороне клиента и удаленно вызывает серверную
                функцию, то можно явно сразу использовать метод server().
                Аналогична и обратная ситуация - находясь в теле серверного метода
                можно удаленно вызвать клиентский метод, путем использования
                функции client()*/
		},
		
		drawData: function(data){
			/** Предварительно очистим контейнерный элемент */
			$('.myContainer').empty(); // вызов jQuery

			/** Добавим данные в контейнерный элемент при помощи встроенного
			шаблонизатора doT */
			$('.myContainer').append(`#dot
				<ul class="myTags">
				{{ for(var i in data) { }}
					<li class="myTag">{{=data[i]}}</li>
				{{ } }}
				</ul>
			`);
		}
	},

	/** Серверная секция (код будет выполняться на стороне сервера) */
	$server: {
		myDictionary: {
			first: ['Анна', 'Мария'],
			second: ['Вера', 'Лариса'],
			third: ['Вероника','Петр']
		},
		
		loadMyData: function(key){
			return this.myDictionary[key];
		}
	}
}

{
	$name: 'my.examples.MySyncBean',
	$sync: true,

	/** Общее поле, подлежащее синхронизации */
	myCommonField: 'starting...',

	$client: {
		$constructor: function(){
			console.log(this.myCommonField);
		},
		
		/** Метод $onSyncAfter будет вызван сразу как только одно или несколько
		синхронизируемых полей будут обновлены */
		$onSyncAfter: function(syncInfo){
			console.log(this.myCommonField);
		}
	},

	$server: {
		$constructor: function(){
			/** Будем обновлять поле на стороне сервера каждую минуту */
			JSB.interval(function(){
				$this.myCommonField = new Date().toString();
			}, 60000);
		}
	}
}

$sync: {
	updateClient: true,
	updateServer: false,
	updateCheckInterval: 1000,
	include: [],
	exclude: []
}

{
	$name: 'my.examples.MySyncBean2',
	$sync: {
		updateCheckInterval: 0 // отключим автоматическую синхронизацию
	},

	/** Общее поле, подлежащее синхронизации */
	myCommonField: 'starting...',

	$client: {
		$constructor: function(){
			console.log(this.myCommonField);
		},
		
		/** Метод onAfterSync будет вызван сразу как только одно или несколько
		синхронизируемых полей будут обновлены */
		onAfterSync: function(syncInfo){
			console.log(this.myCommonField);
		}
	},

	$server: {
		$constructor: function(){
			/** Будем обновлять поле на стороне сервера каждую минуту */
			JSB.interval(function(){
				$this.myCommonField = new Date().toString();

				/** Вызовем процедуру синхронизации программно*/
				$this.doSync();
			}, 60000);
		}
	}
}

{
	$name: 'my.examples.SyncBeforeAfterTest'

	myField1: 'test',
	myField2: {},

	$client: {
		// ...
		/** onBeforeSync вызывается после получения синхропакета, 
		но перед обновлением полей. 
		Здесь мы можем принять решение - стоит	ли применять синхропакет или нет */
		onBeforeSync: function(syncInfo){
			if(syncInfo.isChanged('myField1')) {
				return false; // не будем принимать изменения
			}
			return true; // примем изменения
		}
		// ...
	}
}

{
	$name: 'my.examples.SyncBeforeAfterTest2'

	myField1: 'test',
	myField2: {},

	$client: {
		// ...
		/** onAfterSync вызывается после синхронизации.
		Здесь мы можем выполнить какие-либо действия узнав, что поле обновилось*/
		onAfterSync: function(syncInfo){
			if(syncInfo.isChanged('myField1')) {
				console.log('Ура, теперь myField1 = ' + $this.myField1);
			}
		}
		// ...
	}
}