A suite of open-source libraries and tools used by teleportHQ, an online platform which simplifies the process of creating, maintaining and publishing user interfaces for desktop and mobile devices.
- Live Demo
- Getting started
- Teleport Intermediary Representation
- Official Generators
- Motivation
- Principles
- Documentation (coming soon)
- License
- Contact Us
Create a new project:
npm init -y
Install Teleport libraries
npm i @teleporthq/teleport-lib-js @teleporthq/teleport-elements-core @teleporthq/teleport-generator-html @teleporthq/teleport-generator-next
Create an index.js file:
// load Teleport libraries
const Teleport = require('@teleporthq/teleport-lib-js').default
const TeleportElementsCore = require('@teleporthq/teleport-elements-core')
const TeleportGeneratorReactNext = require('@teleporthq/teleport-generator-next').default
// sample of a Teleport Project
const teleportProject = require('./data/sample1.json')
const teleport = new Teleport()
const { definitions, mappingHtml, mappingReact, mappingNext } = TeleportElementsCore
// setup teleport library for html code generation
teleport.useLibrary(definitions)
// load mappings for html, react and Next.js (Next.js extends react's mapping)
teleport.useMapping(mappingHtml)
teleport.useMapping(mappingReact)
teleport.useMapping(mappingNext)
// load the generators for Next.js
teleport.useGenerator(new TeleportGeneratorReactNext())
const projectFilesNext = teleport.target('next').generator.generateProject(teleportProject, { generatePackageFile: true })
console.log(projectFilesNext)Create a `data/sample1.json file:
{
"name": "Demo",
"components": {
"Component1": {
"name": "Component1",
"content": {
"name": "content",
"type": "View",
"source": "teleport-elements-core",
"children": "Hello from a child",
"style": {}
}
},
"Component2": {
"name": "Component2",
"content": {
"type": "Text",
"name": "Component2",
"source": "teleport-elements-core",
"children": "hello from Component2"
}
}
},
"pages": {
"Page1": {
"name": "Page1",
"content": {
"name": "content",
"type": "View",
"source": "teleport-elements-core",
"children": [
{
"source": "components",
"type": "Component2"
}
]
}
}
}
}Run:
node index.js
A Teleport project is defined by a plain javascript object which respects Teleport's Intermediary Representation (TIR) format.
TIR is defined by 5 distinct structures described below with TypeScript types:
- TeleportProject
- Component
- ComponentReference
- Page
- Content
To get familiar with TIR's format, copy-paste the following code in TypesScript Playground or in a local TypeScript file.
// index.ts
interface Component {
name: string
content: Content
}
interface ComponentReference {
source: "components",
type: string
}
interface Page {
name: string
content: Content
}
interface Content {
source: string,
type: string,
name: string,
style?: { [key:string]: string | number }
children: Array<Content | ComponentReference> | string
}
interface TeleportProject {
components: {
[key: string]: Component
}
pages: {
[key: string]: Page
}
}
const teleportProject: TeleportProject = {
// define all the reusable components
"components": {
"Component1": {
"name": "Component1",
"content": {
"name": "Component1",
"type": "View",
"source": "teleport-elements-core",
"children": "Hello in red from Component1",
"style": {
"color": "red"
}
}
}
},
// define all the pages of the project
"pages": {
"Page1": {
"name": "Page1",
"content": {
"name": "Page1",
"type": "View",
"source": "teleport-elements-core",
"children": [
// the first child is a primitive element
{
"name": "test",
"source": "teleport-elements-core",
"type": "View",
"children": "Hello in red from a primitive element",
"style": {
"color": "blue"
}
},
// the second child is a reference to the component with the name "View1" (defined previously)
{
"source": "components",
"type": "Component1"
}
],
"style": {}
}
}
}
}In a world in which information is delivered through multiple channels and different technologies, we believe that there are many benefits in decoupling the description of User Interfaces from the code which will render them.
This approach is not new. Our concept has been greatly influenced by Facebooks's React library, where React is a component based User Interface description language and ReactDOM and React-Native are implementations of the same User Interface description in different targets.
However, we wanted to go one step further and to propose a format which would be 100% code-free and which could eventually become a protocol for a bi-directional and friction-less communication layer between the designers's tools and developers' technologies and frameworks. This protocol is based on a JSON format and we call it an "Intermediary representation" with similarities to vDom and AST.
At a high-level, a User Interface can have 3 main digital states: a description state (such as a Photoshop or Sketch file), a code state, (such as a HTML file) and an instance state (such as the DOM equivalent of an HTML file). These 3 states are the design-to-code pipeline for the user interface of any standard web application:
design state ---> code state ---> instance state
Until very recently, those three states were completely distinct and managed by specialized tools, respectively, design tools, code editors, and browsers. It is only in the past two years that code and instance states (and tools) got significantly closer through hot-reloading mechanisms.
Teleport closes the gap and allows for a real-time experience through all the digital states of a user interface.
Coming soon
MIT