JavaScript, Performance Intro


1. What is What makes it special?

A JavaScript framework which helps you create smooth, complex UIs for any screen. Stress on the smooth part. elements are styled with position:absolute and their positions are defined by matrix3d webkit transforms. This is what makes performant.

2. What are context, renderables, surfaces, views, stateModifier…?

  • context:  isolated rendering environments that renderables live in. Like a canvas. You can have multiple contexts in a app but if you’re building a mobile app or a full-page web app, you usually just have one.
  • renderables: objects that map to an actual element on the screen that you can see. In, the most primitive renderable is a surface, which maps to a DIV element in the DOM.
  • surface: a kind of renderable, actually a div, whose css could be specified in JS
  • views: views group surfaces together. Not necessary. Events could be set directly upon views through myView._eventInput.on(‘click’, function() {}); and emitting it to the outside through myView._eventOutput.emit(‘hello’); and being catched from the outside through myView.on(‘hello’, function() {});
  • stateModifier: an option to position a div in a form of css transform, before adding it to the context
  • widgets: provide useful tools, e.g., display your independent html inside of a demo iPhone5
  • lightbox: specify how our surfaces transition in and out, and opacity change when they do. There are six properties: inOpacity/outOpacity, inTransform/outTransform (scale, translate…) and inTransition/outTransition (easing, duration…)

3. what’s special about size (of surfaces)?

  • set to true, they wrap around the content.
  • set to undefined, they expand as wide as they want
  • and of course, you could set them to specified pixels