I recently read a Google+ comment comparing AngularJS Metawidget to the excellent Backbone Forms library. The two approaches look surprisingly similar, so I thought it might be beneficial to start a dialogue between our respective teams.
So, here's the Backbone Forms Usage Example mapped (roughly) into AngularJS Metawidget:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script src="http://metawidget.org/js/3.4/metawidget-core.min.js"></script>
<script src="http://metawidget.org/js/3.4/metawidget-angular.min.js"></script>
<script>
angular.module( 'myApp', [ 'metawidget' ] );
function UserController( $scope ) {
$scope.user = {
title: "Mr",
name: "John Doe",
email: "",
birthday: new Date( 1, 1, 1970 ),
password: "",
address: {
street: "123 Sample Street",
city: "Sampleville",
postcode: "1234"
},
notes: ""
};
}
</script>
</head>
<body ng-app="myApp" ng-controller="UserController">
<metawidget ng-model="user"/>
</body>
</html>
Backbone Forms further supports schemas to refine your UI. Metawidget does something similar using the JSON Schema specification:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script src="http://metawidget.org/js/3.4/metawidget-core.min.js"></script>
<script src="http://metawidget.org/js/3.4/metawidget-angular.min.js"></script>
<script>
angular.module( 'myApp', [ 'metawidget' ] );
function UserController( $scope ) {
$scope.user = {};
$scope.config = {
inspector: new metawidget.inspector.JsonSchemaInspector( {
properties: {
title: { type: 'string', enum: ['Mr', 'Mrs', 'Ms'] },
name: { type: 'string' },
email: { type: 'string', required: true },
birthday: { type: 'date' },
password: { type: 'string', masked: true },
address: {
properties: {
street: { type: 'string' },
city: { type: 'string' },
postcode: { type: 'string' }
}
},
notes: { type: 'string', large: true }
}
} )
}
}
</script>
</head>
<body ng-app="myApp" ng-controller="UserController">
<metawidget ng-model="user" config="config"/>
</body>
</html>
I think our two approaches have a lot of common. But it'd be interesting to explore our differences and see if we can converge further. For example, I'd be interested in whether Backbone Forms has (either implicit or explicit) equivalents to the five stages of Metawidget's pipeline. Or whether Metawidget's API can be simplified for JavaScript users.
2 comments:
why is form validation out of the box not supporter?
Thanks for your interest in Metawidget!
Metawidget certainly does provide support for form validation (primarily through the mechanism we call 'widget processors'). However Metawidget also tries very hard not to introduce its own technologies. It only strives to automate what you already have.
So out-of-the-box we have HTML 5 validators, which are pretty basic (required, minimum, maxlength etc). Presumably you want something more sophisticated? You will need a third-party form validation library for this. Let me know which one you wanted to use, and we can see about automating it via a WidgetProcessor.
Post a Comment