Trillo — A Cookie Cutter Platform for Web UIs
Trillo is a cookie cutter platform for Web UIs. Its working is analogous to creating a PowerPoint animation and at the same time having JavaScript capabilities. Let us quickly look at how it works as a cookie cutter.
1. The first step is to create components. You may have 50, 100 or 500 components in an application. We will later see, how to simplify component creation.
2. The next and final step is to stitch components as an application.
3. Stitching means, drop components on a page in a nice layout as per the best user-experience practices.
4. By clicking on a button / link, get into a navigational state. Stitch page for the acquired navigational state. Repeat it visually for all navigations.
5. Trillo lets you do all of it in a browser on cloud.
6. This is analogous to creating a PowerPoint presentation with animation.
7. Trillo enables team collaboration using Git. Thus it becomes analogous to editing a shared PowerPoint slide deck.
You probably have several questions.
1. What is a component?
2. How does data binding and API integration works?
3. Will it work for special or unique cases?
4. What about performance.
We will get into answers of these questions in the following sections.
Optimal Platform for UIs in an Enterprise
Before we get into the details of platform; let us make it financially appealing by saying that a componentized platform can save an enterprise millions of dollars (10s to 100s) and lots of pain.
If you take a union of all components used in all in-house applications in an enterprise, it will be few hundreds. Say all these components are available in the form of customizable templates; also they are designed as per corporate UI guidelines.
Assuming availability of all components, building applications will become as simple as stitching components on a page.
This will result in following benefits.
1. Save millions of dollars to enterprise due to reuse and standardization.
2. Eliminate errors in application.
3. Reduce training time.
4. Make UI building more joyful.
5. Permit building of product UIs that are data-driven and configurable by end users.
Since an enterprise already uses a template of PowerPoint or word document, why not use a templatized and componentized UI platform.
What is Component?
A Web UI component is:
1. Specified as a HTML fragment with few meta-attributes for data biding, access control, data transformation etc.
2. An associated JSON for specification of backend API and its parameters. It may also contain specification of well-known actions.
3. An optional JavaScript file (controller) to extend framework behavior when required or for application logic.
A component, thus created, should be able to render itself if the input context needed for API is available. Or, it should be able to use mock test-data and, always be able to render itself.
Data-binding
In almost all cases, input to component is a tree of objects or collection of trees (JSON). A single object is a trivial case of tree. It is received as JSON, XML or some such notation.
If the HTML fragments of components specify property name (including its path as dot notation) as meta-attribute of element, then the framework can bind the value to an element. When a value changes in the object tree, the component can simply re-render itself. If you need to revert back to previous state, the framework can stack the previous state (mutable v/s immutable data).
This is the approach followed by other frameworks. Trillo hides implementation details. As the creator of UI, all you need to do is specify meta-attribute in HTML, which matches with the name of property in JSON.
Building Components
Trillo uses template for each component type. Users customizes template to create a specific instance of component. These templates can be designed as per corporate UI guidelines (color schemes, fonts, spacing, margins etc).
Trillo lets you create a component from template using any of these methods:
1. Using a visual editor and its property dialogs.
2. By editing HTML and CSS.
3. By editing JSON.
Assuming that the templates have been styled as per corporate guidelines, the creation of 100s of components becomes very efficient compared to coding.
API Integration
Trillo integrates with backend services using restful API and access-token for secure access. Trillo lets you customize API adapter to permit any other technique.
Trillo components expect data in certain format. An existing service may not publish data in the matching format. You can use one of the following methods to match impedance:
1. The data is passed thru a method of the client side controller before being sent to the component. You can write JavaScript code in this method to transform data into the conforming format.
2. Use API gateways to do data mapping.
3. New services can publish data in the conforming format.
Trillo data format does not deviate from commonly used format therefore it is easy to do data mapping. Also, Trillo components automatically generate sample data file to give an idea of data format.
Stitching Components as an Application
A rich Web UI is a single page. A page is a collection of components placed in a visually appealing layout. These components have interdependency that a predecessor provides context for the successors. For example, in case of a list-detail view type UI, a detail view shows the item selected in the list. Therefore, a detail-view requires that the list view exists before it. Trillo automatically captures such dependency as you design the page.
Using Trillo, components can be stitched on a page using a drag drop tool, which provides the following features:
1. It shows the drop points where a component can be dropped in the page grid. This keeps the layout sane.
2. It provides various properties dialogs to configure components; such as property dialogs for API spec, CSS styling, dimensions, input validation etc.
3. It uses the drop order as the implicit order of component instantiation.
4. It lets user get into a navigational state by clicking on button/ link. It erases components of the previous state and lets user define components for new state. It is equivalent to what is programmatically done using “router”.
Scripting for Extending and Business Behavior
Trillo framework automatically becomes a part of application code. It is lightweight and supports component and page behavior using specification in HTML and JSON. At the same time, Trillo also provides a clean scripting model for adding business behavior and extending components. A JavaScript controller class is used to extend component behavior and add business logic. Trillo API provides access to any peer / parent / child component using API. This allows to implement behavior which spans across components.
Team Collaboration
Trillo transparently uses Git for collaboration. It lets anyone use Trillo and contribute to the code-base directly. This enables new processes. Consider the following scenario in a conventional process:
1. UX person wants to change an image in UI.
2. She designs a new image.
3. She will send email to developer with a link of image or as an attachment.
4. Developer will download image, place in the right folder of application, change code, push changes, do new build and deploy.
5. UX will verify the changes.
Under the new process can be as follow:
1. UX is looking at the UI; she double-clicks on the image and changes it.
2. She confirms her changes; the platform creates a new branch and pushes code to GIT.
3. A senior developer can merge her changes after regular process of approving pull-request etc.
Optional Auto Deployment using Trillo Runtime Container
We cannot stress enough the importance of quick deployment of UIs. The fine-tuning of UI requires that changes are made quickly and verified. Ideally, a member should be able to test without browser refresh. In a complex environment where UI is interacting with multiple services, you need to deploy it in an environment, which is similar to your production environment.
One more important point for the cost control, a team may have several members (sometime 3 digit). Any member should be able to deploy any branch or any number of branches for verification. Each deployment should not require spinning new VM or container. The cost of development will spiral if the platform cannot support multiple versions of code using one container/ VM. It means that the platform should provide a logical sandbox for each branch.
Trillo runtime can serve multiple versions of UI using one webserver. It is a container. It can pull any number of branches directly from Git, sandbox each and serve anyone of them based on the selection by user. In a large team, a cluster of containers may be used. It will still be a much smaller number compared to one container per developer per branch.
Recap
In conclusion, Trillo allows:
1. Componentized design.
2. Simplify component design by styling templates as per company UX guidelines.
3. Ability to stitch components into pages by drag and drop.
4. Ability to specify page transition.
5. Simple scripting model to incorporate any business logic at the periphery (without intricate wiring).
6. Collaboration among teams members (including product/ sales and marketing people).
7. Deployment within seconds.
Sample App
The link to a sample App built using Trillo is:
https://www.trillo.io/Test4
More Info
You can find more info about Trillo on the web at:
