Jan 12, 2017

Online demo

In last couple of days I was working on first meaningful Tickator application - simple calculator. Not yet done but it already works nicely - can sum two numbers :-) So I started to think that maybe I should try to allow people to run Tickator IDE without necessity to clone from GitHub and build using npm.

Disclaimer:

  • Please keep in mind that Tickator IDE and created components is just prototype, not even alpha.
  • For now is IDE read only - you can traverse components, run them, but not change them.
  • For now I only test in up-to-date Chrome.

Having said that, you can Run IDE! in your browser.

When opened, Calculator is shown:

  • You can run it via play button on top.
  • In properties view you can see sequence of commands that are calculated automatically - when component i of type LineInput is selected in schema.
  • You can see results in Console. There are not just results but it shows what simple real calculator shows during entering operands and operators.
  • After execution is done, you can try to type own examples in input above Console. Try to enter 1, press enter, +, press enter, 1, press enter, =, press enter.

Nov 30, 2016

Looks like IDE

So I pushed Tickator IDE again a bit forward. It now looks much more like an IDE. There is support for simple control of program run, logging infrastructure and basic traversing of project structure.

But there are news in Tickator itself too. From now on it is possible to define component, including properties and inputs/outputs. Such component can be used in another component.

In example below, there is WrappedSum which is implemented using ticklet Sum (green boxes with cog wheel are ticklets). WrappedSum is then used component EmbeddedWrappedSum (blue boxes with piece of puzzle are component instances), fed by two constants (with values 1 and 41) and output is sent to printer that prints result into log console.

There is also example with feedback loop - Iteration. Simple Sum ticklet is fed by Const with value 1 and own output. That causes printing infinite row of numbers incremented by one.

PS: I promise - next sample I will show here will be meaningful ;-)


Nov 11, 2016

First ticks

Prototype of Tickator reached the point when it is able to perform simplest possible calculations. On image below it sums 41 and 1 and prints result to the console.

You may notice that 42 is printed in tick 2. Why? In tick 0 sends both Consts value to their outputs. In tick 1 Sum calculated its result. And in tick 2 Print printed result.

For long time I was struggling with attempts to prepare full fledged IDE but it seemed terribly hard. Handling all the dependencies, updates on change, etc. Then I came to the idea that for now it should work in similar way as React, compilation of source code or make, … You just prepare definition of things - React components, files with source code, make script,… and then start the tool, which takes this definitions, validates them and build target.

Various optimizations are possible - in the same way React just update elements in DOM, compilation just build changes and make execute just tasks with changed inputs. Tickator is for now using Webpack’s Hot Module Replacement. That means that after 1 second after storing changed code you have result shown in browser without necessity to reload. It is incredibly fast process. On two monitor machine it is fastest development I have ever done.

I am aware that final target is completely graphical IDE that does not force you to write code. But I am not able to handle complexity of this task for now. So let’s progress step by step.

I have prepared custom DSL for definition of components and ticklets. It has several advantages:

  • Format without burden of unnecessary syntax
  • Perfect reporting of problem - definition is checked as soon as possible
  • Configuration may be dynamic - for example value of property may be result of JavaScript function executed on initialization of component/ticklet

Ticklet definition looks like:


export class Sum extends Ticklet {

  static define(b) {
    b.klass(Sum)

    b.comment("Sums two numbers")

    b.input(b=>{
      b.name("a")
      b.validate(Validate.isNumber)
      b.position('top', 0.5)
    })

    b.input(b=>{
      b.name("b")
      b.validate(Validate.isNumber)
      b.position('bottom', 0.5)
    })

    b.output(b=>{
      b.name("res")
      b.validate(Validate.isNumber)
      b.position('right', 0.5)
    })
  }

  tick() {
    const a = this.in().a().get()
    const b = this.in().b().get()
    this.out().res().set(a+b)
  }
}

Component definition looks like:


export function defineFunction(b) {
  b.name('Root')

  b.instance(b=>{
    b.name('c1')
    b.ticklet('Const')
    b.property('value', 1)
    b.x(100)
    b.y(100)
  })

  b.instance(b=>{
    b.name('c2')
    b.ticklet('Const')
    b.property('value', 41)
    b.x(100)
    b.y(300)
  })

  b.instance(b=>{
    b.name('s')
    b.ticklet('Sum')
    b.x(300)
    b.y(200)
  })

  b.instance(b=>{
    b.name('p')
    b.ticklet('Print')
    b.x(500)
    b.y(200)
  })

  b.connect(b=>{
    b.fromInstance('c1')
    b.fromOutput('res')
    b.toInstance('s')
    b.toInput('a')
  })

  b.connect(b=>{
    b.fromInstance('c2')
    b.fromOutput('res')
    b.toInstance('s')
    b.toInput('b')
  })

  b.connect(b=>{
    b.fromInstance('s')
    b.fromOutput('res')
    b.toInstance('p')
    b.toInput('val')
  })
}

There is no problem with Ticklets - there will be finite amount of them and their complexity is low. You just define inputs, outputs, properties and implementation. But as you may noticed when it comes to components it may become nasty. Even such simple calculation as 41+1 takes 50 lines of code. But in UI it is simple: put 4 componens, drag&drop 3 wires, fill 2 properties and it is done. Everyone can do that. But in code it is much, much harder. Let’s hope that rapid development process with hot reload will help.

Stay tuned!


Sep 11, 2016

Tickator IDE

Tickator will have web based IDE. This is how early prototype using React.js and rendering into SVG looks like.


Jul 22, 2016

Alive all the time

In last days I was thinking about major difference of Tickator against traditional software - elements are alive all the time.


Mar 7, 2016

Complexity

OK, one more article. About Complexity in traditional software and Tickator.


Mar 3, 2016

Architecture described

Documentation in section What is tickator and Architecture has been finished. So now you can finally get some theoretical information about Tickator project. Please let me know if anything is hard to understand. You can report issue on GitHub.

Let’s roll up sleeves and jump into implementation. Stay tuned!


Feb 18, 2016

Tickator project has been started!

Finally! But … What is Tickator?

Tickator is software parallel computing model with following characteristics:

  • global tick based
  • implicity-masivelly parallel
  • change driven
  • global lock free
  • deterministic
  • easy to create and reuse components
  • defined by schema

Interested? Then take a look at first article What is tickator.

If you don’t want to miss future articles then follow us on Twitter.

Stay tuned!