Typed HTML templates using TypeScript's TSX files.
UIBuilder is a HTML templating library in the style of Mustache and Handlebars, for Web application development using TypeScript. Because of compile-time checking and "Intellisense" UIBuilder is a better choice than Mustache or Handlebars.
UIBuilder templates are written using TypeScript's TSX syntax which mixes HTML with TypeScript. If you know HTML and TypeScript you already know TSX. You use regular HTML tags for composing UI elements, and regular TypeScript for loops and conditionals. Building custom elements (Components) is supported.
TypeScript compiler is needed to compile TSX files. Visual Studio is not needed. However, if you use Visual Studio you get benefits such as:
- Auto-indent
- Syntax coloring
- Type checking
- Intellisense suggestions for TypeScript expressions
- Refactoring: you can rename variables without worrying about breaking your templates
- Error checking squiggly lines as you type:
- Mismatched HTML tags
- TypeScript syntax errors
- Put breakpoints inside your template
UIBuilder brings the power and convenience of JSX to Web Components.
JSX is an extension to JavaScript that allows you to build dynamic user interfaces by embedding HTML-like syntax within JavaScript code. Other templating languages either embed HTML as strings within JavaScript code, or embed code as strings within HTML, which means tools are only able to provide compile-time checking for either code or markup, not both. In JSX both code and markup are first-class citizens, which enables tools to provide compile-time checking, syntax coloring and "Intellisense" for code as well as markup. More information about JSX can be found here.
TypeScript's implementation of JSX is TSX. UIBuilder leverages TSX and lets the TypeScript compiler do all of the heavy lifting.
Web Components are user interface widgets that are written once and can be reused reliably on multiple pages and Web sites. The reliability comes from the fact that the DOM tree inside a Web Component is encapsulated from the rest of the page, so you don't have to worry about things like conflicting id and style class names or JavaScript variables. The technology that enables this isolation is Shadow DOM. Read more about it here.
Web Components are a W3 standard. The W3 page for Web Components can be found here.
Shadow DOM is currently implemented by all browsers, including Chrome, Edge, Firefox and Safari.
Unlike React.js UIBuilder does not do incremental screen updates.
A valid approach to update the screen is to divide your page into multiple components. When data changes just replace the component that contains stale data. For example, you can update just a single component on your page like this:
const element = UIBuilder.createElement<CustomerPanelProps>(CustomerPanel, { customerInfo: freshCustomerInfo });
document.querySelector(".customer-panel").replaceWith(element);If you think this is not as convenient as a setState call in React you're correct but you're forgetting how much rigmarole React puts you through. For small applications React's setState works very well because you don't have to know what portions of the UI need to be updated. Larger React applications need to implement shouldComponentUpdate for performance optimization. At that point the convenience is gone, and all the incantations, rituals and ceremony of React got you nothing.
React does not have the equivalent of a Shadow DOM. React components are brittle. The brittleness comes from the global nature of HTML, CSS, and JS. The DOM tree inside a React component isn't encapsulated from the rest of the page. This lack of encapsulation means your document stylesheet might accidentally apply to parts inside the widget; your JavaScript might accidentally modify parts inside the widget; your IDs might overlap with IDs inside the component; and so on. (More on Shadow DOM here.)
Unlike React, UIBuilder is compatible with Web Components which does not have the above problems.
Web Components also support multiple named slots for placing child elements. React components have just one, unnamed slot.
Web Components are a W3 open standard. React is opensource but it is not based on standards.
UIBuilder creates real DOM nodes, not virtual nodes, which makes it easier to implement advanced features that require manipulating the DOM directly, such as drag & drop and animation. It is also easier to integrate with DOM-mutating libraries such as d3.js and take full advantage of its features, such as transitions.
UIBuilder does not use any React.js code.
Please see file named LICENSE