Sciter technology survey

Ramon, author of Omni/OmniCode from MI Software, is making a survey about how people are using Sciter technology.

In return he is promising to provide licenses of his products to those who participated in survey.

Survey: goo.gl/forms/BKGHVjTGBTEIVMl02

More info is on misoftware.rs site.

Hope you can participate and help him to get that information.

no responses

+plus and +formation, what’s the difference?

+plus

+plus is the way to define and support mapping between DOM tree and data tree rooted at some object or namespace. So if you have these two declarations, markup:

<style>@import url(plus.css)</style>
<section model="person">
    <label>First</label> <input(name.first)>
    <label>Second</label> <input(name.last)>
    <label>Age</label> <input|integer(age)>
</section>

and script

namespace person {
  var name = { first: "Albert", last:"Einshtein" };
  var age = 53;
}

then the +plus will establish live two-way mapping (binding)  between DOM elements above and the data structure.

When the user changes value of input(name.first) field  (short form of <input name="name.first"> in Sciter) the following happens:

  1. Sciter generates “change” DOM event;
  2. +plus handles that event and
  3. updates value of person.name.first in data namespace.

And when data gets changed by some other code like

person.name.first = "Some other name";

then pretty much similar flow occurs:

  1. Sciter determines that filed first  has changed on observable object.
  2. Sciter calls attached function-observer – each object/array inside bound namespace has an observer function attached to it.
  3. And that function-observer updates bound DOM element.

As you see, in order binding to work both-ways, each data node (object, array) in bound namespace has to have corresponding observer attached to it.

+formation

The main difference from the above is that the +formation does not require separate data structure.  The formation is a data structure by itself naturally mapped to markup structure.

This markup:

<section(person)>
    <label>First</label> <input(name.first)>
    <label>Second</label> <input(name.last)>
    <label>Age</label> <input|integer(age)>
</section

gets mapped by formation() function to the [formation] tree structure:

And code can access that tree directly as:

var root = formation( self );
// setting whole formation:
root.person.value = {
   name : {
     first: "Albert",
     last: "Einshtein"
   },
   age:69
 };

// or setting particular field in the formation:
root.person.name.first.value = "Some other name";

Note: root.person.name.first is a direct reference to <input> DOM element thus .value is required.

The formation is a data structure derived from actual DOM tree (its projection)  and so you can use normal DOM events to be notified when some data changes by the user:

root.person.name.first.on("change", function() {...}) // or
self.on("change", "section[name=person]", function() {...}) // any change in person fields.

Resume

Essentially +plus and +formation are aimed to the same task – update UI from code and update/notify code about some changes in UI.

  • +plus
    • pros: Allows to bind arbitrary data structure to arbitrary DOM tree.
    • cons: Can be memory and CPU consuming on large data and DOM trees.
  • +formation
    • pros: Fast and not CPU consuming.  Yet allows to access “fields of interest” by using dot notation (“paths in formation”):  root.person.name.first.state.disabled = true;
    • cons: data structure you get (the formation tree) is bound with DOM structure. So when you change DOM structure then  formation paths in code may change.
no responses

Better use of style @set’s

In next version (4.0.0.2 and above) I am changing the way of how @set’s are applied in user’s style sheet.

Style sets will be applied before any other rules in the same style sheet.

So if you have

@set MySet {
  :root { color:red; width:*; }
}

myelement { style-set: MySet; }

And later define

myelement#test {
  color:blue;
}

then <myelement id=test>...</myelement> element will have blue color.

So you can think of style sets as definition of default styles. Ordinary CSS rules are applied on top of them allowing to style concrete elements.

no responses

Starting Sciter v.4.*.*.* series

Major changes:

SDK will include versions of Sciter with Skia graphics backend.

On Windows sciter is compiled as different DLLs having the same name sciter.dll locating in following folders:

  • bin/32/sciter.dll \
  • bin/64/sciter.dll – Direct2D and GDI+ backends as before
  • bin/skia32/sciter.dll \
  • bin/skia64/sciter.dll – Direct2D and Skia/OpenGL backends.

On MacOS sciter will include as CoreGraphics as Skia/OpenGL backends switchable by SciterSetOption() function.

On Linux I will have separate sciter.so that will not use GTK at all . Instead it will expose SciterProcX function similar to SciterProcND. Basic purpose: to use Sciter with SDL, GLFW and the like environments.

no responses

On the road to better documentation

Sciter documentation, how to say in polite manner, is not convenient. I know.

So looking for ideas of making it better.

Problem is that I need documentation for at least of two types of media: for Sciter’s help browser and for the web. While I can use HTML it is not always use the same files. Standard CSS is not at Sciter’s level yet.

