Comparison with Polymer Framework
Polymer is a Google-sponsored project. With Polymer, you can build custom elements. Smart Custom Elements can be compared to Polymer’s custom elements and both provide a very similar development style.Similar things:
- Elements are instantiated using a constructor or document.createElement.
- Elements are instantiated when the tag is written in the DOM. Configured using attributes or properties.
- Populated with internal DOM inside each instance.
- Responsive to property and attribute changes.
- Styled with internal defaults or externally Responsive to methods that manipulate its internal state.
- Templates and property bindings in templates.
- Properties can have type.
- Event Listeners through listeners collection.
- Lifecycle callback functions.
Different things:
- Property types can be nullable and more strict - validation for Integer. Support for Int64. Properties can define allowedValues array. If a property is set to a value which is not in that array, an exception is thrown. Property invalid value and invalid type validation. Complex Nested Properties. Smart supports property nesting.
Example:
'paging': { value: { 'enabled': { value: false, type: 'boolean' }, 'pageSize': { value: 10, type: 'int', validator: 'pageSizeValidator' }, 'pageIndex': { value: 0, type: 'int', validator: 'pageIndexValidator' } }, type: 'object' }- For setting pageSize, this could be used: grid.paging.pageSize = 15;
- Initialization of an element from a JSON object with automatic Dependency Changes handling. When an element is created from a JSON object, the json it two-way bound to the element and any change in the element updates the JSON.
- HTMLTemplates support. When in the Custom Element's template, we have HTMLTemplateElement, that template is re-evaluated on property change and can be used for dynamic user updates.
- Method Arguments and Return Type. Smart validates Methods for Invalid return type, Arguments Count, Arguments Types.
- Agnostic Events - Smart exposes custom events for 'down', 'up', 'move' and 'swipe'. These events are Device agnostic and are raised for
- Touch and Desktop devices when the Cursor/Pointer is down, up, moved or swiped left, right, up or down.
- Multiple Element Versions on the same web page is supported.
- Localization - Built-in localization support.
- Error Logs - Error logs with different error levels.
- completed lifecycle callback which is called when the local DOM is ready and all elements are rendered.
- resize notifications when the element's size is changed.
- Style changed notifications - when the element's CSS is changed.
- Using Shadow DOM is optional and is user preference. When disabled, the element's local DOM is part of the document's DOM.
- View-Model Binding. An Element or Multiple Elements can be bound to the same Model object.