History of one web UI component

November 23, 2013

Filed under: Philosophy,Sciter,Web Application Techologies — Andrew @ 6:29 pm

10 or so years ago I was asked to design Word Processor WYSIWYG editing component. The editor should handle editing of paged documents. It has notion of pages where document text is replaced. The text can wrap around absolutely positioned (page box related) blocks – images, text boxes, etc. To be short – something like micro-Word but lighter and PDF-output oriented.

The target application, where it was used initially, was online Web application with UI written as a quite large Java Applet. These days such a technology is know as “single page web applications”. But 10 years ago browsers (actually it was just one at that moment) were simply not ready for productive applications – applications that people are opening in the morning and closing when they leave workplace.

Even at that moment of time Java handled that type of UI pretty well. We just did our own UI framework/set of widgets for it but still.

The Word Processor component was written in C++ and integrated with the rest of Java application through JNI.

We were happy with the app and so did 70,000 users of the application. But joy was lasting only couple of years. As one day Microsoft and Sun did not reach an agreement on Java destiny inside the browser and so our application literally became deprecated in one day. Doh!

So the development of the UI of the application started from scratch again. At this moment of time Microsoft added almost accidentally AJAX support to IE and that gave a hope to the team that they can finally use HTML/CSS for UI of the app. And development started.

But it was still not clear what to do with our nice Word Processor and HTML WYSIWYG editor that used BlockNote editing engine for e-mails. Users already created tons of documents so we cannot simply drop editing functionality from the app. Web platform hadn’t and still has no means to support WYSIWYG editing of paged documents. And even HTML WYSIWYG editing (a.k.a. contenteditable) is still quite far from ideal (e.g. to insert an image you need to upload it to the server first, and so on).

At that moment I almost had Sciter v.1 ready and we’ve decided to wrap it as an ActiveX component (for IE) and so called Netscape Plugin (NPAPI, for Firefox). I’ve created editor’s chrome as Sciter’s HTML/CSS/tiscript and wrapped the editors as Sciter’s DOM behaviors. And we’ve got our application up and running again. As the same Sciter engine run in different browsers we saved a lot of time on cross-browser testing of the editors, it just worked in each of them. And even in Google Chrome that arrived later.

Word Processor in Sciter screenshot

Word Processor running in Sciter ActiveX on web page

Joy of having convenient and stable application lasted little bit longer this time. Up to couple of months ago when Google Chrome and Mozilla pretty much at the same time declared that, basta!, they are not going to support NPAPI starting next(!) year.

Their motivation is in principle quite understandable: 95% of internet users do not use any plugins at all so why to bother. But, hey, what about our 70,000 users? What they should do? Except of NPAPI there is simply no other means to run native components on the web page in GC and FF… And, again, that happened with 3 months notice… Cool, eh?

So the team is in this interesting position again – what to do with our app.

People, seriously, I believe it is time to consider Sciter as a front-end for even online (productive, business) web applications. Just create HTML/CSS/tiscript once and it will work in all Windows versions and Mac OSX (coming). Linux version will be ready shortly after OSX version.

And forget about testing everything separately in IE, FF, GC, Safari and Opera. Sciter does not require installations – just copy and run it.
Enough is enough, no?

And yet, if you not convinced yet then check this news for IE 11. If in your Asp.Net you happen to rely on things like
if(request.browser.ActiveXControls) ... else ... apply hot-fixes from the article above. Otherwise your app will not work properly in IE 11.

Just in case: here is an example of Word Processor document shown above saved as PDF.

Sciter, Mac OSX port progress report.

November 12, 2013

Filed under: Sciter — Andrew @ 9:50 pm

It is coming.

Here is structure of projects the Sciter is made of:

  • /demos/ – group of demonstration projects that go to public SDK:
    • inspector – DOM inspector, targets: /sdk/bin/inspector32.dll and /sdk/bin/inspector64.dll, uses/depends-on sciter.dll
    • sciter – main demo, UI "player" of HTML/CSS/TIScript, targets: /sdk/bin/sciter32.exe and /sdk/bin/sciter64.exe, uses/depends-on sciter.dll
  • /libs/ – external libraries, used "as is" by sciter.dll
    • dybase – Konstantin Knizhnik’s DyBASE, used by tiscriptlib to provide persistence (Storage and Index objects). Static library, part of sciter.dll
    • png – standard distribution of pnglib + animated PNG extension. Used by gool.  Static library, part of sciter.dll
    • zlib – standard distribution of zlib. Used by pnglib and sciter.dll. Static library, part of sciter.dll
  • d2d – Direct2D and DirectWrite gfx backend, used by gool and html. Static library, part of sciter.dll
  • gdi+ – GDI+ gfx backend implementation, used by gool and html. Static library, part of sciter.dll
  • gool – abstract graphics layer, used by html. Static library, part of sciter.dll
  • html – h-smile core – HTML/CSS engine. Static library, part of sciter.dll
  • sciter.dll – the sciter engine assembly per se. targets: /sdk/bin/sciter32.dll and /sdk/bin/sciter64.dll
  • tiscript – standalone tiscript interpretter/compiler assmbled as command line utility. Used for example to compile TIS sources to bytecodes. target: /sdk/bin/tiscript.exe (32bit).
  • tiscriptlib – TIScript core, uses /libs/dybase and tool static libraries. Static library, part of sciter.dll
  • tool – collection of common primitives: string, array<T>, hash_map<T>, etc. Static library, part of sciter.dll
  • win – window primitives (Windows)

So far I’ve ported /tool, /tiscript + /dybase

/gool and /html are platform independent but taking some attention.

Major things are graphics and windowing layers, they are taking most of the time at the moment.