Wednesday, October 19, 2016

The evolution of web development

Custom HTML Attributes Are Evil


HTML is itself a static content, and many developers have used the specification <!DOCTYPE >, which points out that it is merely a document.
The dynamic part is represented by JavaScript language. And here arose the problem.

Looking how various programming languages are used to build UI reveals that the language itself is a part of UI blocks. For example, Windows Presentation Framework uses XAML with C# controls:
<Grid Background="#555555" Width="400" Height="300">
    <Button Click="OnButtonClick">Press me</Button>
 </Grid>

Here will be created an instance of Grid class and an instance of Button class. Also it is possible to write logic whatever we like inside custom controls as they are just usual classes:
class Grid {
     public Color Background {get; set;}
     // methods and other UI logic
}
The same is true for Java with Android layouts, and many other languages and platforms.

HTML initially does not provide such idea, it does not link <html-element> to a JavaScript instance. To enhance it we can simply declare HTML elements as objects of JavaScript types:
  class div {
     public string style {get;set;}
     // methods and other UI logic


     render: function(){
         // return real html '<div>'+content+'</div>'
     }
  }
  class MyWindowPopup {
     public boolean fullScreen {get;set;}
     public boolean visible {get;set;}
     // methods and other UI logic

  }

Then it becomes possible to build pages and components in a common way:
   <MyWindowPopup visible="true" fullScreen="false">
     <div>Popup text</div>
   </MyWindowPopup>
Moreover we can advance some property types, e.g. use string[] array instead of string for class property <div class="typeof string[]">.

Then a browser or a server (NodeJS) is simply converts JavaScript to HTML and shows layout to a user. This approach took Facebook team with React and its JSX style.
---------------------------------------

Many other teams try to overcome HTML static nature by putting custom attributes, which seems very strange and inconvenient for me. Angular, Vue.js, Aurelia.js and many other JS frameworks use logic with custom marks (*ngIf, v-if, bind.click):
<div *ngIf="currentHero">Hello, {{currentHero.firstName}}</div>
<div *ngFor="let hero of heroes">{{hero.fullName}}</div>

JavaScript Monopoly


Nowadays JavaScript is the king of UI and there is no alternative.
I think every team that works with Web tried to create a converter from their languages to JavaScript. However this approach produces massive bunch of problems due the nature of languages.

Google created GWT where Java is converter to JavaScript and developers can write kind of UI logic in Java. Also Google tried to apply usage of Dart language in modern browsers and again created conversion to JavaScript.
Microsoft uses aspx controls that can be written in .NET compatible language, Razor views, and TagHelpers in Asp Core, which all finally are converted to JavaScript and HTML. You can find same idea for Elm, Python, PHP and other languages.

The problem is that JavaScript and C#, JavaScript and Java, JavaScript and [your favourite language] are very different beasts.

Javascript is a prototype-based language with first-class functions. There is no even idea of an object instance of a class (class declaration leads again to a function). There are just six types in JavaScript: Object, Number, String, Boolean, Null, and Undefined, plus some object helpers like RegEx. There is no even notion of Integer or Decimal type because JavaScript Number only holds double-precision 64-bit format value. Run in a JS console "0.1 + 0.3" and see what you get, while with Decimal types in C# the result will be "0.4".