For example I missed things like flow:row(dt,dd), simply no such things in conventional CSS. <dl/dt/dd> lists are barely usable without proper styling. To achieve flow:row(dt,dd) layout on the web it need to render it as a table, sigh.

So it is clear that documentation shall use some other format and be assembled from it for particular use. One of obvious choices is to use Markdown for that. So I need markdown parser in Sciter that supports hierarchical constructs like <li><pre>… I’ve managed to implement such a parser in 250 lines of code. Just in case, original Perl parser written by John Gruber is about 1400 lines of highly cryptic Perl code. In Sciter I am using generators/yield that allowed to simplify the whole thing.

This is how test-bed looks that far:

And speaking about software documentation in general.

I’d appreciate any examples of good examples of software documentation. But not from Microsoft or Apple please – they are barely readable.

8 responses

Optimising ‘+=’ and ‘+’ operators for strings.

This simple code:

var s = "";
for(var i = 0; i < 50000; ++i) {
  s += "*";
}

code used to run in Sciter in 874ms.

After implementing simple and obvious optimization it runs now in just 4ms.

String concatenation was implemented as simple string allocation of size(r) = size(s1) + size(s2) and memcpy of s1 and s2 into that new string r.

Memory allocation in script is cheap - just increment memory pointer by size of requested memory chunk and you are done. So in theory that naïve strcat shall be lightning fast. But it is definitely not. There is a hidden cost of GC cycles - at the moment of concatenation r,s1 and s2 shall be present in memory.

So "0123456789" + "A" needs memory for 10 + 1 + 11 = 22 characters. And on each iteration that number increases - the VM is busy cleaning garbage most of the time.

So when someone from C# and Java crowds is saying you that memory allocation is cheap take it with a grain of salt.

2 responses

Sublime 3, Sciter syntaxes

Sciter HTML/CSS/script in Sublime3

Steps to add Sciter support to Sublime3

  1. In Sublime: menu Preferences » Browse Packages. It will open /Packages folder.
  2. Create folder named Sciter right in that folder.
  3. Download all *.tmLanguage files from github.com/svitalij/sciter.tm.syntax
  4. Copy those *.tmLanguage files into that folder.

Done. Now if you will open .tis files in Sublime3 you will see syntax highlighting.

To edit HTML and CSS files with Sciter specific extensions select

View » Syntax » Sciter » Sciter HTML

Gratitude to Vitalij Shitts the Great

one response

Sciter assistant for Visual Studio Code

Early BETA of Sciter Assistant for Microsoft Visual Code by ConrLab.

MS-visual-code-sciter

Microsoft Visual Code, Sciter assistant in actions 

Supports syntax and editing of Sciter HTML and CSS flavours and TIScript.

Code completion in CSS including @mixin/@const constructs and script for this and variables starting from el....

If to update user settings (File->Preferences->User Settings) like this:
code-preferences

then by using Ctrl-K, Ctrl-S sequence you can run it in sciter.exe.

no responses

HTML/CSS desktop UI solutions, distribution sizes

As was mentioned, I’ve added scapp.exe to the SDK distribution. The Scapp is a monolithic executable with Sciter engine inside.

The question: Having the scapp what if to create IDE using it? How that IDE will compare with other existing on the market?

To answer on this question I’ve created simple IDE sketch in Sciter (sdk/samples/ideas/ide/) :


ide-windows ide-osx
As you see it is pretty close to, let’s say, Brackets editor from Adobe: brackets-windows

My quick sketch implements just basic functionality: loading file, basic editing and syntax highlighting. All together HTML/CSS/scripts are about 40k (uncompressed). Full implementation will definitely have more of those. Let’s assume that we will be creative enough to produce 1mb of scripts, styles and HTML.

Together with the executable it will give us:

Binary (scapp.exe) HTML/CSS/scripts total
on disk 4.1mb 1mb 5.1mb
compressed
(distribution)
1.8mb 0.29mb 2.09mb

So the whole IDE could be of just 2 megabytes !

Let’s compare it with other behemoths then:

IDE/vendor distribution size installation size ratio to largest
(the less – the better)
Brackets / Adobe 48.1mb 114mb 51%/31%
Visual Studio Code / Microsoft 31.9mb 135mb 34%/37%
Atom / GitHub 93.6mb 366mb 100%/100%
Sciter / Terra Informatica Software 2.1mb 5.1mb 2%/1.4%

So for each of us, users, it takes 50 times more of traffic to download these things that it should be… Is it fair?

no responses
no responses