Thus, developers restrict their language of choice too much and loose the power of JavaScript. In addition to these points most of the time they loose highlighting and intellisense while producing JavaScript and HTML as a string, e.g. in Asp Core TagHelpers:

     public class IconTextTagHelper : TagHelper
    {
        public string  Glyph { get; set; }
        [HtmlAttributeName("class")]
        public string ClassName { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)

        {
           string classnames = String.IsNullOrWhiteSpace(ClassName) ? "icontext" : "icontext " + ClassName;
                output.TagName = "a";
                output.TagMode = TagMode.StartTagAndEndTag;
                output.Attributes.Add("class", classnames);
                
                output.Content.SetHtmlContent(
                // String, string, string

                   $@"<span>
                          <i class=""icon fa fa-{Glyph ?? ""} icontext__icon""></i>
                          <span class=""icontext__text"">{this.Text}</span>
                      </span>");                     
        }
    }
 A way better solution is to work with JavaScript itself, or even better with TypeScript, which provides static type checking.

Breaking JavaScript Monopoly


To overcome the monopoly of JavaScript the IT community are making an attempt to specify WebAssembly, which later can be supported by browsers vendors.
The idea is very simple:
   Browsers will support agnostic language (through ASTs) that will include many features from modern languages. It will be some kind of Intermediate Language that is used in Java and .NET virtual machines nowadays. It will be faster to parse, faster to transfer, faster to run, it will be in binary format instead of text format of current JavaScript.

Sadly web development progress is very slow.
The web community still tries to build some kind of XAML with its custom components, inline styles, namespaces and modules.
It is 2016 and only now we have Flexbox, which is analogue of StackPanel in WPF for arranging elements horizontally or vertically in a single line. And what about Grid,  without a hack and whistles there is no way to do it in modern CSS, only recently W3C CSS Grid specification has passed from a Draft type to a Candidate Recommendation type.

There are so many bright minds in our realm but the overall picture is appalling.

P.S. JavaScript word is used for convenience, while ECMAScript is the proper notion in some places.

Saturday, October 15, 2016

SPA

It is common nowadays to have the acronym for SPA as a Single Page Application.

Nevertheless the actual meaning is quite different, the page is not single, the page is actually shelled.

SPA approach has the same idea as in a mobile application or a thin desktop client. A user downloads a thin shell for the app: a header, a footer, a body placeholder and possibly sidebars. Then asynchronously this app updates the content for the placeholders, while footer and header is not reloaded.

From a user experience the app is working with several navigation links and many pages. So calling such shelled app layout as a one page sounds misleading.


SPA = Shelled Page Application


Wednesday, October 12, 2016

Application workflow strategy and Staging verbosity

One of the famous app flow strategies is DTAP, which is acronym for Development Testing Acceptance Production.

Let us consider each step in detail, but before this let us make step back and add a source control and a continuous integration step for the full picture.

The scheme represent a de-facto standard in current development process.

Source control
  • holds project source files and likely provides history changes, as project branches and users control management.

Continous integration 

  • a continuous integration tool checks for the source control changes, grabs source files from the source control and builds the projects;
  •  runs unit tests;
  •  produces artifacts (application packages) that are ready for publishing;
  •  publishes the app to Dev server;
  •  for the published app runs smoke tests, which check basic and the most important functionality, e.g. products are displaying and a user can log in and pay for a product;
  • for the published app runs functional tests, which makes in-depth testing of the whole application pretending to be a human tester, e.g. opening Internet Explore browser, opening page with the contact form, filling contact data and submitting it, checking that email is received or was added to a fake queue.
    (Note: most of the time CI tool cannot itself run Smoke or Functional tests as there is a need to have visual APIs in the operating system, which provides ability for example browsers to be installed or other GUI apps. For these purposes special test apps are built with tools  like SelenuimHQ and are placed on a Dev server (or other suitable place with support of reach GUI), while CI tool can be installed in the cloud or a small linux server without rich GUI support. Then CI tool requests from the Smoke/Functional test app to run these tests.
  • finally we can guaranty that the app is almost fully functional on the dev server, otherwise if any of the previous steps are failed the responsible person will be notified about the problem.


Then we have the following steps for the application:


Dev environment

  • holds automatically tested application;

Test environment

  • if you have testers in your team this place is for them;
    the app is tested by testers in isolation from other steps
  • tester makes subtle tests as the app is already tested automatically;
    if there is a bug, then one of the functional test is missing, which should be added by developer in the fix process
  • a CI manager can manually request CI tool to propagate the app to Test server(s) after Dev phase
  • another approach is to automatically propagate the app from Dev phase to Test phase by CI tool when you have versioned app running simultaneously or several Test servers, so that testers will not be interrupted while they are providing tests

Acceptance (also known as UAT/User Acceptance Test) environment
  • holds application that waits for a testing from a stakeholder/ a customer;
  • if there is no tester in your team you can propagate (manually or automatically) the app from Dev to UAT phase with CI tool
  • A stakeholder makes tests and whether accepts or rejects the changes
Note: environment can be presented by different amount of servers and machines. For example Dev, Test and UAT environment can be hold on a one server, or in other case Test environment can be hold on N-servers.



STAGING

Although DTAP model is obviously clear there is another step called Staging. I've phased a lot of confusion with Staging step among developers as there is no single definition for it.
Some people argue that Staging is another name for UAT step.  Other people go further and combine Test step with UAT step and call this combination as Staging. Any of this is definitely valid while you have one concept across your whole team.
Nevertheless personally I prefer to have the notion of Staging as a pre-production step. What does it mean? Let us look at the image from Steve's blog post about staging in Azure.



Staging is an additional step before publishing an app to a production environment.

Staging

  • is propagated from UAT phase after a stakeholder approval
  • holds the app ready to go live in production;
  • has connection settings (database, email server, and so on) the same as in production 
  • CI tool runs Smoke tests to verify critical functionality
  • if needed a stakeholder or a developer can manually verify some special points
After all theses steps are done Staging can be simply swapped with a Production environment, for example for a website by changing routes in a hosting tool (IIS, Nginx, Apache). Thus staging becomes production, while production becomes stale staging, which can be removed or used as a backup. This approach is known as Blue Green deployment.

Saturday, September 3, 2016

Custom unstructured data types and types' reuse


In 1972 three well-known computer scientists wrote a book Structured Programming, where they mentioned about custom unstructured types:
All structured data must in the last analysis be built up from unstructured components, belonging to a primitive or unstructured types. Some of these unstructured types (for example, reals and integers) may be taken as given by programming language or the hardware of the computer. Although these primitive types are theoretically adequate for all purposes, here are strong practical reasons for encouraging a programmer to define his own unstructured types, both to clarify his intentions about the potential range of values of a variable, and the interpretation of each such value; and to permit subsequent design of an efficient representation.
(...) Such a type is said to be an enumeration, and we suggest a standard notation for the name of the type and associating a name with each of its alternative values.
type suit = (club, diamond, heart, spade);
          (...)
type year = 1900 .. 1960; 
type coordinate = 0 .. 1023;
(...) We therefore introduce the convention that a .. b stands for the inline range of values between a and b inclusive. This is known as subrange of the type to which a and b belong, (...)
Ole-Johan Dahl, Edsger W. Dijkstra, C.A.R. Hoare, Structured Programming, A.P.I.C. Studies in Data Processing, No. 8, 1972, p.97

Some of the languages indeed support subrange types, e.g. Ada and Dephi. Nevertheless, modern popular languages like Java and C# do not support unstructured custom subrange types.

In addition to this there is a huge misconception about a type declaration and its actual meaning. For instance, an Array accepts an Integer as index argument with a range [-2^31, 2^31], so we declare support for -1,-2, ... index values. At the same time only non-negative integers are accepted, i.e. [0, 2^31]. For an honest and clear code it should be an Array[NonnegativeInteger].

Moreover, commonly used structured and unstructured types does not limit to numbers. Nowadays an email is always presented as String:
function SendEmail(String email, String emailBody){ ... }

but we actually mean
function SendEmail(EmailAddress email, String emailBody){ ... }

Making an assertion that an instance of the class/structure EmailAddress is always valid we do not need to check the string every time with IsEmail() helper or an attribute of DataAnnotations. It can have a function EmailAddress TryConvert(String email) for convenient conversion from string.

Other common places for apparent improvements:

  • Name checking of a String for a Firstname and a Lastname across whole solution with the same restrictions, probably with no more than 256 special characters and at least 1 character, can be changed to what a programmer really means: class/structure Name.
  • class Description with common rules for contact messages, order's comments, feedback messages, etc.
  • Measures: degrees, coordinates, weight, etc.
  • Date and time Integers up to 2147483648 (2^31) for a year, a month, a day, an hour and a minute look inconvenient for real use and most of the systems after all will throw an exception by taking large numbers for these types.
  • Money There is no a banknote with minus $100 value, but there can be a notion of 100$ debt.

With the help of Design by Contracts most of the checks can be done during compilation time.
For interoperability with other systems custom types should be built up from primitive and simple types, like integers and strings, and be convertible from these types.

Sunday, June 19, 2016

Power of the Market

At first sight this post seems to have nothing in common with IT. On the contrary, IT is a part of the following idea: the less people and enterprises are controlled by a bureau or a government, the more desirable or advantageous position in financial terms they have.

This concept was presented in 1980 by Doc. Milton Friedman in his TV series "Free to choose". He is an economist, winner of the Nobel Prize (so called the Nobel Prize for economic achievements). In his first episode Friedman talks about "The power of the market". Here is the short description of the episode:

Some may be appalled by his ideas, others can be enthusiastic about them. In the early years of the foundation of the USA settlers were free to pursue their own objectives. America was a land of opportunities. People came here from all over the world to settle down in a new place. There were no permits, no tariffs, no red tape to restrict them, and many people thrived on a new market.


To show modern example of a free market Doc. Friedman visits Hong Kong. There are many overcrowded, sticky, hot factories and shops. It might be seen as an appalled place to work, however, for the workers it is the best place they can find at their current position. If they do not agree they can always change their job, nobody forces them to work at these factories. They know that these conditions are not forever, they will find something better after learning new skills. Hong Kong is a special economic zone, there is no duties on imports or exports. The goods are coming to the port from all over the world. Thousands of people try to escape from Communist China, cross the border and come to Hong Kong for the real opportunities, better wages and freedom to speak, freedom to write, freedom to buy what they want. The number of permits to visit Hong Kong is restricted for the Chinese, and consequently many of them risk their lives and die in attempt to get a better life.

Milton states that from the historical point of view "The freer the system has been, the better off the ordinary people have been".

As an example of voluntary collaboration Friedman takes a lead pencil and states that there is not a single person in the world who can make the same pencil. Remarkable? Just watch how he proves this statement in the first episode.

In the second part of the video the leading businessmen (including the Motorola CEO) and the leading politicians (including a Congressman and a Governor of Delaware) discuss Friedman's ideas.

I genuinely recommend to watch this video. Enjoy it!



Saturday, May 28, 2016

Computers in USSR | Kazan

Computer science and development evolved in parallel in England, USA and USSR. There are several cities that took major role in the first Soviet computer era: Kiev and Kharkiv in Ukraine, Minsk in Belarus, Moscow, Penza and Kazan in Russia. Due the World War II all vital factories and universities were moved from the west (Kiev, Minsk, Saint-Petersburg, Moscow) to the east, including Kazan city. Therefore, Kazan became one of the major technical and scientific centre in the Soviet Union, and the city was chosen for building the first serial computers in USSR.

In 1953 the Communist Party approved a request to build a computer factory in Kazan to produce electronic devices for the military agency. The factory was ready for large manufacturing in 1959 and the government asked to build two M-20 computers.  The architect was S.A. Lebedev, who already had experience in designing and building computers in Kiev and Moscow, however, they were mere specimens and the newborn task aimed to build the series of computers.

M-20

M-20 is the first serial computer in USSR. It was built from vacuum tubes (valves) and the first two machines occupied the whole level of the factory. The vacuum tubes require colossal energy and emit a lot of heat. You can find the parts of this excellent machine only in the Kazan computer museum, which is based and supported by Margarita Badrutdinova.  She has been working with computers in the factory from its first days.

View of M-20 computer, 1962 

Parts of M-20 computer,
top - keyboard, bottom - 2 bit triggers from vacuum tubes

In the end of 1960 the computers were ready, successfully tested and moved to the customer, which was the military agency. The engineers did not know what kind of calculations and tests they were successfully performed. As history showed the second M-20 machine was used to calculate the path for the space rocket and this same computer was used to launch the first human space journey with Gagarin in the 12th of April, 1961!
M-20 is named after the 20 000 operations per second, during the five years there were built 63 sets of the machine.

Setun

The next machine "Setun" was developed in Moscow by Nikolay Brusentsov and build in Kazan in 1961. The machine got its name by the river "Setun" near Moscow State University. It had three-state logic, which was quite novel at that time and still is a unique serial implementation in the world. Instead of two-state logic "true-false" and bits "1 and 0" Setun had operations with trinary states "true-false-maybe" and stored trits "1 0 -1" in the memory. Some of the benefits of three-state logic are: the program size and data is 1.6 times smaller than two-bits representation, there is no need to take special bit for the number sign, additional branch for the if-else switch.
Setun computer

Parts of Setun computer,
at the bottom in the left side is a small core item - ferret-diode cell,
on the right side is a magnet drum for external memory. 

Almost every part of products was built by the manufacture and often required novelty and tackling difficult tasks. Overall there were produced 47 sets of these trinary machines during 1961-1965 in the Kazan computer factory.

Nairi

Another computer was designed in Yerevan by G. Ovsepyan in 1964. He had a big fight for this machine with the heads of Soviet departments and finally made excellent and robust computer. It was produced in the Kazan factory during 1965-1970.  Nairi was very successful product and very popular in the Soviet Union, the factory engineers made improvements and built overall 500 machines closely working with Ovsepyan's team. Ironically, many Yerevan scientists and the Comunnist party heads stole Ovsepyan's achievements and got awards. He had not been mentioned for decades and some of the cheaters still have political power and are afraid to mention his name.

Nairi computer

Parts of Nairi computer,
in the middle is permanent data storage, 
in the top-right corner is in-line storage

ES-10XX

In 1960s IBM made enormous improvement in computer design by spending 5 billion dollars for one project and created IBM 360. The project was twice as expensive as the first nuclear bomb project "Manhattan". The Soviet Union heads wanted to have a copy of this "toy". And, after the contract between USA and USSR, IBM 360 was licensed to the Soviet Union. The government obliged to create very similar machine, so across the country appeared the series of IBM clones ES-1010, ES-1020, ES-1030, ES-10XX computers.
While giving the lecture in museum Badrutdinova remembered Korolev's words, the father of Soviet rocket program, who liked to quote his tutor Bartini: "Can left behind system overtake advanced system? - No, if it tries to catch up moving behind, but what if it takes a short cut?".  The Soviet ministers did not want to see local and new computer versions, they just wanted to have american clones. This was the fatal error in the strategy and the death of true novelty! The engineers struggled and liked to build improved and new competitive versions, but their power was voiceless. The command to produce ES-1030 computers came to the Kazan computer factory. After some years the engineers with V.F. Gusev finally managed to create advanced and more robust version, model ES-1033. The leaders and consumers were impressed and this computer was successfully exported to other countries. In 1970s and 1980s the manufacture produced overall 2600 of ES-1033 machines.
ES-1033 computer

ES-1045.01 computer 
(input model of the improved version of ES-1045)

IBM-360

For the purity I do not cover all computers and electronic devices that were produced by the Kazan computer factory. It is clear that engineers did very good job and made very good and competitive computers, often patching and extending existed models. The factory holds lots of top Soviet awards for its production. It seems unbelievable, but the quality of computers was so good, that some of them still are in use in Russian military agency. The products was used in all Soviet space centres and exported to India, Check Republic, Poland, Bulgaria, Hungary, Mongolia. Thus, even now it is quite possible to meet one of these old workers in real life applications.

Later the factory was merged with the famous UK company ICL. Now it is part of Fujitsu companies.
Modern awards from Russian government.
On the left side the knight is the present from Kaspersky Antivirus for its partnership.


P.S. I am very thankful to Margarita Badrutdinova for the personal lecture and the book about Kazan computer history. You can reach this small but valuable museum at Sibirskiy trakt Street, 34, Kazan city, Russia.


Sources (in Russian and English):

M. Badrutdinova, The Kazan computer factory, 2004, ISBN5-9222-0091-7

Kazan computer museum http://kazan-computer-museum.blogspot.ru/

M. Badrutdinova and retrotexnika.ru, "Our answer to Steve Jobs and Bill Gates. The development of electronic engineering in USSR" https://www.youtube.com/watch?v=_9cr4dQPoa8

Setun emulator http://trinary.ru/projects/setunws/

Nairi: triumph and drama http://lebed.com/2003/art3598.htm

Universal systems ES-series https://www.youtube.com/watch?v=Yy2unObU8x8

Virtual Russian computer museum http://www.computer-museum.ru/

Virtual Ukrainian computer museum http://www.icfcst.kiev.ua/MUSEUM/museum-map_r.html

ICL http://www.icl.ru/

Friday, April 29, 2016

The lifespan of a career as a programmer

In an IT area I often meet a common belief that a programmer should after all become a manger or at least a leading consultant without touching code. This opinion does not give any chance to a hans-on old person and a 50 years old programmer can be regarded as a shame.

The good example against such received thoughts is Dave Cutler.